H5C3笔记黑马pink老师 b站视频笔记有自己新加内容

本文链接：https://blog.youkuaiyun.com/weixin_56702300/article/details/128012783

本文详细介绍了HTML5和CSS3的新特性，包括HTML5的基本结构、语法简化、语义化标签、视频和音频标签、新的input类型及CSS3的选择器、伪元素、2D/3D转换、过渡动画、响应式布局等。强调了语义化对SEO和无障碍访问的重要性，并探讨了兼容性问题和移动端布局策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 特点

基本结构更简洁

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

语法放松规则

结束标签可以不写
单标签< br> < img> < input>
双标签< div> < li>< ul> < h2>
标签可以省略 html head body tbody
不严格区分大小写
< EM> < /em>
属性的引号可以省略
属性的取值可以省略，当属性等于属性值的时候
disabled checked
属性可以不写引用 css 或者 js 时里面的 type 可以省略

标签语义化

语义化的好处：

1-即使没有样式也能呈递清晰的结构

2-便于搜索引擎优化

3-便于团队开发和代码的后期维护修改

4-无障碍性–盲人阅读器

5-未来功能，可以更好的使用新增浏览器和编辑器

Html5 新增标签

兼容性问题

如果一个标签在浏览器里不兼容，就会认为是内联元素

1、定义超级规则

header,footer,nav,aside,article,section,main,figure,figcaption{display: block;}

2、用 js 创建标签

<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("main");
</script>

3、引用现成的 js 文件

语义化标签

大语义标签

在IE9中，需要把这些元素转换为块级元素

<header></header>:头部标签
<nav></nav>:导航标签
<article></article>:文章内容标签
<section></section>:区域块，定义文档某个区域，专题性较强，可以有专属于自己的h1
<aside></aside>:侧边栏标签
<footer></footer>:尾部标签
<main></main>:主要内容，一个页面只能有一个

小语义标签

<mark></mark>：高亮

<hgroup></hgroup>：标题组 5.1里已经删除

<figure>：板块，区块
<img src="./images/1.jpg">
<figcaption>图片名</figcaption>
</figure>

<details>：折叠框 兼容不好
<summary>今天晚自习考试</summary>
<p>考试时间：</p>
<p>考试地点</p>
<p>考试内容</p>
<p>监考老师</p>
</details>

<canvas></canvas>：用js画布

视频标签

< video > 元素支持三种视频格式：MP4（尽量使用），WebM，Ogg。

   <video src="" controls="controls">
        <!-- 照顾各版本浏览器 -->
        <source 源头src="movie.mp4"type="video/mp4">
        <source src="movie.ogg"type="video/ogg">
       您的浏览器暂不支持<video>标签。
    </video>

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	px
height	px
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预先加载视频)；none(不应加载视频)	规定是否预加载视频（如果有了autoplay就忽略该属性)
src	url
poster	img 的 url	加载等待的画面图片
muted	muted	静音播放

音频标签

< audio > 元素支持三种视频格式：MP3（尽量使用），Wav，Ogg。

    <audio src="" controls="controls">
     <!-- 照顾各版本浏览器 -->
        <source src="happy.mp3" type="audio/mpeg">
        <source src="happy.ogg" type="audio/ogg">
        您的浏览器暂不支持<audio>标签。
    <audio>

属性	值	描述
autoplay	autoplay	自动播放（谷歌禁止该功能）
controls	controls	向用户显示播放控件
src	url
loop	loop	循环播放

新增 input 类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为URL类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“datetime-local”	本地时间
type=“number”	限制用户输入必须为数字类型和 e
type=“range”	滑动条
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

type=“number” 表单相关属性

min=" " max=" " step=" "（只在有效值上跳越）

type="range"表单相关属性

min=" " max=" " step=" "（只在有效值上跳越）

当滑动条变化时，把滑动条的值给文本框
<input type="range"
id="a"
min="40"
max="120"
step="5"
onchange="b.value = a.value">
<input type="text" id="b">

datalist 搜索下拉

与表单连用

// list内填写关联属性的id名
<input type="text" list="box">

// datalist下拉框，关联属性需添加id名 
<datalist id="box">

// 下拉内容 option
<option>手机</option>
<option>电视机</option>
<option>洗衣机</option>
</datalist>