『前端学习笔记』 HTML5 新特性

最新推荐文章于 2021-08-30 16:55:21 发布

大熊软糖M

最新推荐文章于 2021-08-30 16:55:21 发布

阅读量4k

点赞数

分类专栏：前端学习笔记文章标签： html

本文链接：https://blog.csdn.net/GLZX_HM/article/details/107106831

版权

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文详细介绍了HTML5的新特性，包括语法变化、元素与属性更新、新增全局属性，如contentEditable、designMode、hidden等，以及新增的元素如article、section、nav、aside等。此外，还探讨了表单的新增属性，如autofocus、required、formaction等，帮助开发者更好地理解和应用HTML5。

摘要由CSDN通过智能技术生成

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：HTML 教程 W3school

XHTML规范

文档方面：

必须定义文档类型（DTD）和你的名字空间

标签方面：

所有标签均要小写，合理嵌套，关闭，ID不能重复
标签属性要有值，属性值要加双引号且不能为空
图片一定要加alt属性
表格标签不准使用height属性，可以使用width属性（但单元格可以使用）
禁止使用<embed><iframe>标签
链接不准使用target属性

内容模型：

body form blockquote仅能包含块状元素
文本图像链接等内联元素不允许直接裸露在body中，必须被p或者div等块状元素包含
内链元素不能包含块状元素

其他方面：

注释中禁止使用"-----"
所用特殊符号用编码表示（在DW代码里"&" 会自动引用）

HTML5语法变化

1、标签不再区分大小写
2、元素可以省略结束标签
（1）空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr
（2）可以省略结束标签的元素：colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th
（3）可以全部省略标签的元素：html、head、body、tbody
3、允许省略属性值的属性
4、允许属性值不使用引号
5、添加了布尔值，类似checked，selected

HTML5元素与属性变化

参考文档：HTML5新增的标签和废除的标签

参考文档：html5新增及废除属性

新增的元素

新增的结构元素：

section、article、aside、header、hgroup、footer、nav、figure

新增的其他元素：

video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、convas、command、details、datagrid、keygen、output、source、menu

新增的input元素的类型：

email、url、number、range、Date Pickers

废除的元素

能使用CSS替代的元素：basefont、big、center、font、s、tt、u等
不再使用frame框架
只有部分浏览器支持的元素
其他被废除的元素

新增的属性

表单相关的属性
链接相关的属性
其他属性

废除的属性

删除了一些可以用css代替的属性，多余属性和其他属性。

HTML5新特性详解

全局属性

contentEditable

布尔类型，有true和false两种状态。
用来表示是否允许编辑内容。

继承：如未指定状态，则由父级/继承决定。

普通写法：

  <ul contenteditable="true">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

利用HTML5布尔特性写法：

  <ul contenteditable>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

同样，也可以是空字符串contenteditable=""。

代码结果：

均为可编辑状态。

designMode

布尔类型，有on和off两种状态。
只允许在js脚本中使用。
用来表示整个页面是否可编辑。

hidden

布尔类型。
使浏览器不渲染（内容不可见）。

  <ul hidden>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

spellcheck

布尔类型，有true和false两种状态。
用于输入框的拼写检查。

<input type="text" spellcheck="true">

tabindex

int值，一般取正数。
使用tab建遍历，用于指定遍历过程中第几个被访问到。
主要用于链接和表单类型。
也可以给原本不能获取tab定位的元素添加tabindex，来使用tab访问。比如列表。

 <a href="index.html" tabindex="2">1</a><br/>
 <a href="index.html" tabindex="3">2</a><br/>
 <a href="index.html" tabindex="1">3</a><br/>

代码结果：
使用三次tab结果：

可以看到按照我们给定的tabindex顺序进行tab的访问。

新增元素：article

代表文档。
可以嵌套使用。
可以用来表示插件。

正常使用：

  <article>
    <h1>标题</h1>
    <p>内容</p>
  </article>

嵌套使用：

  <article>
    <h1>标题</h1>
    <p>内容</p>
    <article>
      <h2>标题2</h2>
      <p>内容2</p>
    </article>
  </article>

插件嵌入：

<body>

  当前页面

  <article>
    <object>
      <embed src="#" width="200" height="400">
    </object>
  </article>

</body>

其中#指的是当前页面的链接。

代码结果：

可以看到内嵌结果。

新增元素：section

用于页面内容分块，由内容和标题组成。
section并非普通容器元素，需要定义样式和脚本行为时仍然建议用div。

正常使用：

  <section>
    <h1>标题</h1>
    <p>内容</p>
  </section>

和article嵌套使用：

  <article>
    <h1>标题1</h1>
    <p>内容1</p>
    <section>
      <h2>标题2</h2>
      <p>内容2</p>
    </section>
    <section>
      <h3>标题3</h3>
      <p>内容3</p>
    </section>
  </article>

  <section>
    <h1>标题1</h1>
    <p>内容1</p>
    <article>
      <h2>标题2</h2>
      <p>内容2</p>
    </article>
    <article>
      <h3>标题3</h3>
      <p>内容3</p>
    </article>
  </section>

section强调分块，article强调独立性，article可以看作一种特殊的section。
独立完整的内容使用article，分块使用section。

新增元素：nav

用作页面导航的连接组。
主要应用于：传统导航条，侧边栏导航，页内导航，翻页操作。

  <nav>
    <ol>
      <li>
        <a href="index.html">1</a>
      </li>
      <li>
        <a href="index.html">2</a>
      </li>
    </ol>
  </nav>

新增元素：aside

表示附属信息部分，引用、侧边栏、广告等。

  <aside>
    <p>内容</p>
  </aside>

新增元素：time（微格式）

  <time datetime="2020-07-03">time</time>
  <time datetime="2020-07-03T18:14">time</time>
  <time datetime="2020-07-03T18:14Z">time</time>
  <time datetime="2020-07-03T18:14+01:00">time</time>

T是分隔符，Z是UTC标准时间，+时差。

微格式：

微格式（microformats）:是结构化数据的开放标准。是包含数据的结构化的XHTML代码块的定义格式，由于是XHTML代码块，所以很适合人类阅读，由于是结构化的，又很容易被机器处理，很容易和外部进行数据通信。

新增属性：pubdate

<article>
    <time datetime="2020-07-03" pubdate></time>
  </article>

pubdate 属性指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期。

目前所有主流浏览器都不支持 <pubdate> 标签。

新增元素：header与footer

用于页面逻辑，数量不限。
可以在整个页面使用，也可以在单个区域内使用。

  <header>头部</header>
  <footer>尾部</footer>

用于代替曾经的 div写法：

  <div class="footer">
    <p>内容</p>
  </div>

新增元素：hgroup

将h1到h6分组。

  <hgroup>
    <h1>h1</h1>
    <h2>h2</h2>
  </hgroup>

新增元素：address

联系信息。
一般出现在底部。

  <address>
    <p>内容</p>
  </address>

表单的新增属性

form

  <form id="t1">
    <input type="text" name="s1" value="v1">
  </form>

  <textarea form="t1">
  </textarea>

通过form属性指向先前的表单域id，表示当前从属于哪个表单域。

可以在表单区域外创建任何表单内容。

formaction与formmethod

对应旧式form的action与method属性。

旧式属性action与method：

<form action="index.html" method="post">
  <input type="submit">
</form>

使用新属性formaction与formmethod：

<form>
  <input type="submit" formaction="index.html" formmethod="post">
</form>

formaction同时解决了先前一个表单只能提交一次的问题，现在可以利用formaction提交到多个网页。

多formaction提交：

  <form>
    <input type="submit"  formaction="a.html">
    <input type="submit"  formaction="b.html">
    <input type="submit"  formaction="c.html">
  </form>

formenctype

对应旧式form的enctype属性，用于指定编码。

旧式：

<form enctype="text/plain">
  <input type="submit">
</form>

新式：

<form>
  <input type="submit" formenctype="text/plain">
</form>

关于取值：

取值	结果
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 “+” 加号，但不对特殊字符编码。

formtarget

对应a链接的target属性，用于指定打开跳转界面。
和formaction结合使用。

<form>
  <input type="submit" formtarget="_blank" formaction="a.html">
  <input type="submit" formtarget="_self" formaction="b.html">
  <input type="submit" formtarget="_parent" formaction="c.html">
</form>

autofocus

类似布尔类型，用于指定刚打开Web时自动获得焦点的表单控件。

<form>
  <input type="submit">
  <input type="submit" autofocus>
</form>

代码结果：

required

类似布尔类型，应用于输入，当输入为空时禁止提交。

<form>
  <input type="text" required>
  <input type="submit">
</form>

代码结果（提交空结果）：

label

参考文档：HTML 标签

参考文档：使用labels属性有什么优势吗？

HTML5 中的新属性。属性值描述for id规定label绑定到哪个表单元素。

带有两个输入字段和相关标记的简单 HTML 表单：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

label的优势：

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

control

参考文档：HTML5新标签control属性

在HTML5中，可以在<label>标签内部放置一个表单元素，并通过该标签的control属性来访问该表单的属性。

文本框placeholder

文本框未处于输入状态时，显示的输入提示。

<form>
  <input type="text" placeholder="请输入">
</form>

代码结果：

文本框list与datalist

<form>
  <input type="text" name="input1" list="A">
  <datalist id="A" style="display: none">
    <option value="1">选择1</option>
    <option value="2">选择2</option>
  </datalist>
</form>

通过指定list的值，对应到一个datalist（同样是HTML5新增）中，提供选择功能。

代码结果：

文本框augocomplete

布尔属性，on和off。
自动完成功能。

<form>
  <input type="text" autocomplete="on">
</form>

文本框pattern

将属性值设置为某个格式的正则表达式，提交时检查。

<form>
  <!--只允许大写字母 长度为3-->
  <input pattern="[A-Z]{3}">
  <input type="submit">
</form>

代码结果：

文本框selectiondirection

参考文档：文本框的SelectionDirection属性

针对input和textarea元素。
选取文字时，可以用此属性来获得用户的选取方向。
正向选取时为forward，反向选取时为backward。

复选框indeterminate

参考文档：HTML5中indeterminate属性

使用JS脚本，指定复选框第三种状态（除“选取”、“未选取”）“尚未明确是否选取”。

input为image类型时，提交的width和height

<form>
  <input type="image" src="myjpg.jpg" width="50" height="50">
</form>

指定提交图片的长和宽。