黑马程序员技术交流社区

标题: 学习笔记 [打印本页]

作者: wujunliang 时间: 2019-4-11 14:04
标题: 学习笔记
检索
H5：
语义化标签
多媒体标签
input表单和属性
CSS3：
属性
结构伪类
伪元素选择
2D转换

前导：（简单了解）
H5:
H5即HTML的5次重大修改，目的适应移动端的发展；
经历HTML->XHTML->HTML5；
H5移动为先，广义是指HTML5+CSS3+JavaScript
优：
提高可用性和改进用户的友好体验
更好的语义化标签
可以给站点带来更多的多媒体元素(视频和音频)
可以很好的替代FLASH和Silverlight
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏
可移植性好
劣：
该标准并未能很好的被PC端浏览器所支持
1. H5新增语义化标签：
1）<header>：头部标签
2）<nav>：导航标签
3）<artical>：内容标签
4）<section>：块级标签
5）<aside>：侧边栏标签
6）<footer>: 尾部标签
主要针对搜索引擎；在页面中可被多次使用；IE9需要将其转换为块级元素；
移动端对其更加友好；还有更多的标签...

2. H5新增多媒体标签
1）<audio> 音频标签

<audio
src=" "
controls="controls"
autoplay="autoplay"
loop="loop"
preload 预加载
>
</audio>
谷歌浏览器把autoplay属性禁用了

2）<video>视频标签
<video
src="文件地址"
controls
loop
muted
autoplay
width=" "
height=" "
preload="auto|none"  预加载视频
poster="显示待播放图片"
></video>
谷歌仍然禁用了自动播放属性，解决方案：给视频标签添加禁音属性muted。

3）兼容性处理
因为不同浏览器支持不同格式，解决方案：为这个音频准备多个格式。
<audio controls>
<source src=" media/snow.mp3 " type="audio/mpeg" >
<source src=" media/snow.ogg" type="audio/ogg" >
您的浏览器不支持audio播放
</audio>
常用于游戏官网、宣传页面

小结：
音频标签和视频标签使用基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性可以自定播放视频，音频不可以
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

3. H5新增 input表单
1）邮箱：<input type="email" />
2）网址：<input type="url" />
3）日期：<input type="date" />
4）时间：<input type="time" />
5）月份：<input type="month" />
6）周期：<input type="week" />
7）数量：<input type="number" /> *
8）手机号码：<input type="tel" /> *
9）搜索：<input type="search" /> *
10）颜色：<input type="color" />

4. H5新增表单属性
1）required：内容不能为空
2）placeholder：提示文本 *
3）autofocus：自动获取光标效果
4）autocomplete：‘off / on’ 自动记录你输入过的值，'off'用的较多
5）multiple：多选文件提交

5. CSS3 属性选择器
属性选择器的权重：10；
disabled属性：禁用；
1）标签名[disabled] button[disabled] E[attr] 属性为attr
<button disabled=“disabled”></button>
2）E[att="val"] 属性值为val
3）E[att^="val"]  属性值以"val"开头
4）E[att$="val"] 属性值以"val"结尾
5）E[att*="val"] 属性值含有"val"

6. CSS3 结构伪类选择器
注意点：先确定父亲，从谁的子元素中去选取。
1）E:first-child  匹配父元素中的第一个子元素E
2）E:last-child  匹配父元素中的最后一个子元素E
3）E:nth-child(n) 匹配父元素中的第n个子元素E n是公式，从0开始计算
4）E:nth-child(even) 偶数  隔行变色
5）E:nth-child(odd) 奇数
6）E:nth-child(n+5) 从第5个(包括第5个)开始到最后
7）E:nth-child(-n+3) 获取前3个
注意：:nth-child(n)选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型
要选中2，则要div :nth-child(2) 或 div span:nth-child(2)； div span:nth-child(1)选不中
<div>
<p>1</p>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
8）E:nth-of-type 选择指定类型
div span:first-of-type  选择2
div span:last-of-type  选择4
div span:nth-of-type(2) 选择3

7. CSS3 伪元素选择器
1）::before  在元素内部的前面插入内容
2）::after  在元素内部的后面插入内容
注意：
1）两者必须有content属性
2）before在内容的前面，after在内容的后面
3）都会创建一个元素，属于行内元素
4）因为在dom里面无法看到元素，所以叫伪元素
5）权重为1

8. CSS3 2D转换
1）转换（transform）

->移动：translate transform:translate(x, y)  translateX( )  translateY( )
优点：不会影响其它元素的位置。
translate里参数可以用%，这里面参数的%移动的距离是相对盒子自身的宽度或高度
对行内标签没有效果
案例：实现盒子的水平垂直居中。
用定位的方式相对与父元素或浏览器视口的宽高移动一半后
关键代码：translate(-50%, -50%)  移动相当于自身宽高的一半

->旋转：rotate  transform:rotate(度数)
1）度数的单位是deg；角度为正顺时针，角度为负逆时针；旋转中心点是元素的中心点
2）案例：rotate+伪元素实现三角形图标
第1步，使用伪元素添加1个正方形盒子
第2步，设置盒子的两个边框，并且定到指定位置
第3步，旋转45度

3）设置旋转中心点
transform-origin: x y;
x, y默认是元素的中心点(50%, 50%)
可以给x, y设置像素或方位名词(top、right、bottom、left、center)
4）案例：rotate + transform-origin + 伪元素实现旋转
结构：大盒子里有一个小盒子，小盒子跟大盒子一样大。
      第1步，小盒子左下角为中心点，旋转180度
      第2步，大盒子溢出隐藏
      第3步，当鼠标放到大盒子上时，小盒子旋转0度
->缩放：scale transform: scale(x, y)
scale缩放优势：可以设置转换中心点缩放，默认以中心点缩放，不影响其他盒子
案列：鼠标经过图片的放大效果
结构：盒子里面有一个图片。
第1步，鼠标放到图片上，图片放大1.2倍
第2步，盒子溢出隐藏
第3步，图片添加过渡
案例：鼠标经过分页按钮放大效果

->2D转换的综合写法
transform: translate( )  rotate( )  scale( )..
注意：当同时有位移以及其它属性的时候位移要写在最前面

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2