《Head First HTML and CSS》 笔记1-全书看这个就行了
HTML忽略制表符 回车 和大部分空格
<!-- -->可多行
·利用HTML可以告诉浏览器页面的结构。什么是结构？这是一种标记文本的方法，通过这种方法，浏览器就能知道是什么是标题，哪些文本要作为段落，哪些文本是子标题。一旦浏览器了解了结构，它就能以一种更有意义、更可读的方式显示你的页面。
<body>页面主体，包含内容和结构。
<img src="xx.gif">元素=开始标记+内容+结束标记。匹配标记不需要在同一行上，因为浏不关心制表符回车和大部分空格。
·CSS（cascading Style Sheets）层叠样式表
要增加样式，在<head>里增加新的元素，就是<style>元素
·p30
<head>
<title>Coffee</title>
<style type="text/css"> <!--<style>完全可以无类型属性，所有浏览器都知道指的是css 另：注释是不能带>用字符缩写<和&g;？-->
body{
background=color:#d2b48c;<!--土黄色-->
margin-left:20%;<!--占页面的20%-->
margin-right:20%;
border:2px dotted blank;<!--IE无法正确显示页面主体周围的边框-->
padding:10px 10px 10px 10px;
font-family:sans-serif;
}
</style>
</head>
见P45、P49<img>独立和<p><img></p>的区别，效果也可见源代码的chapter2\completelounge\lounge.html 与 chapter2\lounge\elixir.html
<img src="images/drinks.gif"> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em><strong>Dance Dance Revolution</strong>. Wireless access is always provided; BYOWS (Bring your own web server). </p>
<p> <img src="green.jpg"> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root. </p>
·href属性指定链接的目标文件，<a href="beverages/elixir.html">elixirs</a>
href属性也可以指向PDF文档等各种各样的资源。
href进入向上一层文件夹：两句点<a href="../lounge.html">Back to the Lounge</a>。
<img src="../images/red.jpg">src也是两句点。
文件夹和文件名不要使用空格
·属性的写法都是一样的：属性名=“属性值”（双引号，但经测单引号也可以），属性间用空格间隔
·<img>、<p>、<h1>等元素，都可以放在<a>标记之间。不是所有元素都能放<a>里，哪些元素可放<a>里？
·在网站构建初期组织文件，这样就不用在网站升级时修改一大堆路径了。
见P57文件组织：D:\dinghongdebianchengzhilu\书 源代码\《Head first html and css》书的官网下载资料\chapter2\completelounge
·相对路径挑战：P70
·见P73，<a>包在块元素里（<a>在<p>里），上下文换行。a文本在不在p里,都在浏览器中宽度自适应
D:\dinghongdebianchengzhilu\书 源代码\《Head first html and css》书的官网下载资料\chapter2\completelounge\beverages
第三章 构建模块 Web页面建设（白话就是创建web页面）
从概念到蓝图：
1、画草图。
从大的结构元素来考虑页面的构成：标题、段落、图像等。效果见P80图，再与源文件 journal.html 对比。
2、创建基本构建模块（<h1><h2><h3><p>等块元素)
<q>在段落中引用老子的话
<p> Just the essentials. As Lao Tzu would have said, <q>A journey of a thousand miles begins with one Segway.</q> <!--去掉了双引号--> </p>
效果：带双引号，<q>是内联元素，在页面文本流中的行内出现。可放源文件journal.html 和P85 86
人们在文章中使用双引号的原因有很多，而<q>意味着这是一段引用文字。
·块引用<blockquote>
<blockquote> Passing cars, <br> When you can't see, <br> May get you, <br> A glimpse, <br> Of eternity. <br> </blockquote>
效果：<blockquote>是块元素，<blockquote>的文本会自成一段（前后都有一个段落），就像一个新段落，还会缩进。效果没有文章中的引号。
效果对比：分别见源文件 journal.html、P91、P80
一个块引用中有多段，怎么做到：
<blockquote><p></p><p></p><p></p></blockquote> 效果见源文件 journal.html
经测：<blockquote>在IE 谷歌 360都缩进，都不带引号
<q>在IE里没引号，在谷歌 360都是双引号
void元素：<img>、<br>、<hr>，可以简写成一个开始标记。
<ol><li>都是块元素，<li>也上下文换行。
经测，一个<ol>列表 若把<ol>标记删了，只有列表项<li>,则无缩进了，且序号变点。可用源文件 journal.html 测一下
·<ol>和<li>（或<ul>和<li>）总是一起使用，分开就没有任何意义了。
除了<ol> <ui> 外，还有一种列表-定义列表<dl>：定义术语<dt>、定义描述<dd>。见P106
经测：<dt>和<dd>都没有宽度自适应
<dt>无缩进
<dd>有缩进
若把<dl>标记删了，对<dd><dt>及整个页面都无影响。但删除没意义，本来<dl>定义列表<dt>定义术语 <dd>定义描述 就是代表结构和特定内容。我只是测测。
p106效果见第三章源文件
在页面中提到<html>用字符实体
The <html> element rocks.
&-&
元素<code>用来显示程序代码。效果：字体更小。
<em>强调一个要点，<strong>强调的文本。
嵌套元素：小。包含在另一个元素中的元素
内联元素:<em><q> <img><input>
块元素：<blockquote> <ol> <ul> <li> <h1><p>
另外：<a>即可是inline,也可是block。因为<a>看起来inline，但<a>还可以包含块元素，而不只是文本。所以根据上下文<a>即可是inline,也可是block。
<a>内容里可以是图像，HTML5进一步更新，现在还可以从块元素（<blockquote><p>）创建链接！
<br>是块元素和内联元素的一个模糊地带，<br>确实能创建一个换行，但不会像有两个<p>一样把文本分成单独的两块。见源文件效果D:\dinghongdebianchengzhilu\书 源代码\《Head first html and css》书的官网下载资料\chapter3\journal
P123-133主要内容从计算机搬家到服务器，此处略。
/在URL中表根文件夹，见P133服务器组织文件图
·绝对路径告诉服务器如何从你的根文件夹到达某个特定的页面或文件。
·默认文件名 index.html default.htm
在告诉别人你的URL时，最好不要加 index.html ，因为一旦你更换服务器，而它使用另一个默认文件名如 default.html，或者你开始写脚本，用index.php 作为默认文件，你原来给的URL就不再有效了。
·URL挑战练习P140
·URL与绝对路径的区别：URL是整个，绝对路径是协议（HTTP）和网站名之后的最后一部分 效果见P134 P137
·相对路径只用来链接web上的同一网站内的页面，而URL通常用来链接其它网站。
如果一个网站都是用URL链接到本地页面，移动这个网站或者改变它的名字时，就必须修改所有这些URL来反映新的网站位置。如果使用相对路径，只要页面仍在原来的文件夹中，就不必对<a>元素的href属性做任何修改，因为链接都是相对的。所以使用相对链接来链接同一网站中的页面，而是用URL来链接其他网站上的页面。
·因此，CWD公司要做的仅仅是在一些页面上更新公司名字。P154
<p> <a target="_blank" href="mission.html">Read about our Mission</a>. <br> Read the <a target="_blank" href="http://wickedlysmart.com/buzz/#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>. </p>
摘自D:\dinghongdebianchengzhilu\书 源代码\《Head first html and css》书的官网下载资料\chapter4\starbuzz index.html文件
<a>元素有一个title属性，title属性值是所要链接的页面的文本描述。通常建议title属性值与所链接的Web页面的<title>元素值相同。这不是一个严格的要求，在title属性中提供你自己的更具体的描述可能更有意义。
鼠标移动到链接上时，工具提示（谷歌 IE 360都有）、大声读出
可以为任何元素增加title属性
P134-148可见书绿笔
<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。
提示：<i> 标签一定要和结束标签 </i> 结合起来使用
<hr>水平线
如何用id链接到元素
1.明确Coffee标题的id（源码的buzz文件夹里的index.html文件）
</p> <h3><a id="Coffee">Coffee</a></h3> <p>
2.另外一个文件中的<a>指向目标标题（源码的starbuzz文件夹里的index.html文件）
P153 <a target="_blank" href="http://wickedlysmart.com/buzz/#Coffee"<!--buzz/#Coffee"中间一定有/，否则浏览器会帮你在URL末尾加斜线，这有可能取代id引用。 title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
<a target="_blank" href="http://wickedlysmart.com/buzz/index.html#Coffee"一样
指向相同文档中某个目标的链接，如何做？先定义一个目标id,再：
<a href="#top">Back to top</a>
<a>元素的href属性中可以使用相对路径或URL来链接其它Web页面。对于你的网站中的其它页面最好使用相对路径，对外部链接才使用URL。
可以为任何元素增加id属性，那么定义一个<em>（或<q>)的id就可以用<a>链接到段落中间，通常不太需要这么做，我是说可以这么做。
id名一定用字母开头（A~Z或a~z）,后面是任意字母、数字、横线-、下划线_、冒号或点号。不能使空格 $ 可以是J-M J_M
使用target打开新窗口
<a target="_blank" href="http://wickedlysmart.com/buzz/#Coffee"<!--buzz/#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>
target会告诉浏览器页面的目标窗口。如果用"_blank"作为目标，浏总是打开一个新空窗口显示页面。即使多个<a>元素都有target，也总是打开一个新空窗口显示页面。这是因为为target指定一个特定名字时（如"coffee"），实际上就是在对显示链接页面的新窗口命名。"_blank"则是一种特殊情况，告诉浏览器总是使用一个新窗口。
各种协议：P159绿星
页脚，效果见D:\dinghongdebianchengzhilu\书 源代码\《Head first html and css》书的官网下载资料\chapter4\buzz 且这个文件的样式
#content {
margin: auto;
width: 75%;
}
，可以学完CSS看看。
<hr> <p id="footer"> All text is available under the terms of the <a class="wiki" href="http://en.wikipedia.org/wiki/Wikipedia:Text_of_the_GNU_Free_Documentation_License">GNU Free Documentation License</a> (see <b><a class="wiki" href="http://en.wikipedia.org/wiki/Wikipedia:Copyrights">Copyrights</a></b> for details). WithThanks to <a class="wiki" href="http://en.wikipedia.org">WIKIPEDIA</a> for content. </p>
<a>元素包围文本时，会有一个下划线（谷歌 IE 360都有）
以上，是P1~162全部内容。