文本元素

HTML5中支持的元素：HTML5元素周期表

h

标题：head

h1~h6：表示1级标题~6级标题

p

段落，paragraphs

lorem，乱数假文，没有任何实际含义的文字

span【无语义】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素） 到了HTML5，已经弃用这种说法。

pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性

显示代码时，通常外面套code元素，code表示代码区域。

    <code style="white-space:pre">
        var i = 2;
        if(i){
            console.log(i);
        }
    </code>

HTML实体

实体字符， HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

1. &单词;
2. &#数字;

• 小于符号

<

• 大于符号

>

• 空格符号

 

• 版权符号

©

• &符号

&

a元素

超链接

href属性

hyper reference：通常表示跳转地址

1. 普通链接
2. 锚链接

id属性：全局属性，表示元素在文档中的唯一编号

1. 功能链接

点击后，触发某个功能

• 执行JS代码，javascript:
• 发送邮件，mailto:

要求用户计算机上安装有邮件发送软件：exchange

• 拨号，tel:

要求用户计算机上安装有拨号软件，或使用的是移动端访问

target属性

表示跳转窗口位置。

target的取值：

• _self：在当前页面窗口中打开，默认值
• _blank: 在新窗口中打开

锚链接:

<a href="#chapter1">章节1</a>

<h2 id="chapter1">章节1</h2>
<p>我是段落1</p>

<!-- 跳转另一个页面的锚点 -->
<a href="锚链接.html#chapter3">
  锚链接页面的第三章
</a>

功能链接:

    <a href="javascript:alert('你好！')">
        弹出：你好！
    </a> 

    <a href="mailto:234234324324@qq.com">
        点击给我发送邮件
    </a>

    <a href="tel:14354663333">
        点击给我拨打电话
    </a>

img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素联用

    <a target="_blank" href="https://www.baidu.com">
        <img src="xxx" alt="这是百度">
    </a>

和map元素

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro（本人开发）

和figure元素

指代、定义，通常用于把图片、图片标题、描述包裹起来，仅是语义化作用。

子元素：figcaption

    <figure>
        <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin">
            <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片">
        </a>
        <figcaption>
            <h2>太阳系</h2>
        </figcaption>
        <p>
            太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以亿计的太阳系小天体,和哈雷彗星。
        </p>
    </figure>


    <map name="solarMap">
        <area shape="circle" coords="360,204,48" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
        <area shape="rect" coords="323,282,395,320" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" target="_blank">
        <area shape="poly" coords="601,371,645,312,678,338,645,392" href="https://baike.baidu.com/item/%E5%86%A5%E7%8E%8B%E6%98%9F/137498?fr=aladdin" target="_blank">
    </map>

多媒体元素

video 视频

audio 音频

video

controls: 控制控件的显示，取值只能为controls

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性

布尔属性，在HTML5中，可以不用书写属性值

autoplay: 布尔属性，自动播放。

muted: 布尔属性，静音播放。

loop: 布尔属性，循环播放

audio

和视频完全一致

兼容性

1. 旧版本的浏览器不支持这两个元素
2. 不同的浏览器支持的音视频格式可能不一致

mp4、webm

    <video controls autoplay muted loop style="width:500px;">
        <source src="media/open.mp4">
        <source src="media/open.webm">
        <p>
            对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
        </p>
    </video>

列表元素

有序列表

ol: ordered list

li：list item

无序列表

把ol改成ul

ul：unordered list

无序列表常用于制作菜单 或 新闻列表。

定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

header: 通常用于表示页头，也可以用于表示文章的头部

footer: 通常用于表示页脚，也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定。

例如，查看h1元素中是否可以包含p元素

总结：

1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

具体的包含关系请查阅MDN