目录
今日所学总结
一、HTML5 新特性
（一）语义化标签
- 核心作用：优化搜索引擎识别，默认为块级元素，可多次使用。
- 常用标签：
- 头部标签：
<header></header>（定义页面或区域头部） - 导航栏标签：
<nav></nav>（定义导航链接区域） - 内容标签：
<article></article>（定义独立、完整的内容块，如文章、评论） - 区域标签：
<section></section>（定义页面中的功能区域，如章节、模块） - 侧边栏标签：
<aside></aside>（定义侧边辅助内容，如侧边栏、广告） - 页尾标签：
<footer></footer>（定义页面或区域底部，如版权信息）
- 头部标签：
（二）多媒体标签
1. 视频标签 <video></video>
- 支持格式：主要为 mp4 格式。
- 核心属性：
属性 作用 src 指定视频文件路径 autoplay 视频加载完成后自动播放（Edge 浏览器需配合 muted属性才能自动播放）muted 静音播放视频 controls 显示视频控制控件（如播放 / 暂停、进度条、音量调节） loop 视频播放结束后循环播放 poster 指定视频加载等待时显示的封面图片 preload 预加载设置（ auto自动预加载、none不预加载，有autoplay时会忽略此属性）width/height 设置视频播放器的宽度和高度（单位为 px）
2. 音频标签 <audio></audio>
- 支持格式：主要为 mp3 格式。
- 核心属性：
属性 作用 src 指定音频文件路径 autoplay 音频加载完成后自动播放（Edge 浏览器不支持直接自动播放） controls 显示音频控制控件（如播放 / 暂停、进度条、音量调节） loop 音频播放结束后循环播放
（三）新增 input type 属性值
- 核心作用：优化表单输入体验，适配不同输入场景。
- 常用类型：
type 值 作用 email 限制输入为邮箱格式 url 限制输入为网址格式 date 提供日期选择器 time 提供时间选择器 month 提供月份选择器 week 提供周选择器 color 提供颜色选择器 search 生成搜索框（部分浏览器会自带清除按钮） tel 优化手机号输入（移动端会弹出数字键盘） number 限制输入为数字（带上下调节按钮）
（四）新增表单属性
- 核心作用：增强表单验证和交互体验。
- 常用属性：
属性 作用 required 设置输入框内容不能为空，提交时会自动验证 placeholder 显示输入提示文本（不占用输入框实际内容，输入时自动消失） autofocus 页面加载完成后，光标自动聚焦到该输入框 autocomplete 控制是否开启输入历史记录自动补全（ on开启、off关闭）multiple 允许上传多个文件（仅适用于 type="file"的输入框）
二、CSS3 新特性
（一）新增选择器
1. 属性选择器
- 权重：与类选择器、伪类选择器相同。
- 语法与作用：
语法 作用 元素 [属性] 选择包含指定属性的元素（如 input[required]）元素 [属性 = 属性值] 选择属性值完全匹配指定值的元素（如 input[type="text"]）元素 [属性 ^= 属性值] 选择属性值以指定内容开头的元素（如 a[href^="http"]）元素 [属性 $= 属性值] 选择属性值以指定内容结尾的元素（如 img[src$=".png"]）元素 [属性 *= 属性值] 选择属性值包含指定内容的元素（如 div[class*="box"]）
2. 结构伪类选择器
- 权重：与类选择器、伪类选择器相同。
- 核心区别：
child先按 “所有子元素” 排序选择，再匹配元素类型；of-type先匹配元素类型，再按该类型子元素排序选择。 - 常用语法：
语法 作用 ul li:first-child 选择 ul 的第一个子元素，且该子元素为 li ul li:last-child 选择 ul 的最后一个子元素，且该子元素为 li ul li:nth-child(n) 选择 ul 的第 n 个子元素，且该子元素为 li ul li:first-of-type 选择 ul 中所有 li 类型的第一个 li ul li:last-of-type 选择 ul 中所有 li 类型的最后一个 li ul li:nth-of-type(n) 选择 ul 中所有 li 类型的第 n 个 li - n 的取值规则：
n 的表达式 作用 2n / even 选择偶数位置的元素 2n+1 / odd 选择奇数位置的元素 5n 选择第 5、10、15... 个元素 5+n 选择从第 5 个开始的所有元素 5-n 选择前 5 个元素
3. 伪元素选择器
- 权重：与标签选择器相同。
- 核心作用：在元素内部前后插入内容，默认为行内元素，必须设置 content 属性（内容可为空字符串
content:""）。 - 常用语法：
语法 作用 元素::before 在元素内部的最前面插入内容 元素::after 在元素内部的最后面插入内容
（二）CSS3 盒子模型（box-sizing）
- 核心作用：控制盒子宽高的计算方式。
- 属性值说明：
属性值 计算规则 content-box 默认值，盒子总宽高 = width/height + padding + border（padding 和 border 会撑开盒子） border-box 盒子总宽高 = width/height（padding 和 border 包含在 width/height 内，不会撑开盒子）
（三）其他常用特性
1. 图片模糊（filter）
- 语法：
filter: blur(npx)（n 为模糊程度，单位为 px，值越大越模糊）。
2. 计算函数（calc ()）
- 语法：
calc(表达式)（如width: calc(100% - 80px)）。 - 注意事项：表达式中运算符（+、-、*、/）前后必须加空格。
3. 过渡（transition）
- 核心作用：实现元素样式的平滑变化，一般配合
:hover使用，给需要过渡的元素本身添加。 - 语法：
transition: 过渡属性 过渡时间 运动曲线 延迟时间;。 - 参数说明：
- 过渡属性：指定要过渡的样式（如
color、width），用all表示所有样式都过渡； - 过渡时间：必须加单位（s 或 ms），如
0.5s； - 运动曲线：可选，默认
ease（先慢后快再慢），其他值如linear（匀速）、ease-in（先慢后快）； - 延迟时间：可选，指定过渡开始前的延迟时间（如
0.2s）。
- 过渡属性：指定要过渡的样式（如
三、广义 HTML5
泛指包含 HTML5（结构）、CSS3（样式）和 JavaScript（行为）的前端技术体系，是构建现代网页的核心组合。
今天没有代码练习，明天会发品优购首页的css和html代码还有相关笔记。
扫一扫
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
