【HTML】《HTML5秘籍》笔记

最新推荐文章于 2025-08-22 18:28:10 发布

原创最新推荐文章于 2025-08-22 18:28:10 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5新增的语义化元素，如<article>、<aside>等，并详细解释了这些元素的应用场景。同时，文章还探讨了如何利用HTML5改进表单功能，包括使用新的属性如required和placeholder提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、有用的网站

www.caniuse.com 查看特定HTML功能下各浏览器版本支持情况
www.google.com/analytics 免费且好用的网页跟踪服务插件
Modernizr 用来检测浏览器功能支持情况的 JavaScript 库

二、HTML5元素

（一）页面结构相关的语义元素

元素	说明
<article>	表示一篇任何形式的文章，即类似新闻报道、论坛帖子或博客文章（不包括评论或作者简介）等能够独立的内容区块
<aside>	表示独立于周围内容的一个完整的内容块。例如，可以用<aside>创建一个附注栏，其中包含于主文章相关的内容或链接
<figure>和<figcaption>	表示一副插图。其中<figcaption>元素标注图题（插图的标题），而<figure>元素标注<figcaption>和插入图片的<img>元素。目标是反映图片与图题之间是关联的
<footer>	表示页面底部的页脚。通常是很小的一块内容，包括小字号的版权声明、简单的链接（比如About Us、Get Support等）
<header>	表示增强型的标题，可以包含HTML标题和其他内容。其他内容可以是标志、作者署名或一组指向后面内容的导航链接
<hgroup>	表示增强型的标题，分组两个或多个标题元素，不包含其他内容。其主要目的是把标题和副标题联系到一起
<nav>	表示页面中重要的一组链接。其中的链接可以指向当前页面的主题，也可以指向网站的其他页面。实际上，一个页面中包含多个<nav>也很正常
<section>	表示文档中的一个区块，或者表示一组文档。<section>是一个通用容器，只有一条规则：其中的内容必须开始于一个标题。应该在其他语义元素（如<article>和<aside>）不适用的情况下再选<section>

（二）文本级的语义元素

1. <time>

<time>元素扮演两个角色。首先，它表示日期和时间位于标记中的哪个地方。其次，它以任何软件程序都能理解的方式提供日期和时间。

日期格式 YYYY-MM-DD 例如

The party starts <time datetime="2012-03-21">March 21<sup>st</sup></time>

时间部分 HH:MM+00:00 (24小时制小时和分钟，+后是时区) 例如以下是纽约时间。

Parties start every night at <time datetime="16:30+5:00">4:30 p.m.</time>

这样做是为了看网页的人能看到他们想看到的格式，而搜索机器和其他软件则能看到它们可以处理的值，而且毫无歧义。

组合使用：日期在前，中间跟一个大写字母T，时间在后例如

The party starts <time datetime="2012-03-21T16:30+5:00">March 21<sup>st</sup> at 4:30 p.m.</time>

2. <output>

标注JavaScript返回值

下面用一个示例来说明<output>中的form和for属性的使用

<form action"#" id="bmiCalculator">  
    <label for="feet inches">Height</label>  
    <input name="feet">feet<br>  
    <input name="inches">inches<br>  
    <br>  
    <label for="pounds">Weight</label>  
    <input name="pounds">pounds<br><br>  
    ...  
</form>

<p>Your BMI:<output id="result" form="bmiCalculator" for="feet inches pounds"></output></p>

form和for属性什么也不干，唯一的用处是表明<output>从哪些控件获取结果这一信息。

3. <mark>

标注突显文本。默认情况下，被标注的文本会带有浅黄色背景，也可以通过样式表规则为它应用不同的样式。
语义：吸引人注意那些变得很重要的文本。

需要为不支持HTML5的浏览器添加后备样式表。

mark{
    background-color: yellow;
    color: black;
}

（三）表单

1.传统表单

<fieldset>用来分区，其内的<legend>作为这一分区的标题。

<h1>Zoo Keeper Application Form</h1>
<form action="#">
  <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>
  <fieldset>
    <legend>Contact Details</legend>
      <label for="name">Name <em>*</em></label>
      <input id="name"><br>
      <label for="telephone">Telephone</label>
      <input id="telephone"><br>
      <label for="email">Email <em>*</em></label>
      <input id="email"><br>
  </fieldset>
  <fieldset>
    <legend>Personal Information</legend>
      <label for="age">Age<em>*</em></label>
      <input id="age"><br>
      <label for="gender">Gender</label>
      <select id="gender">
        <option value="female">Female</option>
        <option value="male">Male</option>
      </select><br>
      <label for="comments">When did you first know you wanted to be a zoo-keeper?</label>
      <textarea id="comments"></textarea>
  </fieldset>

  <fieldset>
    <legend>Pick Your Favorite Animals</legend>
    <label for="zebra"><input id="zebra" type="checkbox"> Zebra</label>
    <label for="cat"><input id="cat" type="checkbox"> Cat</label>
    <label for="anaconda"><input id="anaconda" type="checkbox"> Anaconda</label>
    <label for="human"><input id="human" type="checkbox"> Human</label>
    <label for="elephant"><input id="elephant" type="checkbox"> Elephant</label>
    <label for="wildebeest"><input id="wildebeest" type="checkbox"> Wildebeest</label>
    <label for="pigeon"><input id="pigeon" type="checkbox"> Pigeon</label>
    <label for="crab"><input id="crab" type="checkbox"> Crab</label>
  </fieldset>
  <p><input type="submit" value="Submit Application"></p>
</form>

2. 表单优化

(1) placeholder属性（有值）——占位符

避免用占位符做两件事。一时不要用它代替字段描述或说明。而是不要为了表示占位符不是真正的内容，就选择特殊字符作为占位符。

(2) autofocus属性（无值）——自动获取焦点

只能给一个<input>或<textarea>元素添加这个属性。

(3) required属性（无值）——验证字段不为空

验证时机是点击表单里的submit按钮的时候。会弹出提示框。

(4) novalidate属性（无值）——禁用整个表单的验证功能

这个属性是添加在form里的。如果一个表单有两个提交按钮，一个用于正式提交，一个用于保存数据（不需要进行严格的数据验证），那么后者按钮的input元素里添加formnovalidate属性，同样可绕过客户端验证。

(5) 验证样式挂钩

required（必填）和optional（选填）：根据字段中是否使用了required属性来应用不同的样式。
valid（有效）和invalid（无效）：根据控件中是否包含错误来应用不同的样式。注意，除非访客提交表单，否则大多数浏览器并不会发现哪些值有效，哪些值无效；换句话说，访客不会实时看到表示输入无效的样式变化。
in-range（在范围内）和out-of-range（超出范围）：根据空间的min和max属性判断输入值是否超出范围，从而为控件应用样式。

如必填字段：

input:required{
    background-color:lightyellow;
}

(6)正则表达式

HTML5使用正则表达式不用^和$字符表示要匹配字段值的开头和结尾。HTML5会自动确保这一点。
浏览器不会验证空值。

通过pattern属性将其应用到<input>或<textarea>元素。

<label for="promoCode">Promotion Code</label>
<input id="promoCode" placeholder="QRB-001" title="Your promotion code is three uppercase letters, a dash, then three numbers" pattern="[A-Z]{3}-[0-9]{3}">