1、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">：
http-equiv="Content-Type" ：表示描述文档类型
content="text/html; ：MIME类型
charset=utf-8 页面字符集？
meta是html中的元标签，其中包含了对应html的相关信息，客户端浏览器或服务器端的程序会根据这些信息进行处理
http-equiv类似于http的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容？
2、<title>：
用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题
每个网页的内容都是不同的，每个网页都应该有一个独一无二的title
3、语义化的好处：
更容易被搜索引擎收录
更容易让屏幕阅读器读出网页内容
4、<span> 类比<div>：
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的
5、HTML 4.0 标准仅支持 16 种颜色名：
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow
如果使用其它颜色的话，就应该使用十六进制的颜色值
6、 <q>：
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号
<q>标签的真正关键点不是它的默认样式双引号，而是它的语义：引用别人的话，给浏览器看的
语义化网页结构有助于搜索引擎的收录
7、<blockquote>：
<q>：是标记行内元素，两边浏览器会自动补全双引号
<blockquote>：是标记块级元素，浏览器不会自动补全双引号，而且这个块级元素是margin:40px;默认样式的
8、 ：
no-breaking space:不间断空格
9、空标签：
<br />、<hr />和<img />
10、<hr>：
horizontal hr 水平线
11、<address>：
块级元素
一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签
也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份
在浏览器上显示的样式为斜体
12、<code>：
行内元素
在网页中显示一些计算机专业的编程代码，且当代码为一行代码时
多行代码用<pre>元素，其为块级元素
13、<pre>：
预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符
一个常见应用就是用来展示计算机的源代码：
使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"，如i<=10; 应该改为 i<=10;
14、<li>：
list item，列表项目
<li>、<ul>、<ol>均为块级元素
15、<div>：
把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器
逻辑部分是页面上相互关联的一组元素，如网页中的独立的栏目版块，就是一个典型的逻辑部分
16、<table>：
<tbody>：
如果不加<thead><tbody><tfooter> , table表格加载完后才显示
加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示
通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示
<tr>：table row，块级元素
<td>：table data，可以包含块级元素？
<th>：table head，块级元素
17、表格摘要：
<table summary="xxx">：
摘要的内容是不会在浏览器中显示出来的
它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容
18、表格标题：
<caption>：用以描述表格内容，标题的显示位置：表格上方
19、<a>：
行内元素
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容：
这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
href：Hypertext Reference的缩写，意思是超文本引用
在默认情况下，链接的网页是在当前浏览器窗口中打开
20、_blank _parent _self _frame-name _top
21、mailto：
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件
如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔：
比如你发信给A，如果选择抄送给B，则B也会收到同样内容的信。但这样的话，A会知道你抄送了给B，你还可以选择“密件抄送”，这样，A就不知道你抄送
空格问题？
22、<img>：
行内元素
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
图像可以是GIF，PNG，JPEG格式的图像文件。
23、<form>：
块级元素
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据
<form method="传送方式" action="服务器文件">
<label>：
行内元素
<label for="username">用户名:</label>
<input>：
行内元素
<input type="text" name="username" id="username" value="" />：空元素
type：
text：文本框
password：密码框
raido：单选按钮
checkbox：复选框
submit：提交按钮
reset：重置
file：文件选择框
...
24、<input type="text" name="username" id="username" value="" />：
name：为文本框命名，以备后台程序ASP、PHP使用
value：为文本输入框设置默认值，一般起到提示作用
25、<textarea>：
行内元素
在表单中输入大段文字时，需要用到文本输入域
<textarea rows="行数" cols="列数">文本</textarea>
在<textarea></textarea>标签之间可以输入默认值：
不需要删除默认值就可以输入新内容可以用placeholder来实现：
<textarea rows="10" cols="50" placeholder="在这里输入内容..."></textarea>
cols和rows是宽高的字符数量度量限定,只能输出大小不能影响输入的字符数
26、<input type="radio/checkbox" value="值" name="名称" checked="checked"/>：
type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框，用户可以任意选择多项，甚至全选
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用
27、<select>：
下拉列表框
行内元素，表单内元素
<option value="提交值" selected="selected">显示的选项值</option>
<select multiple="multiple">：
设置多选属性
在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击
28、<input type="submit" value="提交">：
value设置按钮上显示的文字
<input type="reset" value="重置">：
value设置按钮上显示的文字
29、<label>：
不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性
如果在 label 标签内点击文本，就会触发此控件，即浏览器就会自动将焦点转到和标签相关的表单控件上：
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同
30、CSS中注释语句用/**/，而非 // 或 <!-- -->
31、CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种：
内联式：<span style="color:blue">
嵌入式：写在<style type="text/css"></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间
外部式：<link href="style.css" rel="stylesheet" type="text/css" />，rel(relationship)属性用于定义链接的文件和html文档之间的关系，stylesheet就是样式表的意思，说明链接到的文档是样式表
内联式适用情况：局部特殊化
嵌入式适用情况：统一标签样式格式
外联式适用情况：方便代码重用和管理
优先级：内联式 > 嵌入式 > 外部式
前提：内联式、嵌入式、外部式样式表中的css样式是在相同权值的情况下？
嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面，即<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面
通常就是就近原则
32、选择器：
标签选择器
类选择器：.类名
id选择器：#id名
注意：
元素的id是在html文档中是唯一独享的，而类不同
元素可以有类名列表，类选择器名称只要被包含在元素的类名列表中，即可认为二者匹配
子选择器：
大于符号(>)，用于选择指定标签元素的第一代子元素
包含(后代)选择器：
空格，用于选择指定标签元素下的所有后辈元素
通用选择器：
* 匹配html中的所有标签元素
伪类选择器：
允许给html不存在的标签(标签的某种状态，如鼠标滑过的状态)设置样式：a:hover{color:red;}
到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover
分组选择器：
.first,#second span{color:green;}，注意用逗号连接
注意：
p.first表示类名包含first的p元素
p .first表示p元素的所有类名包含first的后代元素
33、样式属性有分具有继承性和不具继承性的：
比如color属性具有继承性，而border属性不具继承性
34、特殊性：
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式
标签的权值为1，类选择符的权值为10，ID选择符的权值为100，内联样式为1000，继承的权值最低(0.1)：
p span .warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
35、层叠：
在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
36、重要性：
!important：p{color:red!important;}
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式
37、字体：
不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体
现在一般网页喜欢设置“微软雅黑”：body{font-family:"Microsoft Yahei";} 或 body{font-family:"微软雅黑";}
粗体 {font-weight:bold;}
斜体 {font-style:italic;}
下划线 {text-decoration:underline;}
上划线 {text-decoration:overline;}
删除线 {text-decoration:line-through;}
缩进 {text-indent:2em;}
行间距 {line-height:2em;}
设置文字间隔或字母间隔 {letter-spacing:20px;} 跨越空格
设置英文单词间距 {word-spacing:20px;}
38、表单元素不会继承body的属性？
39、全角与半角
中文输入分为全角和半角
全角，段落中所有字符（包括文字和其它符号：逗号、顿号、句号等），都是占用一个字的位置，这样排版的时候，上下文字能对齐
半角，段落中所有除文字外的符号，只占用半个字的位置
打字时，默认是半角，按空格最明显，只有前一个字的一半宽度
切换全角后，空格刚好是一个字宽度（段落中最明显，上下对齐）
em 就是一个全角占位符？
40、em与px：
任意浏览器的默认字体高度16px（16像素）
所有未经调整的浏览器都符合:1em=16px，那么12px=0.75em,10px=0.625em
为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使1em值变为16px*62.5%=10px
注意：建议不要使用em作为中文站点的文字单位，会导致文字变形十分严重的？
当给 font-size 设置单位为 em 时，此时计算的标准以元素的父元素的 font-size 为基础？
rem？
41、元素分类：
分为三种不同的类型：块状元素、内联元素(行内元素)和内联块状元素
块状元素：
独占一行
常见：<div>、<ul>、<ol>、<li>、<p>、<h>、<table>
元素的高度、宽度、行高以及顶和底边距都可设置
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
内联元素：
和其他元素都在一行上
常见：<a>、<span>、<em>、<strong>
元素的高度、宽度及顶部和底部边距不可设置
元素的宽度就是它包含的文字或图片的宽度，不可改变
内联块状元素：
常见：<img>、<input>
和其他元素都在一行上
元素的高度、宽度、行高以及顶和底边距都可设置
display:block/inline/inline-block
42、盒模型：
组成：内容(content)、填充(padding)、边框(border)、外边界(margin)
盒模型是面向块级元素？
边框：
border-style：dashed（虚线）| dotted（点线）| solid（实线）
border-color
border-width：thin | medium | thick（不常用），常用px
宽度和高度：
css内定义的宽（width）和高（height），指的是内容的范围
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
43、布局模型：
流动模型(Flow)：
默认网页布局模式
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
内联元素都会在所处的包含元素内从左到右水平分布显示
浮动模型(Float)：
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动：float:left;
脱离文档流/普通流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围
层模型(Layer)：
类比PhotoShop中的图层编辑功能，每个图层能够被精确定位操作
在网页中精确定位html元素：
绝对定位(position:absolute)：
元素脱离文本流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
注意：参照定位的元素必须加入position:relative;
position:absolute;
top:20px;
right:100px;
相对定位(position:relative)：
元素相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
position:relative;
left:100px;
top:50px;
注意：比如设置 left:100px; 是距左边 100px 的意思
固定定位(position:fixed)：
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同？
44、字体属性缩写：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
等价于
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
使用简写方式至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值
在缩写时 font-size 与 line-height 中间要加入“/”斜扛
常用：font:12px/1.5em "宋体",sans-serif;
css中，有两种不同类型的字体系列：
通用字体系列：拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列：具体的字体系列（如 "Times" 或 "Courier"）
45、水平居中设置：
行内元素：
被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的
定宽块状元素：
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的，auto的真正含义？
不定宽块状元素：
1.加入table标签：
table其长度根据其内文本长度决定
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）
display:table; margin:0 auto;？
2.改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果
3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中
46、垂直居中设置：
父元素高度确定的单行文本：
在文本容器，如h1设置样式使得 height = line-height
原因：
文本行的高度 = 上行间距 + font-size + 下行间距，其中上行间距 = 下行间距，因而文字是在文本行内垂直居中的
line-height 其实就等于文本行的高度，如下图所示
设置样式 height = line-height 意味着只有单行，而单行也就是文本行，故文字就是垂直居中的
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”，分为两半，分别加到一个文本行内容的顶部和底部
行高与块高一致带来一个弊端：当文字内容的长度大于块的宽时，就有内容脱离块
父元素高度确定的多行文本、图片：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用
td 标签默认情况下就设置了 vertical-align 为 middle
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
47、隐性改变display类型：
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，此时就可以设置元素的 width 和 height ，且默认宽度不占满父元素
浙公网安备 33010602011771号