笔记：HTML5
<!DOCTYPE>
①<!DOCTYPE>规定了浏览器文档使用哪种HTML或者XHTML规范，让浏览器进入正确呈现模式。
②HTML5中的声明写在最前面，触发标准模式，不加声明可能出现怪异模式。
<!DOCTYPE html>
③在VSCode中，新建一个.html文件，打一个!再按回车就可以生成最简洁的HTML框架。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<html>
①lang属性表示网页的语言，en表示英文，zh表示中文。
<html lang="zh">
<script>
defer属性
①defer是开启新的线程下载外部脚本文件，等待.html文件解析完毕再执行。
②多个带defer属性的<script>标签，会按照顺序执行。
③defer脚本会在DOMContentLoaded和load事件之前执行。
async属性
①async是异步下载外部脚本文件，下载完毕后立即执行，此时会阻塞.html文件的解析。
②多个带async属性的<script>标签，不能保证加载的顺序。
③async脚本会在load事件之前执行，不一定保证在DOMContentLoaded事件前执行。
crossorigin属性
integrity属性
type属性
<script scr="./" type="module" defer></script>
<head>
<meta>
①charset属性设置网页字符集。
②name属性设置数据名称。
③content属性设置数据内容。
④description属性设置网页的描述，方便搜索引擎搜索。
⑤http-equiv属性设置网页隔一定时间重定向指定的超链接。
<meta charset="utf-8">
<meta name="keyword" content="blog">
<meta http-equiv="refresh" content="5;url=https://www.baidu.com">
<title>
①设置网页的标签。
<title>网页的标签</title>
<body>
<h1> ~ <h6>
①<h1> ~ <h6>设置网页的1~6级标题。
②标题标签是块元素，自带换行。
③<hgroup>用于打包多个标题标签。
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
<hgroup></hgroup>
<p>
①段落标签是块元素，自带换行。
②<p>中不能放其他块元素。
<p></p>
语义化标签
行内元素<span>的语义化标签
①<em>段落语音语调加重。
②<strong>强调内容。
③<q>和<blockquote>表示引用。
<span></span>
<em></em>
<strong></strong>
<blockquote></blockquote>
<q></q>
块元素<div>的语义化标签
①<header>网页头部。
②<main>网页主体。
③<footer>网页的底部。
④<nav>网页的导航。
⑤<aside>网页的侧边栏
⑥<article>独立的文章。
⑦<section>独立的区块。
<div></div>
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
列表
①<ol>有序列表。
②<ul>无序列表。
③<dl>定义列表。定义列表中包含定义内容<dt>和解释说明<dd>。
④<li>列表项。
<ol></ol>
<ul></ul>
<dl></dl> <dt></dt> <dd></dd>
<a>
①<a>是行内元素，不可以嵌套。
②href属性用于指定跳转链接，可以是外部链接或内部链接，也可以是页面本身，例如用#跳转到页面任意id位置。
③target属性用于跳转链接的方式，可选择_self，_blank，_parent，_top之一。
④id属性可以是任何标签的属性，区分大小写，网页中id名不可重复。
⑤创建空链接可以将href设置为####或者javascript:;
<a href="https://www.baidu.com" target="_blank"></a>
<a id="anywhere" href="#id_name"></a>
<a href="javascript:;"></a>
<img>
①<img>用于引入一张图片或动图，格式可以是png，jpg，gif，base64，webp等，其中base64不是图片格式，是一种编码方式，更快显示网页中图片。
②src属性为图片路径。
③alt属性为图片无法加载时的描述，也会作为搜索引擎的搜索关键词。
④width和height属性改变图片的宽高。
<img src="img1.gif" alt="">
<iframe>
①<iframe>用于在网页中引入其他页面。
②width和height属性指定内联框架的宽高
③frameborder属性设置是否有内联框架边框。
<iframe width="800" height="800" src="https://www.baidu.com"></iframe>
音视频
①音频用<audio>引入，视频用<video>引入。也可以用<source>或<embed>引入，并且可以提高浏览器兼容性。
②src属性为音视频路径。
③controls属性允许用户控制该音视频。
④autoplay属性设置自动播放，但是目前大部分浏览器不会自动播放。
⑤loop属性设置循环播放。
<audio src="" controls autoplay loop></audio>
<video src="" controls autoplay loop></video>
//提高兼容性
<audio controls>
您的浏览器不支持音频！
<source src="1.mp3">
<source src="1.ogg">
<embed src="1.mp3" type="audio/mp3" width="300" height="100">
</audio>
<table>
①关于表格的标签有：<table>，<tr>，<td>，<thead>，<tbody>，<tfoot>。
②colspan属性设置单元格列合并，
③rowspan属性设置单元格行合并。
④不写<thead>，<tbody>，<tfoot>时，默认内容全为<tbody>。
⑤表格不是块元素也不是行内元素，独占一行但不占全行。
<table>
<thead></thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<form>
①<form>用于客户端网页向服务端提交数据。
②action属性为提交到服务器的URL。
③autocomplete属性设置表单元素自动补全。
④readonly属性设置表单元素只读，数据会提交。
⑤disabled属性设置表单元素禁用，数据不会提交。
⑥autofocus属性设置表单元素自动获得焦点。
⑦name属性设置表单元素的数据允许被提交，不设置该属性时，表单元素的数据不会被提交到服务端。
表单元素
①文本框：<input>，type属性设置为text。value属性为文本框默认发送服务器的内容。
②密码框：<input>，type属性设置为password。
③单选按钮：<input>，type属性设置为radio。单选按钮的name需要一致，value属性为发送服务器的内容，checked为默认选项。
④多选按钮：<input>，type属性设置为checkbox。多选按钮的name需要一致，value属性为发送服务器的内容，checked为默认选项。
⑤下拉列表：<select>，其中的内容用<option>。value属性为发送服务器的内容，selected为默认选项。
⑥普通按钮：<input>或<button>，type属性设置为button。value属性设置按钮中的文字。
⑦提交按钮：<input>或<button>，type属性设置为submit。value属性设置按钮中的文字。
⑧重置按钮：<input>或<button>，type属性设置为reset。value属性设置按钮中的文字。
⑨调色盘：<input>，type属性设置为color。
⑩<label>标签用于包裹和关联表单控件，增强用户体验。
<form action="1.html" autocomplete="off" readonly>
<input type="text" name="文本框" value="1" disabled>
<input type="password" name="密码框" autofocus>
<input type="radio" name="单选按钮" value="1" checked="checked">
<input type="checkbox" name="多选按钮" value="1" checked="checked">
<select name="下拉框">
<option value="1" selected>选项一</option>
</select>
<input type="submit" value="好的">
<input type="button" value="我是按钮">
<button type="reset">恢复默认</button>
<input type="color">
</form>
<label for="id">文字与输入框关联</label>
<input type="text" id = "id">
特殊符号(实体)
// 空格
> //大于号
< //小于号
© //版权符号
<br/> //换行
<hr/> //分割线
移动端H5特性
①
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
