HTML --- HTML5新增标签和其它补充

coderklaus
223 阅读8分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情

语义化结构标签

在以前的网页编写结构的时候，我们可能会经常使用<div class="header">,<div class="section">等类似的形式

来定义我们网站的基本结构，但是这些都使用了的是div，其是不利于我们的SEO的

为此在HTML5中，针对这种情况，提供了对应的语义化标签

标签作用
<header>定义网页的头部元素
<nav>定义网页的导航元素
<section>定于文档某一个区域的元素
<article>定于网页内容的元素 --- 一般是用来定义一些文本内容
<aside>定义网页侧边栏的元素
<footer>定义网页页脚的元素

所有的html5新增元素本质上就是一个有语义化的div元素，所以他们都是块级元素

HTML5新增元素的好处：

  1. 有利于网页的语义化
  2. 有利于SEO，便于搜索引擎解析我们的网页内容

LxnBpy.png

多媒体标签

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易

在HTML5之前是通过flash或者其他插件实现的, 但是flash插件无法很好的支持HTML/CSS特性，且存在比较大的兼容性问题

为此HTML5提供了对应的多媒体标签

标签名说明
<audio>音频标签
<video>视频标签

video

HTML <video> 元素 用于在HTML中嵌入媒体播放器，用于支持文档内的视频播放

<video>是一个行内替换元素

<!--
	默认情况下，video会显示第一帧的内容
	默认情况下，video没有控制条，所以其表现行为和image一致
-->
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

<!-- poster属性用于设置视频的海报 --- 其会作为视频为播放时候的起始帧 -->
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" poster="./images/avatar.jpg" controls></video>

在实际开发中，视频的格式是多种多样的，每个视频都会有自己的格式, 但浏览器的video标签并非支持所有的视频格式，所以有的时候我们需要使用video标签的兼容性写法，也就是为其添加对应的fallback source

<!-- HTML5中 video标签的兼容性写法 -->
<video controls>
  <!--
    使用source定义我们的视频资源列表
    浏览器会从上往下，依次去尝试使用对应的资源进行播放
    并使用第一个可以播放的，也就是兼容的那个资源作为视频源

		ps: 写了source后，video标签上不需要在写src属性
		如果浏览器写了src属性，浏览器将不再检测source中配置的资源，而是仅仅使用src中配置的对应的视频资源
  -->

  <!--
    avi --- Audio Video Interleaved --- windows
    特点: 兼容性较好，画质清晰， 但是体积较大
  -->
  <source src="./videos/1.avi">

  <!--
    wmv --- 微软为Windows Media Player设置的视频格式 --- windows
  -->
  <source src="./videos/2.wmv">

  <!--
    mov --- 苹果为QuickTimePlayer设置的视频格式 --- mac/ios
    可以跨平台，体积较小，画质清晰
  -->
  <source src="./videos/5.mov">

  <!--
  	MP4 --- MPEG-4 --- 目前使用最为广泛的视频格式 --- mac/ios/windows
  -->
  <source src="./videos/4.mp4">

  <!-- 当浏览器不支持video标签的时候，会显示如下内容 --- 可以使用任何的合法的html标签来表示提示信息 -->
  <p>您当前的浏览器不支持video标签，请升级浏览器后重试</p>
</video>

video标签常见的属性

属性名说明备注
src使用的URL地址可以使用source标签代替
width视频的宽度单位是pixel
height视频的高度单位是pixel
controls是否显示控制栏,包括音量，跨帧，暂停/恢复播放boolean类型值
autoplay是否视频自动播放boolean类型值
muted是否静音播放boolean类型值
preload是否需要预加载视频默认值为auto
poster海报的URL地址视频未播放的时候显示的海报图片

ps: 对于目前绝大多数浏览器，单独设置autoplay属性，并不可以使视频自动开始播放

​ 这是因为浏览器在解析video标签的时候，规定为了给用户一个更好的交互体验，

​ 页面中的视频必须由用户主动进行播放或者自动静音播放

​ 所以如果希望video可以自动播放，那么在添加autoplay属性后，还需要添加上muted属性

​ 或者使用JavaScript来模拟用户的点击播放行为

preload属性的可选值

值说明
none页面加载后，不需要提前去加载(缓存)对应的视频
auto页面加载后，由浏览器来决定需要预先加载那些视频内容 --- 默认值
metadata页面加载后，不去加载对应的视频
但是需要加载例如视频时长, 第一帧信息，视频尺寸大小等视频元数据信息

audio

HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

和video标签一样，audio标签其也是一个行内替换元素

属性名说明备注
src音频播放的URL地址URL地址
controls是否显示控制栏, 包括音量，进度，暂停/恢复播放boolean类型值
autoplay音频是否自动播放boolean类型值
muted音频是否静音播放boolean类型值
preload是否需要预加载音频none/metadata/auto
默认值为auto
值的含义和用法与video一致
<!--
	默认情况下，audio标签在页面上什么都不会展示
	因为其默认不显示控制台，如果需要显示需要加上controls属性

	和video标签不同的是，即使设置了muted属性，audio的autoplay属性依旧不会起作用
	对于audio标签，如果需要播放，那么需要用户手动进行点击或者模拟用户的点击行为
-->
<audio src="./audios/yhbk.mp3" controls autoplay muted></audio>

<!-- 和video标签一样，audio标签也存在对应的兼容性写法 -->
<audio controls>
  <!-- 音频也有很多格式，其中最常见的格式为mp3格式 -->
  <source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.ogg">
  <source src="./audios//yhbk.mp3">
  <p>当前浏览器不支持audio标签，请更新浏览器后重试</p>
</audio>

input的扩展内容

HTML5中对input的属性进行了扩展

<!-- 日期 --- 年/月/日 -->
<input type="date">

<!-- 时间 --- 时:分 -->
<input type="time">

<!-- color picker -->
<input type="color">

<!-- 唤起数字键盘 --- 需要在手机端尝试 -->
<input type="tel">

<!-- 用于输入邮箱 --- 需要在手机端尝试 -->
<input type="email">

<!-- 文件选择框 -->
<input type="file">

<!-- 只能输入数字的input -->
<input type="number">

<!--
	滑动块
		最小的时候值为min所设置的值
		最大的时候只为max所设置的值
-->
<input type="range" min="0" max="1000">

<!-- 用于进行搜索的input 在输入内容后 右侧会有个小叉 可以进行重置 -->
<input type="search">

<!-- 用于输入密码的输入框 输入的内容会被转换为小圆点 -->
<input type="password">

data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性

data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到, 通常用于HTML和JavaScript数据之间的传递

<!--
  使用data-* 来定义用户自定义属性
  使用data- 开头用于区分 html属性和用户自定义属性
  如果浏览器解析到data-开头的属性，会知道是用户自定义的属性
  浏览器会跳过并交由Js脚本来进行解析和使用

  ps: 如果出现同名的data-*属性，只会有第一个属性生效，后一个属性并不会覆盖前一个属性所对应的值
-->
<div id="box" data-name="klaus" data-age="24"></div>

<script>
  const boxEl = document.getElementById('box')
  console.log(boxEl.dataset) 
  /*
  	1. 在使用JavaScript进行获取的时候，会自动将data-进行移除
  	2. 获取的值的数据类型都是字符串类型
  	=>
  	  {
  	  	age: "24",
				name: "klaus"
  	  }
  */
</script>

浏览器前缀

有时候可能会看到有些CSS属性名前面带有:-o-、-xv-、-ms-、mso-、-moz-、-webkit-

-o-transform: translate(100px);
-ms-transform: translate(100px);
-moz-transform: translate(100px);
-webkit-transform: translate(100px);

这些内容被称之为 vendor-specific extensions(供应商特定扩展 或被称之为浏览器前缀 或浏览器私有前缀)

在一个CSS属性被确认到正式成为标准，期间需要经过很多阶段，需要很长的时间

在这个过程中，这个css属性的属性名和属性值可能会发生改变，功能可能会发生改变，甚至可能会被移除

在浏览器某一个版本发布的时候，某一些css属性并没有正式成为标准，但是开发者想要尝试去使用这些属性的时候

就需要为这些css属性或css属性值添加上对应的浏览器前缀， 以标识这是一个在当前浏览器版本发布的时候，

还没有正式成为W3C标准的css属性或css属性值

浏览器在解析这些有浏览器前缀的属性的时候，按照如下规则来进行解析:

  1. 如果该属性在后期被移除，那么该属性会自动失效，表现效果和没有设置一致
  2. 如果该属性功能或名称发生了改变，那么该属性解析的时候，会自动解析为最新的功能或者使用最新的名称来进行解析
  3. 如果该属性已经成为了正式版，那么该属性会自动被映射为标准中对应的值，并按照标准中定义的规则来进行解析

常见的浏览器前缀有:

前缀值浏览器
-o-Opera
-ms-IE, edge
-moz-FireFox
-webkit-Safari、Chrome

在实际开发中，对应的浏览器前缀并不需要我们手动进行添加

类似于webpack等之类的打包工具会集成类似于browserslist和postcss之类的工具

通过browserslist，我们可以设置我们所需要兼容的浏览器版本

通过postcss，我们可以自动去caniuse上去查找那些属性需要添加上对应的浏览器前缀

并自动为我们进行添加上对应的浏览器前缀

代码规范和编写顺序

在进行css属性编写的时候，推荐使用如下顺序进行编写:

  1. 确定盒子布局方式的css属性
    • 例如: position, float, display等
  2. 确定盒子的特性和可见性等属性
    • 例如: opacity, display等
  3. 盒子模型相关属性
    • 例如 padding， margin， width，height，border等
  4. 文本，文字，背景相关属性
    • 例如: background, font, font-size, color等
  5. 其它的一些装饰性属性
    • 例如: transform, animation, overflow等

在css中如果定义的样式属性中存在多个单词，如果定义的样式是局部样式，那么推荐使用中划线进行分割，例如 .left-item

但是如果定义的样式是全局样式，那么推荐使用下划线进行分割，例如.left_item或者使用中划线进行分割，但是在最前面多加一个中划线，例如 .-left-item

meta标签

我们时常在head标签中定义一些元数据，也就是那些用来对网页进行配置的信息。如样式，脚本，标题等

有些元数据，我们有对应的语义化元素，如link元素，title元素，script元素等

但是有一些元数据在定义的时候，我们找不到对应的合适的语义化标签，

此时我们就可以使用meta来定义那些不能使用其他定元相关(meta-related)元素定义的任何元数据信息

meta可以定义的元数据主要有以下三种类型:

类型说明
charset进行一个字符集声明，告诉文档使用哪种字符编码
http-equiv定义编译指令 (equiv 是equivalent 相等的 的简写)
name提供的是文档级别(document-level)的元数据，应用于整个页面
<head>
  <!-- 定义文档编码格式为 UTF-8 -->
  <meta charset="UTF-8">
  <!--
    用来控制IE的渲染行为
    在IE浏览器中，尽可能使用最高的渲染模式进行渲染
    如果可以使用Edge浏览器内核进行渲染的话，就使用edge浏览器对应的blink内核进行渲染
  -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 设置视口  -->
  <meta name="viewport" content="width=100%, initial-scalable=1.0">
  <!-- 设置那些页面可以被爬虫所获取 all表示的是所有的页面 -->
  <meta name="robots" content="all">
  <!-- 网页作者  -->
  <meta name="author" content="Klaus">
  <!--
    使用简短的语句对网页进行描述
    1. SEO会读取这些信息对网页进行描述
    2. FireFox会将这些描述内容作为书签的内容，Chrome是网页的标题作为书签的内容
  -->
  <meta name="description" content="这里是对网页的简短描述">
  <!--
    设置网页的关键字，编译SEO爬虫来进行读取和识别
    content中，多个值之间使用逗号进行分割
  -->
  <meta name="keywords" content="meta,html,webpage">
  
  <!-- 告诉SEO，当前网页会运行在那些设备上 -->
  <meta name="applicable-device" content="pc,mobile">
  
  <!-- 告诉双内核浏览器，例如360浏览器，在渲染页面的时候，使用webkit来进行渲染 -->
  <meta name="renderer" content="webkit">
  
   <!--
			以下三行可以用来禁止，某些版本的iphone对手机号，地址，邮箱 进行默认功能的设置
			默认设置为 添加上对应的样式，并且点击后可以进行特定的行为
			例如: 手机号添加上默认的样式，并且点击后可以进行拨号
			no -- 禁止  yes -- 允许(默认值)
	 -->
   <meta name="format-detection" content="telephone=no">
   <meta name="format-detection" content="email=no">
   <meta name="format-detection" content="address=no">
   <!-- 上述三行可以简写为 -->
   <meta name="format-detection" content="telephone=no,email=no,adress=no">
  
  <!-- 有些meta是自定义的，以便于自己在某些场景下进行使用 -->
  <meta name="x-version" content="6.3.2">
  
  <!-- 有些meta是为某些特定搜索引擎所指定的 -->
  <meta name="baidu-site-verification" content="6zFCAGAmfZ">
  
  <title>这里是网页的标题</title>
  <!-- 
		link标签的ref属性的值为alternative时
		表示该网站是当前网站的备用域名
		也就是告诉SEO引擎，如果这两个网站指向同一个页面
		如果其中一个页面无法打开，可以尝试使用另外一个域名地址
	-->
  <link rel="alternate" href="https://www.example/m/">
</head>

favicon图标

Favicon是favorites icon的缩写，亦被称为website icon(站点图标)、page icon(页面图标)

<!--
  设置站点图表
  如果网站在head中设置了站点图标，那么浏览器会使用用户自己在head中设置的站点图标
  如果用户没有设置站点图标，那么浏览器会使用当前网站根目录下的favicon.ico
  所以推荐即在页面的head中显示声明当前网站的站点图标
  同时将网站的站点图标放置在当前网站的项目根目录下
-->
<!-- <link rel="icon" href="./favicon.png"> -->

<!-- 兼容性写法 -->
<!-- 代码片段 -> link:favicon -->
<!-- 新增的rel类型shortcut 和 新增类型 type="image/x-icon" 都是为了兼容早期IE浏览器 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

CSS字符编码

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法(一旦找到就停止并得出结果)

  1. 文件的开头的 Unicode byte-order(字节顺序标记) 字符值 --- 也就是文件编码中的标识符
  2. 在HTTP的响应头中使用charset响应头声明的编码方式
  3. CSS中使用@charset声明的编码方式
  4. 如果没有设置css文件的编码格式，那么使用默认的编码格式，即为UTF-8
/* 该声明语句依旧是一句css样式，所以需要使用分号来进行结尾 */
@charset 'UTF-8';
avatar
文章
阅读
粉丝