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

前端史塔克
1,590 阅读8分钟

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 —— 查看引入包最新版本

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

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

image.png

视频标签 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 —— 静音播放

1632836483379_D1339658-4ECC-4d3e-935E-FC5B0B4CC7D8.png

视频类型的牵扯的还是挺多属性，可以都试一试这些属性的用处。这里就不一一展示了，不过要注意的时 谷歌浏览器将音频和视频的自动播放禁止了，所以需要在视频种添加 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 —— 可以多选文件提交（在上传文件中使用）

1632840507389_D805F1E2-E687-458b-8909-F42FDEF3D592.png

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>

运行的结果如下：

1632840665496_0F55B3AF-6394-4446-935E-A52AE6EE2C19.png

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

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

image.png

css 伪类元素

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

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

值得注意的是：

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

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

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

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

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

译文

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