HTML5 语义元素、迁移、样式指南和代码约定

时间  2019-11-22
标签 html5 html 语义 元素 迁移 样式 指南 代码 约定 栏目 HTML5 繁體版
原文   原文链接

语义元素是拥有语义的元素。javascript

什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。css

非语义元素的例子：<div> 和 <span> - 没法提供关于其内容的信息。html

语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。html5

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

全部现代浏览器均支持 HTML5 语义元素。java

此外，您能够“帮助”老式浏览器处理“未知元素”。jquery

在 HTML5 浏览器支持这一章学习更多知识。web

HTML5 中新的语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">。api

HTML5 提供了定义页面不一样部分的新语义元素：浏览器

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 语义元素服务器

HTML5 <section> 元素

<section> 元素定义文档中的节。

根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，一般具备标题”。

能够将网站首页划分为简介、内容、联系信息等节。

实例

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

HTML5 <article> 元素

<article> 元素规定独立的自包含内容。

文档有其自身的意义，而且能够独立于网站其余内容进行阅读。

<article> 元素的应用场景：

  • 论坛
  • 博客
  • 新闻

实例

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Nesting Semantic 元素s

在 HTML5 标准中，<article> 元素定义完整的相关元素自包含块。

<section> 元素被定义为相关元素块。

咱们可以使用该定义来决定如何嵌套元素吗？不，咱们不能！

在因特网上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，还有 <article> 元素包含 <sections> 元素的页面。

您还会发现 <section> 元素包含 <section> 元素，同时 <article> 元素包含 <article> 元素。

注释： Note Newspaper: The sports articles in the sports section, have a technical section in each article.

HTML5 <header> 元素

<header> 元素为文档或节规定页眉。

<header> 元素应该被用做介绍性内容的容器。

一个文档中能够有多个 <header> 元素。

下例为一篇文章定义了页眉：

实例

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML5 <footer> 元素

<footer> 元素为文档或节规定页脚。

<footer> 元素应该提供有关其包含元素的信息。

页脚一般包含文档的做者、版权信息、使用条款连接、联系信息等等。

您能够在一个文档中使用多个 <footer> 元素。

实例

<footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

HTML5 <nav> 元素

<nav> 元素定义导航连接集合。

<nav> 元素旨在定义大型的导航连接块。不过，并不是文档中全部连接都应该位于 <nav> 元素中！

实例

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML5 <aside> 元素

<aside> 元素页面主内容以外的某些内容（好比侧栏）。

aside 内容应该与周围内容相关。

实例

<p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

HTML5 <figure> 和 <figcaption> 元素

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的做用是为图片添加可见的解释。

经过 HTML5，图片和标题可以被组合在 <figure> 元素中：

实例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

<img> 元素定义图像，<figcaption> 元素定义标题。

Why Semantic HTML5 元素？

若是使用 HTML4 的话，开发者会使用他们喜好的属性名来设置页面元素的样式：

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

如此，浏览器便没法识别正确的网页内容。

而经过 HTML5 元素，好比：<header> <footer> <nav> <section> <article>，此问题迎刃而解。

根据 W3C，语义网：

“容许跨应用程序、企业和团体对数据进行分享和重用。”

HTML5 中的语义元素

下面列出了以字母顺序排列的 HTML5 新语义元素。

这些连接指向完整的 HTML 参考手册。

标签 描述
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义用户可以查看或隐藏的额外细节。
<figcaption> 定义 <figure> 元素的标题。
<figure> 规定自包含内容，好比图示、图表、照片、代码清单等。
<footer> 定义文档或节的页脚。
<header> 规定文档或节的页眉。
<main> 规定文档的主内容。
<mark> 定义重要的或强调的文本。
<nav> 定义导航连接。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。

HTML 代码约定

web 开发者经常不肯定在 HTML 中使用的代码样式和语法。

在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。

经过 XHTML，开发者不得不编写有效的“格式良好的”代码。

HTML5 在代码验证时会更宽松一点。

经过 HTML5，您必须建立属于本身的最佳实践、样式指南和代码约定。

智能且有将来保证

对样式的合乎逻辑的使用，能够令其余人更容易理解和使用您的 HTML。

在将来，诸如 XML 阅读器之类的程序，也许须要阅读您的 HTML。

使用格式良好的“近似 XHTML 的”语法，可以更智能。

注释：请始终保持您的样式智能、整洁、纯净、格式良好。

请使用正确的文档类型

请始终在文档的首行声明文档类型：

<!DOCTYPE html>

若是您一向坚持小写标签，那么可使用：

<!doctype html>

请使用小写元素名

HTML5 容许在元素名中使用混合大小写字母。

咱们推荐使用小写元素名：

    混合大小写名称并很差 开发者习惯使用小写名（好比在 XHTML 中） 小写更起来更纯净 小写更易书写

不太好：

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

很糟糕：

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

还不错：

<section> 
  <p>This is a paragraph.</p>
</section>

关闭全部 HTML 元素

在 HTML5 中，您没必要关闭全部元素（例如 <p> 元素）。

咱们建议关闭全部 HTML 元素：

看起来很差：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起来不错：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

关闭空的 HTML 元素

在 HTML5 中，关闭空元素是可选的。

容许这样：

<meta charset="utf-8">

也容许这样：

<meta charset="utf-8" />

斜杠（/）在 XHTML 和 XML 中是必需的。

若是您指望 XML 软件来访问您的页面，保持这个习惯是个好主意。

使用小写属性名

HTML5 容许大小写混合的属性名。

咱们建议使用小写属性名：

    混合属性名并很差 开发者习惯于使用小写属性名（好比在 XHTML 中） 小写属性名看状况更纯净 小写属性名更易书写

看起来很差：

<div class="menu">

看起来不错：

<div class="menu">

属性值加引号

HTML5 容许不加引号的属性值。

咱们推荐属性值加引号：

    若是属性值包含值，则必须使用引号 混合样式绝对很差 加引号的值更易阅读

这个属性值无效，由于值中包含空格：

<table class="table" striped>

这样是有效的：

<table class="table striped">

必需的属性

请始终对图像使用 alt 属性。当图像没法显示时该属性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

请始终定义图像尺寸。这样作会减小闪烁，由于浏览器会在图像加载以前为图像预留空间。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等号

等号两边的空格是合法的：

<link rel = "stylesheet" href = "styles.css">

可是精简空格更易阅读， But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

避免长代码行

当使用 HTML 编辑器时，经过左右滚动来阅读 HTML 代码很不方便。

请尽可能避免代码行超过 80 个字符。

空行和缩进

请勿毫无理由地增长空行。

为了提升可读性，请增长空行来分隔大型或逻辑代码块。

为了提升可读性，请增长两个空格的缩进。请勿使用 TAB。

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每一个元素：

没必要要：

<body>

  <h1>Famous Cities</1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</1>
<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

表格示例：

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

列表示例：

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略 <html> 和 <body>？

在 HTML5 标准中，可以省略 <html> 标签和 <body> 标签。

如下代码做为 HTML5 进行验证：

示例

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

亲自试一试

咱们不推荐省略 <html> 和 <body> 标签。

<html> 元素是文本的根元素。它是规定页面语言的理想位置。

<!DOCTYPE html>
<html lang="en-US">

对于可访问应用程序（屏幕阅读器）和搜索引擎，声明语言很重要。

省略 <html> 或 <body> c可令 DOM 和 XML 软件崩溃。

省略 <body> 会在老式浏览器（IE9）中产生错误。

省略 <head>？

在 HTML5 标准中，<head> 标签也可以被省略。

默认地，浏览器会把 <body> 以前的全部元素添加到默认的 <head> 元素。

经过省略 <head> 标签，您可以下降 HTML 的复杂性：

示例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

亲自试一试

注释：对于 web 开发者，省略标签的作法是陌生的。创建规则须要时间。

元数据

<title> 元素在 HTML5 中是必需的。请尽量制做有意义的标题。

<title>HTML5 Syntax and Coding Style</title>

为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML 注释

短注释应该在单行中书写，并在 <!-- 以后增长一个空格，在 <!-- 以前增长一个空格：

<!-- This is a comment -->

长注释，跨越多行，应该经过 <!-- 和 --> 在独立的行中书写：

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

长注释更易观察，若是它们被缩进两个空格的话。

样式表

请使用简单的语法来连接样式表（type 属性不是必需的）：

<link rel="stylesheet" href="styles.css">

短规则能够压缩为一行，就像这样：

p.into {font-family:"Verdana"; font-size:16em;}

长规则应该分为多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 开括号与选择器位于同一行
  • 在开括号以前用一个空格
  • 使用两个字符的缩进
  • 在每一个属性与其值之间使用冒号加一个空格
  • 在每一个逗号或分号以后使用空格
  • 在每一个属性值对（包括最后一个）以后使用分号
  • 只在值包含空格时使用引号来包围值
  • 把闭括号放在新的一行，以前不用空格
  • 避免每行超过 80 个字符

注释：在逗号或分号以后添加空格，是全部书写类型的通用规则。

在 HTML 中加载 JavaScript

请使用简单的语法来加载外部脚本（type 属性不是必需的）：

<script src="myscript.js">

经过 JavaScript 访问 HTML 元素

使用“不整洁”的 HTML 样式的后果，是可能会致使 JavaScript 错误。

这两个 JavaScript 语句会产生不一样的结果：

var obj = getElementById("Demo")

var obj = getElementById("demo")

亲自试一试

若是可能，请在 HTML 中使用（与 JavaScript）相同的命名约定。

请访问 JavaScript 样式指南。

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg。

其余 web 服务器（微软，IIS）对大小写不敏感：

可以以 london.jpg 或 London.jpg 访问 London.jpg。

若是使用混合大小写，那么您必须保持高度的一致性。

若是您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了不这些问题，请始终使用小写文件名（若是能够的话）。

文件扩展名

HTML 文件名应该使用扩展名 .html（而不是 .htm）。

CSS 文件应该使用扩展名 .css。

JavaScript 文件应该使用扩展名 .js。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程