h5+css3相关新增属性及标签

最新推荐文章于 2023-02-06 15:09:46 发布

江湖与天涯

最新推荐文章于 2023-02-06 15:09:46 发布

阅读量151

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/qq_41538952/article/details/105672171

版权

html5+css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.语义化标签

`header` --- 头部标签
`nav` --- 导航标签
`article` --- 内容标签
`section` --- 块级标签
`aside` --- 侧边栏标签
`footer` --- 尾部标签

语义化标签使用注意事项

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好，
另外，`HTML5` 新增的了很多的语义化标签，随着课程深入，还会学习到其他的

2.多媒体音频标签

1.  多媒体标签有两个，分别是

- 音频  -- `audio`
- 视频  -- `video`

`audio` 标签说明

- 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，但是：播放格式是有限的 ,目前支持三种格式

案例

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

video 视频标签(目前支持三种形式)
语法格式

<!--一般情况下不这样写-->
<video src="./media/video.mp4" controls="controls"></video>

案例

<body>
     <!-- <video src="./media/video.mp4" controls="controls"></video> -->
   
     <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
     <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
       <source src="./media/video.mp4" type="video/mp4">
       <source src="./media/video.ogg" type="video/ogg">
     </video>
   </body>

多媒体标签使用总结

音频标签与视频标签使用基本一致
多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加 muted 标签可以自己播放
注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

3.新增input标签

type="email" 只允许输入邮箱格式
type="number" 只允许输入数字
type="tel" 输入手机号码
type="search" 搜索框,里面有个小×
type="url" 只允许输入网址类别
type="color" 生成一个颜色选择表单
除此之外还有data,time，month ,time week等

4.新增的表单属性

required：值为required本身,表示表单内容不能为空
placeholder：值为其本身.表示占位符或提示文本,用作表单提示信息.
autofocus：值为其本身,页面加载完成后光标自动聚焦到指定表单
autocomplete：值为on/off ，表单输入过值并且提交成功之后,当再次在表单输入该内容时会有提示,但通常情况下都是设置为off
multiple: 值为其本身,表示指定表单可进行多文件提交,一般应用于文件域

5.CSS3属性选择器

代码演示:

button {
     cursor: pointer;
   }
button[disabled] {
     cursor: default
}

详解

   /*选择type=search的输入框*/
   input[type=search] {
     color: skyblue;
   }
   /*选择类名以black开头的*/
   span[class^=black] {
     color: lightgreen;
   }
   /*选择类名以black结尾的*/
   span[class$=black] {
     color: lightsalmon;
   }
   /*选择类名中包含black的*/
   span[class*=black] {
     color: lightseagreen;
   }

6.结构伪类选择器

案例

   /*选择UL下的第一个li元素*/
   ul li:first-child {
     background-color: lightseagreen;
   }
   /*选择UL下的最后一个li元素*/
   ul li:last-child {
     background-color: lightcoral;
   }
   /*选择UL下的第3个li元素*/
   ul li:nth-child(3) {
     background-color: aqua;
   }

nth-child 详解

   - 注意：本质上就是选中第几个子元素

   - n 可以是数字、关键字、公式

   - n 如果是数字，就是选中第几个

   - 常见的关键字有 `even` 偶数、`odd` 奇数

   - 常见的公式如下(如果 n 是公式，则从 0 开始计算)

   - 但是第 0 个元素或者超出了元素的个数会被忽略

nth-child案例


     /* 偶数 */
     ul li:nth-child(even) {
       background-color: aquamarine;
     }
   
     /* 奇数 */
     ul li:nth-child(odd) {
       background-color: blueviolet;
     }
   
     /*n 是公式，从 0 开始计算 */
     ul li:nth-child(n) {
       background-color: lightcoral;
     }
   
     /* 偶数 */
     ul li:nth-child(2n) {
       background-color: lightskyblue;
     }
   
     /* 奇数 */
     ul li:nth-child(2n + 1) {
       background-color: lightsalmon;
     }
   
     /* 选择第 0 5 10 15, 应该怎么选 */
     ul li:nth-child(5n) {
       background-color: orangered;
     }
   
     /* n + 5 就是从第5个开始往后选择 */
     ul li:nth-child(n + 5) {
       background-color: peru;
     }
   
     /* -n + 5 前五个 */
     ul li:nth-child(-n + 5) {
       background-color: tan;
     }

`nth-child` 和 `nt-of-type` 的区别

- `nth-child` 选择父元素里面的第几个子元素，不管是第几个类型
- `nt-of-type` 选择指定类型的元素

`nth-child` 和 `nt-of-type` 的区别案例

    div :nth-child(1) {
       background-color: lightblue;
     }
   
     div :nth-child(2) {
       background-color: lightpink;
     }
   
     div span:nth-of-type(2) {
       background-color: lightseagreen;
     }
   
     div span:nth-of-type(3) {
       background-color: #fff;
     }

7.伪类选择器

   - `before` 和 `after` 必须有 `content` 属性
   - `before` 在内容前面，after 在内容后面
   - `before` 和 `after` 创建的是一个元素，但是属于行内元素
   - 创建出来的元素在 `Dom` 中查找不到，所以称为伪元素
   - 伪元素和标签选择器一样，权重为 1

案例

       div {
         width: 100px;
         height: 100px;
         border: 1px solid lightcoral;
       }
   
       div::after,
       div::before {
         width: 20px;
         height: 50px;
         text-align: center;
         display: inline-block;
       }
       div::after {
         content: '德';
         background-color: lightskyblue;
       }
   
       div::before {
         content: '道';
         background-color: mediumaquamarine;
       }
     </style>

江湖与天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5+css3相关新增属性及标签

1.语义化标签`header`---头部标签 `nav`---导航标签 `article`---内容标签 `section`---块级标签 `aside`---侧边栏标签 `footer`---尾部标签语义化标签使用注意事项语义化标签主要针对搜索引擎新标签可以使用一次或者多次在`IE9`浏览...
复制链接

扫一扫