基本结构
<!DOCTYPE html><!-- 声明当前文档是html5文档 -->
<html><!-- html,根元素 ，围堵标签-->
<!-- head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题 2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>1111</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
<!--定义描述标签：用于图文混编 -->
<dl>
<dt><img src="img/9fb920d819f5ea428802d311de1f2d0.jpg" width="200px" height="300px" /></dt>
<dd>me</dd>
</dl>
<!-- 列表标签
ul-li:无序列表
ol-li:有序列表
-->
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
<!-- img:图片标签
src:指定图片的路径
相对路径：../上一级路径
title:鼠标在图片上时显示文字，在图片无法打开时显示title中的文字
alt与title作用相同，但有浏览器不支持，一般用title
width宽度
height高度
-->
<img src="img/0e04a46e108df9ba260bb0adf72686e.jpg " title="自信" width="200" height="251" />
<hr color="aqua" size="6"/>
<!--语文本相关的标签
1.标题标签六个
2.段落标签<p></p>
3.换行标签<br/>
4.水平线标签<hr/>
5.范围标签<span></span>
-->
<h2>摸鱼儿.雁丘词</h2>
<p>问世间情为何物，直教人生死相许</p>
<p>天南地北双飞客，老翅几回寒暑。</p>
<p>欢乐趣，<span style="color:red;">离别苦，</span>就中更有痴儿女。<br/>君应有语，渺万里层云，千山暮雪，只影向谁去？</p>
<hr color="aqua" size="6" />
<h1>123</h1>
<h2>456</h2>
<h3>123</h3>
<h4>456</h4>
<h5>123</h5>
<h6>456</h6>
</body>
</html>
热点区域
<!DOCTYPE html><!-- 声明当前文档是html5文档 -->
<html><!-- html,根元素 ，围堵标签-->
<!-- head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题 2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>1111</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
<!--定义描述标签：用于图文混编 -->
<dl>
<dt><img src="img/9fb920d819f5ea428802d311de1f2d0.jpg" width="200px" height="300px" /></dt>
<dd>me</dd>
</dl>
<!-- 列表标签
ul-li:无序列表
ol-li:有序列表
-->
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
<!-- img:图片标签
src:指定图片的路径
相对路径：../上一级路径
title:鼠标在图片上时显示文字，在图片无法打开时显示title中的文字
alt与title作用相同，但有浏览器不支持，一般用title
width宽度
height高度
-->
<img src="img/0e04a46e108df9ba260bb0adf72686e.jpg " title="自信" width="200" height="251" />
<hr color="aqua" size="6"/>
<!--语文本相关的标签
1.标题标签六个
2.段落标签<p></p>
3.换行标签<br/>
4.水平线标签<hr/>
5.范围标签<span></span>
-->
<h2>摸鱼儿.雁丘词</h2>
<p>问世间情为何物，直教人生死相许</p>
<p>天南地北双飞客，老翅几回寒暑。</p>
<p>欢乐趣，<span style="color:red;">离别苦，</span>就中更有痴儿女。<br/>君应有语，渺万里层云，千山暮雪，只影向谁去？</p>
<hr color="aqua" size="6" />
<h1>123</h1>
<h2>456</h2>
<h3>123</h3>
<h4>456</h4>
<h5>123</h5>
<h6>456</h6>
</body>
</html>
标题标签 h1-h6, 段落标签 p , 水平线标签 hr, 有序列表标签 ol--li， 无序列表标签 ul--li， 定义描述标签 dl-dt-dd， 容器标签 div：
不规则表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不规则表格</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="90%" height="500px">
<tr align="center">
<!-- colspan="3" 合并三行 -->
<th colspan="3">申请书</th><!-- <th></th><th></th> -->
</tr>
<tr align="center">
<td>姓名</td>
<td>佚名</td>
<!-- rowspan="2"合并两列 -->
<td rowspan="2">个人照片</td>
</tr>
<tr align="center">
<td>单位</td>
<td>天朝</td>
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
规则表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不规则表格</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="90%" height="500px">
<tr align="center">
<!-- colspan="3" 合并三行 -->
<th colspan="3">申请书</th><!-- <th></th><th></th> -->
</tr>
<tr align="center">
<td>姓名</td>
<td>佚名</td>
<!-- rowspan="2"合并两列 -->
<td rowspan="2">个人照片</td>
</tr>
<tr align="center">
<td>单位</td>
<td>天朝</td>
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
标题和逻辑分区
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题和逻辑分区标签</title>
</head>
<body>
<table border="" cellspacing="0" cellpadding="0" width="90%">
<!-- caption 标题标签 -->
<caption>学习计划表</caption>
<!-- thead，tbody，tfoot逻辑分区标签 -->
<thead style="background-color: aliceblue;">
<tr><th>时间</th><th>安排</th></tr>
</thead>
<tbody style="background-color: azure">
<tr><td>早上</td><td>图书馆</td></tr>
<tr><td>中午</td><td>图书馆</td></tr>
<tr><td>晚上</td><td>自由安排</td></tr>
</tbody>
<tfoot style="background-color: blueviolet;">
<tr><td colspan="2">总结</td></tr>
</tfoot>
</table>
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="hot.html" target="_search">点击跳转到其他页面</a>
<a href="#adress">点击跳转到本页的干得漂亮</a>
<a href="超2.html#2adress">点击跳转到其他页的干得漂亮</a>
<div style="height: 500px; background-color: lightgrey;">心情愉悦</div>
<div style="height: 500px; background-color: aqua;">呦呵</div>
<div style="height: 500px; background-color: aliceblue;">芜湖</div>
<div style="height: 500px; background-color: indigo;">妙哉</div>
<div style="height: 500px; background-color: blueviolet;">
<a name="adress"></a><!--定义锚点，name自定义的-->
干得漂亮
</div>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>表单</h1>
<!--
form:用于定义表单。可以定义一个范围
常用属性： action:指定提交的数据的地址（跳转的网页）
methood:指定提交的方式
get:请求参数会在地址栏中显示，会封装在请求中
请求参数大小有限制
不太安全
post：请求参数不会在地址栏中显示，会封装在请求中
请求参数没有有限制
比较安全
-->
<form action="dest.html" method="get" enctype="multipart/form-data">
<!-- 添加表单元素，必须指定name属性 -->
隐藏域：<input type="hidden" name="user" /><br />
<label for="userName">用户名：</label><input type="text" id="userName" name="username" /><br />
<!-- 密码框
type="password"
required:表示用户必须填写此内容，如果未填写，提交表单的时候失败并给出提示-->
<label for="passWord">密码：</label><input type="password" id="passWord" name="password" /><br />
<!-- input:表单元素，
文本框 type="text",默认
id：表示元素的唯一标识，最好不重复
name:表单名称，未来提交数据到服务器的时候，服务器端通过name获取value
placehoder:文本框中显示提示文字
-->
<!-- 单选按钮：type="radio"
name相同才表示同一组，且只能选择一个
value:服务器通过name获取到的值就是value
checked：表示默认选中，赋值可省略，也可写成checked="checked"
-->
性别：<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="泰国" checked="checked"/>特殊<br />
是否单身：<input type="radio" name="statu" value="0" checked="checked"/>是
<input type="radio" name="statu" value="1" />否<br />
<!-- 复选框 type="checkbox" -->
兴趣爱好：<input type="checkbox" name="hobby" value="read"/>阅读
<input type="checkbox" name="hobby" value="run"/>跑步
<input type="checkbox" name="hobby" value="play"/>玩
<input type="checkbox" name="hobby" value="music"/>听音乐<br />
头像：<input type="file" name="headimg" /><br />
生日：<input type="datetime-local" name="birthday" /><br />
<select name="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br />
协议：<textarea rows="10" cols="30" readonly="readonly">
1 1. ctrl+/ 注释代码
2 2. ctrl+y 恢复撤销
3 3. ctrl+x 剪切
4 4. ctrl+z 撤销
5 5. ctrl+c 复制
6 6. ctrl+p 在当前项目查找文件
7 7. ctrl+f 在当前文件查找字符串
8 8. ctrl+alt+f 在当前目录查找字符串
9 9. ctrl+k 格式化代码
10 10. ctrl+g 跳转到某行代码
11 11. ctrl+o 打开文件
12 12. ctrl+alt+s 保存所有文件
13 13. 鼠标左键+ctrl选中多行(可进行多行修改操作)
</textarea><br />
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<input type="image" src="img/cat.jpg" />
<button type="reset">重置</button>
</form>
</body>
</html>
iframe框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架--在浏览器上显示不止一个页面</title>
</head>
<body>
<p>
<a href="表单.html" target="content"> 表单</a>
<a href="http://www.baidu.com" target="content">查询</a>
<a href="hot.html" target="search">12</a>
</p>
<iframe name="content" src="usually.html" width="100%" height="300px" frameborder="0"></iframe>
<iframe name="search" src="http://www.baidu.com" width="100%" height="300px" frameborder="0" ></iframe>
</body>
</html>
转义字符
转义为空格
<转义为小于号<
≤转义为小于等于号≤
>转义为大于号>
≥转义为大于等于号≥
©转义为版权符号 ©
