HTML5、CSS3

「学习笔记」HTML5、CSS3提高导读

|前言

仅供学习使用💪💪

1. HTML5的新特性

「1.1 HTML5新增的语义化标签(部分)」

• < header > ：标识文档头部区域的主要组成部分。
  • < nav > ：指定导航系统中各页面之间的链接位置。
  • < article > ：划分独立于其他内容的部分。
  • < section >：划分文档中的章节或分隔部分（section、区段）。
  • < aside > ：指定页面左侧非主内容的部分。
  • < footer > ：划分各 section 或 document 的底部标记部分。

\color{red}{注意：}

该语义化标准主要适用于搜索引擎领域。
在这些新标签页面中可以重复使用。
为了适应IE9环境，在处理这些元素时应将其设置为块级显示。
移动设备用户普遍倾向于采用这些标签。
HTML5新增了许多额外功能，请参考菜鸟教程HTML5获取详细信息。

「1.2 HTML5新增的多媒体标签」

• < audio > ：定义音频内容
• < video > ： 定义视频（video 或者 movie）

「1. 视频（viedo）」

目前，< video > 元素支持三种视频格式：MP4、WebM、Ogg,尽量使用MP4文件。

| FireFOX| YES
自 FireFOX 21 版起
Linux 系统则自 FireFOX 30 版开始
|Safari|YES|NO|

| Opera| YES
从 Opera 25 版本开始| YES| YES |

\color{1A6C12}{语法:}

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

    <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
    </video>

可选属性:

pre-load operation refers to automatically initiating the playback of video content prior to page rendering. It is equivalent to the autoplay feature and is denoted by the |auto specifier. n/a (no pre-load operation for videos)

「2. 音频（audio）」

标签定义声音，比如音乐或其他音频流。

目前， 元素支持的3种文件格式：MP3、Wav、Ogg。

\color{1A6C12}{语法:}

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

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
    </audio>

属性

| 预载选项 | auto |
| none | 规定当网页加载时，默认情况下未启用音频文件的预载，并明确指出了具体的加载方式是什么样的。 |
| src | URL |
| 规定音频文件的 URLs | 详细规定了指定的音频文件对应的 URLs。

「3. 多媒体标签总结」

• 音频与视频的标记应用方法大体相似
• 不同浏览器的兼容性存在差异
• 在谷歌浏览器中，默认情况下对音频与视频的 autoplay功能进行了禁用设置
• 为视频标签附加'muted'属性可实现静默播放效果；而对于音频内容，则无法通过该方法实现静默播放（可通过JavaScript实现）
• 将视频标记作为主要关注点时，默认会启用 autoplay功能；建议避免使用controls控件，并配合循环播放以及调整尺寸属性以达到预期效果

「1.3 HTML5新增的input 类型」

• 重点记住;number,tel,search这三个

「1.4 HTML5新增的表单属性」

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

    input::placeholder
    {
    	color:pink;
    }

2. CSS3的新特性

「2.1 CSS3新增选择器」

通过CSS3的更新,我们获得了新的选择器类型,这些工具能够更加便捷、灵活地定位目标元素。
1.属性定位子
2.基于结构的伪类定位子
3.基于伪元素的定位子

「1. 属性选择器」

属性选择器可以根据元素特有的属性为基础来实现对元素的选择。在这种情况下，无需依赖类或id选择器。

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

「2. 结构伪类选择器」

基于文档结构的定位方式主要依据文档架构来定位相关元素，并常见于通过父级定位项获取其子项

区别：

1.nth-child 用于从父元素的所有子项中按顺序选择第n个（序号固定）。首先定位到第n个子项，并检查其属性是否与E一致。
2.nth-of-type 用于从父元素中特定属性的子项中选择第n个（序号固定）。首先匹配属性为E的子项，并从中找出第n个。

nth-child（n） 选择某个父元素 的一个 或多个 特定的子元素 （重点）

• n 表示数字、字符或公式的具体含义
• 如果是数字，则代表第n个子元素（从1开始计算）
• 例如，在公式中使用even或odd分别表示偶数和奇数
• n 也可以是公式的引用（例如，在公式的引用中使用even或odd分别表示偶数和奇数）
• 常见的引用方式如下（如果n是一个公式的引用，则从0开始计算……）

小结:

• 结构伪类选区一般用于定位父级中的特定位置的孩子节点
  • nth-child在父节点的所有子节点中按顺序定位第N个符合条件的子节点
  • nth-of-type会针对父节点中的特定子节点类型进行定位，在匹配到该子类型后定位其后的第N个符合条件的子节点
  • 在使用nth-child时需特别注意索引是从0开始计算，默认值默认起始点为当前遍历层级的第一个兄弟节点
  • 针对无序列表场景建议优先考虑使用nth-child策略以提高筛选效率
  • 主要分类有三种：类选型器用于基于标签名的选择；属性选型器基于属性值的选择；伪类选型器基于CSS样式实现的选择]

「3. 伪类选择器（重点）」

基于CSS技术的伪元素选择器能够生成新的标签元素；无需依赖传统的HTML标签；从而使得整个HTML架构更加简洁明了。

注意：

• 将before和after用作行内元素的占位符。
• 这些新创建的占位符无法在文档树中找到对应项, 因此我们称它们为伪元素。
• 语法定义如下:element::before {}.
• 需要注意的是, before和after必须包含content属性。
• 具体来说, 在父元素内容之前插入before, 在之后插入after。
• 与标签选择器类似, 伪元素的选择器权重也设置为1。

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

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

伪元素选择器使用场景2：仿土豆效果

    /*当我们鼠标经过了土豆这个盒子，就让里面before遮罩层显示出来*/
    .tudou:hover::before{	
    	/*而是显示元素*/
    	display:block;
    }

伪元素选择器使用场景3：伪元素清除浮动

1. 替代标记方法也被称为隔离标记方法,是一种推荐的技术规范。
2. 配置父容器拥有溢出特性.
3. 配置父容器拥有after前导辅助元素.
4. 在父容器中配置双前导辅助元素.

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

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

「2.2 CSS3盒子模型」

CSS3规范允许通过box-sizing属性来定义盒模型，并规定该属性支持两种取值：content-box和border-box两种类型。选择不同的取值将导致计算盒子尺寸的方式发生转变。

该技术方案可采用以下两种方式实施：

1. 当box-sizing属性设置为content-box时，默认尺寸将由宽度+填充量+边距计算得出（以前基于此属性的计算方式）
2. 如果我们将box-sizing属性更改为border-box，则容器的尺寸将严格限定在指定宽度范围内（前提是填充量与边距之和不超过该宽度）

「2.3CSS3其他特性」

「1. 滤镜filter」

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

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

「2. calc函数」

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

    width: calc(100% -80px);

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

「3. 过渡（重点）」

transform 是 CSS3 中最为显著的独特之处之一，在不借助 Flash 动画或 JavaScript 技术的前提下，在元素样式发生转变时对 元素产生额外效果

动画效果：是从一个状态逐渐地过渡到另外一个状态。它可以让我们页面看起来更好看、更动感十足；然而低版本浏览器不支持（IE9以下版本），但不会影响页面布局。

我们现在经常和:hover 一起搭配使用。

    transition:要过渡的属性    花费时间   运动曲线   何时开始;

1. 可调整的CSS属性（包括宽度、高度、背景颜色、内边距和外边距）均可进行设置；若希望所有属性均进行动态变化，则只需输入all即可完成设置。
2. 占用时间：数值以秒为单位计算（例如0.5秒）。
3. 动画效果：默认采用ease函数（此功能可选）。
4. 开始时间：指定启动延迟的时间值（以秒为单位计算），默认值为0秒（可选设置）。

记住过渡的使用口诀：谁做过渡给谁加

「4. 2D转换」

变换（Transform）是CSS3中的一个重要且革命性的特性之一，并支持对元素的位置移动、旋转以及大小调整等操作。

转换（transform ）你可以简单理解为变形

• 移动：translate
• 旋转：rotate
• 缩放：scale

该技术用于重新定位并调整标签在二维平面上的形态与位置分布。让我们开始学习二维坐标系的基础知识。

「4.1. translate」

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

• \color{1A6C12}{语法:}

将 transform 指令用于执行坐标系中的水平与垂直方向的平移操作。
或者分步实现：
将 transform 指令分解为水平方向上的位移量为n的单独操作。
以及将 transform 指令分解为垂直方向上的位移量为n的操作。

核心
在2D转换中对位置进行调整时沿x轴和y轴移动元素
其主要优势在于不影响其他元素的位置
其百分比单位基于自身元素的比例进行计算，在translate操作中表现为(50%,50%)
不作用于行内标签结构

「4.2. rotate」

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

\color{1A6C12}{语法:}

    transform:rotate(度数)

重点

在rotate函数中指定角度，在参数位置指定度数（单位为deg），与使用rotate(45deg)等效。
正的角度表示顺时针旋转而负的角度则表示逆时针旋转。
默认情况下，默认旋转中心位于元素的几何中心位置。

2D 转换中心点 transform-origin

我们可以设置元素转换的中心点

\color{1A6C12}{语法:}

    transform-origin: x y;

重点

• 请确保参数x和y之间使用空格分隔
• x、y默认设置为元素中心点（50%，50%）
• 可以选择设置为像素值或方位词（如top、bottom等），具体选项包括top、bottom、left、right及center。

「4.3. scale」

缩放操作简单来说就是能够放大或缩小的内容。通过为元素添加这一属性就可控制其放大或缩小

\color{1A6C12}{语法:}

    transform:scale(x,y);

重点

特别注意其中的x和y要用逗号分隔。
transform:scale(1,1)：将尺寸乘以100%。
transform:scale(2,2)：将尺寸乘以2。
transform:scale(2)：当仅提供一个缩放因子时，默认使用相同的值作为第二个参数。
sacle 缩放的最大优势在于能够设置转换中心点进行缩放，默认情况下是以中心点进行缩放，并且不会影响其他元素。

「4.4. 2D转换综合写法」

注意：

1. 依次应用多种转换操作
2. 其顺序直接影响转换效果。（先执行旋转会影响坐标轴方向）
3. 当需要同时处理位移和其他属性时，请确保将位移参数放置在最前面

「5. 3D转换」

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

• x轴：横向延伸至右侧方向注意：右侧区域为正值区域而左侧区域则为负值
  • y轴：纵向延伸至下方方向注意：下方区域为正值而上方则对应着负值
  • z轴：与屏幕平面垂直延伸方向注意：前方空间对应着正数值而后方则对应着负数值

「5.1. translate3d」

3D移动在2D移动的基础上多加了一个可以移动的方
向，就是z轴方向。

• transform:translateX(100px)：仅此方向上的位移
• transform:translateY(100px)：仅在Y方向上有位移
• transform:translateZ(100px)：仅在Z方向上有位移
• transform:translate3d(x,y,z)：其中x、y、z分别表示沿各自坐标轴方向上的数值偏移量

由于z轴正交于屏幕并从屏幕内部延伸到外部，在默认情况下，默认情况下，默认情况下，默认情况下

「5.2. perspective」

在2D平面产生近大远小视觉立体，但是只是效果二维的

• 通过实现透影视效果可以在网页中模拟出三维物体。
• 为了模拟人的视觉感受，在设计时通常会设置一个虚拟观察者的位置。
• 其中一种术语是视距距离（perspective distance），它指的是观察者眼睛到屏幕表面的距离。
• 当观察点距离屏幕较近时，在电脑平面上呈现较大的图像；相反地，当观察点远离屏幕时，则显示较小的画面尺寸。
• 这种技术中使用的单位是像素（pixels）。

透视写在被观察元素的父盒子上面的

d：就是视距，在这里指的是观察者的眼睛到屏幕之间的垂直距离。
z：就是z轴；在这里表示物体与屏幕之间的垂直位置；当z值为正且增大时（即物体远离屏幕），在同一视角下呈现的物体会显得更大。

「5.3. rotate3d」

3D旋转操作允许元素在三维空间中绕x轴、y轴、z轴或自定义旋转轴进行旋转变换。

• \color{1A6C12}{语法:}
• 绕着x轴进行正向的45度旋转
• 绕着y轴进行正向的45度旋转
• 绕着z轴进行正向的45度旋转
• 根据指定的坐标系进行 deg 角度的自定义轴旋转变换（无需深入理解）

xyz代表表示旋转轴的矢量，在指示是否打算沿该轴进行旋转变换时，请注意最后一个参数设定的是旋转变换的角度值

• 使用transform:rotate3d(1. 0. 0. 45deg)实现沿x轴方向进行45度旋转变换
• 使用transform:rotate3d(1. 1. 0. 45deg)实现沿对角线方向执行45度旋转变换

「5.4. 3D呈现 transfrom-style」

• 决定子元素是否进入三维空间展示。
  • transform-style: flat时，默认状态下子元素不开启3D空间。
  • transform-style: preserve-3d后，默认情况下会开启子元素的三维空间展示。
  • 代码实际编写在父级 层面，并非仅影响内部的子盒子。

「6. 动画」

动画 （animation ）是CSS3中的一项重要技术。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

制作动画分为两步：

1.先定义动画
2.再使用（调用）动画

用 keyframes 定义动画（类似定义类选择器）

• \color{1A6C12}{语法:}

    @keyframes 动画名称 {
            0% {
                width: 100px;
            }
    
            100% {
                width: 200px;
            }
        }

动画序列

• 在制作动画时，默认情况下从时间点0（起点）到时间点1（终点）的变化构成了一个完整的流程。
• 通过@keyframes 标识符定义某种CSS样式的变化过程时，则会生成一种渐变的效果。
• animation represents the gradual transition of an element from one style to another through a series of intermediary states.
• 使用百分比值设定不同阶段的时间权重就可决定每一步骤的变化速度. 此外也可以直接使用"from"和"to"关键词来指定起始和结束状态相当于默认的百分比值.

元素使用动画

    div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
            /*调用动画*/
            animation-name: 动画名称;
            /*持续时间*/
            animation-duration: 持续时间;
        }

动画常用属性

动画简写属性

Animation: 包含以下几个关键参数：动画名称、时长、运动轨迹、播放开始的时间点、是否反向进行以及动画的启动或结束状态。

    animation: myfirst 5s linear 2s infinite alternate;

• 不包含 animation-play-state 动画属性
• 暂停动画（animation-play-state）通常与鼠标交互时频繁触发
• 想要实现动画逐步回归到初始状态（而不是直接跳跃式返回）应将 animation-direction 设置为 alternate
• 当盒子动画完成时应停留在最终位置（animation-fill-mode 应设置为 forwards）

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

「6. 浏览器私有前缀」

自定义前缀是以兼容旧版本HTML实体引用方式的目的而设置的，在新版本浏览器中则无需添加。

私有前缀

• -moz-：对应 firefox 浏览器的private properties。
  • -ms-：相当于 ie 浏览器的private properties。
  • -webkit-：对应 safari 和 chrome 的private properties。
  • -o-：相当于 opera 的private properties。

2.提倡的写法

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;