html5和css的知识点总结

浏览器的总类

IE、Firefox、Chrome、Safari、Opera

制作网页的初始代码

一些初始代码的含义
文档类型的声明标签
lang 语言 en 英文网页 zh-CN中文网页
charset 规定使用哪种字 UTF-8 万国符

标题
段落
段落（块状元素）
跨距

---

文本格式化标签

- 加粗或
- 倾斜或
- 删除线或
- 下划线或

_{推荐使用前一种声明方法}

引入图像的方法

• < img src="图像URL“/ >
• alt 替换文本，图像不能显示时的文字
• title 提示文本，鼠标放在图像上的文字
• width\height 设置图像的宽和高

---

• border 设置图像边框

盒子的样式：border-style:

• solid 实线边框
• dashed 虚线边框
• dotted 点线边框
• border-radius：创建圆角边框
• box-Shadow：附加一个或者多个下拉框的阴影

---

创建一个三角性图标
border

链接

• 外部链接： < a href=" " >文字< /a >
• 内部链接：
• 空连接：#
• 下载链接：文件或压缩包形式
• 网页元素链接：网页中的各种元素都能添加超链接
• 锚点链接： #名字 加入链接 id=名字

表格标签（做网页不常用）

	行
	

	
表头单元格
	
文字
	
	

表格属性

•	align 表格元素的对齐方式
•	border 表格单元是否拥有边框
•	width 表格的宽度
•	表格的头部区域
•	表格的主体区域
合并单元格
•	跨行合并：rowspan="单元格数目"
•	跨列合并：colspan="单元格数目"
表单域

•	action 指定接收并处理表单数据的服务器成语的url地址
•	method设置表单数据的提交方式，取值为get或post
•	name 指定表单名称，区分同一页面中的多个表单域

列表标签

- 无序列表

- 有序列表
- 

表单控件

• text 文本框，用户可以在里面输入任何字
• password 密码文本框
• radio 单选文本框
• checkbox 多选按钮
• submit 提交表单
• reset 重置按钮
• button 普通按钮

select 下拉表单元素
textarea 文本域元素

---

基础选择器

1. 标签选择器【权重001】

• 某一类标签全部选出 标签{}

2. 类选择器【权重010】

• .class{}

3. id选择器【权重100】

• #class{} 只能被调用一次

4. 通配符选择器【权重000】

• *{} 选择包含其中的所有

4. 拟类选择器 【权重010】

• 元素：

    - a:link	未被访问的链接
    - a:visited 已被访问的链接
    - a:hover	鼠标指针位于其上的链接
    - a:active	活动链接（正在按下还未弹起的链接）【按照顺序】
  

5. 属性选择器【权重010】

• E[att] 选择具有att属性的E元素
• E[*att] E[$att] E[*att]

6. 结构伪类选择器【权重001】

• E:first-child 匹配父元素中的第一个元素E
• E:last-child
• E:nth-child(n) 匹配父元素中的第n个子元素E

！import【权重无穷】

复合选择器

1. 后代选择器

• 父元素 后代元素{} 选择后代元素

2. 子代选择器

• 父元素>子代元素 只选择子代（第一代）

3. 并集选择器

• 元素1，元素2{} 同时选择同一等级的元素1，2
  拟类选择器

元素的显示模式

• 块级元素
• 行内元素
• 行内块元素

显示模式的转换

• display：block 转换为块级元素
• display：inline 转换为行内元素
• display：inline-block 转换为行内块元素

背景background

• 背景颜色 background-color
• 背景图片 background-image：url（）
• 取消背景平铺 background:no-repeat
• 背景图片位置 background-position
• 背景图像固定 background-attachment：fixed

CSS的三大特性：层叠性、继承性、优先性

---

盒子模型

盒子内边距：padding
盒子内边距：margin（outo 为居中）
圆角边框：border-radius：length盒子
盒子影子：

• h-shadow 水平阴影的位置
• v-shadow 垂直阴影的位置
• blur 模糊距离
• spread 阴影的尺寸
• color 阴影的颜色
• inset 外部阴影

浮动

选择器[float:none\left\right]
浮动特性：

1. 脱离标准流的控制移动到指定位置
2. 浮动的盒子不再保留原先的位置

清除浮动

• overflow

定位

组成：定位=定位模式+边偏移
定位模式：

• static 静态定位（默认）
• relative 相对定位（占位置）
• absolute 绝对定位（不占位置）
• fixed 固定定位（不占位置）

设置盒子堆放次序：z-index:(数字)

元素的显示和隐藏

• display 显示隐藏
• visibility 显示隐藏
• overfl：scroll 溢出显示隐藏

字体图标网站
iconmoon字库
iconfont字库

CSS用户界面样式

鼠标样式：cursor：

• default 小白（默认）
• pointer 小手
• move 移动
• text 文本
• not-allowed 禁止

溢出的文字用省略号表示

• white-space：nowrap（强制一行内显示）
• overflow：hidden（溢出的部分隐藏）
• text-overflow：ellipsis（溢出的部分用省略号显示

HTML5新特性
标签

  
头部标签
  
导航标签
  
内容标签
  
定义文档某区域
  
侧边栏标签
  
尾部标签

多媒体标签

•   音频:

•   视频:

属性

-autoplay 视频自动播放
-设置宽高
-loop循环播放
-muted静音播放
-poster加载图片

表单属性
input=“text” ***

-required 其内容不能为空
-placeholder 表单的提示属性
-autofocus 自动获取焦点
-multiple 可以多选文件提交