HTML：元素与属性及HTML语义化理解

一、行内元素与块级元素

HTML5 重新定义了元素的类别：详见 元素内容分类。尽管这些新的定义更精确，但却比上述的 “块级元素” 和 “内联元素” 更难理解，因此在之后的讨论中仍使用旧的定义。

1、行内元素（存在感弱）

（1）行内元素和相邻的行内元素在一行上，不会自动换行，水平方向依次排列。
（2）高、宽设置无效，水平方向的内边距和外边距可以设置，但是垂直方向的不行。
（3）默认宽度就是它本身内容的宽度。
（4）举例：a、b、br、i、span、small、big、sub、sup

2、块级元素（存在感强）

（1）每个块元素总是从新的一行开始，可以自动换行，垂直方向依次排列
（2）高、宽、水平方向和垂直方向的内边距、外边距都可以控制.
（3）默认宽度是容器的100%。
（4）举例：div、h1-h6、p、ol、ul、li、nav。

3、行内块级元素

（1）和相邻行内元素（行内块）在一行上，水平方向依次排列。
（2）高、宽、水平方向和垂直方向的内边距、外边距设置有效。
（3）默认宽度就是它本身内容的宽度。
（4）例如：img。

二、空元素

不是所有元素都拥有开始标签，内容和结束标记. 一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素是用来在元素所在位置插入一张指定的图片。

三、嵌套元素

可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将“爆”嵌套在<strong> 中，意味着这个单词被着重强调：
<p>我的猫咪脾气<strong>爆</strong>:)</p>

四、HTML语义化

web页面的基本组成部分

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面或结构不当的页面以外，都倾向于使用类似的标准组件：

（1）页头
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
（2）导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非决对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
（3）主内容
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
（4）侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
（4）页脚
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 SEO。
一个“典型的网站”可能会这样：

HTML5之后：

即：
<header>:通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介等信息。
<nav>: （Navigation）表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。
<article>:表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，例如一篇完整的论坛帖子、一则网站新闻、一篇博客文章等。
<section>:是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段。
<aside>:所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。
<footer>:一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信息。

五、HTML5标签

HTML 是超文本标记语言，而 HTML5 是 W3C(注2) 对 HTML 标准的第五次修订。增加了功能：语义标签、视频播放标签，画布标签，地理标签，网页存储标签等。

（1）语义：能够让你更恰当地描述你的内容是什么。
（2）连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
（3）离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
（4）多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
（5）2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
（6）性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
（7）设备访问 Device Access：能够处理各种输入和输出设备。
（8）样式设计: 让作者们来创作更加复杂的主题。

HTML5 中通过提供与文档结构有关的语义元素使得文档结构更加清晰、明确。

六、元素与属性

元素也可以拥有属性，每个不同的标签可以有不同的功能属性。如下：

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
一个属性必须包含如下内容：

（1）在元素和属性之间有空格 space 隔开 (如果已经有一个或多个属性，就与前一个属性之间有一个空格.)。
（2）属性后面紧跟着一个“=”符号。
（3）有一个属性值,由一对引号“ ”引起来。

另一个例子是关于元素<a>的——元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：
<a title="介绍" href="https://www.mozilla.org/" target="_blank">HTML简介</a>

（1）href: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：href="https://www.mozilla.org/"。
（2）title: 标题 title 属性为超链接声明额外的信息，比如你将链接至那个页面。例如：title="The homepage"。当鼠标悬浮时，将出现一个工具提示。
（3）target: 目标 target 属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在目前标签页显示链接，只需忽略这个属性。

布尔属性

有些属性属于布尔属性，这些属性不需要赋值，只需将属性名添加到元素中即可。
常见的布尔属性有：disabled、hidden

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>
<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

默认属性

待补充。。。
可暂时先看看这篇文章

七、页面调试和验证

1、打开浏览器控制台。
2、格式验证：Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织） 创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行 ，网页会返回一个错误报告。