一、Html标签

1、html5视频标签属性

属性

作用

autoplay

自动播放链接视频

loop

循环播放链接视频

muted

对当前视频设置静音

poster

视频刚加载黑屏时预览图像

1.1、视频标签使用

1.2、视频兼容性须知

视频加载顺序从上往下依次加载。

1.3、音频兼容性须知及写法

用法举例：

1.4、点击a标签跳转实现在本页面滑动的效果。

<style>
    html { 
         scroll-behavior: smooth;
      }
</style>

1.5、HTML5新增属性标签

标签

作用

<header>

网页页眉（头部）

<main>

网页内容，每个页面只能有一个

<nav>

导航栏

<article>

文章相关

<section>

分块

<footer>

侧边栏

<aside>

页面页脚（底部）

各个标签基本分部示意图：

1.6、表格标签

html5 新增特性

合并单元格

1.7、常用表单属性

二、CSS3样式

2.1、样式的几种选择器及注意事项

2.2、样式关系选择器举例

2.3、链接伪类选择器

链接伪类用于根据链接的不同状态（如未访问，悬停，点击等）为其添加样式，从而提升用户体验和界面交互性。

链接伪类

作用

a:link

未访问链接的默认样式

a:visited

已访问链接的样式

a:hover

鼠标悬停在链接上时的样式反馈

a:active

链接被点击时的瞬时状态（按下到松开）

举例使用效果：其他用法类似

2.4、结构伪类

结构伪类用于根据元素的位置选择目标元素

结构伪类标签

作用

:first-child

一组兄弟元素中的第一个元素

:last-child

一组兄弟元素中的最后一个元素

:nth-child(n)

一组兄弟元素列表中第 n 个元素

举例使用效果：

:nth-child(n) 中 n 的写法：

2.5、伪元素选择器

让表单不可选择修改的元素改变颜色等，

伪元素选择器

作用

::first-line

选择首行

::first-letter

选择首字母

::placeholder

选择 input 或者 textarea 占位符

举例使用效果：

2.6、属性选择器

根据元素的属性特征来精准定位，从而实现更灵活的样式控制。

属性选择器

作用

【属性】

匹配包含指定属性的元素

【属性 = 值】

匹配属性值等于指定值的元素

【属性 ^= 值】

匹配属性值以指定字符串开头的元素

【属性 $= 值】

匹配属性值以指定字符串结尾的元素

【属性 *= 值】

匹配属性值任意位置包含指定子串的元素

举例使用效果：