1.<meta>
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。<meta> 标签始终位于 head 元素中。
meta 元素主要被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
name 和 content 属性的作用是描述页面的内容:
<meta name="keywords" content="HTML, CSS, XML" />
2.position
relative ：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
image.png
从图片可以看出保留原来的位置
position: relactive;
left: 30px;
top: 20px;
image.png
absolute: 元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:absolute;
left:20px
}
从图片看出，原来位置被完全删除，文字重叠了。
position: absolute;
left: 30px;
top: 20px;
image.png
3.clip（剪切）
clip:rect(0px 50px 200px 0px); //截上，宽，高，截左
4.Z-index
Z-index可被用于将在一个元素放置于另一元素之后。
Z-index：-1；为负值则放置在另一个元素之后。（透明）
Z-index：1；则会覆盖原来的元素。
5.常用字符实体
空格
< 小于号 <
> 大于号 >
& 和号 &
" 引号 "
' 撇号 ' (IE不支持)
6.通配符选择器
显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。每个元素都适用。
eg:* { color:red; }
7.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
<style type="text/css">
a[href] {
color:red;
}
</style>
</head>
<body>
<a href="http://baidu.com">属性选择器</a>
//则链接会变成红色的
8.后代选择器
h1 em {color:red;}
//<h1>标签内的<em>标签都是红色,其他 em 文本（如段落或块引用中的 em）则不会被选中。
9.子元素选择器
只针对子一代
h1 > strong {color:red;}
第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
10.兄弟选择器
相邻兄弟选择器使用了加号
+
h1 + p {margin-top:50px;}
//选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素。h1和p的上边距均为50px。
11.伪类选择器
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS </a>
//假如上面的例子中的链接被访问过，那么它将显示为红色。
p:first-child { font-weight: bold;}
//所有p标签的本身以及第一个子元素加粗
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
//p标签后面的第一个<i>标签加粗，第二个不会被加粗
12. :before 伪元素
:before伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片：
h1:before
{
content:url(logo.gif);
}
13. :after 伪元素
:after伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after
{
content:url(logo.gif);
}
14.:first-letter/:first-line
:first-letter向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
15.HTML文档结构
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
16.Scheme（因特网服务）类型
Scheme 访问 用于
http 超文本传输协议 以 http:/开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。
17.浮动（float）
float: left;
image.png
清除浮动
float:left;
clear:both; //图像的左侧和右侧均不允许出现浮动元素
image.png
clear属性
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从父元素继承 clear 属性的值。
18.HTML5
(1)video 添加视频
<video src= " ...../...ogg" controls = "controls"></video>
controls 属性供添加播放、暂停和音量控件。
(2)audio 添加音频
<audio src= " ...../...ogg" controls = "controls"></audio>
video 与audio通用的属性：
autoplay =" autoplay "如果出现该属性，则音频在就绪后马上播放。
controls ="controls"如果出现该属性，则向用户显示控件，比如播放按钮。
loop =" loop "如果出现该属性，则每当音频结束时重新开始播放。
preload =" preload "如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
(3)Canves 画布
<canvas id="myCanvas" width="200" height="100"></canvas>
<script> 在画布上绘制线条
var canves = document.getElementById("myCanves"); 找到画布
var cxt=c.getContext("2d"); 二维绘图（固定）
cxt.fillStyle="#FF0000"; 填充颜色
cxt.fillRect(0,0,150,75); 矩形框大小
cxt.moveTo(10,10); 从坐标（10，10）开始
cxt.lineTo(150,50); 直线到坐标（150,150）
cxt.lineTo(10,50); 再到坐标（10,50）
cxt.stroke(); 显示移动路线
</script>
<script> 在画布上放置一幅画
var canves = document.getElementById("myCanves"); 找到画布
var cxt=c.getContext("2d"); 二维绘图（固定）
var img=new Image();
img.src="/..../.png";
cxt.drawImage(img,x,y); 向画布上绘图
</script>
(4)Input 类型 - number
number 类型用于应该包含数值的输入域。
<form method="get">
<input type="number" max="70" min="8" step="7" value="9">
<input type="submit">
</form>
image.png
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
<form method="get">
选择：<input type="range" max="70" min="8" >
<input type="submit">
</form>
image.png
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
<form method="get">
日期：<input type="date" name="user_date" >
<input type="submit">
</form>
image.png
month - 选取月、年
<input type="month" name="user_date" >
week - 选取周和年
<input type="week" name="user_date" >
time - 选取时间（小时和分钟）
<input type="time" name="user_date" >
datetime - 选取时间、日、月、年（UTC 时间）
<input type="datetime" name="user_date" >
datetime-local - 选取时间、日、月、年（本地时间）
<input type="datetime-local" name="user_date" >
(5)datalist 元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id。
<form method="get">
请输入网址: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
(6)autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 <input> 标签的类型。
网友评论