写在前面

主要内容包含 HTML 列表、HTML 元数据、HTML 块、HTML 布局、文本格式、文档和网站架构。

知识点

  • HTML 列表
  • HTML 元数据
  • HTML 块
  • HTML 布局
  • 文本格式
  • 文档和网站架构
    HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

列表

有序列表 （ol)

定义：有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol> 标签。每个列表项始于<li> 标签。

无序列表（ul）

定义：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于<li>。无序列表的各个列表项之间没有顺序级别之分，是并列的。

自定义列表（dl）

定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl> 标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。自定义列表的列表项前没有任何项目符号。

HTML 元数据

元数据就是用来描述数据的数据。 HTML 中也有很多元数据，下面为大家简单介绍一下。

<meta>标签提供关于 HTML 文档的元数据：描述（description）、关键词（keywords）、文档的作者（author）等其他元数据。

<!DOCTYPE HTML>
<html>
<head>
    <meta name="author" content="www.shiyanlou.com"/>
    <meta name="description"  content="A simple example"/>
</head>
<body>
    <a href="https://www.zxyaily.top">zxyaily</a>
</body>
</html>

HTML 块

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。
  • 常见块级元素： <h1>, <p>, <ul>, <table>。

内联元素

  • 内联元素在显示时通常不会以新行开始。宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变。
  • 常见内联元素：<b>, <td>, <a>, <img>。

HTML 布局（div，span）

table 元素布局：

优点：
1. 理解比较简单。
2. 不同的浏览器看到的效果一般相同。
缺点：
1. 显示样式和数据绑定在一起。
2. 布局的时候灵活度不高。
3. 一个页面可能会有大量的 table 元素，代码冗余度高。
4. 增加带宽。
5. 搜索引擎不喜欢这样的布局。

div 元素布局：

优点：
1. 符合 W3C 标准。
2. 搜索引擎更加友好。
3. 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4. 节省代宽，代码冗余度低。
5. 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

文本格式

标签                           描述
<b>                           定义粗体文本
<big>                         定义大号字
<em>                          定义着重文字
<i>                           定义斜体字
<small>                       定义小号字
<strong>                      定义加重语气
<sub>                         定义下标字
<sup>                         定义上标字
<ins>                         定义插入字
<del>                         定义删除字
赏

zxyaily