2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

HTML5 第一天

一、什么是 HTML5
  1. HTML5 的概念与定义

定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML

两个概念:

  • 是一个新版本的 HTML 语言,定义了新的标签、特性和属性
  • 拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

  • HTML5 拓展了哪些内容

  • 语义化标签

  • 本地存储
  • 兼容特性
  • 2D3D
  • 动画、过渡
  • CSS3 特性
  • 性能与集成

  • HTML5 的现状

绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,

总的来说: HTML5 已经是大势所趋

二、 HTML5 新增标签
  1. 什么是语义化
  2. 新增了哪些语义化标签

  3. header — 头部标签

  4. nav — 导航标签
  5. article — 内容标签
  6. section — 块级标签
  7. aside — 侧边栏标签
  8. footer — 尾部标签

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 使用语义化标签的注意

  2. 语义化标签主要针对搜索引擎

  3. 新标签可以使用一次或者多次
  4. IE9 浏览器中,需要把语义化标签都转换为块级元素
  5. 语义化标签,在移动端支持比较友好
  6. 另外, HTML5 新增的了很多的语义化标签,随着课程深入,还会学习到其他的
三、多媒体音频标签
  1. 多媒体标签有两个,分别是

  2. 音频 — audio

  3. 视频 — video

  4. audio 标签说明

  5. 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,

  6. 但是:播放格式是有限的

  7. audio 支持的音频格式

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. audio 的参数

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. audio 代码演示
<body>
  <!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!--
    因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg">
  </audio>
</body>
四、多媒体视频标签
  1. video 视频标签

  2. 目前支持三种格式

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 语法格式
<video src="./media/video.mp4" controls="controls"></video>
  1. video 参数

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 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>
  1. 多媒体标签总结

  2. 音频标签与视频标签使用基本一致

  3. 多媒体标签在不同浏览器下情况不同,存在兼容性问题
  4. 谷歌浏览器把音频和视频标签的自动播放都禁止了
  5. 谷歌浏览器中视频添加 muted 标签可以自己播放
  6. 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册
五、新增 input 标签

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
六、新增表单属性

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
七、CSS3 属性选择器(上)
  1. 什么是 CSS3

  2. CSS2 的基础上拓展、新增的样式

  3. CSS3 发展现状

  4. 移动端支持优于 PC 端

  5. CSS3 目前还草案,在不断改进中
  6. CSS3 相对 H5,应用非常广泛

  7. 属性选择器列表

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 属性选择器代码演示
button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}
八、CSS3 属性选择器(下)
  1. 代码演示
input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

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

span[class*=black] {
  color: lightseagreen;
}
九、结构伪类选择器
  1. 属性列表

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 代码演示
ul li:first-child {
  background-color: lightseagreen;
}

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

ul li:nth-child(3) {
  background-color: aqua;
}
十、nth-child 参数详解
  1. nth-child 详解

  2. 注意:本质上就是选中第几个子元素

  3. n 可以是数字、关键字、公式
  4. n 如果是数字,就是选中第几个
  5. 常见的关键字有 even 偶数、 odd 奇数
  6. 常见的公式如下(如果 n 是公式,则从 0 开始计算)
  7. 但是第 0 个元素或者超出了元素的个数会被忽略

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 代码演示
<style>
  /* 偶数 */
  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>
十一、nth-child 和 nt-of-type 的区别
  1. 代码演示
<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. 区别

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

  3. nt-of-type 选择指定类型的元素
十二、伪元素选择器
  1. 伪类选择器

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
  1. 伪类选择器注意事项

  2. beforeafter 必须有 content 属性

  3. before 在内容前面, after 在内容后面
  4. beforeafter 创建的是一个元素,但是属于行内元素
  5. 创建出来的元素在 Dom 中查找不到,所以称为伪元素
  6. 伪元素和标签选择器一样,权重为 1

  7. 代码演示

<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>
十三、伪元素的案例
  1. 添加字体图标
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;
}
十四、2D 转换之 translate
  1. 2D 转换

  2. 2D 转换是改变标签在二维平面上的位置和形状

  3. 移动: translate
  4. 旋转: rotate
  5. 缩放: scale

  6. translate 语法

  7. x 就是 x 轴上水平移动

  8. y 就是 y 轴上水平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
  1. 重点知识点

  2. 2D 的移动主要是指 水平、垂直方向上的移动

  3. translate 最大的优点就是不影响其他元素的位置
  4. translate 中的100%单位,是相对于本身的宽度和高度来进行计算的
  5. 行内标签没有效果

  6. 代码演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* &#x5E73;&#x79FB; */
  /* &#x6C34;&#x5E73;&#x5782;&#x76F4;&#x79FB;&#x52A8; 100px */
  /* transform: translate(100px, 100px); */

  /* &#x6C34;&#x5E73;&#x79FB;&#x52A8; 100px */
  /* transform: translate(100px, 0) */

  /* &#x5782;&#x76F4;&#x79FB;&#x52A8; 100px */
  /* transform: translate(0, 100px) */

  /* &#x6C34;&#x5E73;&#x79FB;&#x52A8; 100px */
  /* transform: translateX(100px); */

  /* &#x5782;&#x76F4;&#x79FB;&#x52A8; 100px */
  transform: translateY(100px)
}
十五、让一个盒子水平垂直居中
  • 看代码
十六、2D 转换 rotate
  1. rotate 旋转

  2. 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

  3. rotate 语法

/* &#x5355;&#x4F4D;&#x662F;&#xFF1A;deg */
transform: rotate(&#x5EA6;&#x6570;)
  1. 重点知识点

  2. rotate 里面跟度数,单位是 deg

  3. 角度为正时,顺时针,角度为负时,逆时针
  4. 默认旋转的中心点是元素的中心点

  5. 代码演示

img:hover {
  transform: rotate(360deg)
}

拓展阅读@

扫一扫下面的二维码,关注我们,获取更多精彩活动资讯,有好礼相送哦~

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

【华为云】特惠专区,多款产品限时特价!

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

【阿里云】上新必买抢先知,劲爆优惠不错过!

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

【七牛云】优惠专区,多款云产品限时抢购!

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

【又拍云】免费CDN专区,10G免费大放送!

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

【知识星球】一个资料分享的站点,各种学习资料,随时分享

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

微信赞助; 微信打赏 支付宝打赏

免责声明:本文所有内容均为互联网上收集而来,仅供学习交流,整理文章为传播相关技术,如有侵权,请联系删除

Original: https://www.cnblogs.com/minvenus/p/Learning-webpage_html_css_1.html
Author: Destiny_Minvenus
Title: 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/586118/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • [apue] linux 文件系统那些事儿

    前言 说到 linux 的文件系统,好多人第一印象是 ext2/ext3/ext4 等具体的文件系统,本文不涉及这些,因为研究具体的文件系统难免会陷入细节,甚至拉大段的源码做分析,…

    Linux 2023年5月27日
    078
  • Linux进程的uid和euid

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月13日
    0294
  • python写一个双色球彩票计算器

    首先声明,赌博一定不是什么好事,也完全没有意义,不要指望用彩票发财。之所以写这个,其实是用来练手的,可以参考这个来预测一些其他的东西,意在抛砖引玉。 啰嗦完了,马上开始,先上伪代码…

    Linux 2023年6月6日
    066
  • Centos8 设置中文

    1、一般情况 1.1 进入设置选择 Region&Language 1.2 点击 加号 1.3 点击 汉语(中国) 1.4 选择 汉语(智能拼音) 2、特殊情况 有些虚拟机…

    Linux 2023年5月27日
    095
  • 在RestController中获取各种信息的方法

    内容 获取方法 URL中路径的一部分 首先需要在RequestMapping做映射, 之后在方法中可以通过注解使用映射的变量@GetMapping(“/{id}&#82…

    Linux 2023年6月14日
    096
  • KMP分析证明

    引用后缀的目的: “ABBABA” 如果说ABA里面组成的AB是答案组成部分的开头,那么AB后面的字符一定是和模式串开头的第三个字符一样,如果不一样一定不是…

    Linux 2023年6月7日
    051
  • CMD 和 Git 中的代理设置

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月30日
    0292
  • HTS恢复检查脚本

    #!/bin/bash #program:HTS-A数据库和插件检查 #author:sundz #version 20220531 v1 创建脚本 生成sql的表和字段汇总;ab…

    Linux 2023年6月7日
    069
  • 如何在EMACS 设置格式

    如何设置Emacs的各种模式, 这个教程要观摩一下的 http://www.emacswiki.org/emacs/IndentingC#toc1 Original: https:…

    Linux 2023年6月14日
    082
  • github生成person access token

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月30日
    0235
  • 正则: 匹配英文、数字和所有特殊字符

    r”’\[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;’\\[\]·~!@#¥%……&*()——\-+={}|《》?…

    Linux 2023年6月15日
    0105
  • git查看分支创建于哪个分支

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月30日
    0231
  • SQL实战——03. 查找各个部门当前(to_date=’9999-01-01′)领导当前薪水详情以及其对应部门编号dept_no

    查找各个部门当前(to_date=’9999-01-01′)领导当前薪水详情以及其对应部门编号dept_noCREATE TABLE dept_manage…

    Linux 2023年6月14日
    073
  • Mysql安装

    linux系统,Mysql安装,用户登录、密码修改。 Mysql安装 环境 ubuntu 20.04 安装 安装服务 sudo apt install mysql-server 启…

    Linux 2023年6月13日
    069
  • ubuntu 安装 php7.4

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月26日
    0214
  • Git 详细介绍查看、删除、重命名远程分支和tag

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月30日
    0248
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球