1、H5新增的标签
标签 | 描述 |
header | 头部区域 |
footer | 页脚区域 |
nav | 导航区域 |
section | 模块 |
aside | 侧边栏区域 |
article | 文章页 |
这些新增的标签不会带来任何视觉效果的改变,它的作用仅是增加了语义性
2、H5新增的表单及其属性
表单 | 描述 |
<input type="range"> | 滑块 |
<input type="date"> | 日期控件 |
<input type="number"> | 唤醒数字键盘 |
placeholder | 占位文本 |
autofocus | 自动获取焦点 |
autocomplete | 自动补全 |
required | 自动验证表单 |
3、多媒体标签
视频video 音频audio
属性 | 描述 |
src | 要播放的音频、视频的URL |
autoplay | 自动播放 |
controls | 播放控件 |
loop | 循环播放 |
preload | 在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
4、字符集
gbk | UTF-8 |
收录的仅是汉字,片假名 | 收录了全世界所有国家的语言文字 |
存储一个汉字上2个字节 | 存储一个汉字占3个字节 |
5、CSS的概念
CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
处理HTML标记并生成DOM(Document Object Model,文档对象模型)——→浏览器展示DOM内容
基本语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
6、字体属性
属性 | 值 | 描述 | 备注 |
font-size | px、smaller、larger | 字体大小 | 一定要带单位 |
fint-weight | 100-900、normal=400、bold=700 | 字体粗细 | 常用400和700 |
font-sytle | nomal、italic(倾斜) | 字体倾斜 | |
font-family | 宋体、黑体、micorsoft yahei | 字体样式 | 不要使用冷门字体,使用中文字体或者一些特殊的英文字体时需要添加"";字体可以写多组,中间使用,隔开,浏览器会从左到右依次识别。 |
font-variant | normal、small-caps | 小型大写字母字体 | 所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。 |
字体的简写:font: font-style font-weight font-size/line-height font-family;
不建议修改顺序,并且不需要设置的属性可以不写,但是font-size和font-family必须指定,否则将不起作用。
7、CSS选择器
选择器 | 特点 | 描述 |
标签选择器 | 会将页面上所有符合的标签都选择上,但是不能实现差异化选择,在实际工作中很少使用 | 如p、h1、div甚至可以是 html 本身 |
类选择器 | 可以给相同标签的元素定义不同的样式 在实际工作中用的最多 | .自定义类名{} |
多类名选择器 | 一个元素可以拥有多个类名 类名和类名之间用逗号隔开 多类名选择器可以让我们解决更复杂的一些需求 | p.warning.help {color: red;},选择器会匹配class属性同时包含warning和help的所有p元素。 |
id选择器 | id选择器一般配合后期的JS使用较多,效果和类选择器一样,只不过是类选择器可以被多个元素调用,但是id选择器只能被一个元素调用 在同一个页面中吗,不能出现两个id值相同的元素 | #,仅仅会使用一次,不能组合使用,因ID属性不允许有空格的词列表。 |
通配符选择器 | 选中任何元素,后期用于样式初始化。效率太低 | *{ 属性1:值1; 属性2:值2; } |
伪类选择器 | 书写顺序不能调换,一般只写下面2个 a{} a:hover{} | a:link 没有被访问的时候的状态 a:visited 访问之后的状态 a:hover 鼠标移上去之后的状态 a:active 鼠标按下的状态 div:hover 鼠标移上去之后的状态 |
8、文本样式
属性 | 值 | 描述 |
text-align | left、right、center | 水平对齐 |
text-indent | px(像素),或者em | 首行缩进:text-indent:2em; |
text-decoration | none(无修饰),underline(下划线),overline(上划线),line-through(删除线) | 规定添加到文本的修饰 |
line-height | px(像素) | 设置行高。如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中 |
color | color_name,hex_number,rgb_number | 规定文本的颜色 |
letter-spacing | normal、length(可负值) | 字符间距 |