1.14学习

最新推荐文章于 2024-09-17 11:17:23 发布

w&z.

最新推荐文章于 2024-09-17 11:17:23 发布

阅读量221

点赞数 1

文章标签： html html5 css

本文链接：https://blog.csdn.net/m0_63654200/article/details/122499900

版权

文章目录

一.HTML5新特性
二.css3新特性

一.HTML5新特性

1.HTML5新增的语义化标签

注意：html5的新特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持。

< header >:头部标签
< nav >:导航标签
< article >:内容标签
< section >:定义文档某个区域
< aside >:侧边栏标签
< footer >:尾部标签

注意：

这些语义化标签主要针对搜索引擎
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素
移动端更喜欢这些标签

2.HTML5新增的多媒体标签

新增的多媒体标签主要包含：

音频 < audio >
视频 < video >

（1）.视频
当前< video >元素支持三种视频格式mp4，Webm ,Ogg尽量使用mp4格式

<video src="文件地址" controls="controls"></video>

常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预加载） none（不加载）	规定是否预加载视频（如果有了autoplay就忽略该属性）
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

（2）音频 < audio >
当前< audio >元素支持三种音频格式：MP3，wav，ogg，
常用MP3

<audio src="文件地址"control="controls"></audio>

常见属性：

属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	向用户显示控件，如播放按钮
loop	loop	音频结束时重新开始播放
src	url	要播放音频的url

注意：
谷歌禁用了视频，音频自动播放
可以给视频标签添加muted属性来静音播放视频，音频不可以（可通过js解决）

3.HTML5新增的input类型

属性值	说明
type=“email”	限制用户输入必须为 email类型
type=“url”	限制用户输入必须为url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number"	限制用户输入必须为周类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选选择表单

注意：验证的时候必须加form表单域

<form action="">
</form>

4.HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofoucs	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 / 默认已经打开，如autocomplete=“on”，关闭=“off”需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交

二.css3新特性

1.css3现状

新增css3特性有兼容性问题，ie9+才支持
移动端支持优于pc端
现阶段主要学习：新增选择器和盒子模型以及其它特性
应用相对广泛

2.属性选择器

属性选择器可以根据元素特定属性来选择元素，这样可以不用借助于类或者id选择器
![在这里插入图片描述](https://img-blog.csdnimg.cn/142242d772d047fc803a53ae2d

    <style>
        /* 必须是input但是同时具有value这个属性 选择这个元素 */
        /* input[value] {
            color: blue;
        } */
        
        input[type=text] {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 1.利用属性选择器就可以不用借助于类或者id -->

    <!-- <input type="text" value="输入用户名"> -->
    <!-- <input type="text"> -->

    <!-- 2.属性选择器还可以选择属性等于值的某些元素 -->

    <input type="text" name="" id="">
    <input type="password" name="" id="">

    <!-- 3.选择属性值开头的某些元素 -->
    <!-- 4.选择属性值结尾的某些元素-->
    
</body>

类选择器和属性选择器，伪类选择器权重都为10

3.结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子级元素

在这里插入图片描述

    <style>
        ul li:first-child {
            background-color: skyblue;
        }
        
        ul li:nth-child(4) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>