HTML5和CSS3新增特性

embedded/2024/11/26 10:58:04/

HTML5的新特性

HTML5新增的语义化标签

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。

好图当赏

一千布局我们是用div来做的，但是div对搜索引擎来说是没有语义的

<div class=“header”> </div> 
<div class=“nav”> </div> 
<div class=“content”> </div> 
<div class=“footer”> </div>

HTML5新增了语义化标签：

 

tips：

这种语义化标准主要是针对搜索引擎的

这些新标签页面中可以使用多次

在IE9中，需要把这些元素转换为块级元素

HTML5新增的多媒体标签

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

音频：<audio>

视频：<video>

使用他们可以更方便的在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件 

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

当前<video>元素支持三种视频格式，尽量使用MP4格式

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

 有些低版本浏览器可能不支持这个格式

video有一些常见的属性：

关于音频，当前的 <audio>元素支持三种音频格式：

<audio src="文件地址" controls="controls"></audio> 
< audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" >
</ audio>

音频的常见属性：

 

谷歌浏览器吧音频和视频的自动播放给禁止了 

多媒体标签总结：

HTML5新增的input类型

 语义化会更明显

我们需要重点记住number tel search这三个

有了这个提交表单如果格式不一样会报错

HTML5新增的表单属性

 我们可以通过以下的方式修改placeholder里面的字体颜色：

input::placeholder { color: pink; }

CSS3的新特性

CSS3现状

新增的CSS3特性有兼容性问题，ie9+才支持

移动端支持优于PC端

不断的改进中

应用相对广泛

CSS新增选择器

CSS新增的选择器可以更加便捷更加自由的选择目标元素

属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助类或者id选择器

 看到了吗孩子这就是属性选择器

<!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>input[value]{color: pink;}</style>
</head>
<body><input type="text" value="请输入"><input type="text">
</body>
</html>

 

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

结构伪类选择器

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

这个nth-child可以选择某个父元素的一个或者多个特定的子元素

n可以是数字，关键字和公式

n如果是数字，就是选择第n个子元素，里面的数字从1开始

n 可以是关键字：even 偶数，odd 奇数

n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

 

这俩的区别：

1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）

先找到第n个孩子，然后看看是否和E匹配

2. nth-of-type 对父元素里面指定子元素进行排序选择

先去匹配E ，然后再根据E找第n个孩子

小结

 

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签从而简化HTML结构

tips：

1.before 和 after 创建一个元素，但是属于行内元素

2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

3.语法： element::before {}

4.before 和 after 必须有 content 属性

5.before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

6.伪元素选择器和标签选择器一样，权重为 1

伪元素选择器有使用的场景：伪元素字体图标

p::before { position: absolute; right: 20px; top: 10px; content: '\e91e'; font-size: 20px; }

 这就是，，，伪元素选择器

<!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>p{position: relative;width: 300px;height: 100px;background-color: pink;}p::before {position: absolute;right: 20px;top: 10px;background-color: aqua;content: '>';font-size: 20px;}</style>
</head>
<body><p>你好</p>
</body>
</html>

content是必须要写的，否则显示不出来

伪元素选择器使用场景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: 500px;height: 400px;}.tudou img{width: 100%;height: 100%;}.tudou::before{display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';background-color: rgb(0,0,0,0.4);}.tudou:hover::before{display: block;}</style>
</head>
<body><div class="tudou"><img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt=""></div>
</body>
</html>

 

就是这个

然后伪元素还有一个使用场景是：伪元素清除浮动

伪元素清除浮动

1.额外标签法也称为隔墙法，是W3C推荐的做法

2.父级添加overflow属性

3.父级添加after伪元素

4.父级添加双伪元素

这个要求新的空标签必须是块级元素

伪元素清除浮动算是第一种额外标签法的升级和优化

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：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宽度）

CSS3还有其他特性，了解即可，可以让图片变模糊，计算盒子宽度width：calc函数

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊

calc（）此CSS函数让我们声明CSS属性值时执行一些计算

 width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算

CSS过渡

这是一个重点的特性，过渡（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>div{width: 200px;height: 100px;background-color: pink;transition: width .5s;}div:hover{width: 400px;}</style>
</head>
<body><div></div>
</body>
</html>

如果想要写多个属性，就要利用,进行分割

<!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>div{width: 200px;height: 100px;background-color: pink;transition: width .5s,height .5s;}div:hover{width: 400px;height: 400px;}</style>
</head>
<body><div></div>
</body>
</html>

在Linux阶段我们自己手工搓了一个进度条，很原始（我们后端原始人是这样的）

前端可以实现更优雅的进度条（至少看起来是这样，代码难度肯定是后端高）

<!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: 250px;height: 10px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in{width: 50%;height: 100%;background-color: red;transition: width .8s;}.bar:hover .bar_in{width: 100%;}</style>
</head>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
</html>

 针对H5和C3有他们自己的相对论

HTML5结构标签本身：

CSS3相关样式：

 

而广义的HTML5是HTML5+CSS3+JS

这是HTML5 MDN的介绍：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

课后作业

制作这样的模块

有点不完全一样但是也还行

<!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>.box{height: 300px;width: 200px;background-color: white;}.box1 img{width: 100%;height: 180px;}span{font-size: 14px;color: #707070;}.old{font-size: 22px;color: rgb(226, 49, 49);font-weight: 700;}.new{font-weight: 700;text-decoration: line-through;}.box2{width: 150px;height: 30px;}.box2-in{width: 100px;height: 8px;border: 1px solid red;border-radius: 7px;padding: 1px;}.box2-in-in{width: 50%;height: 100%;background-color: red;transition: width .8s;}.box2-in:hover .box2-in-in{width: 100%;}.box3{width: 200px;height: 50px;color: white;font-weight: 700;background-color: rgb(179, 25, 27);text-align: center;line-height: 50px;}</style>
</head>
<body><div class="box"><div class="box1"><img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt=""></div><span>安分守己，苹果石榴，(128G) 银色移动联通电信5G手机</span><span class="old">$6088</span><span class="new">$6988</span><div class="box2"><div class="box2-in"><div class="box2-in-in"></div></div></div><div class="box3">立即抢购</div></div>
</body>
</html>

这就是前端


http://www.ppmy.cn/embedded/140598.html

相关文章

MySQL中的锁与优化SQL查询性能

MySQL中的锁与优化SQL查询性能

MySQL作为一种高效、稳定、易用的开源关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;在大数据量和高并发的场景中&#xff0c;其性能优化显得尤为重要。锁机制和SQL查询优化是MySQL性能调优的两个关键方面。本文将详细探讨MySQL中的锁类型以及如何优化SQL查询…
阅读更多...
【VUE3】VUE组合式（响应式）API常见语法

【VUE3】VUE组合式（响应式）API常见语法

ref() //const count ref(0) //count.value&#xff08;访问值&#xff0c;包括对象要加.value&#xff09; //任何类型的值&#xff0c;包括深层嵌套的对象或则JS内置数据结构 await nextTick() //要等待 DOM 更新完成后再执行额外的代码&#xff0c;可以使用 nextTick() …
阅读更多...
（免费送源码）计算机毕业设计原创定制：Java+SSM+JSP+Ajax+MySQLSSM国外鞋服代购平台

（免费送源码）计算机毕业设计原创定制：Java+SSM+JSP+Ajax+MySQLSSM国外鞋服代购平台

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;鞋服代购平台当然也不例外。代购平台是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;采用…
阅读更多...
ODBC连接PostgreSQL数据库后，网卡DOWN后，客户端进程阻塞问题解决方法

ODBC连接PostgreSQL数据库后，网卡DOWN后，客户端进程阻塞问题解决方法

问题现象&#xff1a;数据库客户端进程数据库连接成功后&#xff0c;再把跟数据库交互的网卡down掉&#xff0c;客户端进程就会阻塞&#xff0c;无法进行其他处理。该问题跟TCP keepalive机制有关。 可以在odbc.ini文件中增加相应的属性来解决&#xff0c;在odbc.ini 增加如下…
阅读更多...
STM32 外设简介

STM32 外设简介

STM32 外设简介 STM32 是由意法半导体 (STMicroelectronics) 开发的一系列基于 ARM Cortex 内核的微控制器&#xff0c;广泛应用于嵌入式系统中。STM32 系列的一个重要特点是其丰富而强大的外设模块&#xff0c;支持多种接口和功能&#xff0c;能满足工业控制、物联网、消费电…
阅读更多...
认识RabbitMq和RabbitMq的使用

认识RabbitMq和RabbitMq的使用

1 认识RabbitMq RabbitMQ是⼀个消息中间件&#xff0c;也是⼀个生产者消费者模型&#xff0c;它负责接收&#xff0c;存储并转发消息。 2.1 Producer和Consumer Producer&#xff1a;生产者&#xff0c;是RabbitMQServer的客户端&#xff0c;向RabbitMQ发送消息 Consumer&…
阅读更多...
affine_grid转onnx issue记录

affine_grid转onnx issue记录

affine_grid的官方链接： torch.nn.functional.affine_grid — PyTorch 2.5 documentation [ONNX] Support affine_grid_generator Issue #30563 pytorch/pytorch GitHub import torch import torch.nn as nnclass Model(nn.Module):def __init__(self):super(Model, sel…
阅读更多...
Linux 命令和 vi/vim 命令

Linux 命令和 vi/vim 命令

Linux 命令概览 1. 文件和目录操作 列出目录内容 ls&#xff1a;列出当前目录内容ls -l&#xff1a;以长格式列出ls -a&#xff1a;显示隐藏文件ls -lh&#xff1a;以长格式和人类可读方式显示大小ls -R&#xff1a;递归列出子目录ls -d */&#xff1a;仅列出目录ls -t&#x…
阅读更多...
最新文章

Copyright @ 2022~2023