一.HTML的结构
1.1 html文档主要包含两个部分：头区域和实体区域。
1.2 html的三个主要标签：<html>、<head>、<body>。<html>标签是用来标记html文档，<head>是标签标记头部区域，<body>是标签标记主体区域。
最基本的html代码如下:
<html>
<head> </head>
<body> </body>
</html>
二.HTML的语法
2.1 元素的属性包含属性名称和属性值，两个部分，属性与属性值之间使用“=”链接，属性与属性之间使用空格链接。
例子：
<tag a1="v1" a2="v2"> 元素主体 </tag>
属性值必须加上引号
属性也可以没有属性值
2.2标签可以嵌套但是不能交叉
2.3注释文本的格式：<!--单行注释-->
<!--
多行注释-->
三.HTML标签
3.1文本格式标签
<title>...</title> 标识网页标题
<hi>...</hi> 标识标题文本，i表示级数
<p>...</p>标识段落语言
<pre>...</pre>标识预定义文本
<blockquote>...</blockquote>标识引用文本
例子：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>大标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>在这里我真的想说很多，但是我省略一万字</p>
<h1>第二个一级标签标签</h1>
<p>同样的</p>
<h2>二级标签</h2>
<p>一万字</p>
</body>
</html>
效果：
3.2字符格式标签
<b>...</b>字体加粗
<i>...</i>斜体
<big>...</big>放大字体
<small>...</small>缩小字体
<sup>...</sup>上标文本
<sub>...</sub>下标语言
<cite>...</cite>显示引用文本
例子：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>标题</title>
</head>
<body>
<h1>大标题</h1>
<p>下面来看一下特效:</p>
<p>斜体:<i>斜体</i></p>
<p>加粗:<b>加粗</b></p>
<p>放大:<big>放大</big></p>
<p>缩小:<small>缩小</small></p>
<p>上标:<sup>上标</sup></p>
<p>下标:<sub>下标</sub></p>
<p>引用文本:<cite>PHP是世界上最好的语言 ——无知者</cite></p>
<p>我来嵌套一个斜体和加粗以及<i><b>斜体加粗</b></b></i></p>
</body>
</html>
效果：
3.3列表标签
HTML中的列表结构有两种：有序，无序。无序列表使用项目符号来标记项目顺序，有序列表用编号来标记项目顺序。
<ul>...</ul>标识无序列表
<ol>...</ol>标识有序列表
<li>...</li>标识列表项目
例子：
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<title>标题</title>
</head>
<body>
<h1>我们的商品有:</h1>
<ul>
<li>快乐水</li>
<li>东北大辣皮</li>
<li>emmm没想好</li>
</ul>
</body> </html>
效果：
设计一个含有解释的词条：
<dl>...</dl>定义一个解释的列表
<dt>...</dt>标识词条
<dd>...</dd>解释词条
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<title>标题</title>
</head>
<body>
<h1>我们的商品有:</h1>
<ul>
<li>快乐水</li>
<li>东北大辣皮</li>
<li>emmm没想好</li>
</ul>
<h1>其实我还想解释一下我们的商品</h1>
<dl>
<dt>快乐水</dt>
<dd>可口可乐</dd>
<dt>东北大辣皮</dt>
<dd>垃圾食品</dd>
</dl>
</body> </html>
效果：
3.4超链接
<a href=url>...</a>
例子：
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<body>
<a href="https://www.baidu.com/">百度直通车</a>
</body>
</head> </html>
3.5多媒体标签
<img/>嵌入图像
<embed>...</embed>嵌入多媒体
<object>...</object>嵌入多媒体
3.6表格标签
<table>...</table>定义表格结构域
<caption>...</caption>表格标题
<th>...</th>定义表头
<tr>...</tr>定义行
<td>...</td>定义表格单元格
例子：
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
<title>标题</title>
</head>
<body>
<table summary="我就是想要一个表格">
<caption>表格的标题</caption>
<tr>
<td>中国</td>
<td>美国</td>
<td>英国</td>
</tr>
<tr>
<td>韩国</td>
<td>日本</td>
<td>德国</td>
</tr>
</table>
</body>
</html>
结果
3.7单表标签
<form>...</form>定义单表结构
<input/>:定义文本域，按钮和复选框
<textarea>...</textare>定义多行文本框
<select>...</select>定义下拉列表
<option>...</option>定义下拉列表中的选择项目
列子：
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
</head>
<body>
<form id="from1" name="form1" method="post" action="">
<p>单行文本域<input type="text" name="textfield" id="textfield"/></p>
<p>密码域<input type="password" name="passwordfield" id="passwordfield"></p>
<p>多行文本域<textarea name="textarefield" id="textarefield"></textarea></p>
<p>复选框 复选框1<input name="checkbox1" type="checkbox" value="">
复选框2<input name="checkbox2" type="checkbox" value="">
</p>
<p>单选按钮
<input name="radio1" type="radio" value=""/>按钮1
<input name="radio2" type="radio" value=""/>按钮2
</p>
<p>下拉菜单
<select name="selectlist">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</p>
</form>
</body>
</html>
结果：