第2章 html与css文件格式概述
注：文本中所有的空白，包括空格和回车，无论多少个连在一起，都会被视为一个空白，如果想显示额外的空格和换行符可以用<pre>
2.1.4 标签标准属性
1.核心属性（几乎所有标签都适用）
1.class：表示所属的类，一个标签可以属于多个类，类名用空格分隔。
2.id：该标签的唯一标识符。
3.style：指定CSS样式(属于内联样式表)
4.title：为此元素提供一个文本标题，其作用是在网页内当鼠标停留在此元素上时会有悬浮的提示框，提示框里的内容即为title内的文本。
2.国际化属性（用于适配多语言环境）
1.dir：控制文本的阅读方向，ltr为从左到右，rtl为从右到左。（此属性通常不用，因为语言的方向由lang属性控制）
2.lang：说明文本使用的语言
3.xml:lang：lang的xml形式
3.焦点属性（当此元素被选中时即拥有焦点，如表单控件被选中时）
1.accesskey：指定键盘快捷键。
2.tabindex：使用tab键时所采用的访问顺序。
2.1.5 注释
<!—注释内容-->
2.2XHTML文档结构
2.2.1 Doctype 文档类型声明
在一个文档的第一行首先出现，用来告知浏览器此文档所使用的规格，以便浏览器正确渲染。严格上不属于文档内容。
2.2.2<html>元素
文档实际开始的地方，包括多种属性：
1.lang和xml:lang：从全局上指定文档中文本的语言。
2.2.3 其他部分
文档的其他部分由head和body元素组成。head包含文档的自身信息，body包含页面的内容。
总而言之，html文档的结构十分简单，一个文档类型声明，一个<html>根元素，一个<head>元素，一个<body>元素。
2.3 CSS文档
2.3.1 语法规则剖析
CSS语句示例：body{background-color:white;}
一条CSS语句包括如下结构：
1.选择符：确定样式的应用范围。
2.样式声明：包括两个部分，属性和值，属性和值用冒号:分隔，样式声明用分号；结尾
2.3.2 CSS选择符
声明选择的元素，确定应用范围。通常相比之下范围不具体的语句会被范围更具体的语句所代替。
1.全体选择符
用一个星号*表示，可理解为通配符，最不具体。
2.元素选择符
选择某一类元素，包括该元素种类下的所有元素。
3.类选择符
通过标签的class属性来确定。以一个圆点.来开头，如：
.info{color:red}范围包含了属于info类的所有元素。
4.ID选择符
只以特定元素为目标，以井号#开头，
5.伪类选择符
类似于类选择符，但只在特定状态下激活，以冒号(:)开头。
:link{color:red;}选择所有的超链接；
:visited{color:red;}已经被访问过的链接（以访问过的链接被记录于浏览器的历史记录中）；
:active{color:red;}处于活动状态的链接（鼠标点击链接时）
:hover{color:red;}用户的定点设备悬浮其上时
:focus{color:red;}作为焦点的元素
6.后代选择符
将上述选择符组合起来以后代层次逐步缩小范围，如*.aaa p{color:red;}表示全体(*)中类为aaa(.aaa)的p(p)元素。
7.分组选择符
多个项目，用逗号(,)分隔。
注：当多个CSS语句具有相同的具体程度时，靠后的语句会把之前的语句的效果覆盖住。
2.3.4 在文档中使用样式表
若要在文档中使用样式表，需要建立二者的关系，其方法有如下几种：
1.内联样式
为元素加入style属性，这种方式直接指定了元素，所以不需要选择符。
2.嵌入式样式表
把样式表嵌入到文档的<head>中。
3.外部样式表
一个独立的文件，扩展名为.css，文档通过head中的link元素来链接它。
2.3.5 层叠顺序（链接多个样式表时的应用顺序）
多个外部样式表通过在文档中的链接声明位置来确定，后面的会覆盖前面的。嵌入式样式表在所有外部样式表处理之后处理，内联样式最后处理。
此外，除上述作者样式表之外，还有浏览器样式表和用户样式表。
总而言之，最靠近元素的样式表获胜。
2.3.6 !important
确保某个样式一定被应用，可用此关键字强制将此样式的地位提至最高。
使用方法：h1 {color:red !important;}
2.3.7 注释
CSS的注释格式与c语言一样
/*注释内容*/
第3章进阶-<head>
<head>中的内容除了title之外并不会被显示在屏幕上。
3.1 head节中的辅助性元素（多是自闭和元素）
1.<base>(可选)
包括href属性，用于指定基础url，类似初始目录，可以使其他的地址目录输入变得简短一些。
2.<link>
定义两个链接在一起的文档之间的关系，例如在html文档中链接样式表，属性包括：
- charset：设置所链接的文档使用的字符集。
- href：所链接的文档的url。
- media：说明所链接文档的类型，常见之包括all、braille、print、projection、screen、speech。
- rel：定义所链接到的文档与当前文档之间的关系，常见值包括alternate、appendix、bookmark、chapter、contents、copyright、glossary、help、home、index、next、prev、section、start、stylesheet、subsection。
- rev：与rel相反，定义当前文档与所链接的文档之间的关系。
- type：指定目标url的mime类型。最常见的包括用于外部样式表的text/css，用于js的text/javascript和用于GIF图像文件的image/gif。例如要链接到一个外部样式表：
<head>
<link rel=“stylesheet” type=“text/css” href=“main.css” />
</head>
3.<meta>
metadate(元数据)的简写，提供关于这个文档的信息，为搜索引擎提供关键词。
- content（必须属性）：相应的内容。
- http-equiv：指定动作型事件，content为动作参数。
- name：指定文本类型，content为该类型下的内容，类型包括author、keywords、description、summary。
- scheme：定义用来解释content属性值的格式。
例子如下：
- 如果想为搜索引擎提供关键词线索，可以将内容的信息类型设置为keywords，然后添加内容<meta name=“keywords” content=“html” />
- 或者为搜索引擎提供一个简短的描述<meta name=“description” content=“this is a webs about html” />
- 使用http-equiv可以指定动作，如果指定类型为refresh，则表明要求网页定期刷新，例如要求网页15秒刷新一次<meta http-equiv=“refresh” content=“15” />
4.<script>
可以为文档加入某些脚本。包括如下属性：
- type（必须）：说明包含脚本的mime类型。使用javascript时需设置为text/javascript
- charset：说明脚本所用的文字编码
- defer：告知该脚本不产生文档内容，所以他可以继续解析和绘制页面。
- src：一个指向包含脚本的文档的URL。
- Xml：space（标准属性）
5.<style>
为文档创建内部样式表，有如下属性：
- type（必需）定义样式表类型，几乎总是text/css
- media：说明样式影响的是那种媒体。包括screen、print、tty、他 v、projection、handheld、braille、aural、all。all是其默认值。
其中，meida可以设置当页面被用作不同的工作时的样式，例如，想在屏幕上显示的时候用绿色背景，而在打印时使用紫色：
<style>
@media screen {
*{ line-height: normal; font-family: Helvetica; -webkit-font-kerning: none;">;}
}
@media print {
*{ line-height: normal; font-family: Helvetica; -webkit-font-kerning: none;">;}
}
</style>
6.<title>
提供一个页面标题
第4章添加内容-<body>
4.3 富有意义的部分
4.3.1 段落<p>
4.3.2 标题<h*>
根据重要性不同共有6个级别，其中，习惯上h1只出现一次。
4.3.3 长引用<blockquote>
其中，cite属性用于指明所引用的URL。
4.3.4 署名<address>
4.3.5 原格式段落<pre>
顾名思义，<pre>块内的回车和空格被如实显示。
4.4 列表
多个相关项(<li>)的集合。类型有三种：无序列表ul、有序列表ol和定义列表dl。
4.4.1 无序列表<ul>
每个列表项由li元素定义，该块的开始标签和闭合标签之间只能包含li元素，文本和其他元素除非在li元素内，否则也不能独立出现。如：
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
其中，可以用CSS将默认的项目符号改为其他。
4.4.2 有序列表<ol>
同上，除项目符号变为序号。
4.4.3 列表项目<li>
列表里的项目块，里面可以包含任何元素，甚至嵌套各种列表元素。当嵌套列表元素时，项目符号会发生变化。
4.5 定义列表<dl>
由待说明的词条dt和其说明dd组成。
4.5.1 <dl>
一个定义列表
4.5.2 <dt>
待说明的词条
4.5.3 <dd>
对仅靠其前面的dt元素的说明。
4.6短语元素
4.6.1 强调<em>
强调或是以斜体表示，或是在屏幕阅读器中大声朗读。
4.6.2 着重<strong>
着重强调大多为粗体表示
4.6.3 资源引用<cite>
例如引用作者或标题，通常斜体显示。
4.6.4 短引用<q>
和blockquote相对，一般会自动加上双引号。
4.6.5 定义<dfn>
新名词的定义，通常和title属性搭配，表示为斜体。
4.6.6 缩写<abbr>和<acronym>
缩写和首字母缩略词，其中，缩写无法读成单词，而首字母缩略词可以。通常和title属性搭配
4.6.7 修改文档<del>和<ins>
删除或插入内容，其中，<del>中的内容一般会有删除线，<ins>中的内容一般会有下划线。
4.6.8 反方向段落<bdo>
可以控制方向，由必需属性dir决定，ltr或rtl。
4.6.9 代码相关<code>、<kbd>、<samp>、<var>
4.6.10 换行符<br>
注意：该标签为自闭和标签！
4.6.11 分割线<hr>
注意：该标签为自闭和标签！
4.7 多用途元素
4.7.1 整合分块<div>
将一些需要独立内容独立出来并用<div>作为容器来整合起来，常常与ID属性组合使用。
4.7.2 文本分块<span>
4.8 嵌入外部内容（进阶使用）
页面可能会要求嵌入图像、音频等其他文件，这些文件独立存放，并通过一些嵌入标记来引用并同html内部元素同等被操作和设置。
4.8.1 <object>
4.8.2 <param>（自闭和元素）
4.9 表现型元素（不推荐使用）
与可以更改其现实样式且具有用途描述作用的元素（如<h*>、<em>）相比，表现型元素尽具有更改显示效果的作用，故不推荐使用。
4.9.1 斜体<i>和加粗<b>
4.9.2 <big>和<small>
4.9.3 打印机（等宽字体）<tt>
4.9.4 上标<sup>和下标<sub>
4.10 显示关键字符
对于<、>等作为关键符的符号，若要让其出现在文本中，则需要字符引用（相当于转义符）
4.11 在<body>中使用CSS
4.11.1 字体样式控制
1.字体族
字体族是一个字体的所有变种的集合，包括粗体，斜体等等。在CSS中用font-family属性声明字体族，并在后面写下想用的字体族名（多个名之间用逗号分隔，依据顺序确定优先级）。浏览器会根据顺序一次检索机器中是否包含该字体文件，如果包含则使用。
注：只有当一个字体族名包括多个字母时才用双引号扩起来，否则不要使用双引号。
通用字体族：当明确需要某些样式时，为防止所声明字体都不包含在客户机器中而出现的样式错误，可以使用通用字体族，这将保证即便所有指定字体都不存在导致浏览器使用默认字体时也会表现出指定的样式（如有无衬线、是否等宽）。
CSS定义了5种通用字体族名：
- serif：有衬线。
- sans-serif：无衬线。
- Monospace：等宽。
- cursive：仿手写字体。
- fantasy：花体。
2.字体大小
使用font-size声明，除了输入大小之外，还可以用百分比表示，含义是指定大小为从祖先继承下来的值的百分比。字体大小单位可以是像素、毫米、厘米、英寸、磅、pice、em、ex或百分数，
此外，还可以用预定义的关键词：xx-small,x-small,smll,medium,large,x-large,xx-large。
3.行高
用line-height声明。单位有em和百分数。
4.11.2 列表样式控制
1.无序列表的项目符号
用list-style-type声明，属性值可以是：disc（默认的实心圆）,circle（空心圆）,square（实心方块）和none（无符号）。
2.使用图像作为项目符号
使用list-style-image声明，属性的值是url(“位置”)形式的，如下：
ul{list-style-image: url(“/image/a.gif”);}
3.有序列表的样式
在有序列表中，list-style-type的值有：upper-roman,lower-roman,upper-alpha,lower-alpha,decimal(默认值)。
第5章使用图像
5.2 在内容中加入图像
内容中的图像相当于一个占位符，设备首先在服务器上下载html文档，但发现图像标签时根据属性标示的位置从服务器下载图像并替换掉这个元素标签。
5.2.1 <img>（自闭和元素）
相当于一个占位符，有两个必须属性src和alt，src表示文件来源，即文件位置URL；alt为当图片无法显示时的替换文字。
可选属性如下：
width：宽度，单位像素。
height：高度，单位像素。
ismap：声明图像要被用于服务端图像映射。
usemap：确定所使用的服务器端图像映射。
longdesc：指定包含对图像的详细说明的文档的URL。
5.2.2 上下文中的图像
有两种方法将img标签嵌入文字中，直接嵌入文字<p>标签内和单独包含于<div>块中。第一种会把图像看作文字处理，使图像与文字同一基准线，第二种可以使图像和文字分离显示。
5.3 让文字环绕图像
使用CSS中的float属性实现。float有三种值：left、right、none，前两个分别让图像靠左或靠右，而none表示现实样式由CSS中的另一条语句设置。
在实际现实中，需要让图像和文字有一点点的空隙，这可以用margin-*设置，如果float为left，则需要在右侧和下侧设置一些空白，这时可以设置{margin-right: 1em;margin-bottom: .5em;}
5.4 背景图像
使用CSS中的background-image属性声明，属性值为图像url。其中，background-repeat可以设置平铺方式：repeat-x表示只在横向平铺，repeat-y表示只在纵向平铺，默认值repeat为双向平铺，no-repeat为不平铺。
d
5.5 定位图像
使用background-position声明，如果允许平铺，则表示平铺的起始位置。
background-position接受两个属性值，横向位置和纵向位置。
第6章链接到web
<a> 锚元素
最常用之属性，href，用来指定跳转url。其中，url可以使用简写：当链接到本域的其他文档时，可以直接写出文件名，如要访问与当前文档同目录的files文件夹下的img文件时，可直接指定href=“files/img”，若要表示该文档的上级目录，可以用..表示。
href也可以指定一个非html文件的位置，这意味着下载这个文件。
href还可以用来发送邮件，href=“mailto:abc@123.com ?subject=feedback”将自动将收件人填充为abc@123.com，主题为feedback。
<a>元素的内容不仅可以填充为文字，还可以通过<img>元素填充图片。
锚元素的href属性也可以指定为某一元素的id：在跳转目标设置一个由id属性的<a>标签，然后在需要跳转的位置上设置一个<a>标签并把href属性设置为#目标id，即可跳转到此处。
针对锚元素的CSS应用
。。。。。。
第7章表格
7.1 结构
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
其中，表格大小是自动确定的。
7.1.1 标题<caption>
7.1.2 标题行<th>
可以代替<td>，目的是区别内容为标题而不是表内数据。默认为粗体居中字体。
7.2 高级用法
7.2.1 colspan、rowspan属性
用来合并单元格，描述某个单元格横跨几行或几列。
7.2.3 其他
。。。。。。
7.3 使用CSS
7.3.1 表格样式
border-style属性可以指示表格样式。
border属性可以指示表格边框的宽度、颜色等等。
7.3.2 表格文本
Text-align属性用来设置文字对齐。
Color属性设置文字颜色。
7.3.3 单元格衬距
padding属性可以用来设置单元格衬距，单位为像素、em或ex。也可以是百分比。
bonder-collapse属性用来调整单元格边框是否合并。
7.3.4 添加背景
background-color可以设置颜色，通过把不同的行设置不同的颜色可以突出显示某些行。
第8章表单
8.1 表单的组成部分
整个表单被包含在一个<form>之中，这是表单的专属容器。提交表单时，所有控件都以名/值对的形式传送，因此，每个空间都有一个name属性，以便与内容配对。
8.1.1 容器<form>
form不能相互嵌套。
表单元素的开标签必须含有action属性，用来指定处理表单数据的URL，可以是脚本文件或者网页。method是一个可选属性，接受get或post值（？）。
注意，<form>内不能直接含有文本。
8.1.2 <input>（自闭和元素）
许多表单控件用<input>来创建，类型由type属性确定。
name属性（必须）用于标示控i件，在处理数据时用于和其内容配对。
alt属性指定一个替代性文字说明。（只适用于input type=“image”）
accept属性用于指定接受的mime类型列表。（只适用于input type=“file”）
accesskey属性提键盘快捷键。
checked=“checked”属性用于把复选框或单选按钮设置为选定状态（只适用于input type=“checkbox”或radio）。
disabled=“disabled”属性标示禁用，在许多浏览器中为灰化。
readonly=“readonly”属性标示控件只能显示值而不能被修改，与disable的区别是readonly的控件也可以获得焦点，其值也可以被发送。
ismap=“ismap”属性声明是一个服务端图像映射（只适用于input type=“image）。
src指定图像文件的URL（只适用于input type=“image”）。
value指定初始值。
type指定创建的表单控件的类型。默认text。
@用法举例
1.单行文本框input type=“text”
单行文本框，maxlength属性用于指定最长限制。value设置初始值。
2.加密文本框input type=“password”
属性与text相似。
3.复选框input type=“checkbox”
一组复选框可以用ul组合起来，用lable添加项目提示。
4.单选框input type=“radio”
注意：一组单选框的name一定要相同，否则无法单选。
5.文件上传控件input type=“file”
6.提交按钮input type=“submit”
用来提交表单的数据，value属性用于定义按钮上的标题。
7.重置input type=“reset”
8.通用按钮input type=“button”
9.图像按钮input type=“image”
和其他图片相关的元素一样，使用src指定图片URL并用alt指定替代文字。
10.隐藏式控件input type=“hidden”
无法被用户看见，用来随表单一通传递信息，如内部追踪id等等，所传数据由value提供。
8.1.3 下拉式菜单<select>
默认只能选择一个值，multiple=“multiple”指定可以多项选择。<select>容纳着许多<option>或<optgroup>元素。其中，<option>元素的selected属性标示预先选中，<optgroup>