HTML5和CSS3的进阶_HTML5和CSS3的新增特性

目录

HTML5的新特性

1. HTML5 的新特性

1.1 HTML5 新增的语义化标签

1.2 HTML5 新增的多媒体标签

1. 视频

2. 音频

3. 多媒体标签总结

1.3 HTML5 新增的 input 类型

1.4 HTML5 新增的表单属性

required 必须输入信息,不能为空;

重点:placeholder 提示文本

autofocus:每次刷新都会自动获得光标

multiple 可以选择多文件提交

2. CSS3 的新特性

2.1 CSS3 的现状

2.2 属性选择器

2.3 结构伪类选择器

nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)

关于nth-of-type(n):

区别:

小结

2.4 伪元素选择器(重点)

伪元素选择器使用场景1:伪元素字体图标

伪元素选择器使用场景2:仿土豆效果

伪元素选择器使用场景3:伪元素清除浮动

1. 额外标签法也称为隔墙法,是 W3C 推荐的做法(不提倡)

升级:

优化:两堵墙:

2.5 CSS3 盒子模型

2.6 CSS3 其他特性(了解)

CSS3滤镜filter:

CSS3 calc 函数:

2.7 CSS3 过渡transition(重点)

我们现在经常和 :hover 一起 搭配使用

进度条案例

3.狭义的HTML5 CSS3

3.1广义的HTML5

总结不易~本节对我的收获和帮助巨大,希望对你也是~!!!


HTML5的新特性

1. HTML5 的新特性

HTML5 的新增特性主要是针对于以前的不足,增加了一些 新的标签 新的表单 新的表单属性 等。
这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。
声明:
1. 新特性增加了很多,但是我们专注于开发常用的新特性。

1.1 HTML5 新增的语义化标签

以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的。
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
以下标签全部都是块级标签:
1. <header>:头部标签
2. <nav>:导航标签
3. <article>:内容标签
4. <section>:定义文档某个区域
5. <aside>:侧边栏标签
6. <footer>:尾部标签
注意:
1. 这种语义化标准主要是针对 搜索引擎
2. 这些新标签页面中可以使用 多次
3. 在 IE9 中,需要把这些元素转换为 块级元素
4. 其实,我们移动端更喜欢使用这些标签
5. HTML5 还增加了很多其他标签,我们后面再慢慢学

1.2 HTML5 新增的多媒体标签

HTML5 在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。

1. 视频<video>

当前 <video> 元素支持三种视频格式: 尽量使用 mp4格式
语法:
<video src=" 文件地址 " controls="controls"></video>
常见属性:
属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要加muted来解决自动播放问题
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpx(像素)设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preload

auto(预先加载视频)

none(不应加载视频)

规定是否预先加载视频(如果有了autoplay 可以忽略这个属性)
srcurl视频url地址
posterlmgurl

加载等待的画面图片

mutedmuted静音播放

2. 音频<audio>

当前 <audio> 元素支持三种音频格式:
语法:
<audio src=" 文件地址 " controls="controls"></audio>
如果非要考虑低浏览器兼容性问题:
< audio controls="controls" >
        <source src="happy.mp3" type="audio/mpeg" >
        <source src="happy.ogg" type="audio/ogg" >
        您的浏览器暂不支持 <audio> 标签。
</ audio>
常见属性:
属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮
looploop如果出现该属性,则每当音频结束时重新开始播放
srcsrc要播放音频的URL
谷歌浏览器把音频和视频自动播放禁止了

3. 多媒体标签总结

1.  音频标签和视频标签使用方式基本一致
2.  浏览器支持情况不同
3.  谷歌浏览器把音频和视频自动播放禁止了
4.  我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)
5.  视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性

1.3 HTML5 新增的 input 类型

在form表单域内点击提交会检查并报错:
属性值说明
type="email"限制用户输入必须为Email类型
type="url"限制用户输入必须为URL类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="tel"手机号码
type="search"搜索框
type="color"生成一个颜色选择表单

重点记住:number 、tel 、search这三个

1.4 HTML5 新增的表单属性

required 必须输入信息,不能为空;

重点:placeholder 提示文本

autofocus:每次刷新都会自动获得光标

autocomplete:off/on 是否要记录以前搜索的内容;
input="search"里面必须要有一个name名称,这样autocomplete 默认下时on会记录搜索内容
但是默认记录搜索内容并不安全,所以要把它给去掉:
autocomplete="off"

multiple 可以选择多文件提交

此时在input="file" 里面添加multiple选项就可以添加多文件选项
属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
placeholder提示文本表单的提示信息,存在默认值将不提示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff / on默认时on 会留下历史的搜索记录;如果手动为off就会关闭掉
multiplemultiple可以多选文件提交
可以通过以下设置方式修改placeholder里面的字体颜色:
input::placeholder {
        color: pink;
}

2. CSS3 的新特性

2.1 CSS3 的现状

1. 新增的CSS3特性有兼容性问题,ie9+才支持
2. 移动端支持优于 PC 端
3. 不断改进中
4. 应用相对广泛
5. 现阶段主要学习: 新增选择器 盒子模型 以及 其他特性
CSS3 新增选择器
CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。
1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

2.2 属性选择器

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者 id 选择器。
选择符简介
E[att]选择具有att属性的E元素
E[att="val"]选择具有att属性且属性值等于val的E元素
E[att^="val"]匹配具有att属性且值以val开头的E元素
E[att$="val"]匹配具有att属性且值以val结尾的E元素
E[att*="val"]匹配具有att属性且值中含有val的E元素

注意:类选择器、属性选择器、伪类选择器、权重为10;

2.3 结构伪类选择器

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

这样,对于取名字就会方便很多,只用知道:

ul li:nth-child(n) 

就可以随时对ul里面的哪一个小li进行选

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
注意: 类选择器、属性选择器、伪类选择器,权重为 10。

nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)

1.  n 可以是数字,关键字和公式
2.  n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始…
3.  n 可以是关键字:even 偶数,odd 奇数
4.  n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )
公式取值
2n偶数
2n+1奇数
5n5  10  15...
n + 5从第5个开始(包含第5个)到最后
- n + 5前五个(包含第5个)...

关于nth-of-type(n):

选择符简介
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

区别:

1. nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子

小结

1.  结构伪类选择器一般用于选择父级里面的第几个孩子
2.  nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
3.  nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子
4. 关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式
5. 如果是无序列表,我们肯定用 nth-child 更多
6. 类选择器、属性选择器、伪类选择器,权重为 10。

2.4 伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
选择符简介
::befor在元素内部的前面插入内容
::after在元素内部的后面插入内容
::befor 和 ::after 都是一个盒子,不过在浏览器的界面html里面是看不到的,分别放在盒子内容的前面和后面;
注意:
1.  before after 创建一个元素,但是属于行内元素
2.  新创建的这个元素在文档树中是找不到的,所以我们称为 伪元素
3.  语法: element::before {}
4.  before 和 after 必须有 content 属性
5.  before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
6. 伪元素选择器标签选择器一样,权重为 1(div+::befor 权重=1 + 1 =2)

伪元素选择器使用场景1:伪元素字体图标

1.就是设置div盒子大小
2.利用div::after伪元素选择器来制作这个箭头
3.在after内添加字符图标等,就当作一个盒子来对待
4.利用浮动,子绝父相来进行定位箭头的位置
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative; width: 300px;height: 35px;border: 1px solid red;}div::after {position: absolute;font-family: 'icomoon';content: '\e91e';right: 10px;top: 10px;color: red;font-size: 18px;}</style>
</head><body><div></div>
</body></html>

伪元素选择器使用场景2:仿土豆效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: ' ';/* display: none;可以隐藏元素还不占空间 */display: none;/* 加了绝对定位,属于行内元素,可以直接指定宽度和高度 */position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过tudou的盒子就显示出遮罩层 */.tudou:hover::before {display: block;}</style>
</head><body><div class="tudou"><img src="images/tudou.jpg" alt=""></div>
</body></html>

伪元素选择器使用场景3:伪元素清除浮动

1. 额外标签法 也称为隔墙法,是 W3C 推荐的做法。
2. 父级添加 overflow 属性
3. 父级添加after伪元素
4. 父级添加双伪元素

1. 额外标签法也称为隔墙法,是 W3C 推荐的做法(不提倡

注意: 要求这个新的空标签必须是块级元素。
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化:
就是为了避免使用额外标签法,添加代码过多;

升级:

.clearfix::after { content: ""; display: block; height: 0; clear: both; visibility: hidden; 
}

优化:两堵墙:

2.5 CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box border-box ,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)
2. box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提 padding 和border不会超过width宽度

2.6 CSS3 其他特性(了解)

1. 图片变模糊
2. 计算盒子宽度 width: calc 函数

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素
可以实现鼠标经过后模糊变不模糊;
filter: 函数 (); 例如: filter: blur(5px); blur 模糊处理 数值越大越模糊

CSS3 calc 函数:

calc() 此CSS函数让你在声明CSS属性值时执行一些计算
运算符之间一定要有空格!!!
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。

2.7 CSS3 过渡transition(重点)

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或
JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
鼠标移动到后,就会有一个慢慢变大的渐变动画效果。
从一个状态慢慢变到另外一个状态;
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响
页面布局。
我们现在经常和 :hover 一起 搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始 ;
1.属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都
变化过渡, 写一个all 就可以。
2. 花费时间: 单位是 秒(必须写单位) 比如 0.5s
3. 运动曲线: 默认是 ease (可以省略)
4.何时开始 : 单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
记住过渡的使用口诀: 谁做过渡给谁加

进度条案例

实现过渡效果:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;}.bar_in {width: 50%;height: 100%;background-color: red;border-radius: 7px;transition: width 1s;}.bar:hover .bar_in {width: 100%;}</style>
</head><body><div class="bar"><div class="bar_in"></div></div>
</body></html>

3.狭义的HTML5 CSS3

3.1广义的HTML5

1. 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
2. 这个集合有时称为 HTML5 和朋友,通常缩写为 HTML5 。
3. 虽然 HTML5 的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势。
4. HTML5 MDN 介绍:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

总结不易~本节对我的收获和帮助巨大,希望对你也是~!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469184.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小马识途营销顾问谈百科词条建立的注意事项

百度百科是百度旗下的产品&#xff0c;它就好比是一本网络百科全书&#xff0c;当我们在网络上搜索某个人物或是企业的时候&#xff0c;如果他们有创建百度百科的话就可以搜出来百度百科词条。词条上展示的荣誉、贡献、社会评价或是企业组织架构等方面可以在无形之中提升人物或…

6、If、While、For、Switch

6、If、While、For、Switch 一、If 1、if-else if (boolean) {代码块 } else if (boolean) {代码块 } else if (boolean) {代码块 } else { // 默认情况代码块 }关于IDEA单元测试控制台不能输入数据的问题&#xff1a; https://blog.csdn.net/m0_72900498/article/details/…

华为路由器DHCP配置

一、单臂路由结构的DHCP 1.启动设备 2.将pc设为DHCP获取IP地址 3.交换机创建vlan并设置模式 [SW1]vlan batch 10 20 [SW1]int g0/0/1 [SW1-GigabitEthernet0/0/1]port link-type trunk [SW1-GigabitEthernet0/0/1]port trunk allow-pass vlan all [SW1-GigabitEthernet0…

【Vue】Vue3.0(十七)Vue 3.0中Pinia的深度使用指南(基于setup语法糖)

上篇文章&#xff1a; 【Vue】Vue3.0&#xff08;十一&#xff09;Vue 3.0 中 computed 计算属性概念、使用及示例 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月10日15点23分 文章…

element plus el-form自定义验证输入框为纯数字函数

element plus 的el-form 使用自定义验证器&#xff0c;验证纯数字&#xff0c;禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度 效果图 <el-form ref"dataFormRef" :model"dataForm" :rules"dataRules" label-w…

SwiftUI(十)- 列表(分组,折叠)

引言 SwiftUI中的List组件不仅可以用户创建简单的列表&#xff0c;和UITableView一样&#xff0c;它也支持分组和折叠功能&#xff0c;让数据展示更具层次感。通过分组功能&#xff0c;我们可以将数据按照特定的逻辑进行组织&#xff0c;而折叠则为用户提供了更为紧凑的界面体…

链表(Linkedlist)

序言 我们都了解链表是一种数据的存储结构&#xff0c;在Java使用中逻辑与c&#xff0c;c语言数据结构别无二致&#xff0c;但主要由于Java中不存在指针的说法&#xff0c;从而导致在实现过程中的代码不同&#xff0c;所以在学习的过程中我们无需过于担心&#xff0c;逻辑都是…

JS之正则表达式

一、什么是正则表达式 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </…

MySQL数据库:本地部署数据库以及安装彩虹猫【Navicat】

文章目录 一.安装前准备工作1.下载并解压文件2.修复电脑缺失的文件 二.本地部署MySQL1.先解压mysql-8.0.25-winx64.zip&#xff0c;并把文件放到安装需要的位置&#xff0c;再把my.ini文件放到mysql-8.0.25-winx64的根目录2.修改注册表的根目录信息为自己的安装装路径3.进命令符…

11个简单易用的电商购物车设计案例

文章目录 前言正文1.扁平化设计购物车2.无表格布局购物车3.美食购物车4.响应式购物车5.jQuery购物车6.动态价格更新购物车7.标签式滑动购物车8.动态商店与购物车一体化设计9.简约清爽的购物车设计10.基于Vue.js的购物车11.域名购物车 总结 前言 现在的电子商务网站&#xff0c…

Stable Diffusion Web UI - ControlNet 姿势控制 openpose

openpose 是 ControlNet 中常用的控制模式之一。 通过 openpose 可以锁定人物姿势&#xff0c;把姿势信息传递给 Stable Diffusion 扩散模型&#xff0c;让其在扩散生成图片的时候遵照特定的任务姿势。 通过 openpose 能够得到类似如下效果&#xff1a; 同样的姿势&#xff0…

Word2Vec,此向量维度,以及训练数据集单条数据的大小,举例说明;Skip-gram模型实现词嵌入;热编码(One-Hot Encoding)和词向量;

目录 Word2Vec Word2Vec,此向量维度,以及训练数据集单条数据的大小,举例说明 一、Word2Vec的词向量维度 二、训练数据集单条数据的大小 综上所述 热编码(One-Hot Encoding)和词向量 一、表示方式 二、维度与计算效率 三、语义捕捉能力 四、举例说明 Skip-gram模…

大模型预训练+微调大模型;大模型提示/指令模式”(Prompt/Instruct Mode)

目录 大模型发布版本 大模型参数量 预训练+微调大模型 预训练大模型的优势 微调的概念与过程 微调的优势 应用场景与案例 提示/指令模式”(Prompt/Instruct Mode) Prompt模式与Instruct模式的区别与联系 Prompt/Instruct模式的应用优势 应用案例 大模型发布版本 大…

WPF在MVVM模式下怎么实现导航功能

在mvvm的模式下wpf通过frame实现页面跳转_哔哩哔哩_bilibili 视频讲解同步可观看 如下图&#xff0c;我们要实现点击左侧的菜单&#xff0c;在右侧展示不同的页面 实现代码如下&#xff1a; 一、如何从主窗体跳转到页面。 1、在mainwindow.xaml的菜单栏代码里加入如下代码 …

ubuntu 22.04 server 安装 anaconda3

ubuntu 22.04 server 安装 anaconda3 https://www.anaconda.com/download/success Anaconda Installers wget https://repo.anaconda.com/archive/Anaconda3-2024.10-1-Linux-x86_64.sh 其他的是 默认 Executing transaction: done installation finished. Do you wish to…

亚信安全新一代WAF:抵御勒索攻击的坚固防线

近年来&#xff0c;勒索攻击已成为黑客的主要攻击手段。新型勒索攻击事件层出不穷&#xff0c;勒索攻击形势愈发严峻&#xff0c;已经对全球制造、金融、能源、医疗、政府组织等关键领域造成严重危害。如今&#xff0c;勒索攻击手段日趋成熟、攻击目标愈发明确&#xff0c;模式…

函数式编程Stream流(通俗易懂!!!)

目录 1.Lambda表达式 1.1 基本用法 1.2 省略规则 2.Stream流 2.1 常规操作 2.1.1 创建流 2.1.2 中间操作 filter map distinct sorted limit ​编辑skip flatMap 2.1.3 终结操作 foreach count max&min collect anyMatch allMatch noneMatch …

SDL线程

文章目录 SDL线程相关 SDL线程相关 SDL线程创建&#xff1a;SDL_CreateThreadSDL线程等待: SDL_WaitThreadSDL互斥锁 :SDL_CreateMutex/SDL_DestoryMutexSDL锁定互斥: SDL_LockMutex/SDL_UnlockMutexSDL条件变量:SDL_CreateCond/SDL_DestoryCondSDL条件变量 等待通知: SDL_Con…

【初阶数据结构与算法】线性表之链表的分类以及双链表的定义与实现

文章目录 一、链表的分类二、双链表的实现1.双链表结构的定义2.双链表的初始化和销毁初始化函数1初始化函数2销毁函数 3.双链表的打印以及节点的申请打印函数节点的申请 4.双链表的头插和尾插头插函数尾插函数 5.双链表的查找和判空查找函数判空函数 6.双链表的头删和尾删头删函…

深 度 学 习

神经网络基础 一、逻辑回归( Logic Regression ) 1 问题的模型 模型&#xff1a; 其中xx为输入量&#xff0c;y^​预测量&#xff0c;σ()激活函数。   逻辑回归主要用于二分类问题的拟合&#xff1a;0≤y^P(y1∣x)≤1&#xff0c;σ(z)如图&#xff1a; ​ 问题&#xff…