HTML基础学习（二）

HTML(二）

1. HTML列表

2. HTML元数据

3. HTML块

4. HTML布局

5. 文本格式

6. 文档和网站架构

HTML列表:

有序列表（ol）,无序列表(ul）,自定义列表(dl)
ol:type,start
ul:type:disc,circle,square
dl:dt,dd

HTML元数据

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

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

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布局

table元素布局：

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

div元素的布局:

• 优点:
• 1. 符合 W3C 标准。
  2. 搜索引擎更加友好。
  3. 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
  4. 节省代宽，代码冗余度低。
  5. 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。
  6. 注：DIV+CSS 并不是要我们抛弃 table，因为 table 在显示数据时更加方便，因此我们要根据实际情况灵活应用。

文本格式

定义：文本格式其实就是文本的样式，比如说文章的换行，文字的加粗，斜体等等类似这些的，都是文本格式，这些都是通过文本格式标签实现的。

常用的文本格式化标签：
标签 描述
< b> 定义粗体文本
< big> 定义大号字
< em> 定义着重文字
< i> 定义斜体字
< small> 定义小号字
< strong> 定义加重语气
< sub> 定义下标字
< sup> 定义上标字

文档和网站架构

标题

通常在顶部有一个大标题和（或）图标。 这是一个网站的主要常见信息，通常存在于每一个网页。

导航

提供跳转到网站不同内容的链接；通常由菜单按钮、链接或选项卡表示。

主要内容

中心的一个大区域，包含给定网页的大部分独特内容。

侧栏

一些次要信息、链接、引言、广告等。

页脚

横跨页面底部的条纹，通常包含精美的打印、版权通知或联系信息。

HTML标记：

• 标题：< header>
• 导航栏：< nav>
• 主要内容：< main>具有代表性的内容段落主题可以使用 < article>, < section>，< div>元素。
• 侧栏：< aside>经常嵌套在< main>中
• 页脚：< footer>