详解 html5 新增的标签与 css3 中伪类和伪元素

关注

发布于: 2021 年 09 月 28 日

html5 / css3 基础篇（第一篇）

回顾

是的，你没看错！今天是一个全新的开始，今天这一讲我们就要开始 h5 和 c3 了，html 和 css 的基础篇我们都告一段落了。html 一共两篇，css 走过了 7 篇，如果基础不太熟悉的话，建议多看看 css 和 html 基础篇。从今天开始我们就要开始新的征程了，进入到 h5 和 c3 的环节了。现在工作中基本上对于 html/html5、css/css3 都是一个硬性的要求。所以接下来 h5 和 c3 的学习当中会在原本的基础上更上一层楼。期待全新的认知吧！

真正的敲代码神器 —— vs code

vs code 应该是众多开发人员必备的一个开发工具了，这个工具市场占比率已经遥遥领先了，所以对于前端开发者也是一样的，选择一个好的开发工具事半功倍。

常用的 vs code 插件

插件是 vs code 最具特色的功能之一，利用插件可以提高开发的效率和多样化的开发方式。下面就举例点最常用的插件和未来工作中进阶的插件基础插件：

chinse —— 中文（简体）语言包
open in Browser ——— 右击选择浏览器方式打开 html
js-css-html Formatter —— 每次保存，都会自动格式化.js css 和 html 代码
auto Rename Tag —— 自动重命名配对的 html/xml 标签
css peek —— 最终至样式

进阶插件：

auto close tag —— 输入标签名称的时候自动生成闭合标签
auto Rename Tag —— 尾部闭合标签同步修改
Bracket Pair Colorizer —— 用不同颜色高亮显示匹配的括号
Highlight Matching Tag —— 高亮显示匹配标签
Code Spell Checker —— 单词拼写检查
import Cost —— 引入包成本检查器
Version Lens —— 查看引入包最新版本

注意：虽然插件是非常好用的，但是切记对于新手来说，熟练的写代码能力是必不可少的一项技能，所以建议这种自动补全或者什么的插件在前期不要太常用，尽量自己手写，之后如果熟练了可以开启自动补全的功能。

HTML5 语义化标签

html5 简而言之就是对超文本标记语言（html）的第五次重大修改，涉及的内容比较广泛而且对现在来说用的比较多，所以特别把这次修改提出来，称之为 html5。对这次来说 html 新增了众多语义化标签

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

复制代码

以上基本就是这次 html5 新增的标签，你可以尝试在代码种输出试一试效果，页面如果布局的话可以使用这些标签更能增加语义化，对搜索引擎比较友好一些。除此之外，移动端更喜欢这些标签。

HTML5 新增多媒体标签

音频标签 audio

此次还有一个重要的一点就是新增了音频标签和视频标签

// 音频标签<audio> </audio>

复制代码

音频标签常见的属性。有些为了兼容的问题可以写两个形式的文件 mp3、ogg

autoplay：autoplay —— 如果出现该属性，则音频在就绪后马上播放
controls：controls —— 如果出现该属性，则向用户显示控件，比如播放按钮
loop：loop —— 如果出现该属性，则每当音频结束时自动播放
src：url —— 要播放的音频 url

视频标签 video

除了音频之外还有一个就是视频的属性了，视频也和音频一样可以有兼容的模式

// 视频格式<video> </video>

复制代码

视频常见的属性

autoplay：autoplay —— 视频就绪自动播放（Chrome 浏览器需要添加 muted 来解决自动播放问题）
controls：controls —— 向用户显示播放控件
width：px(像素) —— 设置播放宽度
height：px(像素) —— 设置播放高度
loop：loop —— 播放完是否继续循环播放
preload：auto(预先加载视频)/none(不应加载视频) —— 规定是否预加载视频
src：url —— 视频 url 地址
poster：imgurl —— 加载等待的画面图片、
muted：muted —— 静音播放

视频类型的牵扯的还是挺多属性，可以都试一试这些属性的用处。这里就不一一展示了，不过要注意的时谷歌浏览器将音频和视频的自动播放禁止了，所以需要在视频种添加 muted 静音属性来实现自动播放

HTMl5 表单属性

同样，除了新增的这些音频和视频之外，html5 还对表单进行了新增，这些标签一般都会代表一个形式，例如 type 为 email 的话，那么输入框内会自动验证是否是 email，如果不是会提示用户请输入正确的 email 地址。

// 新增 众多 type属性<input type="" />
<!-- 限制用户输入必须为 email 类型 --><input type="email">
<!-- 限制用户输入必须为 URL 类型 --><input type="url">
<!-- 限制用户输入必须为 日期 类型 --><input type="date">
<!-- 限制用户输入必须为 时间 类型 --><input type="time">
<!-- 限制用户输入必须为 月 类型 --><input type="month">
<!-- 限制用户输入必须为 周 类型 --><input type="week">
<!-- 限制用户输入必须为 数字 类型 --><input type="number">
<!-- 限制用户输入必须为 手机号码 类型 --><input type="number">
<!-- 搜索框 --><input type="search">
<!-- 生成一个颜色选择表单 --><input type="color">

复制代码

除了新增的这些 type 值之外，在 input 上还新增了很多属性值，可以自己在 vs code 中试一试这些属性，在未来的工作当中你会频繁的用到这些属性，甚至未来自己想搭一个 npm 包，写自己的 ui 组件这些也是必须的知道的东西

// 表示的是这个input 是必填，不能为空<input type="text" required />
// 表示的是这个input 是在页面加载完之后自动聚焦<input type="text" autofocus />
....

复制代码

required：required —— 该属性表示其内容不能为空
placeholder：提示文本（占位符） —— 表单的提示信息，存在默认值将不再显示
autofocus：autofocus —— 自动聚焦属性，页面加载完成之后自动聚焦到指定表单
autocomplete：off/on —— 当用户在字段开始键入时，浏览器基于之前键入过的结果显示在字段中
multiple：multiple —— 可以多选文件提交（在上传文件中使用）

css3 属性选择器

属性选择器

属性选择器一般是这样书写的：a[b]：表示的选择有 b 属性的 a 元素，所以从这里就可以延申出属性选择器众多的写法

a[b = “val”] —— 选择具有 b 属性且属性值等于 val 的 a 元素

// 表示的是选择input中 type=“text”的元素input[type="text"]{    color: red}

复制代码

注意：类选择器、属性选择器、伪类选择器权重都为 10

结构伪类选择器

之所以称之为伪类选择器就是因为其实它不是真正意义上的类选择器，在 Chrome 调试面板中和类相比还是有区别。

div：first-child —— 匹配 div 中第一个元素
div：last-child —— 匹配 div 中最后一个元素
div：nth-child(n) —— 匹配父元素中第 n 个子元素 n 可以是数字、关键字、公式。注意：n 也可以是 even（表示偶数） odd（表示奇数） n 也可以是公式，从 0 开始

html 结构<body>  <div class="content">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>    <div>7</div>    <div>8</div>  </div></body>

复制代码

运行的结果如下：

除此之外还可以指定类型的选择器

div：first-of-type —— 指定类型 div 的第一个
div：last-of-type —— 指定类型 div 的最后一个
div：nth-of-type(n) —— 指定类型 e 的第 n 个

css 伪类元素

伪类元素也是在工作和学习中当作重中之重去对待，因为未来的工作中也会大量的用到伪类元素，特别是小图标或者在图片样式上面的小东西，大部分都是用到伪类元素，基本常用的伪元素有两种 before、after

：before —— 在元素内部的前面插入内容
：after —— 在元素内部的后面插入内容

值得注意的是：

before、after 必须得有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，都属于行内元素
因为在 dom 里面看不见伪元素，所以称之为这类元素为伪元素
伪元素和标签选择器一样，权重为 1

一般的情况下如果一个大的图片或者内容中有一个小的 icon 或者其他的元素，可以直接用伪元素去表示。这种场景非常的常见，可以使用“子绝父相”去移动到合适的位置。

好了，今天的 h5 和 c3 的第一篇就告一段落了，最近笔者还是挺忙的，有什么问题欢迎随时留言~

今天就再来学习一首之前记录的诗吧。

南歌子词二首 / 新添声柳枝词 --温庭筠
一尺深红胜曲尘，天生旧物不如新
合欢核桃终恨，里许元来别有人
井底点等深烛伊，共郎长行莫围棋
玲珑骰子安红豆，入骨相思知不知

译文

一袭深红色的长裙日子久了便蒙上了淡黄色,自古以来旧的东西就比不得新的东西讨人喜欢
你我原本应该像核桃一样坚贞不移,哪里想到你的心里原来已经有了别人,让我对你终究有了恨意
深夜里点亮烛火深深的嘱咐你,此去路途遥远不要忘了归期
小巧精致的骰子上嵌入那意喻相思的红豆,相思入骨你是否知道？

发布于: 2021 年 09 月 28 日阅读数: 19

原文链接:【http://xie.infoq.cn/article/b309094a573c3dd28602b8565】。文章转载请联系作者。

前端史塔克

关注

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变，更高效学习前端知识及后续发展趋向，更好快速的融入到工作中关注公号：前端史塔克

发布

暂无评论

创作场景

详解 html5 新增的标签与 css3 中伪类和伪元素

html5 / css3 基础篇（第一篇）

回顾

真正的敲代码神器 —— vs code

常用的 vs code 插件

HTML5 语义化标签

HTML5 新增多媒体标签

音频标签 audio

视频标签 video

HTMl5 表单属性

css3 属性选择器

属性选择器

结构伪类选择器

除此之外还可以指定类型的选择器

css 伪类元素

前端史塔克

评论