Head First HTML 和 CSS

13-第二版：读书笔记；这是一本十分简单的入门书，读的目标是对CSS有一个完整和清晰的认识；

使用HTML可以将网页中的内容标记成浏览器能够识别解析的结构更好的展示；

html元素和属性

html元素可以有属性，能提供额外的一些元素信息；属性值需要使用双引号；

HTML5支持定制数据属性；
属性用来定制一个元素，为其提供附加信息；
a元素 href属性=>hypertextreference的简写，可以链接各种web资源；

常用元素

元素q：

内联（inline）元素：方便嵌入到一段文字中；

<q>表示一段简短的引用</q>

元素blockquote：

块级（block）元素：会自成一段还会缩进（不同浏览器的处理不同，要显示统一，可以指定CSS样式）；

<blockquote>表示一段较长的引用</blockquote>

br元素

提供换行的元素；没有任何内容的元素被称为空元素（void元素）；

<br>
<!-- 严格的XHTML 可以使用如下 -->
<br/>

有序列表：

<ol><li></li>
</ol>

无序列表：

<ul><li></li>
</ul>

定义列表：

<dl><dt>定义术语</dt><dd>定义描述</dd>
</dl>

code元素：

显示计算机编程代码；

time元素：

告诉浏览器这个内容是一个日期或时间，或包含一个日期和时间；

pre元素：

希望浏览器按照你输入的方式原样显示文本；

字符实体：

如果需要输入类似html标签的特殊字符，可以通过字符实体：

&lt;html&gt;

还有很多其他的；参考Web入门梳理：HTML-特殊字符替换代码；

字符实体还有对应的10进制Unicode编码，表示方式如 ☠ ☠；这些字符如果需要在js代码中使用，需要使用16进制的Unicode编码，表示如 \u2100 ；

域名和服务器

域名

域名控制机构域名注册费/year

示例：www.sssssss.com

www :这部分是域名中特定服务器的名字；可以有多个；
www.sssssss.com :这是网站名；
sssssss.com : 这一部分是域名；
com :不同的域结尾有不同的用途，com、org、gov、edu等，选择域时要选择一个最合适的；

服务器

技术支持数据传输限制备份和可靠性

通过域名映射到服务器的地址；将部署的文件(FTP文件传输协议)放到服务器的根目录下（可能是最简单的一种“搬家”方式了）；

FTP命令：

dir：当前目录的文件列表；
pwd：显示当前目录；
put：将文件传送到服务器；
get：从服务器获取文件；

SFTP：安全文件传输协议；

操作服务器需要掌握更多DOS或Linux命令；

可以使用一些成熟的FTP应用（如Cyberduck）；

URL

统一资源定位符

示例：http://www.sssssss.com/index.html

http：指出获取资源的协议；
www.sssssss.com：网站名；
index.html：根文件夹到资源的绝对路径；

http：超文本传输协议

如果找不到资源，就会报“404”错误；

http://www.sssssss.com
http://www.sssssss.com/
http://www.sssssss.com/index.html

这三个其实等价的，浏览器会把没有/的请求加上/；同时访问一个路径时，服务器默认会返回这个路径下的默认文件，正常是index.html命名的文件（取决于使用哪种web服务器）；

默认的服务器访问端口是80；

HTML补充要点

更加完善的a元素

为a标签指定title属性，表示所要链接的页面的文本描述（鼠标1s悬停链接上时，会展示title）；可以为任何元素指定title属性；
访问链接页面特定点：链接页面选择锚点，指定id；a标签的href链接后使用 # 加上刚刚设置的锚点id；注：(具体到文件的绝对路径，如index.html或者以/结尾，补全是必要的，否者可能无法正常工作)
返回顶部：<a href="#top">Back to top</a>，在页面最上边定义一个目标‘top’；
使用target属性打开新窗口；target = “_blank”；如果为target指定了一个特定的名称，实际上就是在对要显示的链接页面的新窗口命名；

img

img是内联元素；

常用的三种图片格式jpeg（有损不支持透明适合连续色调图像，如照片）；png（无损支持透明适合单色图像和线条构成的图像，如logo）；gif（无损支持透明支持动画）；

alt属性

指定描述图像的一些文本，如果图像没能显示，就会使用这个文本来取代他（必要）；

调整图像大小

witdh=“100”
height=“100”
均使用像素指定；可以辅助页面布局；真要实用的话最好设置成和图像实际大小一致；
一般经验 1英寸 = 96px；
实际图像的使用最好结合缩略图；

doctype

html5的doctype，html的规范就是一个文档，由W3C维护；

<!DOCTYPE html>

CSS 样式表

CSS简述及引用

CSS的一种引入方式：

<head><style type="text/css">body {border: 2px dotted black;}</style>
</head>

链接外部样式表

<head>
<!-- ref指定 html文件 和 所链接的文件之间的关系 --><link href="style.css" ref="stylesheet" type="text/css"><!-- 链入 多个css样式表时 顺序很重要！最下面的最优先 -->
</head>

CSS的编辑最好符合元素的树状结构，方便查看继承的样式；

不只面向浏览器的样式表

对外链link元素使用属性media，只使用书用于指定设备的样式文件；

<link href="style.css" ref="stylesheet" media="screen and (max-device-width:480px)">
<!-- 创建一个媒体查询里指定设备类型 -->
<!-- 指明：有屏幕的设备 且 屏幕宽度不超过480px --><link href="style.css" ref="stylesheet" media="print">
<!-- 媒体类型为print，表示打印机查看页面 -->

媒体查询的属性：

min-device-width
max-device-width
orientation:landscape 或 portrait 显示方向横向或纵向
其他

关于继承：

影响文本外观的属性均可继承；
其他属性不能继承，如border；

CSS的注释使用/* */

关于选择器：

p#id
p.class

一个元素的多个类class值，使用空格间隔；

@font-face：

允许定义一种字体的名字和位置，然后在页面中使用；可以使用多次；

需要在服务器上存储字体文件，如Myfont.woff、Myfont.ttf；（加载字体需要时间，一旦加载浏览器就会缓存）

使用@font-face:

在css最上边使用如下代码：

@font-face {font-family:"Myfont One";src: url("fonts/Myfont.woff"),url("fonts/Myfont.ttf");
/* 这里的字体地址 还可以使用提供字体托管服务的网站提供的地址，如Google Web字体服务；*/
}

使用@font-face 匹配到并分配的字体名：

font-family:"Myfont One",sans-serif;/* 还指定了通用字体名 */```

@font-face是内置的css规则，此外还有：

@import：导入其他css样式；
@media：允许创建某些特定“媒体”类型的css规则，如打印机；

关于字体格式：

TryeType字体：.ttf
OpenType字体：.otf
SVG字体：.svg
Web开放字体格式：.woff

可以查找开源字体，使用更多免费字体；

关于设置字体大小

选择一个关键字（如 small 或 medium）指定为body的字体大小（覆盖默认字体大小）；
使用em或百分数相对body字体指定其他元素的字体大小；

关于颜色的指定

color:red;
color:rgb(80%,40%,0%);
color:rgb(204,102,0);
color:#cc6600;

关于color

实际控制的是元素的前景色（文本和边框）；可以使用border-color单独修改边框颜色；

常用属性

描述	属性	值
字体	font-family	候选字体列表，使用逗号间隔，依次查找使用；(请加上引号)
字体大小	font-size	14px (指定字体大小的方式有多种)
字体粗细	font-weight	lighter normal bold bolder
字体风格	font-style	如斜体italic 倾斜oblique
文本颜色	color	准确来说是前景色

文字下划线	text-decoration	underline
文字装饰	text-decoration	none underline overline line-through，可以同时设置多个装饰生效，使用空格间隔；
文字对齐	text-align	`实际上它会对块状元素的所有内联内容对齐，它只能设置在块级元素上，而且会被继承；`
文本元素行间距	line-height
列表列表项外观	list-style

背景色	background-color
背景图	background-image	url(images/xxx.png)
边框	border	1px dotted #888888
下边框	border-bottom	1px soild black（关闭text-decoration，以此取代文字下划线的样式设置）

CSS 盒模型

内容：内容可以自行设置宽高（width 和 height只是内容区的宽高，默认auto占满所有可用区域）；
内边距：border-width border-style border-color border-radius(圆角半径)
边框：8种边框样式 solid dotted double dashed groove inset outset ridge
外边距

关于background-image的使用修正

background-image属性把一个图像放在元素背景中；还有两个属性也会影响背景图像；

background-position：默认左上角
background-repeat：默认图像会重复

p {background-image:url(images/test.png);/*注意不需要引号*/background-repeat:no-repeat;/* repeat no-repeat repeat-x repeat-y inherit（继承：按父元素来设置） */background-position: top left;
}

关于边框圆角的指定

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

不只面向浏览器的样式表（CSS）

为CSS指定有特定属性的设备；

@media screen and (min-device-width:481px){p {color:red;}
}
@media screen and (max-device-width:480px){p {color:green;}
}
@media print{p {color:white;}
}/* 公共规则写在下边 */

min-device-width：设备窗口
max-device-width：设备窗口
min-width：浏览器窗口
max-width：浏览器窗口

div 与 span

大工程的支撑架构；

div

使用div元素标记逻辑区；

使用div元素对页面结构进行逻辑划分；相当于一个逻辑容器；（后面还会看到div作为图形容器用于指定样式和定位）
div 指定类，有点像面向对象的逻辑；
div的功能应为逻辑分区，不要滥用；

再看选择器

兄弟：p,h1{}
后代：div #pa h2{}
父子：div>h1{}
兄弟：h1+p{}

line-height的特殊值

如果为一个div设置的line-height的值的单位是1em（基于其继承来的行高值），那么div的所有子元素的行高会继承该值，并将自己的行高设置为div字体大小的1倍；

除了是一个相对度量，还可以使用数字1 (line-height:1;)，表示div的各个子元素的行高是其自己字体大小的1倍；

在实际中，这个可以解决许多实际问题；

类型	CSS样式 =>	简写
背景	`background-color:white;background-image:url(images/test.png);background-repeat:repeat-x;`	`background:white url(images/test.png) repeat-x;`
字体	font-style font-variant font-weight(前三个可选) font-size(必须)/line-height(可选) font-family(至少一个字体，多个用逗号隔开)	`font: small/1.6em Verdana, Arial;`

span

<div>允许你为块级内容创建逻辑划分，<span>元素则采用类似的方式建立内联内容的逻辑分组；

可以为内联元素设置宽度，内外边距及边框；如果设置外边距，一般只能看到左右增加的效果；如果设置内边距的上下，并不会影响包围它的其他内联元素的间距，而是会重叠；
图片和其他内联元素稍有不同，宽度、内外边距都表现的像块元素；

a元素的默认样式修改【伪类】

未点击：link
一点击：visited
鼠标悬停：hover
获取焦点：focus(如是说能tab键轮流访问页面链接时，就是回去焦点的状态)
活动：active(用户第一次单击一个链接时，就处于活动状态)

这几个的使用也需要按照这个顺序；

需要根据元素的状态指定样式：需要用到‘伪类’

a:link{color:blue;
}
a:visited{color:red;
}
a:hover{color:yellow;
}

其他伪类

first-child
last-child

伪类可以应用于其他元素；

层叠

在属性声明的最后加上!important，就会覆盖掉之前的样式；
浏览器本身会维护一组默认样式，优先使用页面作者提供的样式表；
多个样式表，浏览器会以层叠方式来确定具体使用的样式；

对于层叠的理解和我印象中的差不多，偏差不大：

作者提供的优于浏览器默认的；
后边的覆盖前边的；
特定的优于普通的；

如何界定“特定”：

选择器包含id，标记为1，否则为0；
选择器包含类或伪类，标记为1，否则为0；
选择器包含元素名，标记为1，否则为0；
以此类推，最终得到 1 1 1…多个标记值，这多个值可以看做是1个数，越大则越“特定”；
对于兄弟元素的选择器可以看做是两个单独的特定界定规则；

再看“层叠”

按作者读者浏览器的顺序对规则排序；在各个类别中，再按照特定性排序，对于有相同特定性的元素，则根据样式表中的顺序再次进行排序；

对于无法找到特定属性声明的规则，浏览器会依赖继承，找到你要用的属性值；无法继承的，就只能依靠浏览器样式表中设置的默认值了；

层叠，即将来自多个样式表的样式层叠在界面上，对各个元素应用最特定的样式；

布局与定位-摆放元素

流式布局

从上到下从左到右；

浏览器并排放置两个内联元素：两个元素边框之间的距离是，两个元素外边距的和；
浏览器上下放置两个内联元素：两个元素边框之间的距离是，两个元素外边距中较大的一个（会有折叠）；

这种折叠发生的情况：只要两个垂直外边距碰到一起，就会发生！

float属性

float属性首先尽可能远的向左或向右（根据属性值left或right）浮动一个元素；它下面的所有内容会绕流这个元素（像流体一样绕着这个元素流动）；

对所有浮动元素都有一个要求：必须要先指定一个宽度；

其他元素如何继续“流入”：

对一个段落p设置浮动之后，会从正常流中删除，其他块级元素（它下边的）会填在这里，就好像没有它一样；
内联元素（块元素中的也算）的定位会考虑浮动元素的边界，因此会围绕着浮动元素；

浮动一个元素时，如果希望它在某个元素后面，就要紧挨着那个元素放置！

修正两栏问题：

问题1：我们要浮动到“右”的div，与主div分为两栏，如果默认浮动右侧div，在其下方会有主div的内联内容‘流入’；

解决方式：

让主div的右外边距与浮动的div ‘宽度’相等；（注意这个宽度=width+padding-left+padding-right+margin-left+margin-right）

两栏之间的空隙，有一个术语-中缝（gutter）；

问题2：当页面很宽的时候，主div下的其他块如页脚，会忽略已经浮动的右div，从而导致重叠；

解决方式：

需要使用另一个css属性：clear属性；

clear属性

当元素流入页面时，这个元素左边、右边或两边不允许由浮动内容；如果有则会将当前元素下移，直到没有浮动内容为止；

Tint：

浮动元素的外边距不会有折叠，因为浮动元素的外边距并不会碰到正常流中元素的外边距；
内联元素也可以浮动，常见的是在段落中浮动图像，向左或向右浮动，文字会围绕在它周围；（内联元素会留意浮动元素的边界）

问题：

上述左右分栏的实现，是使右边栏浮动，但是由于要在页眉下“挨着”展示右边栏，所以需要把主div放到右div后边；这实际是调整了语义的机构，如果是在很小的屏幕上浏览，一开始看到的将会是边栏，之后才能看见主div的内容，这并不是我们想看到的；

流体布局 vs 冻结布局

冻结布局：浏览屏幕调整时，设计依然保持原样；

如何进行冻结布局

最简单的指定一个包裹的div的宽度为固定；

凝胶：流体和冻结的中间态

锁定页面中内容区的宽度，并将它在浏览器中居中；

#allog {/*如果指定内容区宽度为auto：浏览器会根据需要扩展内容区*/width:800px;/*如果外边距指定为auto：浏览器会确定合适的外边距，同时还会确保左右相等，即居中*/margin-left:auto;margin-right:auto;
}

为解决此节之前的问题，还有其他创建两(多)栏布局的技术，能确保正确的语义顺序——绝对定位；

绝对布局

一个元素绝对定位时，浏览器先将其在流中删除，然后依据top right(bottom left）的组合确定位置；同时还需要设置宽度（非必须，默认块元素占浏览器整个宽）；

#sidebar {position:absolute;/*static(静态)是position的默认值*/top:100px;right:200px;/*可以设置负数 如果是固定定位设置负数 会被浏览器盖住一部分*/width:300px;
}

流中元素不会讲内联内容围绕在绝对定位元素周围，因为它们完全不知道这个绝对定位元素；绝对定位元素也不会对其他元素有任何影响；可以对所有元素使用绝对定位；

绝对定位元素的放置次序

每个绝对定位元素都有一个 z-index属性，指定虚轴z上的位置，越上边的元素值越大；

只有使用CSS 绝对定位相对定位固定定位的元素才有z-index；

绝对定位的position属性

属性值	描述
static	默认值，浏览器决定显示位置
absolute	绝对定位，相对页面确定显示位置
fixed	固定定位，相对浏览器窗口确定显示位置，因此固定元素永远也不会移动（如相对浏览器位置固定的购物车按钮）
relative	相对定位，元素会正常流入页面，不过在页面显示之前要进行偏移（用于更高级的定位）

解决分栏的另一种方式——CSS表格显示

CSS表格显示允许你在一个有行和列的表格中显示块元素且只能是块元素；表格会自动扩展以适应内容，表格显示也有自己的优缺点；

注意我们说的不是html的表格！

CSS的表格用一个div包裹，一行是一个div，每一列设置一个块元素；

<div id="tableContainer"><div class="tableRow"><div class="main"></div><div class="sideBar"></div></div><div class="tableRow"><div class="main"></div><div class="sideBar"></div></div>
</div>

div#tableContainer {display:table;border-spacing:10px;/*单元格边框间距，不再需要设置单元格块元素的外边距了*/
}div.tableRow {display:table-row;
}.main {display:table-cell;/*其他样式属性设置*/vertical-align:top;/*top  middle  bottom*/
}.sideBar {display:table-cell;/*其他样式属性设置*/vertical-align:top;/*单元格中内容相对单元格上边对齐*/
}

border-spacing并不是外边距，因此与其他块元素的外边距不会重叠；

CSS表格对均分栏很合适，也可以通过width设置不同的列单元格宽度；

固定定位

使用基本和绝对定位一致，只不过是基于浏览器窗口的，而非页面；

相对定位

和绝对定位类似，只是元素仍在流中（内容不会有重叠）；通过top left bottom right指定偏移量进行显示；

如果想把一张图片放到边栏内容的下边，可以让img的div嵌入边栏的内容区下边，把position改为relative，在通过top right设置下具体的显示位置即可；

重点：理解绝对定位和相对定位

定位	描述
绝对定位	从流中取出，相对父元素（一般是html页面，除非自己另行指定）指定绝对位置
相对定位	仍在流中，相对器外围包含元素来定位

绝对定位的父元素：

一般是html页面，但如果一个元素及其父元素均使用了绝对定位，那么这个元素绝对位置就是相对其父元素的；其父元素再相对html页面；

HTML5-现代HTML

引入更多语义化的元素：

<article> 文章 包含独立内容
<nav>
<header>
<footer>
<time datetime="2012-12-12">12/12/2012</time>
<aside> 边栏 展示辅助内容
<section> 区块分组 多个区块组成内容
<video> 视频 (很像<img>)<mark>突出文本
<audio>
<progress>进度条
<meter>范围度量
<canvas>用于在页面中显示 使用js绘制的图像和动画
<figure>用于定义类似照片 图标 代码等独立内容

nav-导航栏的实现

<nav>
<ul><li><a href="">1</a></li><li class="selected"><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li>
</ul>
</nav>

nav {background-color:#efe5d0;margin:10px 10px 0px 10px;
}
nav ul {margin:0px;list-style-type:none;/*删除列表项的项目符号*/padding:5px 0px 5px 0px;
}
nav ul li {display:inline;/*从block 修改为 inline，li会像内联元素一样流入一行*/padding:5px 10px 5px 10px;
}
nav ul li a:link,nav ul li a:visited {/*修改导航中链接的样式*/color:#954b4b;border-bottom:none;font-weight:bold;
}
nav ul li.selected{background-color:#c8b99c;
}

video-视频播放

<video controlsautoplaywidth="512" height="288"poster="images/poster.png"id="video"><source src="test.mp4"><source src="test.ogg">该浏览器不支持html5视频播放<object>可能用于flash的...</object>
</video>

preload = none：在用户播放视频之前不加载；
loop：布尔值，视频结束后自动循环；
width和heigth最好符合原视频尺寸，否则可能会有黑边；

不同浏览器可能展示出来的控件样式不同，如果需要还可以结合JS自定义控件；

source

<source src="test.ogv" type='video/ogg; codecs="theora, vorbis"'>

codecs指定使用哪种编解码器对视频和音频进行编解码；
type同时指定视频文件的MIME类型；可用于浏览器判断是否支持该类型的文件；

表格与更多列表

table

<table><caption>表格标题 默认显示在表格上方（可以使用CSS调整标题显示位置）</caption><tr><th></th><th></th></tr><tr><td></td><td></td></tr>
</table>

table {border:thin solid black;caption-side:bottom;/*调整标题显示位置*/border-spacing:10px 30px;/*水平边框间距 垂直边框间距*/
}
td, th {border:thin dotted gray;padding:5px;
}
caption {font-style:italic;padding-top:8px;
}

如果希望表头放在表格左侧，只需要把表头元素放在各行中（如各行中的第一项）；
不要尝试用html的表格建立布局；提供表现是CSS该做的；
表格单元格的外边距稍有不同，单元格间距一般叫边框间距（border-spacing）；

因此不需要设置外边距，而是使用border-spacing属性，针对整个表格进行定义；

边框折叠

折叠边框，使单元格之间根本没有边框间距；（浏览器会忽略所有边框设置）

table {border-collapse:collapse;
}

为表格各行设置颜色

使用 nth-child伪类，它的状态是一个元素相对于它的兄弟元素的数字顺序；

<section><p>1</p><p>2</p><p>3</p><p>4</p>
</section>

p:nth-child(even) {/*偶数：红背景*/background-color:red;
}
p:nth-child(odd) {/*奇数：绿背景*/background-color:green;
}

或者

/*使用数字n指定简单表达式*/
p:nth-child(2n) {/*偶数：红背景*/background-color:red;
}
p:nth-child(2n+1) {/*奇数：绿背景*/background-color:green;
}

单元格跨行

使用rowspan属性实现跨行；
使用colspan属性实现跨列；

<tr><td rowspan="2"></td><td ></td><td rowspan="2"></td><td rowspan="2"></td><td ></td>
</tr><tr><!-- 第二行 不再需要被跨行的列 --><td></td><td></td>
</tr>

为列表增加样式

li {list-style-type: disc;/*默认列表标记类型*/
}

list-style-type: disc/circle/square/none;

定制标记

li {list-style-image: url(images/text.png); padding-top:5px;margin-left:20px;
}

对有序列表可以使用list-style-type属性控制一个有序列表的标记是十进制的数字、罗马数字还是字母表符号；常用值：decimal/upper-alpha/lower-alpha/upper-roman/lower-roman;

设置文本回绕方式

li {list-style-position:inside;/*inside  outside*/
}

inside：标记在列表项里，在标记下回绕；
outside：标记在列表项外，在文本下回绕；

HTML 表单

form表单

<form action="http://ssssssss/sss.php" method="post"></form>

关于表单的内容，我们在《Web入门梳理：HTML》“表单标签”《Web入门梳理：HTML5》“新增的input type属性值”已有介绍；

Detail…after: 2020-03-20（日后有时间把最后一章内容补上）

本书未涉及的主题

伪元素

用来选择元素的某些部分：

:first-letter
:first-line

语法与伪类一样，不过建议使用“::”以区别于伪类；

属性选择器

根据属性值来选择元素；

img[width]
img[height=“300”]
img[alt~=“flower”]：属性包含单词的所有img

关于CSS动画

CSS提供的动画：

css提供了基础动画，包括变换和过渡特性，更复杂的动画需要使用JavaScript来实现；

开发商特定的CSS属性

浏览器制造商（Mozilla WebKit等）为浏览器增加新功能特性，或者是一些在使用但是没有被标准批准的CSS扩展，会创建类似这样的CSS属性：-moz-transform

div{background-color:red;transition:transform 2s;/*transform 无值，即默认无变换*/-webkit-transition:-webkit-transform 2s;-moz-transition:-moz-transform 2s;-o-transition:-o-transform 2s;-ms-transition:-ms-transform 2s;
}
div:hover {transform:rotate(45deg);/*这是一个css动画*/-webkit-transform:rotate(45deg);/*Safari & Chrome*/-moz-transform:rotate(45deg);/*Mozilla*/-o-transform:rotate(45deg);/*Opera*/-ms-transform:rotate(45deg);/*IE*/
}

添加JavaScript交互

JS能做很多很多事；

HTML5 API和Web应用

HTML5还提供了新的应用编程接口，可通过JS访问，提供了丰富的描述和功能；

绘制2D图形；
掌握位置信息；
使用web工作线程提高js执行效率，更好的利用多核；
访问web应用；
使用浏览器缓存数据、本地存储数据（实现离线访问）；
集成地图；
创建定制的视频播放控件，建立完整的视频体验；；
结合JS提供更好的交互性；

参考书籍《head first html5 programing》

服务器端脚本

Node.js