0基础学web前端第14天:HTML5CSS3第一天

壹灵
壹灵
壹灵
32
文章
0
评论
2021年5月5日15:27:29
评论
360

0基础学web前端第14天:HTML5CSS3第一天(html5标签及CSS3属性选择器)

一、什么时HTML5

HTML5定义了HTML标准的最新版本,是对HTML的第五次重大修改,号称下一代的HTML。是一个新版本的html语言,定义了新的标签、特性和属性。拥有一个强大 的技术集,这些技术集是指:html5,css3,javascript,这也是广义上的html5。

那么html5拓展了哪些内容:语文化标签,本地存储,兼容特性,2D、3D,动画、过渡,CSS3特性,性能与集成。绝大多数新的特性,都已经被浏览器所支持,最新版的浏览器已经支持最新的特性。

二、HTML5新增语义化

1.什么是语义化

2.新增了哪些语义化标签

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

0基础学web前端第14天:HTML5CSS3第一天

使用语义化标签主要是针对搜索引擎,新标签可以使用一次或多次,在IE9浏览器中,需要把语义化标签都转换为块级元素,语义化标签,在移动端支持比较友好,另外HTML5新增了很多的语义化标签。

三、多媒体音频标签

1. 多媒体标签有两个,分别是音频——audio,视频——video

2. audio     标签可以在不使用标签的情况下,也能够原生 支持音频格式文件的播放,但是播放格式是有限的。

3. audio 目前支持三种格式

0基础学web前端第14天:HTML5CSS3第一天

4. audio的参数

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后巴上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop loop 如果出现该属性,则每当音频结束时重新开始播放
src url 要播放的音频的URL

5. audio 代码演示

<body>
  <!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
      <source src="./media/snow.mp3" type="audio/mpeg" />
      <source src="./media/snow.ogg" type="audio/ogg">
      您的浏览器不支持 audio 元素。
  </audio>
</body>

四、多媒体视频标签

1.video 视频标签目前支持三种格式

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0 21+ 25+ 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

2.语法格式

<video src="./media/video.mp4" controls="controls"></video>

3.video参数

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后巴上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
width width 设置播放器宽度
height height 设置播放器高度
loop loop 如果出现该属性,则每当视频结束时重新开始播放
preload auto(预先加载视频)
none(不应加载视频)
规定是否预加载视频(如果有了autoplay就忽略该属性)
src url 要播放的音频的URL
poster Imgurl 加载等待的画面图片
muted muted 静音播放

4. video 代码演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

5.多媒体标签总结

音频标签与视频标签使用基本一致。多媒体标签在不同浏览器下情况不同,存在兼容性问题,谷歌浏览器把音频和视频标签和自动播放都禁止了,谷歌浏览器中视频添加muted标签可以自己播放。

五、新增input标签

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

六、新增表单属性

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

七、CSS3属性选择器

1.CSS3是在CSS2的基础上拓展、新增的样式。

2.CSS3发展现状:移动端支持优先PC端,相对于Html5,应用非常广泛。

3.属性选择器列表

选择符 简介
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元素

4.属性选择器代码演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

属性选择器代码演示

input[type=search] {
  color: skyblue;
}
span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

八、结构伪类选择器

1,属性列表

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个E元素
E:nth-child(n) 匹配父元素中的第n个元素E
本质上就是选中第几个子元素
n可以是数字、关键字、公式
n如果是数字,就是选中第几个
常见的关键字even偶数、odd奇数
常见的公式2n:偶数,2n+1:奇数,5n:5的倍数,n+5:从第5个开始(含第5个)到最后,-n+5:前5个(包含第5个)
但是第0个元素或者超出了元素的个数会被忽略。
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

2.代码演示

<style>
ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式,从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

3.nth-child与nth-of-type的区别:

nth-child选择父元素里面的第几个子元素,不管是第几个类型。

nth-of-type选择指定类型的元素。

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

九、伪元素选择器

1.伪类元素选择器

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

2.伪类选择器的注意事项

before和after必须有content属性;before在内容前面,after在内容后面;before和after创建的是一个元素,但是属性行内元素;创建出来的元素在Dom中查找不到,所以称为伪元素;伪元素和标签选择器一样,权重为1。

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

3.伪元素的案例:添加字体图标

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

 

壹灵
  • 本文由 发表于 2021年5月5日15:27:29
  • 转载请务必保留本文链接:https://www.1ling.net/work/109.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: