HTML - 其他元素(持续更新)

标签语义化

其实单独使用任何一个元素标签(如div), 通过CSS和JS的渲染后即可编写一个完整的网页, 但这不利于团队开发

标签语义化即选择标签时让每个标签都有正确的语义

意义:

1. 方便代码维护
2. 减少开发者之间的沟通成本
3. 让语音合成工具正确识别网页元素的用途
4. SEO优化

vedio元素

视频标签, 支持 ogg、mp4、webm 格式

语法: <video src="视频URL" poster="海报图片URL" controls></video>

属性:

1. autoplay 布尔属性, 自动播放, 高版本浏览器限制失效

2. muted 布尔属性, 静音播放

3. width和height

4. loop 循环次数, 值为 loop 或者 -1 表示无限循环

5. preload 预加载, 取值 auto(默认全加载, 会影响整个网页加载速度)|metadata(加载元数据)

6. 解决兼容性问题

   <video poster="海报图片URL" controls>
       <source src="视频URL">
   </video>
   

audio元素

音频标签, 支持 ogg、mp3、wav 格式

语法: <audio src="音频URL" controls></audio>

属性与vedio类似, 没有 poster、width、height 属性

details元素

详情标签

语法:

<details>
    <summary>概要标题<summary>
</details>

注意点:

1. 如果没有 <summary> 标签, 标题默认为 “详细信息“
2. 有多个 <summary> 标签, 只认第一个, 其他当详情内容

其他增强语义的元素

header元素

<header>元素用来表示介绍性的内容

注意点:

1. W3C规范, 一个<header>标签内至少有一个标题元素( h1-6 )
2. 一个文档中可以定义多个<header>元素, 表示文档或者文档的一部分区域的页眉
3. <header>元素不能嵌套在<footer>,<address>或者另一个<header>标签内部

footer元素

<footer>元素定义文档或者文档的一部分区域的页脚

一般情况下, 该元素包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等

nav元素

<nav>元素用于表示HTML页面中的导航, 可以是页与页之间导航, 也可以是页内的段与段之间导航

注意, <nav>元素值作为标注一个导航链接的区域, 一般里面会嵌套多个<a>标签

section元素

<section>元素用来对文档中的内容进行分块或分段, 与<div>标签类似

article元素

<article>元素用来定义独立的内容

注意点:

1. <article>定义的内容本身必须是有意义的且必须是独立于文档的其余部分
2. 一般是论坛帖子、博客文章、新闻故事、评论等

被HTML5废弃的元素

marquee元素

走马灯标签(目前使用不多, 被JS动画取代)

语法: <marquee behavior="行为" direction="滚动方向"></marquee>

属性:

1. behavior: scroll(循环滚动)|slide(滚一次)|alternate(来回滚)
2. scrollamount: 滚动速度, 单位像素(px/s)
3. loop: 循环次数, 默认无限循环

不(bu)是(is)标签

1. 加粗强调: <b></b> —–> <strong></strong>
2. 下划线: <u></u> —-> <ins></ins>
3. 斜体: <i></i> —–> <em></em>
4. 删除线: <s></s> —-> <del></del>

废弃原因: 标签语义化

注意点: 目前, <i>标签在网页中多用于表示图标(icon)