2018/1/18HTML打卡

今天进行《Head First Html 与 CSS》一书第三章的学习。

本章的内容较多，我个人认为可以分为两部分：

1.Web页面的规划。

2.规划中常用的一些元素。

第一部分简单概括：

一个好的Web页面要做到内容清晰明确，所以在创建Web页面前我们要规划好它的结构，这好比工人在建筑房屋时首先要搭建房屋结构然后再添砖，我们要做的是首先画一个草图，然后再创建一个略图，最后再写出HTML。

规划页面时，首先要设计大的块元素，然后用内联元素完善。

尽可能使用元素来告诉浏览器页面要表达的内容的含义，要使用与内容最接近的元素，比如书中说的，你需要表达成列表，就不要用段元素而是用列表元素。

本章所用块元素：<p>、<blockquote>、<ol>、<ul>、<li> 特点是：它们单独显示，在内容前后分别有一个换行

本章所用内联元素：<q>、<em>是内联元素。这些元素中的内容与其他元素中的其余内容放在一起。

块元素通常用作Web页面中的主要构建模块，而内联元素用来标记小段内容。

第二部分：

元素知识点总结：

<q> 使用这个元素提供引用。

void元素：没有任何内容，按理说，元素=开始标记+内容+结束标记，void元素没有内容和结束标记，只有开始标记，所以它是空元素。

<br>这是一个void元素，用来提供换行。扩展：<br>与<br/>意思相同，但<br/>语法更为严格。

<img>它也是一个void元素，用来在页面中包含一个图像，比如照片。

<em>标记你想用不同方式显示的文本，比如你想强调一个重点。

<strong>标记希望强调的文本。

<pre>希望浏览器按你输入的方式原样显示文本，使用这个元素来指定文本的格式。

<blockquote>用于长引用，就是你希望作为一大段文字来强调的内容，比如从书中节选出的一部分。

<ul>需要显示一个列表。比如菜单配料列表。

<ol>需要显示一个有序列表。

<li>对应列表中的列表项。

注意：<ol>和<li>(或者<ul>和<li>总是要一起使用，并且<ol>和<ul>设计为只能包含<li>元素，列表中可以再嵌入一个列表)，HTML中除了无序列表和有序列表外，还有定义列表。

<code>用来显示计算机程序代码。

<time>告诉浏览器该元素的内容是一个日期或时间。

嵌套的定义：把一个元素放置在另一个中称为嵌套。

练习截图：

代码：