ul 无序列表
li 有多少条数据取决于多少个li
默认是实心小圆disc
circle 空心小圆
square 实心方块
none 无
ol 有序列表
默认是 阿拉伯数字 decimal
A 大写英文
a 小写英文
I 大写罗马文
i 小写罗马文
注意:使用项目符号的标签属性type具有局限性
一般使用 list-style-type属性修改
list-style-type 设置列表项目符号的类型
circle 空心圆
disc 实心圆
square 方块
none 没有
decimal 数字
upper-alpha 大写英文
lower-alpha 小写英文
upper-roman 大写罗马文
lower-roman 小写罗马文
lower-greek 小写希腊字母
decimal-leading-zero 0开始的数字标记
upper-latin 大写拉丁字母
lower-latin 小写拉丁字母
cjk-ideographic 简单的表意数字(大写的中文一二三)
list-style-image 图片列表项目符号
list-style-position 列表项目符号的位置
outside 外侧 默认值
inside 内侧 (注：不可以通过具体的数值修改)
list-style 是一个复合属性
dl 自定义列表
dt 定义项 装图片 (可以装任意元素)
dd 描述项 装文本 (可以装任意元素，包括行内与块元素)
form 表单元素 做数据交互
table 表格 做数据展示
address 倾斜 地址
总结: 块元素独占一行
支持width 和 height
常见的行内元素
a 跳转，下载，超链接，锚点链接
span 特殊文本
b 加粗
strong 加粗 强调作用
i 倾斜
em 倾斜 强调作用
time 时间
sub 下标
sup 上标
br 强制换行
label 给表单元素作标注 / 绑定内容与按钮成为一组
总结:一行显示
不支持宽width 高height
不支持padding/margin-top/bottom
补充:鼠标经过/划过/悬停时候的状态
cursor属性
pointer 手指/小手
wait 等待/加载
move 拖拽/移动
help 帮助
default 箭头
行内块元素 (特殊的行内元素)
img 图片
input 表单元素
select 下拉菜单
textarea 文本域
总结:可以再一行显示并且支持宽高的元素
行内元素的相互转化
display:
inline 块元素转化为行内元素 / 解决IE6浏览器双倍间距的兼容问题
block 行内元素是转化为块元素 / 显示元素 / 解决图片带来的3-5像素的兼容问题
inline-block 行内块元素
none 隐藏元素 不占位
table 让元素变成表格元素 *****
table-cell 让元素变成表格单元格元素 *****
list-item 列表项目
inherit 继承
总结: 空标签即单标签 meta img link input br hr
特殊符号
-
< < -
> > -
" 双引号 -
® 注册 ® -
© 版权 © -
半角空格(英文)
表单
form 双标签 块元素 作用于数据交互
表单控件类型
text 文本框
password 密码框
radio 单选 (女男性别选择)
checkbox 复选 (爱好，运动)
reset 重置
submit 提交按钮 value属性改变按钮上的文字
button 普通按钮
image 图像域 (可作为提交按钮)
file 文件域 (上传图片) multiple属性 设置同时上传多个文件
eg:<input type="file" multiple="multiple">
hidden 隐藏域 (星级评级)
textarea 文本域 (留言，评价，说说)
select 下拉菜单
必须配合option使用
form标签上的属性
action 提交地址
method 提交/请求方式
post 传送数据 提交量大 安全性高
get 获取数据 提交量小 安全性低
title 鼠标划过提示信息
name 表单名称 默认form1 (为了区分多个表单)
target 打开方式 ****
_self 默认值 原窗口
_blank 新窗口
_parent (了解)
_top (了解)
单选按钮的实现
指定多个单选框的 name 属性指定相同，绑定为一组
eg: <input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
checked 属性 默认选中 只作用于radio与checkbox
下拉菜单的默认选中
selected 只作用于option元素
label 标签的 for 属性可把 label 绑定到另外一个元素
eg： <input type="checkbox" name="sex" checked id="b"> <label for="b">音乐</label>
实现点击文本按钮选中
input标签的属性
type 类型
name 名称
value 默认值
disabled="disabled" 禁用
enabled="enabled" 可用，默认值
checked="checked" 选中
letter-spacing 设置文字与文字的间距
word-spacing 设置单词与单词的间距
:before 在一个元素前面插入一个内容
:after 在一个元素后面插入一个内容
:before 与 :after 必须配合content 属性生效
注意:即使内容为空也得存在
注意:通过 :before 与 :after 插入的内容都是行内元素
content 的内容可以是
string 字符串
url 图片
counter 计数器
attr 自定义属性
语义化标签
赋予一定含义的标签 为语义化标签
结构标签
header 表示头部/页眉 ** 双标签 块元素
一般装 logo 登陆 注册信息
section 内容/主体标签 文档中的节 块/双 *******
section的功能与div类似 **************考核
footer 页脚/尾部 **
一般装 版权信息 注册信息 公司地址 合作伙伴
nav 导航信息 ****
aside 侧边栏/侧导航 ****
article 来自博客或者论坛的一篇独立的文章,与asdie相关联 强调独立性 *****
hgroup 进行大小标题的标题组合 <!--了解-->
figure 定义图片/视频/音频 <!--了解-->
time 时间/日期 **
address 默认字体倾斜 定义地址，联系人，作者 ** 考核 [块元素 独占一行]
optgroup 下拉菜单的内容组合 (了解)
button 标签 按钮 双标签 <button></button> 行内
主体 考核
section nav aside article time
非主体 考核
header footer main(一个页面只能使用一次) hgroup address
功能标签
datalist 配合input元素实现了输入提示列表 *********
关联: 让 input 元素的 list 属性 与 datalist 标签的 id 属性相同
summary
details
summary与details 配合使用，实现了 点击展开更多的效果
summary 装的是展开更多/阅读全文
details 装的是详情
<!-- progress 进度条 通过js可以动态的更改进度条的进度(百分比)-->
媒体标签
audio 音频 ***
src 表示文件路径
autoplay 自动播放 *****
controls 播放控件 如：音量，快进，后退，暂停等
playcount 播放次数 默认值1
muted 视频是否静音 ******
defaultMuted 视频默认是否静音 ******
注意: audio 不支持宽高
video 视频 ***
src 文件路径
width 视频的宽度
height 视频的高度
autoplay 自动播放 *****
controls 播放控件
loop 视频播放完成再次播放
<!--playcount 播放次数 废--> 默认1次
muted 视频是否静音 ******
defaultMuted 视频默认是否静音 ******
raido
radius
radial
新增的表单元素/控件/表单类型
C2/html4
text
password
radio
checkbox
submit
button
reset
file
image
hidden
C3/html5 *****************
color 颜色
number 数字 **
url 地址 **
email 邮箱 **
tel 电话 **
date 日期 **
search 搜索 **
month 月
week 周
datetime-local / datetime 本地时间
range 0-100之间的区间范围的显示/(形状为滚动条)
time 时间 **
新增的表单元素属性/控件属性
C3 *******************
placeholder 提示信息 键盘摁下自动消失 **
min 最小值 **
max 最大值 **
step 步长值 **
required 必填项 **
pattern 检测格式 **
1[3|5|7|8]{1}[0-9]{9}
[0-9]{11}
list 引用 datalist 元素。如果定义，则一个下拉列表可用于向输入字段插入值 *****
form 定义输入字段属于一个或多个表单 *
autofocus 自动激活 *
autocomplete 自动完成功能 ***
默认值 on开启
off 关闭
checked 选中
disabled 禁用
enabled 可用 默认值
maxlength 输入最大字符 *****
C2
name 表单名称
type 类型
value 值
disabled="disabled" 禁用
enabled="enabled" 默认值 可用
checked="checked" 选中
title 鼠标滑过提示文字
src 路径
alt 内容错误文字说明
display 属性 隐藏显示属性 或者 行内与块元素相互转化的属性 ***
inline 块元素转化行内元素
block 行内转化块元素 / 显示元素 *****
inline-block 行内块元素
none 隐藏元素 不占位 ****
table 让元素转化为表格元素
table-cell 让元素转化为表格单元格元素
list-ites 列表项目符号
inherit 继承
visibility 属性 隐藏元素 占位显示
visible 默认值 显示 / 可见元素
hidden 隐藏 占位
collapse 删除一行或者一列 用于表格
float 属性 浮动属性
float 特点： 脱离文档流 不占位 导致父元素高度塌陷为0
<!--浮动：脱离文档流的属性，不占位（影响：使浮动元素之后的其它元素上飞跟随）-->
float：left；元素从左向右开始排，正序
float：right；元素从右向左排，倒序
float：none；默认值
浮动的作用：
·1、使元素并行显示 都加浮动
2、改变元素的位置
3、可以将行内元素转化为块元素
4、可以解决首个盒子的margin-top失效问题
5、行内元素垂直间距不生效；使块元素宽度自适应；img上3px空隙;
浮动的坏问题：
1 浮动后元素不占位
父级元素：高度塌陷、未闭合、无内容高度、背景消失，边框线一顶条
后面的元素：整体上飞，部分内容上飞、背景上飞，背景消失，上margin上padding失效
2同行右浮元素要前置
首个盒子的margin-top失效问题：1、float：left；
2、给父元素加border
3、用padding-top替代；注意盒子高度必须减
clear：清除浮动-可以使页面布局正常。可起到换行的作用
（注1：单纯的br标签只能对内联元素换行）
（注2：不要在浮动元素的父级盒子上添加clear属性）
clear：left；
clear：right；
clear：both； 清除双向浮动
clear：none；默认值
清除浮动的方法？ ****考核重点/面试题
1 给浮动元素的父元素添加高度
2 给被动元素影响的元素添加clear:both
3 给浮动元素父元素添加overflow:hidden
4 给浮动元素父元素添加 :after{content:"";display:block;clear:both;width:0;height:0;overflow:hidden;_zoom:1;[解决IE兼容]} (公司使用)
5 给浮动元素之后添加空标签 定义class为clear/clearfix 并且在css中定义clear:both 样式
6 给浮动元素之后添加br标签，定义行内样式 clear:both
鼠标显示：1、cursor: pointer;小手
2、cursor:move; 移动指针
3、cursor:help; 求助
4 cursor:wait 等待加载
5 default 默认值 箭头
补充：line-height 行高属性；设置行间距；单位：px、%
雪碧图 / sprites / 图片精灵 原理？
好处: 减少http的请求次数
缺点: 不利于后期的求改与维护
原理: 利用图片整合技术，把多个图标放在一张画布上，通过background-image 加载画布，利用background-position移动画布来精准的获取icon图标的位置
pc 端常见的布局
常规布局/普通布局
浮动布局
定位布局
第五单元 盒模型及文本属性
盒模型 = width + height(content) + padding + margin + border + background(可选的)
可以影响盒模型实际的属性有 padding + border
1. background属性的应用
1.1 background-color 背景颜色
#CCC
red
rgb 三原色 red green blue
rgba a = alpha 透明度 0 完全透明 1 不透明 取值 0-1之间的小数 (c3) *****
hsl 色调 饱和度 亮度
hsla
1.2 background-image 背景图片
url 路径
注意: 除了纯色是color之外全部指向image
1.3 background-repeat 背景图的平铺方式
repeat 平铺/铺满 默认铺满整个父元素
no-repeat 不平埔 显示一个
repeat-x 水平平铺
repeat-y 垂直平铺
1.4 background-position 背景图的显示位置 支持负值
默认值 left top 左上角
语法:background-position:X Y / X
如果该属性有两个值，第一个值表示水平方向
第二个值表示垂直方向
如果该属性提供一个值，则表示水平方向，第二个值采取默认值 center ***
取值可以是 关键字 如 left top center....
%
number+px
1.5 background-attachment 设置背景图片是否跟随浏览器滚动 (了解)
scroll 默认值 滚动
fixed 固定 不滚动
1.6总结 background 是一个复合属性
语法： background: color image repeat position attachment;
一个元素上添加 多个背景图片的方法是
多个url路径 逗号 隔开
注意： 除了纯色都是 image (即: 渐变属于background-image的值 [c3]新增的)
2. margin属性的使用/应用
margin 设置盒子与盒子的距离 即 外边距
2.1 margin:10px;
一个值表示上 右 下 左 四个方向都是10px
2.2 margin:10px 20px;
第一个值表示 上下 第二个这表示左右
2.3 margin：10px 20px 30px
第一个值表示上 第二个值表示左右 第三个值表示下
2.4 margin:10px 20px 30px 40px
第一个值表示上 第二个值表示右 第三个值表示下 第四个值表示左
2.5 margin可以支持某一个方向的定义
eg:margin-top / right / bottom / left
2.6 margin 是一个复合属性 支持负值
******** margin值上下取大值，左右叠加！
上下都为正数 取大值
一正一负 相加的结果
两个都是负数 取绝对值的大值 (考核+重点)
注意: 父元素下的首个子元素margin-top 失效
行内元素不支持margin-top/bottom属性
3. padding属性的应用
与上同理
注意: padding 不支持负值
padding 设置内容距离边框的距离 即 内边距/内填充/内补白
4. border属性的应用
border 边框属性
4.1 border-width 边框的宽度/粗细
4.2 border-color 边框颜色
4.3 border-style 设置边框的样式
none 默认值 无
solid 实线
dotted 点线
dashed 虚线
double 双线
4.4 总结: border 是一个复合属性
border 的顺序可以被打乱
注意:一条边边框线显示必须 三个属性同时存在
border-width:20px 30px;
border-style:solid double;
border-color:red orange;
border支持某一个方向
border-left/right/top/bottom
5. 字体属性
5.1 font-family 设置字体的类型
宋体 有衬线字体
微软雅黑 无衬线字体
5.2 font-size 设置文本的字体大小
px 绝对单位
em 相对单位 相对于父元素
rem 相对单位 相对于html(根元素/祖先) (一般做媒体响应式/弹性盒) 移动端使用 无衬线字体 eg:"微软雅黑"
默认 16px = 100% = 1em = 1rem
pc端常见的字体大小是12px或者14px
5.3 font-weight 设置文本的粗细/ 加粗程度
normal 设置文本为正常，不加粗
bold 加粗
bolder 比加粗更粗
lighter 比正常更细
100 - 500 正常
600 - 900 加粗
5.4 font-style 设置字体的样式/字体是否倾斜显示
normal 默认值正常
italic 倾斜
oblique 斜体
5.5 color 文本的颜色
5.6 text-align 设置文本的水平对齐方式
left 左对齐 默认值
center 居中对齐
right 右对齐
5.7 text-decoration 设置文本的修饰 <!--direction 方向-->
none 无修饰
underline 下划线
overline 上划线
line-through 中划线/删除线
blink 文本闪烁 (了解)
5.8 text-indent 设置文本的首行缩进
em
px
rem
%
支持负值
5.9 line-height 设置文本的行间距
number+px 具体值
number 文本的几倍
eg:line-height:2; 表示行间距是文字高度的二倍
eg:font:16px/2; 表示字体为16px,行间距是字体的两倍
总结:font 是一个复合属性
简写以下代码： 考核***********
font-family:"微软雅黑"，"黑体";
font-size:14px;
line-height:2;
font-weight:bold;
font-style:italic;
color:red;
font: bold italic 14px/2 "微软雅黑"，"黑体";
color:red;
5.10 letter-space 设置文字与文字之间的间距
5.11 word-space 设置单词与单词之间的间距
5.12 vertical-align 垂直对齐: baseline top middel bottom
word-break : normal | break-all所有的长短单词词内换行 | keep-all
word-wrap : normal | break-word 只针对长单词词内换行
white-space : normal | pre | nowrap不换行
text-overflow 文本溢出: clip裁切掉 | ellipsis 省略号显示
单行文本的省略号显示：width+overflow+nowrap+text-overflow
border-image-source // 使用绝对或相对地址url,引入图片
border-image-slice //切割图片，取值支持:<number> 或<percentage>其中number是没有单位的，
border-image-width //边框图片的宽度
border-image-outset //边框向外延伸的距离
border-image-repeat //边框如何重复取值有： stretch | repeat | round
它的默认值是：none 100% 1 0 stretch。
none:是border-image的默认值，如果取值为none时，表示边框无背景图片。
使用 border-image 时，其将会替换掉border-style 属性所设置的边框样式。
此外，规范要求使用 border-image 时边框样式必须存在。
补充
小三角形的制作
原理:border边框对角线相连 实现四个小三角
width:0;
height:0;
border:number solid transparent;
border-top-color:color; 向下的三角
单行文本省略号
第一步:强制文本再一行显示
white-space:nowrap
第二步:溢出的内容隐藏
overflow:hidden
第三步:溢出的内容显示省略号
text-overflow:ellipsis
clip 裁切 默认值