HTML基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/DallinC/article/details/85410799

html简介

html

HyperText Markup Language：超文本标记语言，网页语言
超文本：超出文本范围，通过html可以轻松实现这样的操作
标记:html所有操作都是通过标记实现的，标记就是标签 <标签名称>

html规范

1.一个html文件得有开始标签和结束标签 <html> </html>

2.html包含两部分

(1)<head>设置相关信息</head>
-比如设置网页标题 <head>这是一个标题</head>

(2)<body>页面上要显示的内容</body>

(3)html的标签有开始标签，就要有结束标签

(4)html的代码是不区分大小写的

(5)有些标签没有结束标签,在标签内结束
-比如换行标签 <br/> 水平分割线 <hr/>

html的操作思想
网络中有许多不同的数据，不同的数据可能需要不同的显示效果，这就需要我们用标签将要操作的数据封装起来，通过修改标签的属性值来实现标签内数据样式的变化。

html中常见的标签

文字标签（文字显示样式）<font></font>
属性：
size:文字大小，取值范围为0-7，超出7还是默认7
color:文字颜色,方式有一下几种
（1）英文单词：red green blue black yellow…
（2）rgb(红色, 绿色, 蓝色) 范围从 0~255
（3）16进制值格式 #红绿蓝 范围从 0~FF
（4）rgba(红色, 绿色, 蓝色, 0.0~1.0)
（5）特殊取值
白色 rgb(255,255,255)
黑色 rgb(0,0,0)
注释标签（源文件中有注释，但是网页中不会显示出来）

<!--这是html的注释 -->

标题标签，水平线标签，特殊字符标签

<body>
	<!--这是标题标签-->
	<h1>标题一</h1
	<h2>标题二</h2>
	<h3>标题三</h3>
	<h6>标题六</h6>
</body>

从h1到h6，字体大小会依次变小，同时自动换行

<hr size="5" color="blue"/>

size与color表示水平分割线的大小和颜色

常见的特殊字符的转移

&lt;       <
&gt;      >
&nbsp;  空格
&amp;   &

列表标签
（1）显示效果
学校部门
        学工部
        教务处
        教研组

<dl>
	<dt>学校部门</dt>
	<dd>学工部</dd>
	<dd>教务处</dd>
	<dd>教研组</dd>
</dl>

<dl></dl>表示列表的范围
<dt></dt>上层内容
<dd></dd>下层内容

（2）有序列表

<ol>
	<li>学工部</li>
	<li>教务处</li>
	<li>教研组</li>
</ol>
<hr/>
 <ol type="a">
	<li>学工部</li>
	<li>教务处</li>
	<li>教研组</li>
</ol>
<hr/>
 <ol type="i">
	<li>学工部</li>
	<li>教务处</li>
	<li>教研组</li>
</ol>
<hr/>

<ol></ol>有序列表的范围
在ol标签内部<li>具体内容<li>
属性：
type:设置排序方式 默认为1.2.3，还可以设置为a.b.c,或者i.ii.iii

（3）无序列表

<ul>
	<li>学工部</li>
	<li>教务处</li>
	<li>教研组</li>
</ul>
<hr/>
 <ul type="square">
	<li>学工部</li>
	<li>教务处</li>
	<li>教研组</li>
</ul>

<ul></ul>无序列表的范围
ul标签中内部<li>具体内容</li>
属性：
type:设置排序方式 默认为实心圆disc，还可以设置为空心圆circle，实心方块square

图像标签

<img src="1.gif" width="300" height="400"/>

 <img src=图片的地址> width=图片的宽度 height=图片的高度
 alt可以在图片上添加文字，鼠标在图片上停留片刻会显示文字，对浏览器兼容性很差

注意：
*html文件和图片在同意路径下，可以直接写图片的相对路径
<img src="1.png"/>
*图片在html文件的下层目录，比如图片位置在与html文件同级的img文件夹下
<img src="img\1.png"/>
*图片在html文件的上层目录
<img src=../1.png/>

超链接标签
(1)链解资源
<a herf ="链解到资源的地址">`显示在页面上的内容</a>

<a href="http://www.baidu.com" target="_blank">百度一下</a>

 href:链接的资源的地址
 target:设置打开方式
 	_blank:在新窗口打开
	_self:在当前页面打开（默认）

注意：
href=""默认会访问到html文件所在的路径，如果要想超链接不需要任何地址时，需要添加一个占位符，即href="#"
(2)定位资源
*如果想要定位一个资源，先需要定位一个位置
<a name="top">顶部</a>
*接着回到这个位置
<a href="#top">回到顶部</a>

表格标签（可以对数据进行格式化，使数据显示更加清晰）

<table border="1" bordercolor="blue" cellspacing="0" wtdth="400" height="200">
	<caption>学生名单</caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>12</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>女</td>
		<td>11</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>男</td>
		<td>13</td>
	</tr>
</table>

<table></table>表示表格的范围
	border 表格线
	bordercolor表格线的颜色
	cellspacing单元格之间的距离
	width表格的宽度
	height表格的高度
<table></table>里面<tr></tr>
	设置对齐方式 align:left  center  right
在<tr></tr>里面<td></td>
	设置显示方式align:left  center  right
使用<th></th>也可以表示单元格：表示居中和加粗
设置表格的标题<caption></caption><br/>

操作技巧：首先确定有多少行，然后再确定每一行有多少个单元格

合并单元格
rowspan:跨行
<td rowspan="3">人员信息</td>
colspan:跨列
<td colspan="3">人员信息</td>
其中3代表合并的单元格数

表单标签
提交数据到服务器，这个过程可以通过表单标签来使用
<form><form>定义一个表单的内容
属性：action提交表单的地址，默认提交到当前的页面
method表单的提交方式，常用的有get和post,默认为get请求
get和post的区别：
get请求地址栏会携带提交的数据，post请求不会
get请求有数据大小的限制，post没有
enctype文件上传时要用到

输入项：可以输入内容或者可以选择内容的部分
在输入项中需要一个name属性，否则无法上传到服务器
   大部分的输入项使用<input type="输入项的类型"/>
       文本输入项<input type="text"/>
       密码输入项<input type="password"/>
       单选输入项<input type="radio" name="属性值" value="input元素设定值"/>
               在里面需要属性 name
               name的属性值必须要相同
               必须有一个value值
       多选输入项<input type="checkbox" name="属性值" value="input元素设定值"/>
               在里面需要属性 name
               name的属性值必须要相同
               必须有一个value值
        - 单选框和多选框实现默认选中的属性： checked="checked"
        文件输入项<input type="file">
        隐藏项<input type="hidden"/>
        按钮<input type="button" value="点击"/>
        提交按钮<input type="submit" value="注册"/>
        使用图片提交<input type="image" src="图片的路径"/>
        使用重置按钮<input type="reset" value="重置按钮"/>，表示输入项的初始状态
   下拉输入项(不用input)，比如选择生日

<select name="birth">
	<option value="1997">1997</option>
	<option value="1997">1998</option>
	<option value="1997">1999</option>
</select>

-默认选项selected=“selected”
文本域<textarea cols="50" rows="25">自我介绍</textarea>

html中其他常用的标签
<b></b>加粗
<s></s>删除线
<u></u>下划线
<i></i>斜体
<p></p>段落标签，比<br/>多一行
<pre></pre>原样输出
<sub></sub>下标
<sup></sup>上标
html的头标签
<title>网页标题</title>表示网页的标题
<meta>标签：设置页面的一些相关内容
例如： <meta charset="字符编码">告诉浏览器网页内容的编码格式
<base>标签：设置超链接的基本设置
可以统一设置超链接的打开方式 <base target="_blank"/>
<link>标签：引入外部文件
框架标签的使用
<frameset>
rows:按照行进行划分<frameset rows="80,*">
cols:按照列进行划分<frameset cols="80,*">
<frame>具体显示的页面，例如frame name="lower_left" src="b.html">
注意：
使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉

 <frameset rows="80,*">                     <!--把页面划分成上下两部分-->
	<frame name="top" src="a.html">             <!--上面页面-->
	<frameset cols="150,*">             <!--把下面部分划分成左右两部分-->
		<frame name="lower_left" src="b.html">  <!--左边的页面-->
		<frame name="lower_right" src="c.html"> <!--右边的页面-->
	</frameset> 
</frameset>

如果在左边的页面超链接，想让内容显示在右边的页面中
	- 设置超链接里面属性 target值设置成名称
	- <a href="1.html" target="right">超链接1</a>