HTML基础标签

文档元素

文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。让整个布局元素具有语义，进一步替代div

h1~h6表示标题
实际作用就是加粗并改变字体大小。用于各种标题文档
< h1>h1~h6表示标题等级</ h1>

header表示首部
< header>
这里部分一般是页面头部，包括：LOGO、标题、导航等内容
</ header>

footer表示尾部
< footer>
这里是页面的尾部，一般包括：版权声明、友情链接等内容
</ footer>

nav表示有意集中在一起的导航元素
< nav>
< h5>这里存放文档的导航</ h5>
< a href="#1">第一章 Java概论</ a>
< a href=“first.html”>第二章 Java语法基础
</ nav>

section表示重要概念或主题
< section>
这里一般是存放文档主题内容。
</ section>

article表示一段独立的内容
一般结构为：
< article>
< header>
< nav></ nav>
</ header>
< section></ section>
< footer></ footer>
</ article>

address表示文档或 article 的联系信息
< address>联系信息</ address>

aside表示与周边内容少有牵涉的内容
< aside>这是一个注释< /aside>

hgroup将一组标题组织在一起
< hgroup>
< h1>标题部分< /h1>
不是标题就没有任何显示效果，不要理解hgroup给文档上自动添加hx效果
< h4>小标题部分</ h4>
< /hgroup>

details生成一个区域，用户将其展开可以获得更多细节
summary用在 details 元素中，表示该元素内容的标题或说明

实体字符

在页面源代码中的换行和空格，浏览器显示时只显示一个空格

如果需要显示多个空格，则只能通过实体字符进行控制。一个 & nbsp;代表一个空格

` `     空格
- `<` &lt; &#60; 小于号
- `>` &gt; &#62; 大于号
-  & &amp; &#38; 和号
-  " &quot; &#34; 引号
-  ' &apos; &#39; 撇号
-  ￠ &cent; &#162; 分
-  £ &pound; &#163; 镑
-  ¥  &yen; &#165; 日圆
-  € &euro; &#8364; 欧元
-  § &sect; &#167; 小节
-  © &copy; &#169; 版权
-  ® &reg; &#174; 注册商标
-  ™ &trade; &#8482; 商标
-  × &times; &#215; 乘号
-  ÷ &divide; &#247; 除号

分组元素

所谓分组，就是用来组织相关内容的 HTML5 元素，清晰有效的进行归类。

p表示段落
div一个没有任何语义的通用元素，和 span 是对应元素
blockquote表示引自他出的大段内容
pre表示其格式应被保留的内容
hr表示段落级别的主题转换，即水平线
ul,ol表示无序列表，有序列表
li用于 ul,ol 元素中的列表项
dl,dt,dd表示包含一系列术语和定义说明的列表。
dt在dl内部表示术语，一般充当标题；
dd在dl内部表示定义，一般是内容
figure表示图片
figcaption表示 figure 元素的标题

& lt;p & gt;元素实际作用就是将内部包含的文本形成一个段落；
而段落和段落之间保持一定量的空隙

div通用分组

div元素在早期的版本中非常常用，通过div这种一般性分组元素进行布局。

而在 HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和p段落的区别就是， 两段文本的上下空隙是没有的，空隙间隔和br换行一样。

blockquote引用大段他出内容

< blockquote>这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容,这是一个大段引自他出内容</ blockquote>

< blockquote>默认显示效果为：左右两端会有收缩回退，而且居中显示</ blockquote>

pre展现格式化内容
< pre>元素实际作用就是编辑器怎么排版的，原封不动的展现出来。当然，这种只适合简单的排版，复杂的排版就无法满足要求了。
< pre>

hr添加分隔

hr元素实际作用就是添加一条分割线，意图呈现上下文主题的分割

< hr width="80%">< !--设置水平分割线的宽度-->
<hr width="60%" color="red"><!--设置水平分割线的默认颜色-->

<figure>
        <!--图片的标题说明-->
        <figcaption>这是一张图</figcaption>
        <!--定义说明所使用的具体图片路径，这里使用的是相对路径-->
        <img src="image/001.jpg" width="30%">
    </figure>

超链接和地址

通过使用a标签的href属性可以定义点击一个热点文字实现页面的跳转

• a href=跳转的地址 热点文字a

href指定元素所指资源的URL

hreflang指向的链接资源所使用的语言

media说明所链接资源用于哪种设备

rel说明文档与所链接资源的关系类型

target指定用以打开所链接资源的浏览环境

type说明所链接资源的 MIME 类型（比如 text/html）

只有href和target一般比较常用，而href是必须要用的。其他几个属性在元素使用较少

href是必须属性，否则元素就变成空元素了。如果属性值是https://开头的URL，意味着点击跳转到指定的外部网站。

• 例如< a href=“https://www.4399.com”>百度

target属性告诉浏览器希望将所链接的资源显示在哪里

_blank在新窗口或标签页中打开文档
_parent在父窗框组（frameset）中打开文档
_self在当前窗口打开文档（默认）
_top在顶层窗口打开文档

frameset已经在html5中不建议使用,在具体的开发中只有_blank常用

相对与绝对路径

所谓相对路径就是相对于链接页面而言的另一个页面的路径。
而绝对路径，就是直接从file:///磁盘符开始的完整路径。
在同一个目录下做上两个页面，其中一个页面链接到另一个页面
首先是 file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文件。

这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构
一旦出现任何变化，链接当即失效。事实上服务器管理员特别厌恶获取服务器相关信息的操作

相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就需要使用目录结构语法
< a href=“zi01/abc.html”>相对路径
一般相关路径不会使用/开头

目录语法
同一个目录：index2.html 或./index2.html
在子目录：xxx/index2.html
在孙子目录：xxx/xxx/index2.html
在父目录：…/index2.html
在爷爷目录：…/…/index2.html

锚点设置

锚点设置一般用于超过一页显示的帮助文档中。锚点设置超链接可用来将同一个文档中的另一个元素移入视野，即在当前页中进行跳转定位。通过属性id或name实现锚点定位。
a href="#对应的名称"链接跳转的写法
具体的目标位置写法
a name=“具体的名称”
< a href="#1">Top
可以直接打开某个页面中的具体位置
< a href=“zi01/abc.html#1”>页面跳转，同时打开对应的位置</ a>

嵌入元素

嵌入元素主要功能是把外部的一些资源插入到HTML中，例如图片、声音、视频等

img嵌入图片
map定义客户端分区响应图
area表示一个用户客户端分区响应图的区域
audio表示一个音频资源
video表示一个视频资源
iframe嵌入一个文档
embed用插件在HTML中嵌入内容
canvas生成一个动态的图形画布
meter嵌入数值在许可值范围背景中的图形表示
object在HTML文档中嵌入内容
param表示将通过 object 元素传递给插件的参数
progress嵌入目标进展或任务完成情况的图形表示
source表示媒体资源
svg表示结构化矢量内容
track表示媒体的附加轨道（例如字幕）

img嵌入图像

img元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致
图片可以是当前网站内的资源，也可以是其它网站中的资源【盗链】
一般网站中所使用的图片有png、gif和jpg三种格式

img相关的配置参数

src嵌入图像的URL,图片可以来源于其它网站，也可以是当前网站中的资源

alt当图片不加载时显示的备用内容，如果图片正常显示则不会显示这个内容

width定义图片的长度,默认单位是像素，也允许使用百分比.200px等价于直接写200

height定义图片的高度（单位是像素）

如果设置width或者height其中一个值时，则图片按比例进行缩放；

如果同时设置两个值则不按比例缩放。所以一般不建议同时设置width和height
因为可能导致图片变形

iframe嵌入另一个文档

iframe表示内嵌一个HTML文档。其下的 src 属性表示初始化时显示的页面，

width和 height 表示内嵌文档的长度和高度，name 表示用于 target 的名称。

点击超链在iframe中打开指定的href页面

<iframe src="http://www.baidu.com" width="600" height="500" name="in1"></iframe>

iframe中的src是第一次打开页面时默认的地址，这个地址可以是当前网站中的资源，也可以是其它网站的资源

embed嵌入插件内容

embed元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的flash视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的文件，再继续查找；width 和 height 表示宽高；src 表示文件路径

<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>

object和param元素

object元素和embed一样，只不过object是html4的标准，而embed是html5的标准。

而object不但可以嵌入flash，还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替

页面元数据

 模拟 HTTP 标头字段
    5秒跳转到指定 URL
    <meta http-equiv="refresh" content="5;http://lanou3g.com">
    只是定时刷新当前页面
    <meta http-equiv="refresh" content="1">
    另一种声明字符编码
   <meta http-equiv="content-type" content="text/html charset=utf-8">
   属性值说明
   refresh 重新载入当前页面，或指定一个URL。单位秒。
   content-type 另一种声明字符编码的方式

元数据定义在head标签中，用于说明当前页面的相关信息

列表展示

<h1>产品展示</h1>
    <p>这是一个段落，因为他比较长，<br>我们不希望它自动换行，所以我们在合适的地方让它换行</p>
    <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>
    <h5>列表允许嵌套</h5>
    <ol>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶</li>
            </ul>
        </li>
        <li>咖啡</li>
    </ol>
    <h6>产品展示</h6>