黑马程序员技术交流社区

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

作者: 龚涛 时间: 2019-4-11 13:45
标题: 学习笔记
新增语义标签：
header（头部标签）
nav （导航标签）
article (内容标签)
section （内容标签）
a'side （侧边栏标签）
footer （尾部标签）

新增多媒体标签：
1. 音频标签：
格式：大部分支持ogg与MP3格式。只需设置这两种格式就可以。
音频标签书写格式：<audio src="文件地址"controls="controls" ></audio>
浏览器不支持格式的解决方式： <audio controls="controls" >
<source src="文件地址" type="audio/ogg"/>
<source src="文件地址与格式" type="audio/mpeg"/>
</audio>

         autoplay：

如果出现该属性，则音频在就绪后马上播放。          书写方式
:<audio src="文件地址" controls="controls"  autoplay="autoplay" >
         controls:

如果出现该属性，则向用户显示控件，比如播放按钮。书写方式：<audio src="文件地址"controls="controls" ></audio>

            loop：

如果出现该属性，则每当音频结束时重新开始播放。
书写方式：<audio src="文件地址"loop="loop" ></audio>
         preload:

  如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

            src  :

url

要播放的音频的 URL。

2.视频标签：
视频标签书写格式：<video src="文件地址"controls="controls" ></video>
浏览器不支持格式的解决方式： <video controls="controls" >
<source src="文件地址" type="video/ogg"/>
<source src="文件地址与格式" type="video/mpeg4"/>
</video>
autoplay:  值：

autoplay

视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
书写方式
:<video src="文件地址" controls="controls"  autoplay="autoplay" >
poster=“

Imgurl”

（图片地址）加载等待的画面图片

muted=“

muted

”静音播放

preload ：

auto（预先加载视频）none（不应加载视频）

规定是否预加载视频(如果有了autoplay 就忽略该属性

loop=“

loop”

播放完是否继续播放该视频，循环播放

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

3.新增input标签：
1>  type="email"

限制用户输入必须为Email类型

2>  type="url"

限制用户输入必须为URL类型（必须是网址）

3>  type="date"

限制用户输入必须为日期类型

4>  type="time"

限制用户输入必须为时间类型

5>  type="month"

  限制用户输入必须为月类型

6>  type="week"

限制用户输入必须为周类型

7>  type="number"

  限制用户输入必须为数字类型
(e也可以输入)
8>  type="tel"

手机号码

9>  type="search"

  搜索框

            10> type="color"

生成一个颜色选择表单 (很少用)

新增input值：
1><input type="" placeholder="输入需要输入的文字"> 占位符-提示信息(文字为灰色，输入时不会进行删除，存在默认值将不显示)
2><input type="

" required="required">  表单拥有该属性表示其内容不能为空，必填

      （novalidate:关闭验证

- 在表单上添加该属性，那么在提交的时候就不会再执行 required验证
）
      （pattern：自定义验证-通过编写正则表达式自定义验证规则一般和required同时使用）
3><input type="" autofocus="autofocus"> 光标直接定位到表单
4><input type="" autocomplete="on/off"> 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。（必须有name，一般都是关闭）
5><input type="" multiple="multiple">  可以上传多个文件，而<input type="file">只能上传一个文件

4.新增选择器：
结构伪类选择器：
1> 父元素子元素：first-child{样式} 选择了第一个子元素（子元素后面必须贴紧）
      父元素子元素：last-child{样式} 选择了最后一个子元素
2>数字：父元素子元素：nth-child（数字）{样式}
      字母：父元素子元素：nth-child（odd/2n）{样式} 选中全部为奇数的子元素
父元素子元素：nth-child（even/2n+1）{样式} 选中全部为偶数的子元素
3>公式：父元素子元素：nth-child（-n+从第几个开始）{样式} +几，就是选择从这个子元素之前的全部元素（包括这个元素）
父元素子元素：nth-child（n+从第几个开始）{样式} +几，就是选择从这个子元素之后的全部元素（包括这个元素）
父元素子元素：nth-child（数字n）{样式} 数字代表选中这个数的倍数的子标签
【n是从零开始计算，一直递增】
4>在一个标签中选择一个不一样类型的子元素：of-type
   【E:nth-child(n)  和 E:nth-of-type(n)的区别在于第一个选择器不分类型直接选择】
父元素不一样类型的子元素：first-of-type 【选中的是不一样类型的子元素的第一个】
父元素不一样类型的子元素：last-of-type 【选中的是不一样类型的子元素的最后一个】
父元素不一样类型的子元素：nth-of-type（n）【n代表的是第几个子元素】
属性选择器：
子元素/父元素[att] 选择具有att属性的E元素。
子元素/父元素class=“”] 选择具有class属性且属性值为class=“”的元素
子元素/父元素class^=“”]  选择具有class属性且属性值为class=“”开头的元素
子元素/父元素class$=“”]  选择具有class属性且属性值为class=“”结束的元素
子元素/父元素class*=“”]  选择具有class属性且属性值为class=“”任何位置的元素
伪元素选择器：
    1>
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意事项：1.必须是双冒号。
2.必须有content属性。伪元素里面必须写上属性 content:"";
3.添加的元素是行内元素。

6.2D转换：盒子的移动方式共有：1.定位 2.盒子的外边距，内边距 3.2d转换

tiansform:translate(x,y) x轴代表往左右移动 y轴代表往上下移动
简写：tiansform:translateX(数据)
            tiansform:translateY(数据)
水平垂直居中方式：
必须和定位一起做：
position：absolute；
tiansform:translate（-50%，-50%）

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

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