本篇文章为《Head First HTML,CSS AND XHTML》一书的读数笔记，仅供学习使用--严禁转载
HTML：hypertext markup language
超文本标记语言，一种语言，也是构成网页文档的主要语言。定义了基本的标签和元素，浏览器可以识别标签，并合理显示出来，HTML就是负责网页的结构方面。
一 要点:结构，标记，元素，链接，路径
基本结构：非严格的HTML
<html> ?????<head> ???<titile>....</title> ???<style type="text/css"> ???????body { ???????????background-color: #d3b48c; ???????????margin-left:20%; ???????????margin-right:20%; ???????????border: 5px dotted gray; ???????????padding: 10px 10px 10px 10px; ???????????font-family: dans-serif; ???????} ???</style></head><body> ???<h1>...</h1> ???<img src="tupiam.gif/jpg"> ???<p>....<!仅注释自己看的>...<em>斜体斜体斜体</en>.......... ???...........<a href = "xxx.html">被链接</a>...................... ???...................................</p> ???<h1>...</h1> ???<h2>...</h2> ???<p>.........</p></body></html>`- 从上面可以看出，有以下特点：
html, head, title, body, h1, p，a, img, hr, em, strong等都是是基本的标记符，靠这些标记和浏览器进行交流，这些标记符都是有头有尾。- 元素 = 开始标记符+内容+结束标记符，HTML主要作用就是定义了这些元素，用来和浏览器进行交流。
- 文本内容之间的单个空格、多个空格、换行，在显示的时候都成为单个空格
二 结构:结构，标记，元素，链接，路径
基本内容：
a.内联元素，q(quote引用"")的使用b.块元素，blockquote的使用注意：结合`<p>...</p>`才能将引用块独立起来！！！c.空元素独个换行，与`</p>...<p>`的区别。介绍一下概念：内联元素--属于元素一种，位置一般是在文本中间，随之流动的，有a, img, q, strong, code, br, hr等；块元素--除了内联元素，其他的都是块元素了。
HTML列表:有序、无序和自定义列表:
a.有序列表： ???<ol> ???????<li>...</li> ???????... ???</ol>b.无序列表：ol改为ulc.自定义列表：元素
1.<style>样式元素，<style type=‘text/css‘>...</style> #type属性2.<a>,<a href=‘xxx.html‘>the context will be a linking</a> #href属性 ,hyper reference超链接3.<img src = ‘a/b/pic.git‘ wigth=‘40‘ high=‘20‘ alt=‘something‘> #img元素的src属性，当图片无法显示时显示alt消息作为提醒4.<q>, 双引号表示引用，<q>To be or not to be</q>5.<blockquote>,大段落的引用，<blockquote>......</blockquote>#说明，blockquote是块元素，它的前后自动有换行符，q是内联元素（online），在文字中流动的。#块元素特立独行，内联元素随波逐流6.<br>, 独立一个起换行作用7.</code>,</em>,</address>,</strong>,<hr>该行文字上方一条水平线</hr>8.<a id=‘python‘>Book:python</a>...#id属性, 作为目标锚，在另外一个页面下，<a href=‘allbooks.html#python‘>点击我查看python书籍描述</a>9.<a target=‘_blank‘ href=‘xxx.html‘>...</a> #target属性值为_blank就可以在新的标签下打开页面了。10.<a herf=‘xxx.html‘ title=‘查看帮助‘>...</a> #title属性就是鼠标放在上面自动出来的提示。11.<img href=‘images/red.gif with=‘40‘ alt=‘一个红色图片‘>图片显示错误的时候显示alt内容‘12.缩略图转向原图显示：缩略图页面下 <a herf=‘myphoto.html‘ target=‘_blank‘ atl=‘查看原图‘><img src=‘../thu-myphot.gif‘></a>在myphoto.html中，有<img src=‘../myphoto.jpg‘>#需要注意的是，原图和缩略图是两个独立的图片，这样做的目的是为了避免原图太多造成阅读不便、不美观。- 严格HTML 4.01的基本规范，从元素角度来说，将块元素各个分开来，分的越开越好，如下：
- html, head, body最基本标记不可少；
- title，style标签滚定在head中；
- body就是用p,blockquote,h1有内容的块元素填充；
- 块元素决不能在p中。
- blcokquote中只能是块元素
- 内联元素相互嵌套要小心！
- XHTML 1.0大概就在HTML4.01基础上有一些额外的修改，如：
- 将DOCTYPE改为严格的XHTML1.0；
- 添加xmlns、lang属性到元素中；
- 所有的空标记都以
/>
结尾，而不是>
,如<img src=‘../abc.gif‘ /> 说明，这里仅仅作为介绍。目前无视吧。
CSS
cascading style sheet，层叠样式表，层叠的意思就是一个元素前后附加多个样式，对于某个元素来说，若是其前后样式表中某个属性有重叠部分，如p元素，前面样式表中color=‘red‘, 后面样式表中又定义了color=‘maroon‘，那么后面会覆盖之前样式。样式表，就是我们一个.css文件吧，其中集成了我们所有的样式。
打个比方，HTML负责网页结构的，好比一个房子，其中head是屋顶，body是房间等，css就负责装饰美化，我们取出来一个房间来装饰，或者干脆将一个窗帘元素
赋予color=‘marron‘属性装饰起来。
最基本的用法，在head头部，添加style元素，将所有样式放进去即可，有明显很多缺点：
<!DOCTYPE html><html><head> ???<title>For example</title> ???<style type="text/css"> ???????body {background-color: maroon; ???????????font-family: sans-serif; ???????????margin-left: 20%; ???????????margin-right: 20%; ???????????padding: 20px 10px 10px 10px /*上右下左*/ ???????} ???????h1, h2 { ???????????font-size: 170% ???????????color: #25d54a; ???????} ???????h2 { ???????????font-size: 150%; ????????} ???</style></head><body></body></html>缺点明显，1.css穿插到HTML中，不利于工作的分工；2.复杂css 样式添加进去，影响HTML的阅读性；3.css样式的使用率不高，最好的办法是独立出来，链接到HTML中，方便统一样式和管理修改。
- 继承属性，这个和层叠含义很相似，就是元素可以继承父类的属性赋值。
- 自定义元素类。HTML定义了一部分元素类，但是也不能满足我们的全部要求，这个时候，进化版本XHTML出来了，可以自定义元素类，详见下面。
一个网页，不同的p元素需要不同的属性，这个时候，自定义类的优点就出来了。
index.html 文件<html>...<p class="red" >The paragraph are red</p>...<p class="blue" >The paragraph are another color, blue</p>...</html>index.css 文件p.red { ???color: red;}p.blue { ???color: blue;}#同一个类的所有元素应用，有简写方法.black { ???color: black;}
常见属性：
1.background-color :元素背景颜色；2.background-image：url(photo/background.gif);2.color： 文本元素颜色；3.font-family: 文本字体样式；4.font-size: 文本字体大小 170%，1.6em;5.font-weight: 文字粗细；6.line-height: 文字行间距；7.letter-spacing： 字母之间 的 距 ?离；8.border：元素周围边框 1px solid black;9.margin: 元素周边的空白；10.padding： 补白；- 字体样式、颜色等详细介绍
- font-family:字体；字体样式如 arial;
body {font-family: Verdana, Arial, sans-serif;} - font-size: 字体大小; 浏览器默认是16px大小。一般有em, %, px, 关键字（small，medium）三种表示。扩充一下
h1-200%,h2-150%, h3-120% - font-weight: 字体粗细;
有lighter， normal， bold, bolder - text-decoration: 其他样式；
有none, underline, overline, line-through, blink - font-style: 字体样式;
如 italic, oblique, - line-height:1.6em；
- font-family:字体；字体样式如 arial;
- 字体颜色：
- 颜色名字来定义，16中颜色。
如 blue，red... - 用rgb比例表示，
color: rgb(80%,20%,50%);或者background-color: rgb(250,200,0);等。 - 十六进制代码定义颜色，
如#cc6600;分别是红绿蓝，每种颜色两个代码。
- 颜色名字来定义，16中颜色。
盒模式
the box model,在CSS看来，它把每一个单一的元素看成是一个盒子。一个盒子有内容区、补白、边框和边界四个主要区域。盒子的作用，就是为了改变浏览器的默认布局！另外还有一个就是背景图片设置。基本上就是这五个内容了。
.guarantee { ???????????/*边框*/ ???????????border-color: ?black; ???????????border-width: 1px; ???????????border-style: dashed; ???????????border-right-width: thick; ???????????background-color: #a7cece; ???????????/*补白默认顺序是上右下左*/ ???????????padding: 25px; ???????????padding-left: 80px; ???????????/*边界margin*/ ???????????margin: 20px; ???????????margin-right: 35px; ???????????/*背景图片*/ ???????????background-image: url(photo/1.gif); ???????????background-repeat: repeat; ???????????background-position: center; ???????}- 重点是理解盒模式概念，最终还是落到了具体属性的设置。
- 在这一章穿插了id属性，还记得
<a id=‘python‘> Book:python </a>来添加目标锚嘛？现在升级了另外一种方法，就是像类一样使用<p id=‘footer‘>A example</p>，这样设置的话，我们就可以在样式表中操作了p#footer {...}或者 #footer{...}和普通类有细微的差别。想想id属性和class属性什么时候用比较好？（id属性添加到p元元素中，效果和class一样，二者差别就是id一般作用对象是单个的，具体性更强从id赋值可以看出来去用途；而class呢，范围大了，我们可以多处定义一个class=‘example‘类，这样我就可以一起操作其属性。） - 问题，元素的宽度怎么算？？？
div和span
对于XHTML来说,<div>和<span>元素的作用十分强大。前者作用于块元素，后者作用于内联元素。
<div>就是一个容器，简单地说，可以装下很多块元素，这样一个<div>元素就是一个大大大大大大大的块元素了，也就是逻辑部分，我们可以定义div属性，得到我们希望的效果。常用属性有
注意：在这里，再次出现id属性！！！联系前面的html文件：<div id=‘example‘> ???<p>.... ???<h2>... ???<blockquote>... ???<p>...</p></div>css文件：#example { ???????border-width: thin; ????????border-style: solid; ???????border-color: #007e7e; ???????width: 200px; ???????padding: 20px; ???????padding-top: 0px; ???????margin-left: 20px; ???????text-align: center; #注意这个属性text-align. ???????line-height: 1.7em;}#example h2 {...;}<p id=‘example>...和<p class=‘example‘>分辨一下。元素div说到底，最终还是一个块元素，自带一些确定-为了避免块元素的缺点（前后自带换行等），出现一个span元素了，作用于内联元素。
HTML文件：<ul> ???<li><span class="book">web开发 </span>, <span class="author">张三</li> ???<li><span class="book">大数据 </span>, <span class="author">李四</span></li> ???<li><span class="book">爬虫 </span>, ??????<span class="author">老王</span></li></ul>#css文件：/*span元素使用*/ ???.book { ???????font-style: italic; ???} ???.author { ???????font-weight: bolder; ???}注意：从span到div我们可以看出来，二者的作用就是集合多数对象的属性，可以批量更改属性
- div和span对比：
- 前者使用id属性，后面使用class属性；
- 前者作用很很强大，后者怎么感觉和内联元素em, strong相似呢；--主要是为了批量处理。
伪类，这个书本拿一个连接来说，在点击之前、正在点击、之后，链接颜色是不一样的，浏览器有自己一套默认的规范，暂且不更改吧。
排版和布局
- 流，浏览器用流来布置页面上的XHTML元素，浏览器从XHTML文件的开头开始，从头到尾跟着元素的流显示，它遇到的每个元素，比如块元素，就会有换行（两个元素之间必须有换行）。一直到末尾。这就是流。
- 漂移，在流中，我们的元素就可以漂移了。float属性！！！
- 排版-分栏：
- 详细的过程没必要列出，作者给了一个例子，就是分栏，左右两栏。自己尝试，失败了，对照了书本知道了问题的根源--作者在这里将body元素划分为两个div元素。
- 到这里，body内容划分为两个div 元素：sidebar和main，从页面看出，这两个元素的相对关系了。和之前很不一样，现在在css样式表中，body的属性值有很大的变动-属性种类减少很多。更多的是将属性选项赋予给了那两个元素，这样也符合其思想：合久必分，分久必合。有点扯了。回想起来，最开始，我们贪心地将body作为一个基准，里面赋予了绝大多数的属性。后面的h1，p等元素再层叠覆盖。现在呢？？？为了达到我们需要的分两栏效果，又把body拆分为两个div元素，和前面理论相悖。总体来说，为了达到目的，选择最合适的办法吧！
- clear属性，留着再说吧，时间不够！
- auto凝胶物，流动和冻结设计，float和absolute，
- 表格table，简单的要素caption，td, th，比较复杂的合并单元格样式。
交互工作
- 表单：表单就是带有一块输入信息区域的网页。当提交表单时，表单中的信息被打成一个数据包发送给web服务器，web应用程序对之进行处理。
- 表单的工作：在浏览器中加载含有表单的网页-输入数据-提交submit表单-服务器的响应。
表单几种类型：
<form action=‘下一步操作，常见的就是一个处理方法或者一个url‘ method=‘POST‘ ><p> ???邮箱：<input type="text" name="email" /> <br> ???密码：<input type="password" name="password"> <br> ???<input type="submit" value="确认"></p><p> ???是否包邮？<br> ???<input type="radio" name="itrable" value="yes" checked="" />包邮<br> ???<input type="radio" name="itrable" value="no" ?>不包邮<br> ???<input type="submit" value="确定." /> ????</p><p> ???调料选择（可选多种）：<br> ???<input type="checkbox" name="flavor" value="11" checked="" />辣椒<br> ???<input type="checkbox" name="flavor" value="22" />大蒜<br> ???<input type="checkbox" name="flavor" value="33" />葱末<br> ???<input type="submit" value="确定."></p><p> ???赠品（选一种赠品）：<br> ???<select name="gift"> ???????<option value="11">袜子</option> ???????<option value="22"> 纸巾</option> ???????<option value="33">礼品袋</option> ???</select></p><p>写下你的建议，我们将尽心为你服务：<br><textarea name="doc" rows="10" cols="48" >...</textarea></p>注意几点：
- name属性在每个表单元素中都可以赋值，代表的是变量名。但是对submit来说，name没有必要添加了。
- value属性要注意，本质代表的是上述变量的值。普通的单个文本框没有添加value属性；对于单选、多选、以及select都有的。
- 单选、多选以及select中，name代表的变量名都是一致的，name即是变量名，代替的是提交的value数据包。3/1/2018 11:41:03 AM 增
- 接上面，name代表的变量名是一样的，其目的是就是在实现交互公共的前提下，减少变量的数量。
- 将表单的method变为get，点击提交按钮就可以在地址栏的url中看到用户输入的信息了-明文传输。
12/5/2017 1:37:27 PM
<label for=‘ ‘>标签，是为与其相关的input元素进行标注，其for属性和input元素的id属性应该一致。本身不呈现显示效果，当你点击label元素内的文本时，浏览器就会把焦点转到对应的表单控件上。在这里，就是input元素了。3/1/2018 2:11:34 PM#上例代码<form><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /></form>