HTML5基础

W3C标准包括结构化标准语言(HTML,XML),表现标准语言(css),行为标准(DOM,ECMAScript)。

gb2312:简体中文
ISO-885901:英文
Big5:繁体
UTF-8:国际通用

<h1></h1>最大字号
<h6></h6>最小字号
<p>段落标签

换行标签

---

水平线标签
<em></em>倾斜标签
<strong></strong>粗体标签
Keywords搜索关键字
Description内容描述

&nbsp 空格
&gt 大于号
&lt 小于号
&copy版权符号

<img src=”图片路径” alt=”文字替代” title=”标题” width=”宽度” height=”高度”/>
锚链接:<a name=”a标签链接地址”>目标位置</a>
<a href=”链接地址” target=”目标窗口”></a>_self():自身窗口 _blank():新建窗口
1-1无序列表
<ul><li></li></ul>
1-2有序列表
<ol><li></li></ol>
1-3定义列表
<dl><dt><dd></dd></dt></dl>
1-4表格
<table>colspan:跨列 rowspan:跨行
<tr>
<th>
<td></td>
</th>
</tr>
</table>

1-5视频元素
<video> <source src=”路径” controls=”控件”/></video>
Autoplay自动播放
Loop循环播放
1-6音频元素
<audio><source src=”路径” controls=”控件”/></audio>
<iframe src=”页面地址” name=”标识名”></iframe>

<form method=”提交方式” action=”跳转页面”></form>

<input type=“类型” value=”初始值” name=”名称”/>
类型 有:text,password,checkbox,radio,reset,file,email,number,url,hidden,image,button

1-3列表框
<select name=”标示名”>
<option value=”1”>文本</option>
</select>
1-4多行文本域
<textarea name=”标示名” cols=”显示的列数” rows=”显示的行数”>
</textarea>
1-1外部样式表
<link href=”css/common.css” rel=”stylesheet” type=”text/css”/>

1-2.层次选择器
1.E F(后代选择器):选择匹配的F元素,并且匹配的F元素被包含在匹配的E元素内。
2.E>F(子选择器):选择匹配的F元素,并且匹配的F元素是匹配E元素的子元素。
3.E+F(相邻兄弟选择器):匹配的F元素,并且匹配的F元素位于匹配的E元素后面。
4.E~F(通用兄弟选择器):匹配的F元素,并且位于匹配的E元素后的所有匹配的F元素。

1-3.结构伪类选择器
1.E:first-child:作为父元素的第一个子元素的元素E
2.E:last-child:作为父元素的最后一个子元素的元素E.
3.E F:nth-child(n):选择父级元素E的第n个子元素F.
4.E:first-of-type:选择父元素内具有指定类型的第一个E元素。
5.E:last-of-type:选择父元素内指定类型的最后一个E元素。6.E F:nth-of-type:选择父元素指定类型的第n个F元素。

1-4.属性选择器
1.E[attr]:匹配具有attr属性的E元素
2.E[attr=val]:匹配具有attr属性的E元素,并且属性值为val.
3.E[attr^=val]:匹配元素E,并且定义的attr属性,以val开头的任意字符串。
4.E[attr$=val]:匹配元素E,并且定义的attr属性,以val结尾的任意字符串。
5.E[attr*=val]:匹配元素E,并且定义的attr属性,包含了val。

1-1font-weight属性值
1.normal:默认值,定义标准的字体
2.bold:粗体
3.bolder更粗的字体
4.lighter:更细的字体

1-2.font-style属性值
1.normal:标准字体
2.italic:斜体字体
3.oblique:倾斜字体

1-3.rgba透明色(0,0,255,0.5):0.5的透明度

1-4.水平对齐:text-ailgn
1.left:文本排列到左边
2.right:文本排列到右边
3.center:文本在中间
4.justify实现两端对齐文本效果

1-5.文本装饰text-decoration
1.none:标准文本
2.underline:文本的下划线
3.overline:文本的上划线
4.line-through:文本的删除线

1-6.设置图片与文本对齐
Vertical-ailgn:middle
1-7.文本阴影
text-shadow:color,x轴,y轴,模糊半径

1-8.超链接伪类
1.a:link 单击访问前的超链接样式
2.a:visited 单击访问后的超链接样式
3.a:hover 鼠标悬浮的超链接样式
4.a:active 单击未释放的超链接样式

1-9.列表样式list-style-type
1.none:无标记符号
2.disc:实心圆
3.circle:空心圆
4.square:实心正方形
5.decimal:数字

1-10.渐变
linear-gradient(to top,orange,blue);

1-1.border-color:#369 4个边框的颜色都一致
1-2.border-style属性
1.none无边框
2.dotted点线边框
3.dashed虚线边框
4.solid实现边框

1-3.尺寸=border(上下/左右)+padding(上下/左右)+内容宽度
1-4.边框
border-radius:上下左右(10px,20px,30px,40px)
Border-radius:50%(圆形)
1-5.阴影
box-shadow:阴影类型(inset),x轴位移,y轴位移,阴影模糊半径,阴影颜色

1-1.display属性值
1.block:块级元素的默认值
2.line:行内元素的默认值
3.inline-block:行内块元素
4.none:元素不会被显示

1-2.overflow属性的常见值
1.visible:默认值
2.hidden:内容会被修剪,内容不可见
3.scroll:内容会被修剪,浏览器会显示滚动条查看内容
4.auto:如果内容被修剪,浏览器会显示滚动条以便查看内容

1-1.设置透明层
1.opacity:0.5;
2.filter:alpha(opacity=50);
相对定位,没有脱离文档流会保留原来的位置。
绝对定位,会脱离文档流不会保留原来的位置,大小会等于内容的大小。
3.指定位置position:relative;
top:-20px;
left:20px;

1-1.移动
transform:translate(4px,8px);
-webkit-transform:translate(4px,8px);
-o-transform:translate(4px,8px);
-moz-transform:translate(4px,8px);

1-2.缩放
Transform:scale(1.5);
-webkit-transform: scale (1.5);
-o-transform: scale (1.5);
-moz-transform: scale (1.5);

1-3.倾斜
Transform:skew(40deg,-20deg);
-webkit-transform: skew 40deg,-20deg);
-o-transform: skew (40deg,-20deg);
-moz-transform: skew (40deg,-20deg);

2-2.过渡动画函数
1.ease:默认
2.linear:匀速运动
3.ease-in:渐显效果
4.ease-out:渐隐效果
5.ease-in-out: 渐显渐隐效果

Transform:all 0.8S easa-in-out;
-webkit-transform: all 0.8S easa-in-out;
-o-transform: all 0.8S easa-in-out;
-moz-transform: all 0.8S easa-in-out;

2-3.关键帧使用方法
@keyframes spread{
0%{width:0;}
33%{width:23px;}
66%{width:46px;}
100%{width:69px;}
}