<!-- 注释 --> 不显示与页面上
- <hr/>
- 水平线
- < h1>
- 字体大小
- <p>
- 段落
- < br/>
- 换行
Size 粗细 color 颜色
Strong/b 加粗 em/I 倾斜 src 图像位置
alt 图像不能显示时显示的文字
title 鼠标悬停时的标记
width 宽度
height 高度
img border 边框宽度
图像标记 vspace 垂直边距 / 图像顶部和底部的空白
hspace 水平间距 / 图像左部和右部的空白
left 左
center 中
align right 右
对齐属性 top 图像顶端和第一行文字对齐, 其他文字在图像下方
middle 图像中线和第一行文字对齐, 其他文字在图像下方
bottom 图像底部和第一行文字对齐, 其他文字在图像下方
href 指定引用外部文件的地址
rel stylesheet 指定当前文档与引用文档关系, 属性值常为 stylesheet, 表示定义一个外部样式表
text/CSS 引用外部文档类型为 CSS 样式表
text/JavaScript 引用外部文档类型为 JavaScript 脚本
_self 默认值 原窗口
_blank 新窗口
元素列表
ul 无序列表
ol 有序列表
dl 指定列表 dt 所需描述的 dd 描述文字
结构元素
header 引导, 导航, 常放与头部, 代表一个区域
nav 将带链接的归于一定区域
article 将文档上下不相关的部分分开 用 section 划分
aside 定义当前页面或文章的附属信息, 可以包含相关或有别于主要内容的部分
在 article 内做主要内容附属信息
在 article 外作页面或站点全局的附属信息, 广告, 友情链接等
section 分块, 常由内容和标题组成. 不要将 section 用于设置样式的页面容器没有标题的内容板块不要使用 section 元素定义, 如果 article,aside,nav 更符合使用条件, 就不要使用 section.
footer 定义一个页面或区域的底部, 可以包含所有通常放于页面底部的内容
分组元素
figure 用于独立的流内容(图像, 照片, 代码), 一般指一个单独的单元. 内容与主要内容有关 , 如果被删除, 也不会对文档流产生影响
figcaption 为 figure 添加标题, 一个 figure 元素最多允许使用一个 figcaption, 常用于第一个和最后一个位置
hgroup 将多个标题组成一个标题组. 如果有一个标题不建议使用, 当一个标题包含副标题, section 或 article 元素时, 建议将 hgroup 元素和标题相关元素放在 header 中
页面交互元素
details 用于描述文档或文档某个部分的细节
summary 常用于和 details 配合使用, 作为第一个元素, 定义标题(题目)
value 已完成的工作量
max 总共有多少工作量
high 被界定为高的值
low 被界定为底的值
max 最大值 默认值 1
min 最小值 默认值 0
optimum 定义什么是最佳值
value 要输入的值
文本层次语义元素
time 用于定义时间或日期, 可以表示 24 小时中的某一时间. 不会在浏览器呈现任何特殊效果, 但会使搜索引擎生成更加智能的搜索结果
datetime 取值为具体时间或具体日期, 不定义时, 由元素给定时间 / 日期
pubdate 用于定义 time 中日期 / 时间是文档的发布日期 其值一般为 pubdate
mark 在文本中高亮某些字符, 引起注意
cite 创建一个引用标记, 被引用的文档以斜体出现-- 李白《静夜思》
全局属性
draggable 定义元素是否可以拖动
hidden 元素是否隐藏
spellcheck 是否进行拼写和语音检查
contenteditable 属性是否可编辑元素的内容, 前提是该元素必需获得鼠标焦点并且内容不是只读的
/* 注释 */ 不显示于浏览器上
CSS 样式中的选择器严格区分大小写, 属性和值不区分大小写, 书写一般都采用小写.
多个属性之间必须用英文状态下的分号隔开, 最后一个可以省略, 但最好不要.
如果属性的值由多个单词组成且中间包含空格, 则必须加上英文状态下的引号.
行内式 (内联样式) 是通过标记的 style 来设置样式 , 写在 < body > 标记中
- <标记名 style="属性: 属性值;">内容</ 标记名>
- <h2 style="font-size:20px;color:red:">文字或其他</h2>
内嵌式 写在 < head > 头部标记, 并且用 < style > 标记定义
<styletype="text/css">
h2 {color:red;} </style> 选择器{属性: 属性值 ; }
链入式 将所有的样式放在以. CSS 为扩展名的外部样式表中, 通过 < link/>标记链接但 html 文档中, 写在 < head > 标记中
<link href="css 文档路径" type="text/css" rel="stylesheet"/>
CSS 基础选择器
标记选择器 标记名 (p,h) 令标记的显示
按标记名称分类, 为页面中某一类标记指定统一的 CSS 样式, 优点是能快速为同类型的标记统一样式, 也是缺点, 不能设计差异化样式
标记名{ 属性: 属性值;}
P{font-size:12px; color:#66;}
类选择器 . 类名 class="类名(可以一个以上的类名)"
类名即为 HTML 元素的 class 属性值, 使用 "."(英文点号)进行标记, 后面紧跟类名. 最大的优势是可以为元素定义相同或单独的样式. 类名的第一个字符不能使用数字, 严格区分大小写, 一般采用小写的英文字符
. 类名{ 属性: 属性值;}
.red {color:red;} class="red"
Id 选择器 #id 名 id="id 名"
Id 名即为 HTML 元素的 id 属性值, 使用 "#" 进行标记, 后面紧跟 id 名. 元素的 id 值是唯一的, 只能对应文章中某一个具体的元素. 同一个 id 名也可以应用多个标记, 但是不被允许. 不支持像类选择器呢样定义多个值
#id 名{属性: 属性值;}
通配符选择器 *
是所有选择器中作用范围最广的, 能匹配所有的元素. 实际中不建议使用, 因为不管需不需要都会标记, 反而降低了代码的执行速度
标签指定式选择器(交集选择器) 标记选择器 +
由两个选择器构成, 第一个为标记选择器, 第二个为 class 选择器或 id 选择器, 两个选择器之间不能由空格
p.special 仅仅适用与 < p class="special">
6. 后代选择器 元素嵌套
用来选择元素或元素组的后代, 写法是外层标记在前, 内层标记在后, 中间用空格隔开. 当发生嵌套时, 内层标记就成了外层标记的后代
P stong 仅仅适用与 < p>...<strong>...</strong>...<p > 的形式
不仅限于使用两个元素, 如果需要其他元素, 只需在元素间加上空格
7. 并集选择器 逗号连接
将各个选择器通过逗号连接, 包括任何选择器都可以作为并集选择器一部分.
与单独使用效果完全相同
相对长度
font-size
字体大小
绝对长度
各种字体之间必须使用英文状态下的逗号隔开.
中文字体需要加英文状态下的引号, 英文字体不需加引号. 写时英文
字体必须在中文字体前
如果字体名包含空格,# 等符号则必须加英文状态下的单引号或双引号
font 综合字体设置(字体, 大小,,, 一起使用) p{font:30px bold;}
@font-face 属性
Word-wrap 属性
Color 颜色
letter-spacing 定义字间距. 中英文都行, 允许使用负值, 默认值为 normal
Word-spacing 定义英文单词之间的距离. 对中文字符无效, 允许使用负值, 默认值 normal
line-height 行间距. 属性单位有三种 像素 px(使用最多), 相对值 em, 百分比 %
text-indent 首行缩进. 可以使用负值, 建议使用 em
text-shadow 阴影效果. h-shadow 水平阴影距离, v-shadow 垂直阴影距离
blur 模糊半径 ,color 阴影颜色
Css3 选择器
P[id^="a"] p 元素中 id 属性值以 a 开头的选中
属性选择器 p[id$="b"] p 元素中 id 属性值以 b 结尾的选中
P[id*="c"] p 元素中 id 属性值含 c 的选中
:root 对所有页面元素生效
:not 排除一个结构元素下面的子元素, 让它不使用这个样式
:only-child 适用于某个父元素仅有一个子元素
: first-child 用于父元素的第一个元素
: last-child 用于父元素的最后一个元素
: nth-chilld(n) 选择某个父元素中第 n 个元素
: nth-last-child(n) 选择某个父元素中倒数第 n 个元素
: nth-of-type(n) 选择某个父元素中匹配特定类型的第 n 个元素
: nth-last-of-type(n) 选择某个父元素中匹配特定类型倒数第 n 个素
:empty 选择没有子元素或文本内容为空的所有元素
:target 选择页面中 target 元素(前提点击了页面中的超链接
并且跳转 target 元素后)
CSS 盒子模型
width 宽度 height 高度 border 边框
background 背景颜色 padding 内边距 margin 外边距
div 英文 division 的缩写, 意为 "分割, 区域". 简单来说就是区块容器标记. 最大意义在于与浮动元素 float 结合
border-width 边框宽度
border-color 边框颜色
border-radius 圆角边框
box-shadow 添加阴影效果 box-shadow: 水平 垂直 半径 扩展 颜色 阴影类型;
阴影类型 内阴影(inset)/ 外阴影(默认)(可选属性)
box-sizing 用于定义盒子的宽度值和高度值是否包括元素的内边距和边框
float 浮动元素
- *{
- padding:0;
- Margin:0;
- }
背景属性
设置背景颜色
background-color 来设置元素背景颜色. 可使用预定义的颜色值, 十六进制
#RRGGBB 或 RGB 代码 rgb(r,g,b). 默认值 transparent, 即背景透明, 此
时子元属会显示父元素的背景
设置背景图像
background-image background-image :url(...);
背景与图片不透明度的设置
RGBA 模式 是 CSS3 新增的颜色模式, 是 RGB 颜色模式的延伸, 该模式是在红绿蓝三原色的基础上添加了不透明参数
P{background-color:rgba(r,g,b,alpha)} alpha 不透明度(0~1 之间)
opacity 属性 定义元素的不透明度
P{opacity :opacityValue;} opacityValue 不透明度(0~1)
设置背景图像平铺
background-repeat 定义图像平铺方式
设置背景图像的位置
background-position 用以定义背景图片在元素的水平和垂直方向的坐标. 一
般为两个值, 中间用空格隔开
设置背景图像固定
background-attachment 设置背景图像固定在屏幕的某一位置, 不随着滚动条移动
设置背景图像的大小
background-size 控制背景图片大小. 可以设置为两个值
设置背景的显示区域
background-origin 定义图像的相对位置. 默认元素左上角为坐标原点定位
设置背景图像的裁剪区域
background-clip 定义背景图像的裁剪区域
设置多重背景图像
通过背景属性提供的多个属性值来实现多重背景图像效果, 各属性值之间用逗号隔开
background-position:bottom,right top,center;
背景复合属性
background 复合属性(综合). 各个样式顺序任意, 对于不需要的可以省略
- background:[background-color] [background-image] [background-repeat]
- [background-attachment] [background-position]
- [background-size] [background-clip] [background-origin] ;
使用背景图像属性定义列表样式
list-style 复合属性, 用于控制列表项目符号的样式
list-style :none; 清除列表的默认显示样式
*{padding:0;margin:0;list-style:none;}
CSS3 渐变属性
线性渐变
background-image:linear-gradient(渐变角度, 颜色值 1 n%, 颜色值 2 n%...);
起始颜色会沿一条直线过渡到结束色, 各颜色之间用 "," 隔开. 每个颜色
值后可以加一个百分比数值, 用以标明颜色渐变的位置 (可不写)
径向渐变
background-image:radial-gradient(渐变形状 圆心位置, 颜色值 1, 颜色值 2...);
起始颜色会从一个中心点开始, 依据椭圆或圆形进行扩张渐变 . 每个颜色
值后可以加一个百分比数值, 用以标明颜色渐变的位置 (可不写)
渐变形状 定义径向渐变的形状, 可以是定义水平和垂直半径的像素值或百
分比, 或相应的关键词
圆心位置 确定元素渐变的中心位置, 省略的话默认为 center
background-image:radial-gradient(ellipse at center,#111,#222);
重复线性渐变
background-image:repeating-linear-gradient(渐变角度, 颜色值 1, 颜色值 2...);
括号内的参数取值与线性渐变相同, 分别用于定义渐变角度和颜色值
重复径向渐变
background-image:repeating-radial-gradient(参数值)
括号内的参数取值与径性渐变相同, 分别用于定义渐变形状, 圆心位置和颜色值
background-image:repeating-radial-gradient(circle at 50% 50%,#111,#222 10%,#333 20%); 定义了一个形状为圆形, 径向渐变位置在容器中心点, 三种颜色径向渐变
定义基础样式
定义 CSS 样式时, 首先要清除浏览器的默认样式
*{margin:0;padding:0;outline:none;}
元素的浮动
元素的浮动元素 float
清除浮动 clear (只能清除左右两侧的影响. 就是说不能清除子元素浮动对父元素的影响)
清除父子元素之间浮动
Clear:both 空标记. 清除元素浮动产生的影响. 无形中增加负担, 不建议使用
After 伪对象. 不建议使用
overflow:hidden 给父元素定义, 清除子元素对父元素浮动的影响, 建议使用
规范溢出内容的显示方式
Overflow
"overflow:scroll" 与 "overflow:auto" 不同, 无论元素是否溢出, 滚动条始终存在
元素的定位
定位模式
定位模式 (position) 仅仅适用于定义元素以哪种方式进行定位, 并不能确定元素的具体位置
边偏移
精确定位元素的位置
层叠等级属性 z-index
调整定位元素的堆叠顺序, 取值可为正整数, 负整数, 0, 取值越大, 定位元素在层叠元素中越居上(仅对定位元素生效)
元素的类型与转换
元素的类型
块元素 在页面中与区域块的形式出现, 通常独自占一行或多整行, 可以设置宽度高度等属性. 常用于页面布局和网页结构的搭建 < div > 最典型
行内元素 也称内联元素或内嵌元素, 不必再一行出现, 不占有独立的区域, 不可以设置宽度和高度, 对齐等属性. 常用于控制页面中文本样式 < span > 最典型
行内元素常嵌套在块元素中使用, 而块元素却不能嵌套在行内元素中. 当行内元素元素嵌套在块元素中时, 就会在块元素中占据一定范围, 成为块元素一部分. 在行内元素有几个特殊的标记 <img/><input/> 可以对他们设置宽高和对齐属性, 称为行内块元素
<span > 标记 行内元素, 只能包含文本和各种行内标记 .<span > 中不能嵌套 < div > 标记
元素的转换
inline: 显示为行内元素
block: 显示为块元素
inline-block: 显示为行内块元素, 可以设计宽高等属性, 但不占一行
none: 元素被隐藏, 不显示
表单的构成
表单控件: 包含了具体的表单功能项, 如文本输入框, 密码输入框
信息提示: 一些说明性文字, 提示用户
表单域: 相当于一个容器, 用来包含所有表单控件和提示信息, 传递给后台服务器
表单属性
- <form action="url 地址" action="接收处理" method="提交方式" name="表单名称">
- <input type="text" name="zhang hao" />
- <!-- 各种表单控件 -->
- </form>
action 属性 用于接收并处理表单数据的服务器程序的 URL 地址
method 属性 用于设置表单数据的提交方式
name 属性 用于指定表单的名臣, 以区分同一个页面中的多个表单
autocomplete 属性 指定表单是否有自动完成功能. 所谓的 "自动完成" 是指将表单控件输入的内容记录起来, 当再次输入时, 会将输入的历史记录显示在一个下拉表单中
on 表单有自动完成功能
off 表单无自动完成功能
novalidate 属性 指定提交表单时取消对表单进行有效的检查. 为表单设计该属性时,
(true)可以关闭整个表单的验证, 这样可以使所有表单控件不被验证
Input 元素及属性 表单中最常见的元素
Input 元素的 type 属性
(1)单行文本输入框 <input type="text"/>
常用来输入简短的信息, 如用户名, 账号, 证件号等
(2)密码输入框 <input type="password"/>
输入密码, 其密码用圆点标示
(3)单选按钮 <input type="radio"/>
用于单项选择, 应用 checkbox 设置默认选中项, 必须为同一组选项指定相同
的 name 值
(4)复选框 <input type="checkbox"/>
用于多项选择, 如选择兴趣 爱好
(5)普通按钮 <input type="buttom"/>
常常配合 JS 使用
(6)提交按钮 <input type="submit"/>
是表单的核心控件, 使用 value 可以改变默认文本
(7)重置按钮 <input type="reset"/>
输入信息有误时, 取消所有输入的表单信息
(8)图像形式的提交按钮 <input type="image"/>
与普通的提交按钮功能相同, 只是用图像代替的默认按钮. 必须指定 url 地址
(9)隐藏域 <input type="hidden"/>
对于用户不可见, 用于后台程序
(10)文件域 <input type="file"/>
当定义文件域时, 页面上将出现一个文本框和一个 "浏览..." 按钮, 用户可以通过填写文件路径或直接选择的方式, 将文件提交给后台服务器
(11) email 类型 < input type="email"/>
专门输入 e-mail 的文本输入框, 验证是否符合格式; 如果不合适, 则提示信息
(12)url 类型 < input type="url"/>
输入 URL 地址的文本框, 验证是否符合格式; 合适则提交到服务器, 不然, 则不 允许提交, 且会有提示信息
(13)tel 类型 <input type="tel"/>
输入电话号码的文本框, 通常与 pattern 配合使用
(14)search 类型 < input type="search"/>
输入搜索关键词的文本框, 能够自动记录一些字符, 输入内容后右侧会附带一个删除图标, 点击快速清除
(15)color 类型 <input type="color/>
用来提供颜色的文本框, 用以实现一个 RGB 颜色输入, 默认黑色 #000000(六位数), 通过 value 可以更改颜色. 单击文本框可以快速打开拾色器面板;
(16)Number 类型 <input type="number"/>
提供数值的输入框. 在提交时, 会检查是否为数字, 如果不是, 则出现提示
(17)range 类型 <input type="range"/>
提供一定范围数值的输入范围, 在网页中显示为滑动条
(18)date pickers 类型 <input type="date,month,week ..."
autofocus 属性 在访问 Google 主页时, 页面中的文本输入框是否会自动获得光标焦 点, 以 便输入关键词 autofocus="autofocus"
form 属性 可以把子元属写在页面中的任意位置, 只需要设置该表单的 id
- <input action="#" method="get" id="aaa">
- <input action="#" method="get" form="aaa">
- 一个表单
list 属性 指定输入框所绑定的 datelist 元素, 其值是 datelist 元素的 id
- <input type="url" list="aaa">
- <datalist id="aaa">
- <option label="百度" value="http://www.baidu.com">
- </option>
- </datalist>
multiple 属性 可以向文本输入框中输入多个值, 多个地址之间用逗号隔开
<input type="file" multiple="multiple">
textarea 元素 多行文本输入框
select 元素 包含多个选项的下拉菜单
- <select>
- <optgroup label="北京" (组名 必须有)>
- <option>
- 东城区
- </option>
- <option>
- 东城区
- </option>
- </optgroup>
- </select>
Keygen 元素 用于表单的密钥生成器. 当提交时会生成两个键; 一个是秘钥, 储存在 客户端, 一个是公钥, 发送到服务器, 验证用户的客户端证书; Chrome 浏览 器加密强度包括 2048(高强度)和 1024(中等强度)两种
视频解码器 H.264 Throra VP8
音频解码器 AAC MP3 Ogg
在 HTML5 中嵌入视频 (支持 MPEG4,Ogg 和 webM)
<vidio src="视频路径" controls="controls"></vidio>
src: 路径 controls: 提供播放控件
在 HTML5 中嵌入音频 (支持 Ogg,MP3 和 wav)
<audio src="音频路径" controls="controls"></audio>
src: 路径 controls: 提供音频控件
source 元素 提供多个备用元素
- <audio controls="controls">
- <source src="位置" type="指定文件类型">
- </audio>
过渡
transition-property 属性 指应用 CSS 属性的名称
transition-duration 属性 过渡时间
transition-timing-function 属性 过渡效果速度曲线
transition-delay 属性 过渡效果延迟
transition 属性 综合设置 必须按照顺序
transition:border 5s ease 2s;
2D 转换
平移 transform:translate(,) 省略第二个参数时 , 默认为 0
缩放 transform:scale( , )
负值翻转元素(如文字翻转), 然后再缩放. 如果省略第二个参数, 则第二个参数等于第 一 个. 小于 1 的小数可以缩小元素
倾斜 transform:skew(,) 省略第二个参数取默认值 0
旋转 transform:rotate( )
变换中心点 transform-origin:(50% 50% 0)(默认值)
3D 转换
transform:rotateX() 指定元素围绕 X 轴旋转
transform:rotateY() 指定元素围绕 Y 轴旋转
transform:rotateZ() 指定元素围绕 Z 轴旋转, 效果与 rotate 相同
rotate3d(x,y,z,angle)translate3d(x,y,z) scale(x,y,z)
X , Y , Z 位移向量的长度. Z 不能是百分比, 否则视为无效值
angle 角度值, 指定元素在 3d 空间内旋转的角度
转换的属性
transform 应用 2d 或 3d 转换
transform-style 规定被嵌套元素如何在 3d 空间显示 preserve-3d
perspective 规定 3d 元素的透视效果
perspective-origin 规定 3d 元素的底部位置
backface-visibility 元素在不面对屏幕是否可见
动画
- @keyframes 'name'(动画的名字)
- {
from,to{opacity:0;} 开始和结束时的状态
20%,80%{opacity:100%;} 在这之间时的状态
}
animation-name 属性 动画名. 初始值 none, 表示不应用任何动画
animation-duration 属性 动画完成的时间, 负数仍为 0,s/ms
animation-timing-function 属性 速度曲线, 取值同上
animation-delay 属性 延迟时间播放
animation-iteration-count 属性 播放次数. number 定义播放次数, infinite 循环播放
animation-direction 属性动画是否逆向交替循环. alternate 奇数正常, 偶数逆向
- animation:mymove(名字) 5s(时间) linear(速度曲线)
- 2s(延迟播放) infinite(循环播放)alternate(是否逆向交替) ;
来源: http://www.bubuko.com/infodetail-2983931.html