基础知识

Posted on

H5基础 与 CSS3

H5基础

HTML5 是下一代的 HTML。

特性

1.语义化更好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
新增标签

article定义文章
aside定义文章的侧边栏
figure一组媒体对象以及文字
figcaption定义 figure 的标题
footer定义页脚
header定义页眉
hgroup定义对网页标题的组合
nav定义导航
section定义文档中的区段
time定义日期和时间
mark定义需要突出显示或高亮显示的文本
progress显示js中耗费的函数的进程
details表示用户要求得到并可以得到的详细信息

3.表单功能增强

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
新增的input元素的类型

url:提交表单时检测input的value是否是一个url格式
email:一个电子邮件地址或电子邮件地址列表
date:年-月-日格式的控件
time:时:分格式的控件
datetime-local:同上，但没时区
month:年-月格式的控件
week:年-周数格式的控件
number:数字输入框
color:颜色选择框
range:选择区域



input新属性

placeholder:占位符，当输入框为空时显示的文字
required:该input是否为必填项
list:指定一个datalist，作为下拉提示单
pattern:指定一个正则表达式，用于检查输入是否符合正则
min/max:input的number能输入的最大/最小
step:针对input的number类型，每次递增step的值

5.响应式

响应式主要利用的是

1
2
3
CSS3——media query（媒体查询）
借助Javascript 判断屏幕的宽度和设备来进行调整
第三方的开源框架：bootstrap  amazeui

流式布局

1
2
3
4
5
6
7
仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组css媒体查询突变到另一组，两者间没有任何平滑渐变。
将固定像素布局转换为灵活的百分比布局。
百分比计算公式：目标元素width/上下文元素width=百分比width

用em（rem）替换px（em用于字体，rem用于所有）
弹性图片，需要设置阀值
为不同屏幕尺寸提供不同图片

viewport 视口（改变分辨率）

1
2
3
4
5
6
7
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--
device-width——设备的宽度
initial-scale——初始大小
maximum-scale——最大缩放
user-scalable——用户操作 0为不能操作
-->

媒体查询

1
2
3
4
screen用于电脑屏幕，平板电脑，智能手机等。
max-width定义输出设备中的页面最大可见区域宽度。
max-height定义输出设备中的页面最大可见区域高度。
min-width定义输出设备中的页面最小可见区域宽度。

栗子

1
2
3
@media screen and (min-width: 320px) and (max-width: 640px){
		/*屏幕最小320 最大640时所执行的样式*/
}

核心的属性

Orientation-设备方向

1
2
@media screen and (orientation:portrait){}/*-竖屏-*/
@media screen and (orientation:landscape){}/*-横屏-*/

CSS3

1.更多选择器类型

通用选择器

1
2
3
~ ：  E~F{ }  匹配任何在E元素之后的同级F元素(从E元素往后找同级兄弟F元素)ie9以上
+ ：E+F{ } 匹配在E元素之后第一个的同级F元素ie9以上
> : E>F{ } 匹配任何在E元素之后子级为F的元素ie8以上

属性选择器(优先级比类选择器高，比id选择器低)ie8以上

1
2
3
E[att^=“ val”] :属性att的值以“ val”开头元素
E[att$=“ val”] :属性att的值以“ val”结尾元素
E[att*=“ val”] :属性att的值任何位置包含“ val”元素

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
E: root  匹配E元素的根元素（html）

 E：nth-child（n）匹配E元素的父级下排第n个E元素
 E: nth-last-child（n）匹配E元素的父级下排倒数第n个E元素
 E: last-child    匹配E元素的父级下排倒数第1个E元素

 E：nth-of-type（n）匹配E元素的父级下第n个E元素
 E：nth-last-of-type（n）匹配E元素的父级下第n个E元素
 E：first-of-type  匹配E元素的父级下第n个E元素
 E：last-of-type  匹配E元素的父级排第n个E元素

E：only-child  匹配E元素的父级下唯一的子级E元素
E：only-of-type  匹配E元素的父级下唯一E元素类型的子级E元素
E：empty  匹配空的E元素

E：not（s）反选，匹配不为s的E元素
E:target    选择当前活动的 E 元素（即被a锚点选中时）
input:enabled    选择每个启用的 <input> 元素
input:disabled    选择每个禁用的 <input> 元素    
input:checked    选择每个被选中的 <input> 元素
E::selection    选择被用户选取的元素部分的字体样式、背景