简介
HTML全称HyperText Markup Language属于超文本标记语言。超文本指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
特点
HTML的特点有：
1.文件必须使用html或htm（不推荐）作为后缀
2.大小写不敏感
3.无需编译，浏览器可以直接运行
基本结构
HTML的基本结构包括：
<!DOCTYPE>声明：用来指定当前页面使用的HTML版本
根标签：html，声明当前文件是一个html文件
子标签：
head:设置当前王爷的信息，并不显示在页面上；
charset：制定当前页面使用的编码集。
description：一般写网页的关键字
title：网页的标题
body：设置页面的内容
注意：
所有内容尽量放在标签中间
标签需要按照顺序进行正确的嵌套
标签可以有属性，属性格式为：属性名=“属性值”，属性值使用引号引起来；如果有多个属性使用空格进行分割
标签
h标签
h标签属于标题标签, 用于定义标题。取值为1-6。特点：特点：字体加粗，上下留白，换行，h1最大，h6最小。常用属性：align（设置对齐方式），默认值是left（左对齐），其他可选值right/center。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
标题标签
</title>
</head>
<body>
<h1 align="right">1号标题</h1>
<h2 align="center">2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
普通文本
</body>
</html>
字体标签
字体标签用于定义文本字体、大小和颜色。有三个常用属性，分别是color：设置字体颜色；size：设置字体大小（1-7，1最小，7最大）；face：设置字体。颜色值的写法分为三种，分别是：十六进制颜色, 例如#ffffff；使用英文单词, 例如red；RGB 颜色, 例如rgb(255,0,0)。一般开发用十六进制来定义颜色。而且，我们也可以在head中定义一个style来存储一个颜色并命名，方便调用。
其他常用标签
其他常用标签包括：b:粗体；strong：粗体（strong一般是给开发者看的）；i：斜体；u：下划线；br：换行；p：段落；hr：分割线（align：设置对齐方式；width：设置宽度，可以使用百分比或像素值）
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
#f1 {
color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<font color="ff0000">所有</font>
<font size="7">主流</font>
<font face="楷体">浏览器</font>
<font color="00ff00" size="1" face="黑体">都支持</font>
</body>
</html>
img标签
img标签就是图片标签，用来定义图片。标签常用属性包括：src：图片路径；alt：代替文字，是图片加载失败的时候显示的提示文本；width：宽度；height：高度。图片的路径分为相对路径和绝对路径。相对路径参考的是本文件，./代表当前目录，可以省略。../代表上级目录。绝对路径就是带有协议和主机名的路径。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<img src="img/滑稽.png" width="400" height="400" alt="这是一个滑稽" />
</body>
</html>
列表标签
列表常用标签分为三类，分别是ol标签，ul标签，li标签。ol标签用于定义有序列表，type属性，取值1（默认值），其他还有a，A，i，I。ul标签用于定义无序列表，type属性，取值disc（默认值，实心圆），circle（空心圆），square（方块）。li标签为列表项。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ol start="2" type="a">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ol>
<ul type="disc">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>
a标签
a标签用于定义超链接。常用属性分为两种，一种是href：指定链接地址，第二种是target：指定如何打开页面。取值blank（在新窗口中打开），parent（在父框架集中打开 ），self（默认。在相同的框架中打开 ），top（在整个窗口中打开 ），framename（在指定的框架中打开 ）。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a标签</title>
</head>
<body>
<a href="http://www.baidu.com" target="_self">度娘</a>
</body>
</html>
表格标签
常规设置
表格标签用于定义一个表格, 或用于页面布局。
table标签
table标签代表标签中的内容是表格。常用属性包括：border：边框宽度；width：宽度；height：高度；align：对齐方式；cellspacing：内边距,内容和边框之间的距离；cellspacing : 格子和格子之间的距离；frame : 显示外边框；rules : 显示内边框；cols :指 column，列；row : 行
caption标签
caption标签，指定表格的标题,必须写在table标签之后。
tr标签
tr标签代表一行。包含align属性, 用于定义对齐方式。
th标签
th标签代表表头, 文本会加粗并居中显示。
td标签
td标签代表数据格。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1px" cellspacing="0" width="50%" align="center">
<tr>
<th>ID</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>01</td>
<td>tom</td>
<td>12</td>
</tr>
<tr>
<td>02</td>
<td>jerry</td>
<td>11</td>
</tr>
</table>
</body>
</html>
表格结构标签
浏览器在解析表格标签的时候，会把它当做一个整体进行解析。如果表格中数据比较多的时候，要使用表格的结构标签，提高表格的加载速度。caption 标签一定要写在table标签之后。结构标签的书写顺序不会影响到页面的显示效果，即thead的内容始终在最前，tfoot的内容始终在最后。thead : 表格的头；tbody : 表格的主体；tfoot : 表格的脚。
单元格的合并
当我们需要对单元格进行合并时，可以在td标签中增加以下属性：
rowspan ：合并行
colspan ：合并列
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单元格合并</title>
</head>
<body>
<table border="1" cellspacing="0" width="50%" align="center">
<tr>
<td rowspan="2">指标</td>
<td colspan="2">招生数</td>
<td colspan="2">在校生数</td>
<td colspan="2">毕业生数</td>
</tr>
<tr>
<td>万人</td>
<td>比上年增长(%)</td>
<td>万人</td>
<td>比上年增长(%)</td>
<td>万人</td>
<td>比上年增长(%)</td>
</tr>
<tr>
<td>普通高等学校</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>中等职业学校</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
表格的嵌套
嵌入的表格必须是完整的结构, 即必须是table>tr>td结构。嵌入的表格要放在td标签。
框架标签
框架标签分为frameset标签和frame标签两类。
frameset标签
frameset标签用于定义框架集。属性包括：cols：垂直切割。rows：水平切割。
注意：frameset不能和body同时使用
frame标签
frame标签用于具体展示页面。常用属性包括：src：页面的路径。name：框架的名称。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<frameset rows="20%,*,15%">
<frame src="08_单元格合并.html" />
<frameset cols="30%,*">
<frame src="04_图片标签.html" />
<frame src="05_列表标签.html" />
</frameset>
<frame src="02_字体.html#f1" />
</frameset>
</html>
form标签
form标签用于为用户输入创建 HTML 表单, 收集用户填写的数据, 传递给后台服务器处理。
form的常用子标签有三个，分别是input标签；select标签和textarea标签。
input标签
input标签定义表单输入项, 收集信息。常用属性包括type（用于定义类型）；name（定义 input 元素的名称）；value（定义 input 元素的值）。注意：如果没有声明name属性, 数据是不会提交给后台的。
select标签
select标签用于定义下拉框。常用属性包括multiple：设置多选。默认情况下下拉框只能选择一个数据。size：设置下拉框中可见选项的数目。默认情况下只有一个可见。name：作用同input。
其中，select标签中还有两个子标签，分别是：optgroup：对下拉框中的选项进行分组。option：定义下拉框中的选项。
textarea标签
textarea标签用于定义一个多行多列的输入框。常用属性包括，cols：指定文本框中可见的列数。name：作用同input。
form的常用属性分为两种。action：规定当提交表单时向何处发送表单数据。
method, 指定请求方式。常用请求方式有两种：
get：传递数据的时候,以?name=value&name=value的形式拼接在URL地址后面, 传递给后台服务器。数据传输的大小受到限制，安全性相对post较低。
post：传递数据的时候, 没有拼接在URL地址后面。数据传输大小比get大，安全性相对get较高。
举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form method="post">
用户名:<input name="user" type="text" placeholder="请输入用户名" /><br />
密码:<input name="psw" type="password" placeholder="请输入密码" /><br />
性别<input name="gender" type="radio" checked="checked" value="male" />男
<input name="gender" type="radio" checked="checked" value="female" />女<br />
爱好:<br /><input name="hobby" type="checkbox" value="basketball" />篮球<br />
<input name="hobby" type="checkbox" value="football" />足球<br />
<input name="hobby" type="checkbox" value="pingpang" />乒乓球<br />
<input name="hobby" type="checkbox" value="button" />羽毛球<br />
头像:<input name="picture" type="file" /><br />
城市:<select name="city">
<optgroup label="北方城市">
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
</optgroup>
<optgroup label="南方城市">
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</optgroup>
</select>
<br />
自我介绍:<textarea name="self" cols="20" rows="5" placeholder="请输入自我介绍"></textarea><br />
<input type="submit" value="注册" />
<input type="reset" value="清空" />
<input type="button" value="登录" />
<input type="image" src="img/滑稽.png" />
</form>
</body>
</html>
网友评论