HTML与CSS基础教程学习笔记（一）-----网页构造块和基本结构

第一章 网页构造块

---

网页主要分为三个部分:
文本内容（text context）；对其他文件的引用；标记（markup）

文件名和文件夹名

1.文件名采用小写字母
2.使用正确拓展名
3.用短横线分隔单词

URL （Uniform Resource Locator）

绝对路径：包含指向目录或文件夹的完整信息。
相对路劲：指向本页面同一目录下的xyz页面。

HTML：有含义的标记

基本 HTML 页面的语义

h1~h6:六个标题级数
img：插入图片
p：标记段落
em：斜体
a：定义链接
< br /> 换行
< hr /> 横线
b or strong:加粗
u or ins: 下划线

为什么语义很重要

语义化 HTML（semantic HTML）指的 是那些使用最恰当的 HTML 元素进行标记的 内容，在标记的过程中并不关心内容显示。

• 提升可访问性和互操作性（内容对于借 助辅助技术的残障访问者是可访问的， 同时对于台式机、手机、平板电脑及 其他设备上的浏览器都是可访问的）。
• 提升搜索引擎优化（SEO）的效果。
• 使维护代码和添加样式变得容易。
• （通常）使代码更少，页面加载更快。

第三章 基本HTML结构

网页的两个部分：head和body

在文档 head 部分，通常要指明页面标题， 提供为搜索引擎准备的关于页面本身的信息， 加载样式表，以及加载JavaScript文件（不过， 出于性能考虑，多数时候在页面底部 标签结束前加载 JavaScript 是更好的选择）。 d

body 元素包住页面的内容，包括文本、 图像、表单、音频、视频以及其他交互式内容， 也就是访问者看见的东西。

常见页面样式

一般的网页构造块主要有： header、footer、main、article、section、aside 和 nav 。

header 标签

定义文档的页眉（介绍信息）。

footer 标签

标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

nav 标签

nav 是标记导航标签，nav中的链接指向页面中的内容或其他页面或资源，在html5不允许在nav 嵌套在 address 元素中。 注：应该将网站全局导航设为 nav。

main 标签

规定文档的主要内容，对于文档来说应当是唯一的。

article 标签

表示文档、页面、 应用或网站中一个独立的容器，原 则上是可独立分配或可再用的，就 像聚合内容中的各部分。

section 标签

代表文档或应用的 一个一般的区块。注：区别 section 和 div ，section 表示页面中特定的区域，而 div 不传达任何语义。如果只是出于添加样式的原因要对内 容添加一个容器，应使用 div 而不是 section。

aside 标签

定义其所处内容之外的内容,可用作文章的侧栏，应放在 main 的内容之后。