头部元素
- base: 标签为页面上的所有链接规定默认地址或默认目标（target）：
头部增加下行代码，页面中的所有连接都在新窗口打开，否则则在当前窗口中打开。
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
- title页面标题
- meta描述文档，文档关键词
用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 - 页面重定向（5s内页面重定向到目标地址页面）
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
字符实体
< 小于号 < <
大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
url
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
<!DOCTYPE html>
版本 年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
css
css定位
position:static,absolute(绝对定位),relative（相对定位）,fixed（固定定位 ）;
相对定位:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
相对定位是“相对于”元素在文档中的初始位置
绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间
绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 [z-index 属性](CSS z-index 属性")来控制这些框的堆放次序。
overflow：visible（默认值），scroll（滚动条），hidden（溢出则不显示），auto（溢出则有滚动条，否则没有）
clip：裁剪
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
vertical-align:垂直对齐方式
img{vertical-align:text-top}
img{vertical-align:text-bottom}
Z-index：元素的堆叠顺序，负值在下。
css浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
**clear清除浮动both,left,right,none;
css选择器
- 元素选择器，即标签选择器
- 选择器分组
- h1,h2,h3{}
- 通配符 *
- 类选择器
- 结合通配选择器：
*.important {color:red;}
如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：
.important {color:red;} - 结合元素选择器:p.important {color:red;}
- 多类选择器class="important warning"
- id选择器
- 与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
*#intro {font-weight:bold;} #intro {font-weight:bold;} - id="intro"
- 属性选择器
- a[href][title] {color:red;}
- a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
根据具体值 - <p class="important warning">This paragraph is a very important warning.</p>
如果写成 p[class="important"]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：
p[class="important warning"] {color: red;} - 根据部分属性值来选择
p[class~="important"] {color: red;} - 字串匹配属性选择器
类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
- 特定属性选择器
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
*[lang|="en"] {color: red;}
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
- 子元素选择器
只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
- 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
- 子代选择器
- h1 em {color:red;}
伪类
selector : pseudo-class {property: value}
| 属性 | 描述 | CSS |
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :lang | 向带有指定 lang 属性的元素添加样式。 |
伪元素
| 属性 | 描述 | CSS |
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
媒介类型
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
网友评论