HTML+CSS整体回顾

常用的一些新的结构标签

结构标签

1.header：标记定义一个页面或宇哥区域的头部
2.footer：标记顶一个页面或一个区域的底部
3.nav：标记定义导航栏链接
4.aritcle：标记定义一篇文章
5.section：标记定义一个区域
6. aside：侧边栏导航
7. hgroup：标记定义文件中一个区块的相关信息
8. figure：标记一组媒体内容以及它们的标题（图像）
9. figcaption：标签定义figure元素的标题

多媒体交互标签

1.video：标记定义一个视频
2.audio：标记定义音频内容
3.source：标记定义媒体资源
4.canvas：标记定义图片
5.embed：标记定义外部的可交互的内容或者插件

特殊样式

1.mark：标记文字
2.meter：刻度百分占比
3.progress：进度条
4.wbr：长单词换行位置

兼容性不是很好的标签

1.dialog：定义一个对话框
2.bdi：单独设置文字摆放方式
3.details/summary：描述某部分的详情summary为details的标题
4.wbr：长单词换行位置
5.datalist：

删除的HTML标签

1.basefont
2.big
3.center
4.font
5.s
6.strike
7.tt
8.u

HTMl智能表单

input表单type属性值
1.type=“text" 单行文本输入框
2.type=“password” 密码
3.type=“radio” 单项选择
4.type=“checkbox” 多项选择
5.type=“button" 按钮
6.type=“submit” 提交
7.type=" file" 上传文件
8.type=“reset” 重置
9.type=“email” 限制用户输入必须为email类型
10.type=“url” 限制用户输入必须为url类型
11.type=" data" 限制用户输入必须师日期类型
12.type=“datatime” 显示完整日期 含时区
13.type=“datetime-local” 显示完整日期 不含时区
14.type=“time” 限制永不输入必须为事件类型
15.type=“mouth” 限制用户输入必须为月类型
16.type=“week”`限制用户输入必须为周类型
17.type=“number” 限制用户输入必须为数字类型
18.type=”range“ 生成一个滚动条
19.type=”search" 具有搜索意义的表单resulit=‘n’属性
20.type=”color" 生成一个有颜色选择表单
21.type=“tel” 显示电话号码

新增表单属性

1.required:required内容不能为空
2.palceholder：表单提示信息
3.autofocus：自动聚焦
4.pattern：正则表达式，输入的内容必须匹配到指定正则范围
5.默认师on，关闭选择器师off
6.formaction：在submit里定义提交地址
7.datalist：输入框列表配合list使用list值为datalist的id值
8.output：计算或脚本输出

css3新特性预览

强大的css选择器

:before,:after在元素内容前面，后面添加内容（相当于行内元素）
::first-line 匹配文本块的首行
::first-letter 选择文本块的首字母
通用选择器：*
选择子元素：&gt
相邻兄弟选择器：+ 选择到元素的直接后代
普通兄弟选择器：~ 选择到紧随其后的第一个元素
伪元素选择器
伪类选择器：
UI伪类选择器：

:enabled选择启用状态元素

:disabled 选择禁用状态元素

:checked选择被选中的input元素（单选按钮或复选框）

:default 选择默认元素

:valid、invalid 根据输入验证选择有效或无效的input元素

:in-range、out-of-range选择指定范围之内或者之外受限的元素

:required、optional根据是否允许:required属性选择input元素
动态伪类选择器：

:link选择链接元素

:visited 选择用户以访问的元素

:hover 鼠标悬停其上的元素

:active鼠标点击时触发的事件

:focus 当前获取焦点的元素

其他伪类选择器：

:not(<选择器>)对括号内选择器的选择取反

:lang(<目标语言>) 基于lang全局属性的元素

:target url片段标识符指向的元素

:empty选择内容为空的元素

:selection鼠标光标选择元素内容

CSS文本属性复习

white-space：对象内空格的处理方式

nowrap 控制文本不换行

pre 空白会被浏览器保留

pre-line 合并空白 保留换行符

pre-wrap 保留空白 正常换行

direction：文本流的方向

ltr 文本从左向右

rtl 文本从右往左

unicode-bidi：用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

CSS3新增文本属性

color:rgba();

text-overflow:是否使用一个省略标记（…）标示对象内文本的溢出

text-align:文本的对齐方式

text-transform:文字的大小写

text-decoration:文本的装饰线，复合属性

text-shadow:文本阴影

text-fill-color:文字填充颜色

text-stroke:复合属性。设置文字的描边

tab-size:制表符的长度

word-wrap:当前行超过指定容器的边界时是否断开转行

word-break:规定自动换行的处理方法

text-overflow:是否使用一个省略标记（…）标示对象内文本的溢出

clip：默认值 无省略号

ellipsis：当对象内文本溢出时显示省略标记（…）。

注意：该属性需配合over-flow:hidden属性(超出处理)还有 white-space:nowrap(禁止换行)配合使用，否则无法看到效果

text-align:文本的对齐方式

css1

left:默认值 左对齐

right:右对齐

center:居中

justify：内容两端对齐。

css3

start:开始边界对齐

end:结束边界对齐

text-transform:文字的大小写

full-width：将左右字符设为全角形式。不支持

full-size-kana：将所有小假名字符转换为普通假名。不支持

例如：土耳其语

none：默认值 无转换

capitalize：将每个单词的第一个字母转换成大写

uppercase：转换成大写

lowercase：转换成小写

text-decoration:文本的装饰线，复合属性(只火狐支持)

指定文本装饰的样式。

• text-decoration-color：
  • 指定文本装饰的颜色。

• 指定文本装饰的种类。相当于CSS1时的text-decoration属性

  text-decoration-line：

  text-decoration-style ：

  blink：指定文字的装饰是闪烁。 opera和firefox

  text-decoration : #F00 double overline CSS3实例

  text-shadow:文本阴影

  x 横向偏移

  y 纵向偏移

  blur 模糊距离(灰度)

  color 阴影颜色

  取值：x y blur color,……

  text-fill-color:文字填充颜色

  text-stroke:复合属性。设置文字的描边

  text-stroke-width:文字的描边厚度

  text-stroke-color:文字的描边颜色

  tab-size:制表符的长度

  默认值为8(一个tab键的空格字节长度)，在 pre标签之内才会有显示

  word-wrap:当前行超过指定容器的边界时是否断开转行

  normal：默认值

  允许内容顶开或溢出指定的容器边界。

  break-word：

  内容将在边界内换行。如果需要，单词内部允许断行
  3. 新的颜色机制和透明度设定
  4. 多栏布局的实现
  5. 多背景图效果
  6. CSS背景属性复习

  background:

  background-color:背景颜色

  background-image:背景图片

  background-repeat:背景重复

  background-position:背景定位

  background-attachment:背景固定(scroll/fixed)

  CSS3新增背景属性

  background-size 背景尺寸

  background-size:x y 水平 垂直方向的尺寸，像素/百分比/auto/…

  background-size:100% 100%

  background-size:cover 比例放大

  background-size:contain 包含（图片不溢出）

  多背景

  background-image:url(1.jpg),url(2.jpg);

  background-origin 背景区域定位

  border-box：从border区域开始显示背景。

  padding-box：从padding区域开始显示背景。

  content-box：从content内容区域开始显示背

  background-clip 背景绘制区域

  border-box：从border区域向外裁剪背景。

  padding-box：从padding区域向外裁剪背景。

  content-box：从content区域向外裁剪背景。

  text:背景填充文本

  no-clip：从border区域向外裁剪背景

  颜色渐变

  线性渐变：linear-gradient(起点/角度，颜色 位置，…,)

  起点：left/top/right/bottom/left top……默认top

  角度：逆时针方向 0-360度

  颜色 位置：red 50%, blue 100%(红色从50%渐变到100%为蓝色)

  repeating-linear-gradient 线性渐变重复平铺

  IE低版本渐变(滤镜)：

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000’,GradientType=‘1’);

  径向渐变：radial-gradient(起点(圆心位置), 形状/半径/大小，颜色1，颜色2)

  起点：left/top/right/bottom或具体值/百分比

  形状：ellipse(椭圆)、circle(正圆)

  大小：具体数值或百分比，也可以是关键字（closest-side(最近端), closest-corner最近角), farthest-side(最远端), farthest-corner(最远角), contain(包含) ,cover(覆盖)）;

  文字阴影效果

  开放的网络字体类型

  圆角

  .边框圆角

  在CSS2中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片

  在 CSS3中，创建圆角是非常容易的

  在CSS3中，border-radius属性用于创建圆角

  border-radius边框圆角写法

  border-radius: 2em 1em 4em / 0.5em 3em;

  边框背景图片

  box-shadow方框添加阴影

  x-shadow 必需。水平阴影的位置。允许负值。

  y-shadow 必需。垂直阴影的位置。允许负值。

  blur 可选。模糊距离。

  spread 可选。阴影的尺寸。

  color 可选。阴影的颜色。请参阅 CSS颜色值

  inset 可选。将外部阴影 (outset) 改为内部阴影

  语法：box-shadow:x-shadow y-shadow blur spread color inset;

  box-shadow的API

  实例：box-shadow:10px 10px 5px 5px #888888;

  盒子阴影

  媒体查询

  https://mp.weixin.qq.com/s/_nAJHK8esQyG2q1nYJBVig
  https://blog.youkuaiyun.com/qq_35718410/article/details/52301874