h5新增和css3新增

Posted 2022-07-03 cxf1214

编辑器： webstorm， 英文版 sublime, hbuilder vscode, dw
h5的新标签及特性（移动端用的多），，，，如果想在图片里面显示 “帅哥" 记得使用单双引号，外面是单引号，里面是双引号
例如： <img src="" title=‘这里有一个"傻狗"‘/>
h5新增语义化标签：（对浏览器和搜索引擎友好，）div没有语义化， 都可能出现很多次
section元素 表示页面中的一个区块
article 元素； 表示页面中的一块内容，字多的！！！区域---论坛，博客，新闻
aside : 侧边栏
header : 页面头部
footer 页面底部
nav 导航 可以直接写li 不用ul 也可以

figure 表示一段独立的流内容 标题分组 作用类似 dl dt dd
独立流内容的标题figcaption元素为其添加标题 <figcaption><img> </figcaption>
main元素 表示页面中的主要内容（ie不兼容）
hgroup 标题的一个分组 像-主副标题的那种
mark:（不是块，也不经常用） 定义高量文本（自带黄色） 用background改颜色
time 包时间的： 例如： <time> 12-20 </time>
上面都是块

################视频和音频
video 视屏属性：
src 引入视屏路径
controls属性： 如果出现该属性，则向用户显示控件，比如播放按钮，控件可能不一样
autoplay属性；视屏在就绪后马上播放，谷歌屏蔽了该功能
loop: 重复播放属性
muted 静音属性
poster: 视屏图片 规定视屏正在下载时显示的图像，直到用户点击播放按钮
<video width="800" height=""> 可以设置宽高
<source src="myvideo.mp4" type="video/mp4"></source> 视屏的各种格式，向下查找，有哪个就播放哪个
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>

</video>
简单的写法就是
<video src="">

</video>
视屏常用的格式；mp4 ogg webm
音频：
audio : 用法同上
audio: 音屏常用的格式；mp3 ogg

##########H5智能表单：
input: type="email" 限制用户必须输入email类型 (验证不准，有局限性)
type="url" 限制用户必须输入url 网址的意思
type="range" 产生一个滑动条表单 类似调节音量的滚动条
type="number" 数字
type="search" 产生一个搜索意义的表单
type="color" 生成一个颜色选择的表单 颜色版

以下有兼容问题；
input: type="time" 限制用户必须输入时间类型 小时和分钟
type="month" 限制用户必须输入月类型
type="week" 限制用户必须输入周类型
type="datetime-local" 选取本地时间
type="date" 日期类型

output 用于接收输出数据结果
<output></output>

 

表单新属性：
1）Datalist: 新增属性list 选项列表 关联输入框
<input type="url" list="url-list" />
<datalist id="url-list">
<option value="https://www.baidu.com" label="百度"></option>
<option value="https://www.jd.com" label="京东"></option>
<option value="https://www.taobao.com" label="淘宝"></option>
</datalist>

list 属性要关联datalist 的id 属性
下拉提示内容写value 属性中
label 写提示内容
2）属性：
1）placeholder属性：
文本框处于未输入状态时文本框中显示提示
2）autofocus属性
给文本框、选择框或者按钮控件加上该属性，当打开页面时该控件自动获得焦点
一个页面只能有一个autofocus,
3）required 属性：
验证输入不能为空
4）list 属性
结合datalist元素使用----见1
5）autocomplete 就是自动补全，之前输入的东西，后来再输入时，有提示之前的网页，
输入富足和所用的自动完成功能，只有三种；on/off/""
on 可是显示指定候补输入的数据列表
使用datalist 元素与list 属性提供候补输入的数据列表，自动完成时，
可以将该datalist元素中的数据作为候补输入的数据在文本框中显示
控件要有name 属性,不然不生效
3. pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式
例如： <input pattern="[0-9][A-Z]3"title="输入内容：一个数与三个大写字母"
placeholder=’输入内容：一个数与三个大写字母‘>
4.对于number和range 新增属性 min，max step:
为包含数字或日期的input 类型规定限定（约束）
max 最大值
min 最小值
step: 数字间隔

5.multiple 允许输入多个值
常用的是 文件上传，和select选择 可用，，，上传多个，选择多个

6. novalidate 取消验证；

1.渐进增强优雅降级

2.css3选择器
a）层级选择器
子代选择器：>
相邻兄弟选择器：e + f 加号前后元素必须挨着，，， 后面的元素生效, e和f是兄弟（同级）
选择后面所有的同一个父元素 中同类兄弟元素 e~f e后面的所有f元素 e和f是同级
b)属性选择器：
1. E[attr]
具有attr 属性的E元素
p[class] 拥有class 的p
2. E[attr="value"]
[class="box"] class 属性只有box 的属性，某一个类名为box 不行,意思就只有一个box 类名，不是包含box类名
3 E[attr~="value"]
[class~="main"] class属性包含main 而且是一个完整的单词
4 E[attr^="value"]
[class^="c"]class 属性以c开头，完整的所有的类名的开头，中间类名开头不算
5 E[attr$="value"]
[class$="c"]class 属性以c结尾，完整的所有的类名的结尾，中间类名结尾不算
6. E[attr*="value"]
[class*="o"]class 属性包含o字母就行，不管类名有多少个
7. E[attr|="value"]
指定了属性名， 并且属性值是value 或者以“value-”开头的值（比如说zh-cn）

c)伪类选择器：
1.结构性伪类选择器：带type 就是 同类型中数，，，，不带type,,就是随便数
.wrap>p：first-child (意思就是： .wrap类里的第一孩子是p 并且判断是否是p ) 匹配所有子集元素的第一个元素。IE7就可以支持
.wrap>p：last-child 匹配父元素中最后一个X元素
.wrap>p： nth-child（n）用于匹配索引值为n 的子元素，索引值从1开始,还可以指定奇数行，偶数行，，也可以指定3的倍数，等等，就是3n
.wrap>p: only-child 有且只有唯一子元素，
以下： 是分类型： 就是.wrap 中p 的第几个
.wrap>p: nth-of-type(n):匹配同类型中的第n个同级兄弟元素X
.wrap>p: only-of-type 匹配属于同类型中唯一兄弟元素的X
.wrap>p: first-of-type: 匹配同级兄弟元素中的第一个x 元素
.wrap>p: nth-last-child(n) 从最后一个开始算索引 从后往前
.wrap>p: nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素p
.wrap>p: root 匹配文档的根元素
.wrap>p: empty匹配没有任何子元素（包括包含文本）空白 的元素x 可以设置默认样式

2.目标伪类选择器
E：target 选择匹配E的所有元素，且匹配元素被相关URL指向 跳转锚点
了解、语言伪类选择器
E：lang(language) 选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language
3.元素状态伪类选择器 （常用在表单）
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E：disabled 匹配所有用户界面（form表单）中处于不可用状态的E原素，，，相当于是不可选择
E：checked 匹配所有用户界面（form表单）中处于被选中状态的E原素就是按钮被选中 [type="text"] 加一个span
E:: selection 匹配E元素中被用户选中或处于高亮状态的部分(网页选中显示的设置的颜色)（注意这里是两个 ：）

4.否定伪类选择器
E：not(s) (IE6-8浏览器不支持：not（）选择器)
匹配所有不匹配简单选择符s的元素E


5. E：focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

浏览器前缀：
-ms- : IE
-moz-: firefox
-o-: Opera 欧朋
-webkit- google chrome 谷歌 Safari

 

4.css3的属性
盒子阴影：（属性之间用空格隔开）
box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸（） 颜色 内/外阴影
调整阴影位置，
水平阴影位置20px 向右偏移20px
垂直阴影位置20px 向下偏移20px
模糊距离； 单位px 数值越大越模糊
阴影尺寸；向外扩充
默认外阴影： 改为内阴影inset
box-shadow:10px 10px 30px 0 #333 inset
常用的： 水平阴影位置 垂直阴影位置 模糊距离 颜色

一个元素设置多个阴影，要用逗号 分割

5. 文本阴影
text-shadow： 水平阴影位置 垂直阴影位置 模糊距离 颜色；
6. 文本换行相关属性
word-wrap 只在允许的断字点换行（浏览器保持默认处理）
break-word 允许长单词或URL 地址换行到下一行
word--break
break-all 直接进行单词内的断句
Keep-all 文本不会换行，只能在半角空格或连字符处换行

7.字体图标@font-face
CSS3中的一个模块 它主要是把自己定义的Web字体嵌入到你的网页中可以使用iconfont(阿里巴巴矢量图标库)
制作---现成的字体图标库

8. css3边框的新增属性
border-color 边框颜色
border-color: pink yellow green orange ; 四个边的颜色， 上 右下左
border-image 简写属性： 用于设置以下属性：
路径； 路径 偏移量（水平一刀，垂直一刀 不带px）
平铺效果（拉伸stretch,铺满round 平铺repeat）
border-image-outset:20px; 边框图像区域超出边框的量
9. 边框倒角
border-radius:5px 10px 20px 50px ; 四个倒角不相同
border-radius:5px /10px ; 倒角是椭圆形

##########css3 新增的选择器


css3背景新增属性：

1. background-origin 背景原点
属性值：
padding-box 背景图像填充框的相对位置----默认在内边距左上角
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
2. background-clip 背景裁切 ----规定背景的绘制区域
属性值：
border-box 背景被裁剪到边框盒---默认
padding-box 背景被裁减到内边距框
content-box 背景被裁剪到内容框
3.background-size 背景尺寸
属性值： 1）指定具体宽度高度：第一个值代表宽度，第二个值代表高度
2）50% %设置大小
3）cover -----把背景图像扩展至足够大，已使背景图像完全覆盖背景区域，
4）contain- 把图像扩展到最大尺寸。以使其宽度和高度完全适应内容区域
4.background-color; hsl(40,50%,60%) 颜色 hsl

按钮：
盒模型：
标准盒模型： box-sizing: content-box; 默认
-----元素的内容区域才是代码设置的尺寸
怪异盒子模型 ： box-sizing: border-box;
元素的总尺寸就是代码设置的尺寸 width:200px; heigh:200px;
---该尺寸包含了元素的内容，内边距，边框


弹性盒模型：
布局的传统解决方案： 基于盒模型
1.display: flex;
设置给父元素，形成弹性伸缩盒
弹性盒的特点：
a.弹性盒里面的子元素都是沿着主轴排列(主轴可以设置，默认是x轴，可以改成y轴方向)
b.弹性盒里面的子元素都能直接添加宽高---例如span
c.让弹性盒里面的(一个子元素)!!!!!!左右上下居中，直接给与元素添加margin:auto;

2.设置主轴排列方向
flex-direction给父元素设置
row 默认横向一行内排列 主轴方向 带着display:flex ； 实现侧轴居中
row-reverse： 反转横向排列（右对齐，从后往前排，最后一项排在最前面）倒着排列
column：纵向排列 侧轴方向
column-reverse:反转纵向排列，从下到上排，最后一项排在最上面
3.(主轴对齐方式（上面设置哪个是主轴就是对应哪个设置） )
justify-content
flex-start 默认 顶端对齐
flex-end 末端对齐 就是主轴方向，末端，不是侧轴方向（除非是上面设置反转纵向，）
center 整体居中对齐
space-between 两端对齐 中间自动分配
space-around 自动分配距离

* box-sizing: border-box;


4。align-items（侧轴对齐方式）
flex-start:
flex-end
center
baseline； 基线 默认是顶部
stretch:默认值 项目被拉绅以适应容器 高度值被定了，就无效了

5.flex-wrap:
控制flex容器是单行或者单行
nowrap 默认的不换行
wrap 换行

6.align-content(行与行之间对齐方式，前提是子元素多行之间的效果)
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐，中间自动分配
space-around 自动分配距离
stretch ： 默认值 项目被拉伸以适应容器
*******************以上属性添加给父元素上***************************
弹性盒可以相互嵌套

7.align-self （加给子元素）灵活容器内别选中项目的对齐方式
auto 默认值 元素继承了他的父容器的align-items属性
stretch 元素被拉绅以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
8.order排序 number 数字越大越靠后，，，，，重新排列 （）

9.
flex-grow:1
按比例 平分剩余空间

10： flex-shrink：
缩小比例，默认为1 如果不想让元素缩小（保持原始的宽高），设置为0

11.flex-basis: 项目的长度

 

/*outline:none 去边框颜色*/