笔记: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特性
①