HTML基础_10

HTML基础_10
本篇文章主要介绍了HTML书写规范及其小部分标签。

HTML5 语义元素

什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容

所有现代浏览器均支持 HTML5 语义元素。
此外，您可以“帮助”老式浏览器处理“未知元素”。

HTML5 中新的语义元素

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

HTML5 提供了定义页面不同部分的新语义元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML5 语义元素

HTML5 <section> 元素

<section> 元素定义文档中的节。
可以将网站首页划分为简介、内容、联系信息等节。

HTML5 <article> 元素

<article> 元素规定独立的自包含内容。
文档有其自身的意义，并且可以独立于网站其他内容进行阅读。
<article> 元素的应用场景：
1.论坛
2.博客
3.新闻

嵌套语义元素

在 HTML5 标准中，<article> 元素定义完整的相关元素自包含块。
<section> 元素被定义为相关元素块。     
我们能够使用该定义来决定如何嵌套元素吗？不，我们不能！ 
在因特网上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，
还有 <article> 元素包含 <sections> 元素的页面。
您还会发现 <section> 元素包含 <section> 元素，
同时 <article> 元素包含 <article> 元素

HTML5 <footer> 元素

<footer> 元素为文档或节规定页脚。
<footer> 元素应该提供有关其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。

HTML5<nav> 元素

<nav> 元素定义导航链接集合。    
<nav> 元素旨在定义大型的导航链接块。不过，
并非文档中所有链接都应该位于<nav> 元素中！

HTML5 <aside> 元素

<aside> 元素页面主内容之外的某些内容（比如侧栏）。
aside 内容应该与周围内容相关。
<img> 元素定义图像，<figcaption> 元素定义标题。

为何使用 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> 定义日期/时间。

从 HTML4 迁移至 HTML5

讲解如何从一张典型的 HTML4 页面迁移至典型的 HTML5。
本章演示如何把一张已有的 HTML4 页面转换为 HTML5 页面，在不破坏如何原始内容和结构的情况下。
注释：您可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。

典型的 HTML4 典型的 HTML5

1
2
3
4
5
<div id="header">	<header>
 <div id="menu">	<nav>
 <div id="content">	<section>
 <div id="post">	<article>
 <div id="footer">	<footer>

<article> <section> 与 <div> 之间的差异

在 HTML5 标准中，<article> <section> 与 <div> 之间的差异很小，令人困惑。
在 HTML5 标准中，<section> 元素被定位为相关元素的块。
元素 属性
<article> 元素被定义为相关元素的完整的自包含块。
<div> 元素被定义为子元素的块。 
如何理解呢？       
在上面的例子中，我们曾使用 <section> 作为相关 <articles> 的容器。
  但是，我们也能够把 <article> 用作文章的容器。

HTML(5) 样式指南和代码约定

web 开发者常常不确定在 HTML 中使用的代码样式和语法。
在 2000 年至 2010 年之间，许多 web 开发者从 HTML 转换为 XHTML。
通过 XHTML，开发者不得不编写有效的“格式良好的”代码。

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

  通过 HTML5，您必须创建属于自己的最佳实践、样式指南和代码约定。
智能且有未来保证
对样式的合乎逻辑的使用，可以令其他人更容易理解和使用您的 HTML。
在未来，诸如 XML 阅读器之类的程序，也许需要阅读您的 HTML。
使用格式良好的“近似 XHTML 的”语法，能够更智能。

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

请使用小写元素名

HTML5 允许在元素名中使用混合大小写字母。
我们推荐使用小写元素名：
混合大小写名称并不好
开发者习惯使用小写名（比如在 XHTML 中）
小写更起来更纯净
小写更易书写

关闭所有 HTML 元素

在 HTML5 中，您不必关闭所有元素（例如 <p> 元素）。
我们建议关闭所有 HTML 元素（可以不关闭，但是没必要！！！）

关闭空的 HTML 元素

在 HTML5 中，关闭空元素是可选的。
斜杠（/）在 XHTML 和 XML 中是必需的。
如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。

使用小写属性名

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

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

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

属性值加引号

HTML5 允许不加引号的属性值。
我们推荐属性值加引号：
如果属性值包含值，则必须使用引号
混合样式绝对不好
加引号的值更易阅读

必需的属性

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
请始终定义图像尺寸。这样做会减少闪烁，
因为浏览器会在图像加载之前为图像预留空间。

空格和等号（不加为好）

等号两边的空格是合法的：
但是精简空格更易阅读

避免长代码行

当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。
请尽量避免代码行超过 80 个字符。

空行和缩进

请勿毫无理由地增加空行。
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

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

元数据

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

为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：
1
2
3
4
5
6
<!DOCTYPE html>
 <html lang="en-US">
 <head>
   <meta charset="UTF-8">
   <title>HTML5 Syntax and Coding Style</title>
 </head>

HTML 注释

短注释应该在单行中书写，
并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格：
多行书写记得换行

样式表

请使用简单的语法来链接样式表（type 属性不是必需的）
短规则可以压缩为一行，长规则应该分为多行。

开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符

注释：在逗号或分号之后添加空格，是所有书写类型的通用规则

在 HTML 中加载 JavaScript

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

1
<script src="myscript.js">

通过 JavaScript 访问 HTML 元素

使用“不整洁”的 HTML 样式的后果，是可能会导致 JavaScript 错误。
这两个 JavaScript 语句会产生不同的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>

<script>
// Only parapraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

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

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：
不能以 london.jpg 访问 London.jpg。
其他 web 服务器（微软，IIS）对大小写不敏感：
能够以 london.jpg 或 London.jpg 访问 London.jpg。
如果使用混合大小写，那么您必须保持高度的一致性。
如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，
这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。

文件扩展名

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

本文标题:HTML基础_10

文章作者:Mr.AZ

发布时间:2020年05月27日 - 00时03分

最后更新:2020年05月27日 - 00时05分

原始链接:https://oldaz.github.io/2020/05/27/HTML%E5%9F%BA%E7%A1%80_10/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. HTML5 语义元素
    1. 1.1. 什么是语义元素？
    2. 1.2. HTML5 中新的语义元素
  2. 2. HTML5 语义元素
    1. 2.1. HTML5 &#60;section> 元素
    2. 2.2. HTML5 &#60;article> 元素
    3. 2.3. 嵌套语义元素
  3. 3. HTML5 &#60;footer> 元素
  4. 4. HTML5&#60;nav> 元素
  5. 5. HTML5 &#60;aside> 元素
  6. 6. 为何使用 HTML5 元素？
  7. 7. HTML5 中的语义元素
  8. 8. 从 HTML4 迁移至 HTML5
  9. 9. 典型的 HTML4 典型的 HTML5
    1. 9.1. &#60;article> &#60;section> 与 &#60;div> 之间的差异
  10. 10. HTML(5) 样式指南和代码约定
    1. 10.1. 请使用小写元素名
    2. 10.2. 关闭所有 HTML 元素
    3. 10.3. 关闭空的 HTML 元素
    4. 10.4. 使用小写属性名
    5. 10.5. 属性值加引号
    6. 10.6. 必需的属性
    7. 10.7. 空格和等号（不加为好）
    8. 10.8. 避免长代码行
    9. 10.9. 空行和缩进
  11. 11. 元数据
  12. 12. HTML 注释
  13. 13. 样式表
  14. 14. 在 HTML 中加载 JavaScript
    1. 14.1. 通过 JavaScript 访问 HTML 元素
    2. 14.2. 使用小写文件名
  15. 15. 文件扩展名
,