Head First 深入浅出HTML CSS

引子

HTML

当浏览器阅读HTML时，它会解析包围文本的所有标记。标记使用尖括号括起来的字母或单词，标记告诉浏览器文本的结构和意义。用包围文本的成对标记告诉浏览器网页的结构。元素=开始标记+内容+结束标记元素可以拥有“属性”：属性用来为一个元素提供附加信息。例如，如果有一个样式元素，属性允许你确切地描述这个元素——用来提供该元素的额外信息。

CSS

HTML ：超文本标记语言 HyperText Markup Language CSS：级联样式表 Cascading Style Sheet CSS是与HTML完全不同的语言。分别使用两种语言，HTML用于创建结构，CSS用于创建样式，使用它们在各自的领域完成工作。

深入理解超文本

使用

<a>

标签，创建超文本链接到另外一个网页，“a"元素中的内容在网页中是可点击的，Href属性告诉浏览器链接的目的地。

构建模块

步骤：先计划好网页的结构，再绘制略图，最后写HTML。
使用大的块元素来创建网页，然后用内联元素修饰。
通常使用最能匹配内容含义的元素。例如，当你需要列表时绝不用段落表示。

块元素：

都是块元素，它们独立显示，文本前后有空行。 内联元素：

是内联元素，这些元素的内容和其他内容一起跟随在文字流中。

q与blockquote

<q></q> ``` 引用标签：简短地“引用”现有文字的一部分 ```html <blockquote></blockquote>

区块引用：引用一大段文字并独立显示 blockquote和q是两种不同类型的元素，blockquote元素是块（block）元素而q是内联（inline）元素。 br元素：显示换行

li与ol元素

用li把每个列表项封入，每个li元素将在列表中开始一个列表项。 unordered list = ul** 无序列表 ordered list = ol ** 有序列表 list item = li 列表项 ol和li必须一起使用列表是一组项目：li元素用来确定每个项目，ol则是把它们组成一组。自定义列表dl：列表中每个项目都有一个项限dt和一个描述dd。

空元素

br是个“空元素”，它没有内容，且仅由一个标记组成。

嵌套

当把一个元素放入到另一个元素中，叫做嵌套。组织网页中的嵌套元素相当于画家族树。作用：防止标记不匹配。

部署与扩展

HTTP协议

HTTP协议是超文本传输协议，当找不到对应超文本时，返回404

a标签的扩展

目标锚：给出目的标识：

使用target（对象）打开一个新窗口：

target属性告诉浏览器在哪打开href属性

图像

浏览器遇到img标签时，需要进行特殊处理：浏览器必须先接收图像，然后才能在该页面上显示图像。 alt属性：一小段描述图像的文字，当图像不能显示时，用这一小段叙述代替原有的图像。

CSS

使用选择符+内容来定义样式若要使某类的元素拥有同一个样式，使用一个句点，并且接一个类名，则这个规则会适用于该类内的所有成员。常用规则： font-family 定义网页中的字体 font-size 控制字体的大小 color 文本的颜色 font-weight 设置字体