HTML5新增

语义化标签

等同于div

header

footer

————————————————————————————

datalist

option

用id值关联

id和list的值相同

————————————————————————————

fieldset

legend

定义输入框

—————————————————————————————

mark 标记语言

双标签 用于圈重点

—————————————————————————————

meter

例： meter min='10' , max=’20‘ value = "15"

low 和 high属于警示值

用于进度条

——————————————————————————————

新增input type 属性值

url 需要填写内容必须为网址

email 与要填写的内容为邮箱地址

search 再输入文字以后出现一个删除键

range 进度条

date 日历表

time 定时器

color 取色器 选取颜色

number 只能为数字

_____________________________________________________

video

source

audio

视频标签

video标签概述：

1.src-----------规定要播放视频的URL地址

2.poster--------视频加载时显示的图像或者点击播放按钮前显示的图像

3.preload-------定义视频是否预加载

属性有3个可选择的值nonemetadataauto

默认为：auto

●none :当页面加载后不载入视频；

●metadata : 当页面加载后只载入元数据

●auto : 当页面加载后再入整个视频

4.autoplay属性---------设置视频是否自动播放

用法：< video src=“xxxx.mp4” autoplay=“autoplay” > < /video>

5.controls属性：-----向用户显示控件，控制栏包括暂停控制，播放进度控制，音量控制等。

6.width，height-----------设置播放器的宽度和高度

注：

如果想要链接不同的视频文件可以用（source元素）

示例：

autoplay>

————————————————————————————

audio 音频

注：

1.audio标记中如果不包含controls属性，audio播放器不会出现在页面上

2.audio元素的play()方法可以实现打开网页自动播放并且不显示界面。

后面可能会有补充。

1.行内样式 （在标签内作为一个属性去使用）

2.style标签为内联样式（可以写在任何的地方，一般写在head）

3.外联样式 建立css文件（只能写css）

——————————————————————

font-size 控制字体大小

浏览器当中不支持12px以下的文字大小，通过计算属性来控制字体变成12px以下

font-family

用英文的时候不加""，用中文的时候加""

font-weight

不识别负数（包括0）

必须为100的整数倍

font-style

默认值normal正常字体（italic oblique）

font 综合设置

font(style weight size family )

———————————————————————

css文本样式

color

color-name

hex-number（当16进制的颜色字符出现重复时可以省略）使用频率最高

rgb（0~255，0~255，0~255）

rgba（#，#，#，0~1) a代表透明度

hsl 色相

————————————————————————

对齐

text-align 文本-位置

justify 两端对齐，中间留空

center 居中对齐

right 向右对齐

left 向左对其（默认）

————————————————————————

text-decroation（给文本增加一条下划线）

underline 下划线

overline 上边线

line-through 中间划线（删除线）

————————————————————————

文本转换

text-transform

uppercase 文本全部大写

lowercase 文本全部小写

capitalize 将文本中的单词首字母大写

————————————————————————

文本缩进

text-indent

控制文本的首行距离

用（px：可以为负值）或者（% ：父元素的宽度百分比）

—————————————————————————

文本阴影

text-shadow（h，v，blur，color）

h 水平方向的距离（px值）

v 垂直方向的距离（px值）

blur 模糊的程度

———————————————————————————

direcion （ltr，rtl）和 alitext-align 用法一样

————————————————————————————

letter-spacing

字符的间隙

控制每个字符之间的间隙

————————————————————————————

word-spacing

控制单词与单词之间的空隙

—————————————————————————

line-height

控制每行文字之间的空隙

当line-height=父元素的高度的时候 会垂直居中，单行文本才能生效

————————————————————————

选择器

1.标签选择器

作用范围：当前页面的所有标签生效

在css页面中设置 class串联

在css中用"#"串联HTML中的id

id选择器是唯一的（id只能使用一次）

class是不唯一的(可以重复多次使用 class可以为多个，但是属性值只能为一个）

________________________________________

css选择器

消除浏览器默认样式

*（通配符）{

}

不推荐使用，通配符会影响全局

————————————————————————

选择器的优先级

通配符

class 中命名的名称遵循就近原则

————————————————————————

伪类选择器链接

a标签中使用

link 没有浏览

hover （鼠标滑过生效）可以用于所有标签

visited 浏览之后

active 鼠标点击的时候

a标签的伪类选择器是需要有顺序的：

lovehate==link visited hover active（必须遵从这个规矩）

伪类是CSS 用于向某些选择器添加特殊的效果。

a标签中有四个：link、visited、hover、active

（1）link-设置a对象在未被访问前的样式表属性。

（2）visited-设置a对象在其链接地址已被访问过时的样式表属性。

（3）hover–设置对象在其鼠标悬停时的样式表属性。

（4）active-设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active

————————————————————————————————

input：focus{}选定的边框

—————————————————————————————————

结构伪类选择器

first-child （先找父元素，没有元素要求）

last-child

nth-child（）

1.找儿子的顺序

2.给对应相匹配的元素

first-of-type（优先级大于child）

先找对应标签（把所有的对应的标签列出来，其他的标签不用）

再找位置

nth-of-type

only-child

only-child:当元素是唯一的子元素，被选择 

only-of-type:当元素是唯一类型的子元素，被选择

—————————————————————————————————

特定结构选择器

empty 选择一个空元素

target（锚点定位后，点击以后改变目标元素的样式）