段落标签
<p>这是一个段落，因为他比较长，<br>我们不希望它自动换行，所以我们在合适的地方让它换行</p>
效果：
有序列表
<h2>有序列表</h2>
<ol start="5" reversed type="I">
<li value="4">列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
效果：
无序列表
<h3>无序列表</h3>
<ul>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ul>
效果：
用户自定义列表
<h4>用户自定义列表</h4>
<dl>
<dt>列表标题1</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dt>列表标题2</dt>
<dd>列表内容2</dd>
</dl>
效果：
列表允许嵌套
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>咖啡</li>
</ol>
效果：
实体字符
在页面源代码中的换行和空格，浏览器显示时只显示一个空格
abc
dde 123
abc<br/>
dde 123
<hr/>
效果：
<!--
空格<< < 小于号>> > 大于号- & & & 和号
- " " " 引号
- ’ ’ ’ 撇号
- ￠ ¢ ¢ 分
- £ £ £ 镑
- ¥ ¥ ¥ 日圆
- € € € 欧元
- § § § 小节
- © © © 版权
- ® ® ® 注册商标
- ™ ™ ™ 商标
- × × × 乘号
- ÷ ÷ ÷ 除号
源数据
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面元数据</title>
<meta http-equiv="refresh" content="5;https://www.baidu.com">
效果：
全局属性
<p>
id 属性给元素分配一个唯一标识符,一般用于js编程中<br/>
document.getElementById("div1")表示按照id查找指定的元素
</p>
<p>
class 属性用来给元素归类。一般是文档中某一个或多个元素同时设置 CSS 样式
</p>
<p hidden>
hidden隐藏元素，后续标签会占用这个p的位置
</p>
<p title="提示信息">
title属性用于对元素的内容进行额外的提示
</p>
<p>
tabindex表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。
一般用于编写管理软件的输入页面时，避免客户的鼠标操作
</p>
链接和地址
<h1>超链接</h1>
<p>
<a name="1"></a>通过使用a标签的href属性可以定义点击一个热点文字实现页面的跳转<br/>
<a href="跳转的地址">热点文字<a><br/>
<ol>
<li>href指定元素所指资源的URL</li>
<li>hreflang指向的链接资源所使用的语言</li>
<li>media说明所链接资源用于哪种设备</li>
<li>rel说明文档与所链接资源的关系类型</li>
<li>target指定用以打开所链接资源的浏览环境</li>
<li>type说明所链接资源的 MIME 类型（比如 text/html）</li>
</ol>
<strong>只有href和target一般比较常用，而href是必须要用的。其他几个属性在元素使用较少 </strong>
</p>
<p>
href是必须属性，否则元素就变成空元素了。如果属性值是https://开头的URL，意味着点击跳
转到指定的外部网站。例如<a href="https://www.4399.com">百度</a>
</p>
<p>
target属性告诉浏览器希望将所链接的资源显示在哪里
<a href="https://www.4399.com" target="_blank" style="color: red;">一个人寂寞了请点击这里</a>
<ul>
<li>_blank在新窗口或标签页中打开文档</li>
<li>_parent在父窗框组（frameset）中打开文档</li>
<li>_self在当前窗口打开文档（默认）</li>
<li>_top在顶层窗口打开文档</li>
</ul>
<strong>frameset已经在html5中不建议使用,在具体的开发中只有_blank常用</strong>
</p>
<h2>相对与绝对路径</h2>
<p>
所谓相对路径就是相对于链接页面而言的另一个页面的路径。
而绝对路径，就是直接从file:///磁盘符开始的完整路径。
在同一个目录下做上两个页面，其中一个页面链接到另一个页面
<a href="file:///C:/workspace/html5/meta.html"><b>注意</b>点击</a>
首先是 file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文件。
<font color=red>
这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构
一旦出现任何变化，链接当即失效。事实上服务器管理员特别厌恶获取服务器相关信息的操作
</font>
<hr/>
相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是
被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法
<br/>
<a href="zi01/abc.html">相对路径</a>
<span class="red">一般相关路径不会使用/开头</span>
<hr/>
<ol>目录语法
<li>同一个目录：index2.html 或./index2.html</li>
<li>在子目录：xxx/index2.html</li>
<li>在孙子目录：xxx/xxx/index2.html</li>
<li>在父目录：../index2.html</li>
<li>在爷爷目录：../../index2.html</li>
</ol>
</p>
<h2>锚点设置</h2>
<p>
锚点设置一般用于超过一页显示的帮助文档中。锚点设置超链接可用来将同一
个文档中的另一个元素移入视野，即在当前页中进行跳转定位。通过属性id或name实现锚点定位。
<a href="#对应的名称">链接跳转的写法</a><br/>
具体的目标位置写法
<a name="具体的名称"></a><br/>
<a href="#1">Top</a><br/>
可以直接打开某个页面中的具体位置
<a href="zi01/abc.html#1">页面跳转，同时打开对应的位置</a>
</p>
</body>
<style>
.red{
color:red;
}
分组元素
<h1>分组元素</h1>
<p>所谓分组，就是用来组织相关内容的 HTML5 元素，清晰有效的进行归类。</p>
<!--
p表示段落
div一个没有任何语义的通用元素，和 span 是对应元素
blockquote表示引自他出的大段内容
pre表示其格式应被保留的内容
hr表示段落级别的主题转换，即水平线
ul,ol表示无序列表，有序列表
li用于 ul,ol 元素中的列表项
dl,dt,dd表示包含一系列术语和定义说明的列表。
dt在dl内部表示术语，一般充当标题；
dd在dl内部表示定义，一般是内容
figure表示图片
figcaption表示 figure 元素的标题
-->
<p>
<p>元素实际作用就是将内部包含的文本形成一个段落；
<br/>而段落和段落之间保持一定量的空隙
</p>
<p>
第三段落
</p>
<h2><div>通用分组</h2>
<div><div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进行布局。
而在 HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和<p>段落的区别就是，
两段文本的上下空隙是没有的，空隙间隔和<br>换行一样。
</div>
<div>第二部分</div>
<h2><blockquote>引用大段他出内容</h2>
<blockquote>这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,</blockquote>
<blockquote>默认显示效果为：左右两端会有收缩回退，而且居中显示</blockquote>
<h2><pre>展现格式化内容</h2>
<p><pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。</p>
<pre>
<h3>静夜思</h3>如果pre标签中包含html标签，html标签正常解析，不会转换为实体字符以进行显示
窗前明月光，
地上鞋两双。
</pre>
<pre>
#####
#####
#####
#####
#####
</pre>
<h2><hr>添加分隔</h2>
<p>hr元素实际作用就是添加一条分割线，意图呈现上下文主题的分割</p>
<hr>
<hr width="80%"><!--设置水平分割线的宽度-->
<hr width="60%" color="red"><!--设置水平分割线的默认颜色-->
<h2><figure><figcaption>使用插图</h2>
<figure>
<!--图片的标题说明-->
<figcaption>这是一张图</figcaption>
<!--定义说明所使用的具体图片路径，这里使用的是相对路径-->
<img src="image/001.jpg" width="30%">
</figure>
表格元素
<h1>表格元素</h1>
<p>
表格的主要用途是以网格的形式显示二维数据----数据表
</p>
<!--
table表示表格
thead表示标题行
tbody表示表格主体
tfoot表示表脚
tr表示一行单元格
th表示标题行单元格
td表示单元格
col表示一列
colgroup表示一组列
caption表示表格标题
-->
<table width="80%" border="1" align="left">
<!--width用于设置table的宽度，可以使用80px定义表格为80像素，也可以使用80%表示表格占总宽度的80%-->
<!--align用于设置当前table对应父标签的对齐方式center表示居中,right表示居右对齐,left表示居左对齐，默认值-->
<tr>
<td>11</td>
<td>猴子</td>
<td>123.45</td>
</tr>
</table>
<br/>
<h3><table><tr><td>构建基础表格</h3>
<!--表格默认不显示边框，如果需要显示边框，则需要使用css或者html属性border定义，border的值为边框的宽度-->
<!--
<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。
默认情况下表格是没有边框的，所以，在<table>元素增加一个border属性，设置为 1 即可显示边框。
-->
<table border="1">
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<h3>th为表格添加标题单元格</h3>
<!--th也是用于定义标题栏中的列，不同于td的是：th会居中显示，并且自动加粗-->
<table border="1">
<tr>
<th>用户名称</th>
<th>性别</th>
<th>婚否</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>尼古拉斯-赵四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>
<p>
th元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使
用了一个通用属性style，主要用于CSS样式设置，以后会涉及到。
th和td均属于单元格，包含两个合并属性：colspan、rowspan等。
</p>
<table border="1">
<tr>
<th colspan="2"><!--colspan表示将这里的2列合并为1列-->
用户标识
</th>
</tr>
<tr>
<td>用户名称</td>
<td>用户口令</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
<th rowspan="2"><!--rowspan表示将2行合并-->
用户标识
</th>
<th>ddddd</th>
<th>eeeee</th>
</tr>
<tr>
<td>用户名称</td>
<td>用户口令</td>
</tr>
<tr>
<td>1111</td>
<td>zhangsan</td>
<td>333333</td>
</tr>
</table>
<h3>thead添加表头</h3>
<p>
thead元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头位置
</p>
<table border="1">
<header>
<tr>
<th>学生编号</th>
<th>学生姓名</th>
</tr>
</header>
<tr>
<td>1111</td>
<td>尼古拉斯-赵四</td>
</tr>
</table>
<h3>tfoot添加表脚</h3>
<p>
tfoot元素为表格生成表脚，限制在表格的底部。
</p>
<table border="1">
<tfoot>
<tr>
<td colspan="2">总学生人数为：3</td>
</tr>
</tfoot>
<tr>
<td>1111</td>
<td>尼古拉斯-赵四</td>
</tr>
</table>
<h3>tbody添加表主体</h3>
<p>
tbody元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续CSS和JavaScript的控制
</p>
<table border="1">
<thead>
<tr>
<th>学生编号</th>
<th>学生姓名</th>
<th>登录口令</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总学生人数：</td>
<td colspan="2">3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>尼古拉斯-猴子</td>
<td>123456</td>
</tr>
<tr>
<td>2</td>
<td>爱新觉罗-能能</td>
<td>666666</td>
</tr>
</tbody>
</table>
<h3>caption添加表格标题</h3>
<p>
caption元素给表格添加一个标题
</p>
<table border="1">
<tr>
<th>编号</th>
<th>名称</th>
</tr>
<tr>
<td>11</td>
<td>Java从入门到放弃</td>
</tr>
<caption>书籍列表</caption>
</table>
<h3>colgroup设置列</h3>
<p>
colgroup元素是为了处理某个列，span属性定义处理哪些列。
1表示第一列，2表示前两列。如果要单独设置第二列，那么需要声明两个，
先处理第一个，将列点移入第二位，再处理第二个即可
</p>
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
table的样例
<body style="background-color: cornflowerblue;">
<!-- table除了可以定义一个二维表格之外，早期还经常用于格式控制，现在已经被div+css所替代-->
<!--实现一个门字型结构网站布局-->
<table width="80%" align="center">
<tr>
<td>
<table>
<tr>
<td><h1>猴子之家</h1></td>
<td><img src="image/001.jpg" width="8%"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="image/001.jpg" width="100%" height="60px"/>
</td>
</tr>
<tr>
<td>
<table width=100% style="background-color: cornflowerblue;">
<tr align="center">
<td>首页</td>
<td>行业新闻</td>
<td>产品展示</td>
<td>给我留言</td>
</tr>
</table>
</td>
</tr>
</table>
文档元素
<head>
<title>文档元素</title>
<!--
文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。
让整个布局元素具有语义，进一步替代div
h1~h6表示标题
header表示首部
footer表示尾部
nav表示有意集中在一起的导航元素
section表示重要概念或主题
article表示一段独立的内容
address表示文档或 article 的联系信息
aside表示与周边内容少有牵涉的内容
hgroup将一组标题组织在一起
details生成一个区域，用户将其展开可以获得更多细节
summary用在 details 元素中，表示该元素内容的标题或说明
-->
</head>
<body>
<strong>文档元素基本没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念</strong>
<p>
文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。
只有在后面的章节学习CSS，配合使用才能起到布局和样式的效果。
</p>
<h3>header表示首部</h3>
<header>
这里部分一般是页面头部，包括：LOGO、标题、导航等内容
</header>
<h3>footer表示尾部</h3>
<footer>
这里是页面的尾部，一般包括：版权声明、友情链接等内容
</footer>
<h3>h1到h6添加标题</h3>
<p>实际作用就是加粗并改变字体大小。用于各种标题文档</p>
<h1>标题部分</h1>
<h4>小标题部分</h4>
<h3>hgroup组合标题</h3>
<p>hgroup元素的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题，这是使用此元素包含群组</p>
<hgroup>
<h1>标题部分</h1>
不是标题就没有任何显示效果，不要理解hgroup给文档上自动添加hx效果
<h4>小标题部分</h4>
</hgroup>
<h3>section文档主题</h3>
<p>
section元素的作用是定义一个文档的主题内容
</p>
<section>
这里一般是存放文档主题内容。
</section>
<h3>nav添加导航组</h3>
<p>
nav元素给文档页面添加一个导航区域
</p>
<nav>
<h5>这里存放文档的导航</h5>
<a href="#1">第一章 Java概论</a>
<a href="first.html">第二章 Java语法基础</a>
</nav>
<h3>article添加一个独立成篇的文档</h3>
<p>
article元素表示独立成篇的文档，里面可以包含头、尾、主题等一系列内容。
在比较大的页面中会使用到，比如一片博文的列表，每篇博文，都有自己的头、
尾、主题等内容。和此相似的还有论坛的帖子、用户的评论、新闻等
</p>
<!--
一般结构为：
<article>
<header>
<nav></nav>
</header>
<section></section>
<footer></footer>
</article>
-->
<h3>aside生成注释栏</h3>
<p>
aside元素专门为某一段内容进行注释使用
</p>
<aside>这是是一个注释</aside>
<h3>address表示文档或article元素的联系信息</h3>
<p>
如果是在body元素下时，表示整个文档的联系信息。
如果是在article元素下时，表示当前这个article的联系信息
</p>
<address>联系信息</address>
</body>
<style>
nav{
border: 1px solid red;
}
</style>
嵌入元素
<body>
<h2>嵌入元素</h2>
<p>
嵌入元素主要功能是把外部的一些资源插入到HTML中，例如图片、声音、视频等
</p>
<!--
img嵌入图片
map定义客户端分区响应图
area表示一个用户客户端分区响应图的区域
audio表示一个音频资源
video表示一个视频资源
iframe嵌入一个文档
embed用插件在HTML中嵌入内容
canvas生成一个动态的图形画布
meter嵌入数值在许可值范围背景中的图形表示
object在HTML文档中嵌入内容
param表示将通过 object 元素传递给插件的参数
progress嵌入目标进展或任务完成情况的图形表示
source表示媒体资源
svg表示结构化矢量内容
track表示媒体的附加轨道（例如字幕）
-->
<h3>img嵌入图像</h3>
<p>
img元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致
图片可以是当前网站内的资源，也可以是其它网站中的资源【盗链】
一般网站中所使用的图片有png、gif和jpg三种格式
</p>
<h4>img相关的配置参数</h4>
<p>
src嵌入图像的URL,图片可以来源于其它网站，也可以是当前网站中的资源<br />
alt当图片不加载时显示的备用内容，如果图片正常显示则不会显示这个内容<br />
width定义图片的长度,默认单位是像素，也允许使用百分比.200px等价于直接写200<br />
height定义图片的高度（单位是像素）<br />
<b>如果设置width或者height其中一个值时，则图片按比例进行缩放；<br />
如果同时设置两个值则不按比例缩放。所以一般不建议同时设置width和height，<br />
因为可能导致图片变形</b>
ismap创建服务器端分区响应图<br />
usemap关联map元素
</p>
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
<img src="image/001.jpg" alt="一个烟盒" />
<img src="image/001.jpg" alt="一个烟盒" height="200" width="160px" />
<a href="index.html">
<img src="image/002.jpg" width="339" height="229" alt="风景图" ismap>
</a>
<!--隐藏链接-->
<img src="image/002.jpg" alt="风景图" width="339" height="229" usemap="#Map">
<map name="Map">
<area shape="rect" coords="31,28,112,100" href="https://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47" href="https://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112" href="https://www.soso.com" target="_blank" alt="多边形">
</map>
<!--解释：通过图片中的热点进行超链接，这里一般采用Dreamweaver进行操作生成的-->
<h3>iframe嵌入另一个文档</h3>
<p>
iframe表示内嵌一个HTML文档。其下的 src 属性表示初始化时显示的页面，
width和 height 表示内嵌文档的长度和高度，name 表示用于 target 的名称。
</p>
<a href="index.html" target="in1">index</a>
<!-- 点击超链在iframe中打开指定的href页面-->
|
<a href="http://www.baidu.com" target="in1">百度</a>
<!--iframe中的src是第一次打开页面时默认的地址，这个地址可以是当前网站中的资源，
也可以是其它网站的资源-->
<iframe src="http://www.baidu.com" width="600" height="500" name="in1"></iframe>
还可以有其它内容
<h3>embed嵌入插件内容</h3>
<p>
embed元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的
flash视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的
文件，再继续查找；width 和 height 表示宽高；src 表示文件路径
</p>
<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
width="480" height="400"></embed>
<h3>object和param元素</h3>
<p>
object元素和embed一样，只不过object是html4的标准，而embed是html5的标准。
而object不但可以嵌入flash，还可以嵌入图片等其他内容。由于图片、音频、视频、
插件都有相应标签元素代替，不再深究了
</p>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
