前端开发学习笔记（三）HeadFirst HTML 与 CSS （第二版）
2015-12-01 11:03
771 查看
前后花了1周时间来学习这本书，书中提到了很多基础的概念，如：盒模型、元素定位等，这些概念可以帮助初学者深入了解实现的原理，为后面的复杂应用打下坚实的基础。
一、HTML相关知识点
1.构建WEB页面
第一步：先画出页面的草图（实际工作中可以结合一些原型设计工具：如VISIO、AXTURE、手绘等）
第二步：规划元素架构。确定大的框架和使用的元素（实际工作确定布局，如：上部为标题区，左边为导航区，右侧为功能区；使用有含义的元素标签，如：标题用Header、导航用Nav）
第三步：加入页面风格样式。使用CSS来设置页面的显示和元素的位置、效果。
2.块元素/内联元素（在后面介绍流部分还有说明）
块元素（block）：垂直布局，其后添加换行符，通常用作web页面中的主要构建模块。如：<div>、<header>等
内联元素（inline）：水平布局，行内显示水平方向达到边界时自动换行。如：<span>、<a>等
了解了这两种不同类型元素在页面中的作用和特性，才能更好地实现设计。
3.空元素(void)
没有内容部分，只需要使用一个开始标记即可。
例如：<br>换行，<img>图片等
4.列表
有序列表（ol），包含列表项li，可以设置列表项的显示风格（数字、罗马、大写）等
无序列表（ul），包含列表项li，可以设置列表项的显示风格（星、棱）等
定义列表（dl），包含定义术语（dt）和定义描述（dd）成对出现
5.常用字符实体
< -- < > -- > © -- © & -- &
6.<a>元素
可以使用相对路径或者URL来链接其他web页面（内部最好用相对路径、外部用url）
链接页面内的元素（通过元素的ID创建一个目标），在href中使用“页面名称+#+ID”的方法链接到页面中的那个位置（页面滚动定位）
为了便于访问，可以使用title属性提供链接的一个描述，鼠标移动到<a>上时，自动显示一个信息提示工具窗
使用target属性，可以在另一个窗口中打开链接，_blank每次打开新窗口，自定义名称每次在同一个窗口中打开。
7.图像
<img>元素是 内联元素
页面中使用<img>来表示的图像，在页面加载后，需要再次请求服务器单独传输（注意：每个图像都需要一次传输，因此应尽量减少图像文件的个数，提高性能）
在WEB中常用的图像格式：JPEG、PNG、GIF。JPEG不支持透明，但文件较小；PNG支持透明，但文件相比GIF大；GIF支持透明，但仅有256色，更适合图标。
alt属性：描述图片的解释性文字信息，如果图像没有显示/加载失败，则在相应区域显示这段文字信息。
在图像的处理中，“透明”设置蒙版“matte”的目的是为了解决显示图像与透明背景边缘的毛刺问题，如果不设置会影响显示效果。
8.HTML标准
<!doctype html>最新的HTML5标识。不在进行版本标注，也就是说以后的HTML不再有版本的变化，而是对现有校准的不断完善。同时浏览器会进行更新来适应变化并做到向后兼容。
需要注意的书写要求：
<img>中的alt属性是必须添加的
在<head>中加入字符编码<meta charset="UTF-8">
在<head>中包含<title>
不允许在<img>、<br>等void元素嵌套其他内联元素
9.HTML5新增元素
新增了很多元素以及属性，例如：<header>、<footer>、<nav>、<section>、<article>、<aside>、<video>、<audio>、<canvas>、<progress>、<meter>、<mark>、<time>、<figure>等等
注意：新增的很多元素只是用来标明内容的用途，其功能可以使用<div>来替代。使用<div>更通用，但不利于对页面结构的理解以及搜索的优化。如果浏览器支持HTML5建议采用新的元素来替代<div>
<section>用以标记一些内容。只是这是由相关内容构成的一个结构明确的区块。
<atricle>有些内容可以独立于页面上的其余内容进行重用和分发。通常表示文章，可以用于博客、论坛等
<header>可以为页面、<section>、<article>添加一个头部区域
<video>由于视频解码格式的版权问题，官方没有确定一个统一的格式，支持主流的三种格式：H.264、WebM、Ogg，不同的浏览器兼容不同的格式，具体可以查阅相关说明。
<audio>与视频解码类似，支持多种格式。对于<video>、和<audio>来说，为了能够更好地兼容大部分浏览器，建议提供主流的多种格式文件，并在声明中添加。
例如：<video>
<source src="/videos/hello.mp4">
<source src="/videos/hello.webm">
<source src="/videos/hello.ogv">
</video>
<progress>表示一个进度条
<meter>用于范围度量
<mark>用于突出显示文本，类似于记号笔
<figure>用于照片、图标、代码清单
10.表格（table）
表格主要用于显示表格数据，不应该用于页面的布局。页面布局应该考虑其结构的可读性，如果使用tr、td来组织，不利于后期的维护以及搜索引擎的优化。
主要的元素有：tr、td、th、caption
单元格合并：<td rowspan="n">表示该单元格与下n-1行的单元格合并，注意：后面的n-1行中，对应的td数量要减去1。
<td colspan="n">表示该电源格与后面的n-1格单元格合并，注意：要去掉该行后面的n-1个td。
也就是说，对于合并单元格操作，不管是行合并还是列合并，对于总的td数量来说，应该减去合并单元格的数量，也就是说要保持单元格总数不变（合并的单元相当于多个单元格）
单元格盒模型：可以设置边框td {border: thin dotted gray;}，可以设置内边距td{padding: 5px;}，可以设置外边距table{border-spacing=2px}，可以取消外边距table{border-collapse=collapse}
nth-child伪类：用于根据表格中元素的相关性来设置样式，例如：基数行/偶数行，第一行、最后一行等。例如：tr:nth-child(2n+1){background-color: #fcba7a;}设置基数行的背景颜色
11.表单（Form）
<form action="/php/answer.php" method="post">
method属性：POST，表单中的提交项（名称=值）作为html的一部分（后台，用户不可见）提交给action属性指定的页面。多用于含有敏感信息、大量文本、文件等的提交
GET，表单中的提交项（名称=值）作为地址的一部分（地址栏，用户可见）提交给action属性指定的页面。多用于非POST情况下使用。
注意事项：
每个表单元素有要有一个name属性。
<label for="输入控件的Id">，好的习惯。鼠标单击<label>元素，for指定的输入控件将获得输入焦点。
<fieldset>包围一组标签元素，类似于桌面应用中的groupbox空间的边框效果。
<legend>为<fieldset>提供标题
<input placeholder="默认情况下的输入提示" type="password | file | radio | checkbox | number | text | submit | button | image | hidden | reset" required>
二、CSS相关知识点
1.通用性说明
一个元素可以有多个规则。
不是所有的样式都能继承。一般影响文本外观的样式都能继承，例如：color、font-family等
一个元素可以加入多个类，类名间加空格分隔，例如：<div class="classA classB classC">
使用media属性，指定适用于特定设备的样式。例如：@media screen and (min-device-width: 480px) { ... } 指定屏幕最小宽度在480px的设备使用。
应用样式的常识性规则：
规则A（继承特性），指定元素 --> 指定元素的父元素 --> 浏览器默认值 （按照箭头所指的顺序查找，应用首先找到的样式设置）
规则B（多样式），最特定的规则 --> 最特定系列中在CSS中最靠后的一个规则（如果有多个css文件，则出现在后面的优先级高）
2.字体相关
A.字体（font-family）共有5大系列
sans-serif。如: Verdana、Arial Black、Trebuchet MS、Arial、Geneva等等。包括没有衬线（字母末端的装饰性小细线）的字体。
serif。如: times、times new roman、georgia等等。包括有衬线的字体
monospace。包含：Courier、Courier New、Andale Mono等等。包括固定宽度的字符
Cursive。如：Comic Sans、Apple Chancery等等。看似手写的字体
Fantasy。如：Last Ninja、Impact等等。有某种风格的装饰性字体
特点：
Sans-serif 外观清晰、可读性好，多用于计算机屏幕
Serif 高雅、传统，多用于新闻报纸排版
Monospace 打字机效果，多用于显示软件代码示例
Cursive和Fantasy 有风格
属性设置：font-family: Verdana, Geneva, Arial, sans-serif; 前面放置同系列字体，最后通常放一个通用字体系统名。注意：字体名由多个单词组成时，在两边加上引号，例如："Arial Black"
工作原理：浏览器按顺序（从左至右）查找字体，直到有可用字体；如果没有特定字体，则使用浏览器默认”字体系列“的字体。
B.Web字体
存储在服务器上的字体文件（.woff）Web Open Font Format。如果页面需要，则浏览器会向服务器请求该字体。
如何使用Web字体：
首先，找到字体文件（可以从网上下载）
然后，确保有所需字体的所有文件格式。TrueType、OpenType、Embedded OpenType、SVG字体、Web开放字体
而后，将文件放在Web上（可以自己管理、或者托管）
而后，在css文件的最上面加入@font-face属性，设置其在css中使用的font-family名称，以及文件下载的地址。例如：
@font-face{
font-family: "Embedded One"; 可使用的名称
src: url("http://......"), url("http://...."), ... ; 多个不同格式的文件
}
最后，在css中使用font-family设置字体
C.调整大小
绝对值：font-size: 14px; 指定大小为14px
相对值：font-size: 150%; (相对于父元素的字体大小)
font-size: 1.2em;（比例值，相对于父元素的字体大小）类似%
font-size: 1.2rem;（比例值，相对于根元素的字体大小）
关键字：xx-small、x-small、small、meduim、large、x-large、xx-large（每个级别大20%）。默认small的大小为12px，不同浏览器存在差异
推荐方法：
为body设置字体大小，可以选择一个关键字，如：small、medium
使用em、rem相对页面（body）字体调整大小。
D.调整粗细
font-weight: bold、normal
E.字体风格
font-style: italic、oblique
F.颜色
color
可以设置名称（已命名的大概有150个）
可以设置颜色值：rgb(80%, 40%, 0%) == rgb(204, 102, 0) 红绿蓝三色的值
#cc6600，使用十六进制数表示
G.文本装饰
text-decoration。line-through | underline | overline | none。可以设置多种装饰(空格分隔)
H.文本行高
line-height。行间距，可以改善可读性
line-height: 1; 直接用数字，则表示基于各个元素自身的字体大小
缩写：
font: font-style font-variant font-weight font-size/line-height font-family。将所有跟字体相关的属性在一行声明（优点：简单；缺点：不利于调试）
3.盒模型（Box Model）
是CSS看待元素的一种方式，将每个元素看做一个盒子。盒子由内至外分别由：内容区、内边距(padding)、边框(border)、外边距(margin)组成。
各个元素关于盒模型的常用属性：
background（背景）有关的：-image -repeat -position -color。常用简写为：background: color image repeate
border（边框）有关的：-color -style -width -radius。常用简写为：border: 宽度、样式、颜色（例如：border: thin solid #007e7e;）
padding（内边距）有关的：-left -right -top -bottom。常用简写为：padding: 上、右、下、左（例如：padding: 0px 10px 10px 10px;）或者 padding: 上下、左右（例如：padding: 10px 20px;） 或者 padding: 全部（例如：padding: 10px;）
margin（外边距）有关的：-left -right -top -bottom。常用简写为：margin: 上、右、下、左（例如：margin: 0px 10px 10px 10px;）或者 margin: 上下、左右（例如：margin: 10px 20px;） 或者 margin: 全部（例如：margin: 10px;）
width（宽度）：具体是指盒模型元素内容区的宽度。可以设置三种类型的值：A.具体大小；B.百分比；C.Auto。设置B/C，则宽度的计算为元素所在容器的宽度
盒子的总宽度 = width + 左侧内边距 + 左侧边框宽度 + 左侧外边距 + 右侧内边距 + 右侧边框宽度 + 右侧外边距
如果没有设置width值，则默认为auto，即可以延伸占满所在容器的整个宽度
text-align（文本对齐）：对块元素中的所有内联元素的内容对齐。只能在块元素上使用，<div>中的其他块元素可以继承其特性。
4.块元素<div>、内联元素<span>、伪类 的使用
A.找出页面逻辑区（页面上彼此相关的一些元素）
B.使用块元素（如：<div>）标记逻辑区。将逻辑区中的元素放入<div>中，使用<div>也就是将元素分组
C.通常把<div>描述为容器。可以作为逻辑容器和图形容器。
D.<div>可以作为结构进行嵌套。但一定要做到简单，不要滥用。使用多个<div>进行嵌套是为了更好地分解逻辑区，从而保证结构清晰并便于指定样式。
E.后代选择器，写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。对孙子后代以及多层后代产生作用。（例如：div h2 / #id h2 等）。
F.子选择器，外层标记和内层标记之间不用空格而是>分隔。表示只对外层标记的直接孩子产生作用，对孙子等不产生作用（例如：div>h2）。没有测试通过呀
G.内联元素<span>也用于分组，类似块元素<div>。内联元素也可以设置宽度、内边距、外边距、边框等属性。但与块元素不同的是，上下边距与其他内联元素会有重叠。
H.伪类，例如：a:visited、a:link、a:hover等。会随着状态不同而不同
5.层叠规则（优先级排序）
A.如果设置了指定的样式（CSS）则使用指定样式，否则使用浏览器默认样式。
B.如果设置了多个特定样式，则按特定样式的优先级进行计算、排序。
计算公式： 0（百位，对应Id选择器，每个Id+1） 0（十位，对应类/伪类选择器，每个类/伪类+1） 0（个位，对应标签选择器，每个标签+1），计算出每个特定选择器的数值，数值最大的优先使用。
C.如果多个特定样式的计算数值相等，则就会产生冲突。按照在样式表中出现的顺序排序，位置靠后的样式优先级高
D.如果没有应用样式，可以继承的样式从父元素（或父元素的父元素，一直追溯到根）继承，不能够继承的样式使用浏览器默认值。
6.页面布局（流体）
浏览器默认使用流放置元素（即从上到下沿着元素流逐个显示所遇到的各个元素）。
块元素：从上向下流，各元素之间有换行符，水平方向扩展（默认块元素会占整个浏览器/父容器的宽度）
上下放置的两个块元素，上下外边距会产生重叠（使用最大的外边距）。在嵌套放置时，如果外层元素没有设置边距，则两个块元素的外边距会重叠；但外层元素设置外边框时，两个块元素的外边距就不会重叠。
内联元素：在块元素内部水平方向相互挨着，从左上向右下流，在垂直方向扩展。
左右放置的两个内联元素，内外边距都有效。
流体布局：是指扩展窗口时，页面中的内容会扩展以适应页面。
7.页面布局
CSS不仅可以设置元素的外观样式，而且可以设置页面布局样式以及元素实际显示的位置和大小。
因为浏览器默认使用流来放置元素，如果想改变这种默认方式（例如：两个<div>左/右并排放置；或者像T字分为三部分）则需要改变浏览器的默认放置方式，就需要下面的几种方法。
A.浮动布局
浮动元素：通过设置float属性（取值：left向左浮动、right向右浮动）。浏览器遇到float属性后，将它从元素流中取出（元素会浮在其后的元素上面，但在垂直方向上位于其前面元素的下方，所以有时需要调整浮动元素在HTML结构中的位置）。后面的元素（块）会认为该元素不存在，将继续顺序显示（也就是向上占据其原有的位置）。但后面块中的内联元素（包括文本）会考虑浮动元素的边界，围绕这个浮动元素。
浮动元素的TOP值是不能手动修改的，其取决于在HTML结构中的位置。
内联元素也可以设置浮动（例如：<img>元素）
实现步骤：
♦ 给要浮动的元素设置Id
♦ 在哪个元素后面浮动，就将要浮动的元素移动到该元素的后面（注意，需要调整html）
♦ 设置浮动元素的宽度
♦ 设置float属性，浮动到左/右边
注意事项：
♦ 尽可能远的向左/向右浮动一个元素，它下面的所有内容会绕流这个元素。如果要避免绕流，可以通过设置浮动元素后面块元素的外边距来解决（如果向左浮动，就设置左外边距等于浮动元素的实际宽度）。
♦ 所有浮动元素必须设置一个固定宽度，并且在float属性前设置。
♦ 设置clear属性可以解决浮动元素与后续元素的重叠问题（例如：浮动元素与页脚区域）。设置了clear属性的块元素会自动下移，直到它的旁边（可以设置left、right、both）没有浮动块元素为止。
优劣分析：
♦ 向右浮动（优势：浮动元素的宽度固定，有利于左侧主内容区域的自由扩展；劣势：需要将浮动元素调整到主内容区域之上，并不能反映页面中内容的重要性，而且在部分移动设备上只能看到浮动区域）
♦ 向左浮动（优势：内容摆放位置是正确地，能够反映页面内容的重要性，在受限设备上使用时可以看到主内容；劣势：主内容区域的宽度固定，右侧边栏自由扩展，效果不理想）
♦ 浮动元素与主内容区域的底部不齐，也就是无法创建两个相同高度的列，显示效果不好
B.冻结布局（凝胶布局）固定宽度布局
冻结布局：是指内容的宽度固定，不随窗口扩展而改变。锁定元素，将它们冻结在页面上，元素不能移动
凝胶布局：是指内容的宽度固定，但外边距随窗口扩展/收缩，表现起来会更美观。
实现步骤：
♦ 在所有布局外增加一个<div>，设置这个<div>的宽度
♦ 设置<div>的左/右外边距为auto。
优劣分析：
♦ 优势：可以解决浮动布局中，页面中各元素正常放置情况下浮动元素而产生的自适应问题（浮动布局中向左浮动已经说明了）。采用固定的宽度可以解决浮动元素的扩展或收缩。
♦ 劣势：页面宽度不可调整，在需要适应多种不同分辨率的设备时（目前这种现象很普遍），很有可能产生横向的滚动条（显示不下）或者页面两侧留有大量空白（实际显示区域过大）。总之，体验不好。
C.绝对定位
实现页面中某一部分大小固定，而另一部分可以扩展或收缩；或者需要精确地指定某个元素的位置。设置元素的Position属性，absolute、relative、fixed。
与浮动布局不同的是，需要指定元素的位置（上/下、左/右）以及宽度
流中的元素不会将其内联内容绕流在一个绝对定位元素的周围。
Position值的含义说明：
♦ absolute：绝对定位。位置相对于页面（会随着页面滚动而移动）
♦ static：默认。流式
♦ fixed：固定定位。位置相对于浏览器窗口（不会随着页面滚动而移动）
♦ relative：相对定位。相对于其在流式布局中的位置，在显示之前进行偏移。流式
多个绝对定位元素的显示规则，取决于绝对定位元素的z-index属性，该属性为数值类型（负数、零、正数），z-index值大，显示在上面
实现步骤：
♦ 设置绝对定位元素的Position值（absolute | relative | fixed)
♦ 设置绝对定位元素的位置（top/bottom，left/right）
♦ 设置绝对定位元素的宽度（width）
优劣分析：
♦ 劣势：与浮动布局一样，会出现下面的元素与绝对定位元素重叠的情况。且不能使用clear属性来解决（因为不知道决定对位元素的存在）
D.表格显示布局
增加表格块元素、表格行块元素、表格单元块元素（都是<div>），支持多栏布局，但内容栏是均匀地。（也就是说不支持表格单元的合并）
实现步骤：
♦ 增加表格<div>元素，设置display属性为table。
♦ 增加表格行<div>元素，设置display属性为table-row。
♦ 增加表格单元块<div>元素（如果有则不需要），设置display属性为table-cell。
说明：
♦ 表格间的空间（类似于元素的外边距）是通过设置border-spacing属性来完成。该属性必须在表格<div>元素中设置才有效。
♦ border-spacing属性在上/下方向与其他元素的外边距（margin）不会重叠。需要用户手动设置与其上下相邻元素对应的外边距。
♦ 使用表格显示布局，可以完美解决多栏底部不齐的问题，在用户体验上有很大的优势。
♦ 使用表格显示布局，需要额外增加多个<div>元素，如果给页面布局带来很大的问题，就考虑是否使用。
8.更多选择器
A.伪元素
前面已经介绍过了。例如：p:first-letter、p:first-line、a:hover等。可以根据元素的状态和位置等动态信息，进行检索
B.属性选择器
可以根据元素的属性/属性值进行检索。例如：img[width] {...}，该选择器表示包含width属性的图像元素；img[height="300"] {...}，该选择器表示height属性为300的图像元素
C.按兄弟选择
使用 “ + ”符号来指定兄弟，例如：h1+p {...}，该选择器表示紧跟在h1元素后面的段落
D.结合选择器
♦ 定义上下文。div#greentea>blockquote {...}，该选择器表示Id是greentea的div，且是blockquote的父亲
♦ 指定元素。div#greentea>blockquote p {...}，该选择器表示p是blockquote的子孙，且blockquote是（id为greentea的div）的儿子
♦ 指定类/伪类。div#greentea>blockquote p:first-line {...}，该选择器表示p的第一行，且p是blockquote的子孙，且blockquote是（id为greentea的div）的儿子
9.厂商特定CSS属性
-（开发商标识）-（属性），例如：-moz-transform，表示是开发商特定的一个属性，由于该属性不是规范的一部分，因此不稳定，开发商有可能改变该属性，需要在使用前确认是否支持。
在css中可以指定多个厂商的特定属性，
例如：div {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
一、HTML相关知识点
1.构建WEB页面
第一步：先画出页面的草图（实际工作中可以结合一些原型设计工具：如VISIO、AXTURE、手绘等）
第二步：规划元素架构。确定大的框架和使用的元素（实际工作确定布局，如：上部为标题区，左边为导航区，右侧为功能区；使用有含义的元素标签，如：标题用Header、导航用Nav）
第三步：加入页面风格样式。使用CSS来设置页面的显示和元素的位置、效果。
2.块元素/内联元素（在后面介绍流部分还有说明）
块元素（block）：垂直布局，其后添加换行符，通常用作web页面中的主要构建模块。如：<div>、<header>等
内联元素（inline）：水平布局，行内显示水平方向达到边界时自动换行。如：<span>、<a>等
了解了这两种不同类型元素在页面中的作用和特性，才能更好地实现设计。
3.空元素(void)
没有内容部分，只需要使用一个开始标记即可。
例如：<br>换行，<img>图片等
4.列表
有序列表（ol），包含列表项li，可以设置列表项的显示风格（数字、罗马、大写）等
无序列表（ul），包含列表项li，可以设置列表项的显示风格（星、棱）等
定义列表（dl），包含定义术语（dt）和定义描述（dd）成对出现
5.常用字符实体
< -- < > -- > © -- © & -- &
6.<a>元素
可以使用相对路径或者URL来链接其他web页面（内部最好用相对路径、外部用url）
链接页面内的元素（通过元素的ID创建一个目标），在href中使用“页面名称+#+ID”的方法链接到页面中的那个位置（页面滚动定位）
为了便于访问，可以使用title属性提供链接的一个描述，鼠标移动到<a>上时，自动显示一个信息提示工具窗
使用target属性，可以在另一个窗口中打开链接，_blank每次打开新窗口，自定义名称每次在同一个窗口中打开。
7.图像
<img>元素是 内联元素
页面中使用<img>来表示的图像，在页面加载后，需要再次请求服务器单独传输（注意：每个图像都需要一次传输，因此应尽量减少图像文件的个数，提高性能）
在WEB中常用的图像格式：JPEG、PNG、GIF。JPEG不支持透明，但文件较小；PNG支持透明，但文件相比GIF大；GIF支持透明，但仅有256色，更适合图标。
alt属性：描述图片的解释性文字信息，如果图像没有显示/加载失败，则在相应区域显示这段文字信息。
在图像的处理中，“透明”设置蒙版“matte”的目的是为了解决显示图像与透明背景边缘的毛刺问题，如果不设置会影响显示效果。
8.HTML标准
<!doctype html>最新的HTML5标识。不在进行版本标注，也就是说以后的HTML不再有版本的变化，而是对现有校准的不断完善。同时浏览器会进行更新来适应变化并做到向后兼容。
需要注意的书写要求：
<img>中的alt属性是必须添加的
在<head>中加入字符编码<meta charset="UTF-8">
在<head>中包含<title>
不允许在<img>、<br>等void元素嵌套其他内联元素
9.HTML5新增元素
新增了很多元素以及属性，例如：<header>、<footer>、<nav>、<section>、<article>、<aside>、<video>、<audio>、<canvas>、<progress>、<meter>、<mark>、<time>、<figure>等等
注意：新增的很多元素只是用来标明内容的用途，其功能可以使用<div>来替代。使用<div>更通用，但不利于对页面结构的理解以及搜索的优化。如果浏览器支持HTML5建议采用新的元素来替代<div>
<section>用以标记一些内容。只是这是由相关内容构成的一个结构明确的区块。
<atricle>有些内容可以独立于页面上的其余内容进行重用和分发。通常表示文章，可以用于博客、论坛等
<header>可以为页面、<section>、<article>添加一个头部区域
<video>由于视频解码格式的版权问题，官方没有确定一个统一的格式，支持主流的三种格式：H.264、WebM、Ogg，不同的浏览器兼容不同的格式，具体可以查阅相关说明。
<audio>与视频解码类似，支持多种格式。对于<video>、和<audio>来说，为了能够更好地兼容大部分浏览器，建议提供主流的多种格式文件，并在声明中添加。
例如：<video>
<source src="/videos/hello.mp4">
<source src="/videos/hello.webm">
<source src="/videos/hello.ogv">
</video>
<progress>表示一个进度条
<meter>用于范围度量
<mark>用于突出显示文本，类似于记号笔
<figure>用于照片、图标、代码清单
10.表格（table）
表格主要用于显示表格数据，不应该用于页面的布局。页面布局应该考虑其结构的可读性，如果使用tr、td来组织，不利于后期的维护以及搜索引擎的优化。
主要的元素有：tr、td、th、caption
单元格合并：<td rowspan="n">表示该单元格与下n-1行的单元格合并，注意：后面的n-1行中，对应的td数量要减去1。
<td colspan="n">表示该电源格与后面的n-1格单元格合并，注意：要去掉该行后面的n-1个td。
也就是说，对于合并单元格操作，不管是行合并还是列合并，对于总的td数量来说，应该减去合并单元格的数量，也就是说要保持单元格总数不变（合并的单元相当于多个单元格）
单元格盒模型：可以设置边框td {border: thin dotted gray;}，可以设置内边距td{padding: 5px;}，可以设置外边距table{border-spacing=2px}，可以取消外边距table{border-collapse=collapse}
nth-child伪类：用于根据表格中元素的相关性来设置样式，例如：基数行/偶数行，第一行、最后一行等。例如：tr:nth-child(2n+1){background-color: #fcba7a;}设置基数行的背景颜色
11.表单（Form）
<form action="/php/answer.php" method="post">
method属性：POST，表单中的提交项（名称=值）作为html的一部分（后台，用户不可见）提交给action属性指定的页面。多用于含有敏感信息、大量文本、文件等的提交
GET，表单中的提交项（名称=值）作为地址的一部分（地址栏，用户可见）提交给action属性指定的页面。多用于非POST情况下使用。
注意事项：
每个表单元素有要有一个name属性。
<label for="输入控件的Id">，好的习惯。鼠标单击<label>元素，for指定的输入控件将获得输入焦点。
<fieldset>包围一组标签元素，类似于桌面应用中的groupbox空间的边框效果。
<legend>为<fieldset>提供标题
<input placeholder="默认情况下的输入提示" type="password | file | radio | checkbox | number | text | submit | button | image | hidden | reset" required>
二、CSS相关知识点
1.通用性说明
一个元素可以有多个规则。
不是所有的样式都能继承。一般影响文本外观的样式都能继承，例如：color、font-family等
一个元素可以加入多个类，类名间加空格分隔，例如：<div class="classA classB classC">
使用media属性，指定适用于特定设备的样式。例如：@media screen and (min-device-width: 480px) { ... } 指定屏幕最小宽度在480px的设备使用。
应用样式的常识性规则：
规则A（继承特性），指定元素 --> 指定元素的父元素 --> 浏览器默认值 （按照箭头所指的顺序查找，应用首先找到的样式设置）
规则B（多样式），最特定的规则 --> 最特定系列中在CSS中最靠后的一个规则（如果有多个css文件，则出现在后面的优先级高）
2.字体相关
A.字体（font-family）共有5大系列
sans-serif。如: Verdana、Arial Black、Trebuchet MS、Arial、Geneva等等。包括没有衬线（字母末端的装饰性小细线）的字体。
serif。如: times、times new roman、georgia等等。包括有衬线的字体
monospace。包含：Courier、Courier New、Andale Mono等等。包括固定宽度的字符
Cursive。如：Comic Sans、Apple Chancery等等。看似手写的字体
Fantasy。如：Last Ninja、Impact等等。有某种风格的装饰性字体
特点：
Sans-serif 外观清晰、可读性好，多用于计算机屏幕
Serif 高雅、传统，多用于新闻报纸排版
Monospace 打字机效果，多用于显示软件代码示例
Cursive和Fantasy 有风格
属性设置：font-family: Verdana, Geneva, Arial, sans-serif; 前面放置同系列字体，最后通常放一个通用字体系统名。注意：字体名由多个单词组成时，在两边加上引号，例如："Arial Black"
工作原理：浏览器按顺序（从左至右）查找字体，直到有可用字体；如果没有特定字体，则使用浏览器默认”字体系列“的字体。
B.Web字体
存储在服务器上的字体文件（.woff）Web Open Font Format。如果页面需要，则浏览器会向服务器请求该字体。
如何使用Web字体：
首先，找到字体文件（可以从网上下载）
然后，确保有所需字体的所有文件格式。TrueType、OpenType、Embedded OpenType、SVG字体、Web开放字体
而后，将文件放在Web上（可以自己管理、或者托管）
而后，在css文件的最上面加入@font-face属性，设置其在css中使用的font-family名称，以及文件下载的地址。例如：
@font-face{
font-family: "Embedded One"; 可使用的名称
src: url("http://......"), url("http://...."), ... ; 多个不同格式的文件
}
最后，在css中使用font-family设置字体
C.调整大小
绝对值：font-size: 14px; 指定大小为14px
相对值：font-size: 150%; (相对于父元素的字体大小)
font-size: 1.2em;（比例值，相对于父元素的字体大小）类似%
font-size: 1.2rem;（比例值，相对于根元素的字体大小）
关键字：xx-small、x-small、small、meduim、large、x-large、xx-large（每个级别大20%）。默认small的大小为12px，不同浏览器存在差异
推荐方法：
为body设置字体大小，可以选择一个关键字，如：small、medium
使用em、rem相对页面（body）字体调整大小。
D.调整粗细
font-weight: bold、normal
E.字体风格
font-style: italic、oblique
F.颜色
color
可以设置名称（已命名的大概有150个）
可以设置颜色值：rgb(80%, 40%, 0%) == rgb(204, 102, 0) 红绿蓝三色的值
#cc6600，使用十六进制数表示
G.文本装饰
text-decoration。line-through | underline | overline | none。可以设置多种装饰(空格分隔)
H.文本行高
line-height。行间距，可以改善可读性
line-height: 1; 直接用数字，则表示基于各个元素自身的字体大小
缩写：
font: font-style font-variant font-weight font-size/line-height font-family。将所有跟字体相关的属性在一行声明（优点：简单；缺点：不利于调试）
3.盒模型（Box Model）
是CSS看待元素的一种方式，将每个元素看做一个盒子。盒子由内至外分别由：内容区、内边距(padding)、边框(border)、外边距(margin)组成。
各个元素关于盒模型的常用属性：
background（背景）有关的：-image -repeat -position -color。常用简写为：background: color image repeate
border（边框）有关的：-color -style -width -radius。常用简写为：border: 宽度、样式、颜色（例如：border: thin solid #007e7e;）
padding（内边距）有关的：-left -right -top -bottom。常用简写为：padding: 上、右、下、左（例如：padding: 0px 10px 10px 10px;）或者 padding: 上下、左右（例如：padding: 10px 20px;） 或者 padding: 全部（例如：padding: 10px;）
margin（外边距）有关的：-left -right -top -bottom。常用简写为：margin: 上、右、下、左（例如：margin: 0px 10px 10px 10px;）或者 margin: 上下、左右（例如：margin: 10px 20px;） 或者 margin: 全部（例如：margin: 10px;）
width（宽度）：具体是指盒模型元素内容区的宽度。可以设置三种类型的值：A.具体大小；B.百分比；C.Auto。设置B/C，则宽度的计算为元素所在容器的宽度
盒子的总宽度 = width + 左侧内边距 + 左侧边框宽度 + 左侧外边距 + 右侧内边距 + 右侧边框宽度 + 右侧外边距
如果没有设置width值，则默认为auto，即可以延伸占满所在容器的整个宽度
text-align（文本对齐）：对块元素中的所有内联元素的内容对齐。只能在块元素上使用，<div>中的其他块元素可以继承其特性。
4.块元素<div>、内联元素<span>、伪类 的使用
A.找出页面逻辑区（页面上彼此相关的一些元素）
B.使用块元素（如：<div>）标记逻辑区。将逻辑区中的元素放入<div>中，使用<div>也就是将元素分组
C.通常把<div>描述为容器。可以作为逻辑容器和图形容器。
D.<div>可以作为结构进行嵌套。但一定要做到简单，不要滥用。使用多个<div>进行嵌套是为了更好地分解逻辑区，从而保证结构清晰并便于指定样式。
E.后代选择器，写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。对孙子后代以及多层后代产生作用。（例如：div h2 / #id h2 等）。
F.子选择器，外层标记和内层标记之间不用空格而是>分隔。表示只对外层标记的直接孩子产生作用，对孙子等不产生作用（例如：div>h2）。没有测试通过呀
G.内联元素<span>也用于分组，类似块元素<div>。内联元素也可以设置宽度、内边距、外边距、边框等属性。但与块元素不同的是，上下边距与其他内联元素会有重叠。
H.伪类，例如：a:visited、a:link、a:hover等。会随着状态不同而不同
5.层叠规则（优先级排序）
A.如果设置了指定的样式（CSS）则使用指定样式，否则使用浏览器默认样式。
B.如果设置了多个特定样式，则按特定样式的优先级进行计算、排序。
计算公式： 0（百位，对应Id选择器，每个Id+1） 0（十位，对应类/伪类选择器，每个类/伪类+1） 0（个位，对应标签选择器，每个标签+1），计算出每个特定选择器的数值，数值最大的优先使用。
C.如果多个特定样式的计算数值相等，则就会产生冲突。按照在样式表中出现的顺序排序，位置靠后的样式优先级高
D.如果没有应用样式，可以继承的样式从父元素（或父元素的父元素，一直追溯到根）继承，不能够继承的样式使用浏览器默认值。
6.页面布局（流体）
浏览器默认使用流放置元素（即从上到下沿着元素流逐个显示所遇到的各个元素）。
块元素：从上向下流，各元素之间有换行符，水平方向扩展（默认块元素会占整个浏览器/父容器的宽度）
上下放置的两个块元素，上下外边距会产生重叠（使用最大的外边距）。在嵌套放置时，如果外层元素没有设置边距，则两个块元素的外边距会重叠；但外层元素设置外边框时，两个块元素的外边距就不会重叠。
内联元素：在块元素内部水平方向相互挨着，从左上向右下流，在垂直方向扩展。
左右放置的两个内联元素，内外边距都有效。
流体布局：是指扩展窗口时，页面中的内容会扩展以适应页面。
7.页面布局
CSS不仅可以设置元素的外观样式，而且可以设置页面布局样式以及元素实际显示的位置和大小。
因为浏览器默认使用流来放置元素，如果想改变这种默认方式（例如：两个<div>左/右并排放置；或者像T字分为三部分）则需要改变浏览器的默认放置方式，就需要下面的几种方法。
A.浮动布局
浮动元素：通过设置float属性（取值：left向左浮动、right向右浮动）。浏览器遇到float属性后，将它从元素流中取出（元素会浮在其后的元素上面，但在垂直方向上位于其前面元素的下方，所以有时需要调整浮动元素在HTML结构中的位置）。后面的元素（块）会认为该元素不存在，将继续顺序显示（也就是向上占据其原有的位置）。但后面块中的内联元素（包括文本）会考虑浮动元素的边界，围绕这个浮动元素。
浮动元素的TOP值是不能手动修改的，其取决于在HTML结构中的位置。
内联元素也可以设置浮动（例如：<img>元素）
实现步骤：
♦ 给要浮动的元素设置Id
♦ 在哪个元素后面浮动，就将要浮动的元素移动到该元素的后面（注意，需要调整html）
♦ 设置浮动元素的宽度
♦ 设置float属性，浮动到左/右边
注意事项：
♦ 尽可能远的向左/向右浮动一个元素，它下面的所有内容会绕流这个元素。如果要避免绕流，可以通过设置浮动元素后面块元素的外边距来解决（如果向左浮动，就设置左外边距等于浮动元素的实际宽度）。
♦ 所有浮动元素必须设置一个固定宽度，并且在float属性前设置。
♦ 设置clear属性可以解决浮动元素与后续元素的重叠问题（例如：浮动元素与页脚区域）。设置了clear属性的块元素会自动下移，直到它的旁边（可以设置left、right、both）没有浮动块元素为止。
优劣分析：
♦ 向右浮动（优势：浮动元素的宽度固定，有利于左侧主内容区域的自由扩展；劣势：需要将浮动元素调整到主内容区域之上，并不能反映页面中内容的重要性，而且在部分移动设备上只能看到浮动区域）
♦ 向左浮动（优势：内容摆放位置是正确地，能够反映页面内容的重要性，在受限设备上使用时可以看到主内容；劣势：主内容区域的宽度固定，右侧边栏自由扩展，效果不理想）
♦ 浮动元素与主内容区域的底部不齐，也就是无法创建两个相同高度的列，显示效果不好
B.冻结布局（凝胶布局）固定宽度布局
冻结布局：是指内容的宽度固定，不随窗口扩展而改变。锁定元素，将它们冻结在页面上，元素不能移动
凝胶布局：是指内容的宽度固定，但外边距随窗口扩展/收缩，表现起来会更美观。
实现步骤：
♦ 在所有布局外增加一个<div>，设置这个<div>的宽度
♦ 设置<div>的左/右外边距为auto。
优劣分析：
♦ 优势：可以解决浮动布局中，页面中各元素正常放置情况下浮动元素而产生的自适应问题（浮动布局中向左浮动已经说明了）。采用固定的宽度可以解决浮动元素的扩展或收缩。
♦ 劣势：页面宽度不可调整，在需要适应多种不同分辨率的设备时（目前这种现象很普遍），很有可能产生横向的滚动条（显示不下）或者页面两侧留有大量空白（实际显示区域过大）。总之，体验不好。
C.绝对定位
实现页面中某一部分大小固定，而另一部分可以扩展或收缩；或者需要精确地指定某个元素的位置。设置元素的Position属性，absolute、relative、fixed。
与浮动布局不同的是，需要指定元素的位置（上/下、左/右）以及宽度
流中的元素不会将其内联内容绕流在一个绝对定位元素的周围。
Position值的含义说明：
♦ absolute：绝对定位。位置相对于页面（会随着页面滚动而移动）
♦ static：默认。流式
♦ fixed：固定定位。位置相对于浏览器窗口（不会随着页面滚动而移动）
♦ relative：相对定位。相对于其在流式布局中的位置，在显示之前进行偏移。流式
多个绝对定位元素的显示规则，取决于绝对定位元素的z-index属性，该属性为数值类型（负数、零、正数），z-index值大，显示在上面
实现步骤：
♦ 设置绝对定位元素的Position值（absolute | relative | fixed)
♦ 设置绝对定位元素的位置（top/bottom，left/right）
♦ 设置绝对定位元素的宽度（width）
优劣分析：
♦ 劣势：与浮动布局一样，会出现下面的元素与绝对定位元素重叠的情况。且不能使用clear属性来解决（因为不知道决定对位元素的存在）
D.表格显示布局
增加表格块元素、表格行块元素、表格单元块元素（都是<div>），支持多栏布局，但内容栏是均匀地。（也就是说不支持表格单元的合并）
实现步骤：
♦ 增加表格<div>元素，设置display属性为table。
♦ 增加表格行<div>元素，设置display属性为table-row。
♦ 增加表格单元块<div>元素（如果有则不需要），设置display属性为table-cell。
说明：
♦ 表格间的空间（类似于元素的外边距）是通过设置border-spacing属性来完成。该属性必须在表格<div>元素中设置才有效。
♦ border-spacing属性在上/下方向与其他元素的外边距（margin）不会重叠。需要用户手动设置与其上下相邻元素对应的外边距。
♦ 使用表格显示布局，可以完美解决多栏底部不齐的问题，在用户体验上有很大的优势。
♦ 使用表格显示布局，需要额外增加多个<div>元素，如果给页面布局带来很大的问题，就考虑是否使用。
8.更多选择器
A.伪元素
前面已经介绍过了。例如：p:first-letter、p:first-line、a:hover等。可以根据元素的状态和位置等动态信息，进行检索
B.属性选择器
可以根据元素的属性/属性值进行检索。例如：img[width] {...}，该选择器表示包含width属性的图像元素；img[height="300"] {...}，该选择器表示height属性为300的图像元素
C.按兄弟选择
使用 “ + ”符号来指定兄弟，例如：h1+p {...}，该选择器表示紧跟在h1元素后面的段落
D.结合选择器
♦ 定义上下文。div#greentea>blockquote {...}，该选择器表示Id是greentea的div，且是blockquote的父亲
♦ 指定元素。div#greentea>blockquote p {...}，该选择器表示p是blockquote的子孙，且blockquote是（id为greentea的div）的儿子
♦ 指定类/伪类。div#greentea>blockquote p:first-line {...}，该选择器表示p的第一行，且p是blockquote的子孙，且blockquote是（id为greentea的div）的儿子
9.厂商特定CSS属性
-（开发商标识）-（属性），例如：-moz-transform，表示是开发商特定的一个属性，由于该属性不是规范的一部分，因此不稳定，开发商有可能改变该属性，需要在使用前确认是否支持。
在css中可以指定多个厂商的特定属性，
例如：div {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 文档流
- 使用Glup.JS优化JS、CSS、图片，压缩合并
- 用css3让溢出内容显示省略号
- CSS中图片宽度适应手机屏幕
- css写法
- html、css
- dorado5-css的设置
- css实现右侧固定宽度，左侧宽度自适应
- css中的overflow需要注意的问题
- 8个超炫酷的纯CSS3动画及源码分享
- CSS遮罩层的实现
- Cool！15个创意的 CSS3 文本效果【下篇】
- CSS ::before 和 ::after 伪元素用法
- CSS3之伪元素选择器和伪类选择器
- CSS基础复习
- 对图片进行各种样式裁对图片进行各种样式裁剪：圆形、星形、心形、花瓣形等剪：圆形、星形、心形、花瓣形等--第三方开源--CustomShapeImageView
- CSS浮动和清除
- CSS属性优先级和继承
- CSS-display，overflow，CSS定位
- HTML引入CSS的方法