HTML5课堂入门笔记（完）
HTML5入门笔记
一、网页设计中 的软件的安装设置
1、typroa—笔记本工具（方便记录说明文档，图片等内容）
减号加空格可出现此点
文件名：由 基本文件名.扩展名（扩展名来确定这个文件的打开方式）
打开扩展名的操作如图所示：
1、打开我的电脑或者此电脑
2、点击查看，将文件扩展名选中
3、则，文件后面则会显示扩展名
2、greenshot—截图工具
设置
1、将安装的greenshot中点击右击选中preferences
2、如图操作：
3、如图所示：
4、如图：
5、设置完成，在之后的截屏，直接使用快捷键 ALT+Q就可以了。
3、sublime—网页设置的开发工具
在安装好软件后，通常有的电脑的软件会出现 显示不出汉子的现象
如图：
那么如何设置成有字体的状态呢？
- 第一：打开你的sublime软件，点击Preferences
- 第二：选择设置 - 默认，则会出现很多代码，如图：
- 第三：在其中的代码中找到第275行的代码，将引号中的代码改为：dpi_scale，如图：
二、HTML的文档结构
1、基本结构
1.1简介
- html标签是由尖括号的关键词，如
<html>,通常标签都是成对出现的，如：<html><html>; - 以
<html>为根标签，包含：<head>头部和<body>主体部分； - 头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键词等摘要信息摘要信息；
- 主体部分提供网页要显示的内容，真正显示页面中的；
- 合理的缩进；
- 标签名不区分大小写,但一般要用小写。
1.2开发工具：
记事本（notepad）,sublime,notepad++,Dreamweaver,VScode,webstorm等
sublime的使用：
第一：打开sublime
第二：在里面进行新建文件(ctrl+N)，然后在进行保存(ctrl+S)，保存的时候，记得将扩展名输入上去（扩展名：.html或者.htm 都可以），不然的话，写出的代码，在网页上显示不出来。
在输入根标签或者头部标签等会特别麻烦，那么，可以使用Tab键，来进行快速生成，例如：根标签，输入html然后在按Tab，之后会直接生成
<html></html>,只要是标签类型，都可以这样操作。第三：将代码输入完后，课进行在浏览器中打开,进行 验证。
代码：
<html><head><title>第一个HTML文件</title><meta charset="utf-8"></head><body>welcome to html!</body> </html>案例：
为了方便在sublime里面打开文件或图片等，可以单独建立一个文件夹（project），在这个文件夹中，可以再次创建三个文件夹（code，document，image）这三个，code里面可以放我们编写的代码，image里面可以放入我们需要的图片，可以方便我们打开以及使用。
将创建好的project文件夹直接拖进sublime里面，这样就可以更方便的使用了。
1.3浏览器
- 常见的浏览器：IE浏览器微软,chrome谷歌（开发人员常用的浏览器）,firefox火狐,safari苹果；
- 浏览器的作用:读取html文件,并以网页的形式进行显示；
- 浏览器不会直接显示html标签,而是使用标签来解释网页的内容。
2标签
2.1标签的组成
一个完整的html标签的组成：
<标签名 属性名="属性值">内容</标签名>属性值要用双撇号括起来，一般用双撇号（双撇号就是英文的双引号）
代码：
<html><head><title>标签的组成</title><meta charset="utf-8"></head><body bgcolor="yellow" text="red">标签的组成</body> </html>案例：
2.2标签的分类
根据标签是否关闭，分为：关闭型和非关闭型
关闭型：有开始标签，有结束标签，即标签成对出现
<html></html> <head></head> <title>标题</title> <body>主体<body> <h1>一级标题</h1> <h1>...<h6>非关闭型：只有开始标签，没有结束标签
<meta> <br> <hr>
根据标签是否独占一行，分为：块级标签和行级标签
- 块级标签：显示为块状，独占一行
<h1>大家好</h1>
<h1>一级标题<h1>...
<h6>六级标题<h6>
<hr>
- 行级标签：在行内显示，可以与其他文本 内容在同一行显示
<span></span>
代码：
<html><head><title>标签的组成</title><meta charset="utf-8"></head><body bgcolor="yellow" text="red">标签的组成<hr>HTML从入门到精通<hr><h1>一级标题</h1><hr><h2>二级标题</h2><hr><h5>五级标题</h5>咪咪 <br> 佛佛<h1>哈哈</h1>呵呵<hr><span>嘿嘿</span>吼吼</body>
</html>
案例：
2.3注释
注释在浏览器中不会显示，是用来标注解释html语句，但通过查看代码源可以看到的
<!--注释--> 注释的快捷键是：Ctrl+/
如图：
2.4 实体字符
实体字符也称为特殊字符，用于显示一些特殊符号：如< > & 空格等
语法：
语法格式：
& + 实体字符的名称;常用的实体字符：
< < 小于号 less than > > 大于号 great than两个小于号和大于号，就构成了书名号 空格 space 在html中对于连续的空白字符（空格、缩进、换 行等），在浏览器中显示时，只能显示一个空格。 & & 与 " " 英文状态下的双引号 也可以直接打双引号，浏览器中可以显示。 © 版权符号 copyright ® 注册符号 register × 关闭符号注意：实体字符，是严格区分大小写，即敏感大小写。如果大小写写错的话是没有办法显示的。
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><!-- 这是我们的第一个html的注释 -->html从入门到精通<hr>图书:<<HTML从入门到精通>><hr>北京 上海 广州<hr>在html中用&lt;表示<小于号<hr>"HTML语言" 或者 "HTML语言"<hr>版权所有 © 2000-2020 高教培训<hr>®<hr>×关闭符号<hr>&；<br>&aMp; 实体字符名称是区分大小写，大小写敏感 </body> </html>案例：
2.5文档类型
在HTML文档的第一行，使用来声明html文档的类型；
主要的功能就是：告诉浏览器页面的html文档的类型，简单来说，用来指定使用的html版本规范。
目前基本都使用的是html5，
快速出现构架的方法：
1、输入：html:5然后再按Tab键 或者输入！再按tab
如图：
或者
最后都可以生成：
2、输入：html:4s然后再按Tab键
如图：
生成：
由于第二中特别麻烦，所以现在大多数都用的是第一个。
三、常用标签
1.基本标签
| 标签 | 含义 | 说明 |
|---|---|---|
| br | 换行标签 | 属于非关闭性标签 |
| p | 段落标签 | 属于关闭性标签，属于块状标签，前后的段落之间有明显的距离 |
| h1.h2…h6 | 标题标签 | 按照h1到h6逐渐表小，属于块级标签，并且文本会加粗显示 |
| pre | 预格式化标签 | 保留编码时的格式 |
| div | 分区标签 | 常用作容器来使用，一般用于页面布局划分，块级标签 |
| span | 范围标签 | 默认情况没有任何效果，一般用来设置行类的格式 |
| ol、li | 有序列表 | 有顺序的项目列表 |
| ul、li | 无序列表 | 无顺序的项目列表 |
| dl、dt、dd | 定义列表 | 对术语、图片进行描述和定义的列表 |
| hr | 水平线标签 | 属于非关闭性标签，属于块级标签 |
| img | 图像标签 | 属于非关闭性标签，属于块级标签 |
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>hello<br>html<p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p><p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p><hr><h1>一级标题</h1><h2>二级标题</h2><h4>四级标题</h4><h6>六级标题</h6></body>
</html>
案例：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><pre>HTML从入门到精通学员：张杰</pre><hr><divstyle="width:400px;height: 100px;background:red">导航部分</div><divstyle="width:400px;height: 500px;background:yellow">正文部分</div><divstyle="width:400px;height: 100px;background:blue">版权部分</div><hr>iphone XR,不要8888,不要1888,只要<spanstyle="font-size:50px;color:red">98元</span></body>
</html>
案例：
1.1有序列表
ol：ordered list
li：list item
默认情况下，使用阿拉伯数字，从1开始标记，可以通过属性进行修改。
1、type属性：是设置列表片前的符号标记，取值，数字1（默认）；字母a或A，罗马数字i或I
2、start属性：是设置起始值，值必须是一个数字
1.2无序列表
ul：unordered list
li：list item
默认使用时为 实心圆作为服务好标记，可以通过属性进行修改。
type属性：是设置列表片前的符号标记，取值，disc实心圆（默认）、circle空心圆、square正方形、none不显示符号
1.3定义列表
dl：definition list
dt：definition title
dd：definition description
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><h3>2020年网络游戏排行榜</h3><ol type="1" start="5"><li>吃鸡</li><li>王者荣耀</li><li>LOL</li><li>WOW</li></ol><hr><h3>可爱的学生们</h3><ul type="disc"><li>张三</li><li>学委</li><li>团支书</li></ul><hr><h3>术语的解释</h3><dl><dt>LOL</dt><dd>它是腾讯公司代理的一款网络游戏，中文名称叫英雄联盟</dd><dd>可以分为PC端和移动端</dd><dt>HTML</dt><dd>是一种用来制作网页的标记语音</dd><dt>JAVA</dt><dd>是一种跨平台编辑语言</dd></dl> </body> </html>案例：
1.4水平线标签
hr：horizontal
常用的属性：
color颜色
两种写法：
第一种：
1、颜色名称：如 red、green、blue、white、pink、orange等
2、16进制的RGB：Red Green Blue 用法：#RRBGGBB 每种颜色的取值范围0-255，转换为16进制00-FF
3、eg：如何去写？： #FF0000 红色、#00FF00 绿色、#0000FF 蓝色、#000000 黑色、#FFFFFF 白色、#CCCCCC 灰色、#FF7300 橙色
第二种：
1、size：粗细、数值
2、width：宽度
同样有两种写法：
(1)、像素：绝对值（固定值）
(2)、百分比：相对值，相对于该标签所在的父容器的宽度的百分比
3、align对齐
取值：center默认 left right
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><hr color="#00FF00"><hr size="9px" color="yellow"><hr color="red" width="400px"><hr color="blue" width="50%" size="10"><divstyle="width:600px;height:300px;background:#cccccc"><hr color="red" width="50%" align="left"></div> </body> </html>案例：
1.5图像标签
img：image
常见的图片格式：.jpg .png .gif .bmp
常见属性：
src：source指定图片的路径（来源），必选参数
1、如果图片与html源代码在同一个文件夹中，可以直接书写图片的名称；
2、习惯上，会将多个图片存放到一个单独的文件夹中，如project\image,此时，需要在图片名称的前面添加 路径。
路径的分类：
相对路径 ；
1、表示： ./当前路径 ；
2、…/当前位置的上一级文件夹 ；
3、提示：…/image
alt：当图片无法正常显示时提示的信息 ；
title：当鼠标停留在图片上时显示的提示信息；
width/height：
1、设置图片的宽度和高度 ；
2、默认情况下原始尺寸显示 ；
3、如果只设置其中一个，则另一个按比例自动缩放 ；
4、如果同时设置宽和高，可能会导致图片变形
5、有两种写法：
(1)、像素：绝对值（固定值）
(2)、百分比：相对值，相对于该标签所在的父容器的宽度的百分比
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="../img/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅"><hr><img src="../img/mac.jpg" width="400px" height="100px"><hr><img src="../img/mac.jpg" width="50%"><hr><divstyle="width:800px;height:800px;background: red;"><img src="../img/mac.jpg" width="50%"></div>
</body>
</html>
案例：
2.其他标签
| 标签 | 含义 | 说明 |
|---|---|---|
| i | 斜体 | italic |
| em | 强调的内容 | 在浏览器中显示时一般为斜体 |
| address | 地址 | 在浏览器中显示时一般为斜体，属于块级标签 |
| b | 加粗 | bold |
| strong | 强调的内容 | 在浏览器中显示时一般为加粗现象 |
| del | 删除线 | delete |
| ins | 下划线 | |
| sub | 下标 | |
| sup | 上标 | |
| bdo | 设置文本的方向 | 通过属性dir=“ltr”(left to right) “rtl”(right to left)从 右到左 |
| abbr | 设置文字缩写 | 通过title属性设置当前鼠标停留在文字上时显示的 提示信息（span标签也可以实现） |
| small | 相对于当前其他文本的字号减 小一号 | |
| big | 相对于当前基他文本的字号增 大一号 |
我们要说这些标签呐？ 是为了更好地语义化
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>welcome <i>to</i> HTML!<hr>welcome <em>to</em> HTML!<hr>welcome to <address>上海市南京东路</address><hr>HTML从<b>入门</b>到精通!<br>HTML从<strong>入门</strong>到精通!<hr>原价：<del>188元</del>，优惠价，<spanstyle="font-size:40px;color:red">98元</span><br>主讲人:<ins>Hector</ins><hr>水的分子表达式：H<sub>2</sub>O<br>2<sup>3</sup>8<hr><bdo dir="rtl">welcome to html!</bdo><br><bdo dir="rtl">上海自来水来自海上</bdo><br><abbr title="Hyper Text Language">HTML</abbr><hr><span title="Hyper Text Language">HTML</span><hr>HTML从<small>入门</small>到精通<br>HTML从<big>入门</big>到精通</body>
</html>
案例：
3.头部标签
meta定义网页的摘要信息，如字符编码，关键字、描述、作者等信息；
title定义网页的标题；
style定义内部的CSS样式 ；
link引用外部的CSS样式 ；
script定义或引用脚本 ；
base定义基础路径 。
什么是基础路径？：就是默认以当前页面文件的所在位置为相对路径的参照
代码：
<!DOCTYPE html> <html lang="en"> <head><!-- 设置字符编码 --><meta charset="UTF-8"><!-- 设置网页关键字 SEO 网站优化 --><meta name="keywords" content="IT教育,Java开发,WEB前端,Python,Andorid开发...."><!-- 设置网页的描述 --><meta name="description" content="做专业的IT教育...."><!-- 设置网站的作者 --><meta name="author" content="Hector"><!-- 设置网站的跳转 --><!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> --><title>Document</title><style>body{color:red;}</style><!-- 引用外部的CSS样式 --><link rel="stylesheet" href="CSS文件的路径"><!-- 定义或引用脚本 --><!--<script>alert("哈哈");</script>--><!-- 定义基础路径 --><base href="../img/"> </head> <body>IT交易，全国计算机等级考试-Hector<img src="heihei.gif" alt=""><hr><img src="qq.jpg" alt=""> </body> </html>案例：
详细的头部标签使用，在之后的笔记中会有
4.标签的嵌套
一个标签中嵌套另外一个标签
标签不能乱嵌套，如以下标签的嵌套是错误的
按代码的理解应该是绿色里面应该包含蓝色，而因为标签的嵌套错误，从而在浏览器中出现出错误。如图：
<pstyle="width:300px;height:300px;background:green"><divstyle="width:200px;height:200px;background:blue">hello</div> </p>正确的标签嵌套应该是：
<divstyle="width:200px;height:200px;background:red"><pstyle="width:50px;height:50px;background:green">hello</p> </div>在浏览器中的现实应该是红色里包含绿色。如图：
浏览器渲染后显示的页面代码与编码时有所不同
chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
如何打开：
1、在页面中右键单击–>检查/审查元素/查看元素
2、按F12
如图：
常用工具：
Elements：从浏览器的角度来看页面，浏览器渲染页面时的结构 ；
console：控制台，显示各种警告和错误信息；
network：查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源所共费的时间 。
如图：当console正确的形式的显示
若是错误的信息的话，console里面会进行提示。如图：
如图：network在浏览器中的显示
面代码与编码时有所不同
chrome浏览器提供的开发工具：用来帮助开发人员查看和调试页面的
如何打开：
1、在页面中右键单击–>检查/审查元素/查看元素
2、按F12
如图：
四、超链接
1.简介
使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转
当鼠标移动超链接文本上时，鼠标箭头会变成一只小手
超链接有三种类型：
- 普通链接/页面间链接：跳转到另一个页面
- 锚链接：跳转到锚点（同一个页面的某个位置）
- 功能链接：实现特殊功能（发邮件，下载）
2.基本用法
使用 <a>标签创建超链接
语法格式：
<a href="链接地址" target="链接打开的位置">链接文本或图像</a>
常见属性:
href链接地址或路径:链接地址
href链接地址或路径:链接地址
_self自身，当前，默认值
_blank空白、新的页面
_parent父层框架
_top顶层框架 自定义
路径分类：
相对路径
相对于当页面所在的路径为参照,不是以根开始的
./ 当前路径
…/ 表示上级路径
绝对路径:
以根开始的路径
[file:///D:/software/b.html](file:///D:/software/b.html)
https://www.baidu.com
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="http://www.baidu.com">百度</a><br><a href="http://www.baidu.com" target="_blank">百度</a><hr><a href="d:/software/b.html" target="_blank">b</a><br><a href="./c.html">c</a><hr><a href="../d.html">d</a><hr><a href="../../f.html">f</a></body>
</html>
案例：
3.锚链接
3.1简介
点击链接后跳转到页面的指定位置（锚点anchor）
锚链接的分类
- 页面内的锚链接
- 页面间的锚链接
3.2 页面内的锚链
步骤：
1、定义锚点（标记）
<a name="锚点名称">目标位置</a>
2、链接锚点
<a href="#锚点名称">链接文本</a>
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ol><li><a href="#first">简介</a></li><li><a href="#second">HTML版本</a></li><li><a href="#three">特点</a></li><li><a href="#four">编辑方式</a></li><li><a href="#five">整体结构</a></li><li><a href="#six">相关要求</a></li></ol><p><a name="first">简介</a></p><P>HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。</p><p> 自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。</P><p><a name="second">HTML版本</a></p><p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 </p><p>HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br> ③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>④HTML 4.0：1997年12月18日，W3C推荐标准。<br> ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br> ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br></p><p><a name="three">特点</a></p><p>超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4] 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4] 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4] 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4] 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。</p><p><a name="four">编辑方式</a></p><p>HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7]
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7]
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。</p> <p><a name="five">整体结构</a></p><p>一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10] 标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。</p><p><a name="six">相关要求</a></p><p>在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9] 文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9] 超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9] 标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9] 标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9] HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。</p>
</body>
</html>
案例：
3.3页面间的锚链接
<a href="目标页面#锚点名称">链接文本</a>
页面间的锚链接相当于在另一个地方只用将锚链接点设置好，就可以直接跳转到你想要的内容的位置。
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ol><li><a href="锚链接.html#first">简介</a></li><li><a href="锚链接.html#second">HTML版本</a></li><li><a href="锚链接.html#three">特点</a></li><li><a href="锚链接.html#four">编辑方式</a></li><li><a href="锚链接.html#five">整体结构</a></li><li><a href="锚链接.html#six">相关要求</a></li></ol>
</body>
</html>
案例：
4.功能链
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="../img/heihei.gif">点击此处下载图片</a><hr><a href="mailto:3013750538@qq.com">联系我们</a></body>
</html>
案例：
5.URL （此处内容了解便可）
5.1简介
URL：Uniform Resource Locator 统一资源定位器,用来定位资源所在的位置，常见的就是网址
1、https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male
2、https://www.w3school.com.cn/html/html_quotation_elements.asp
3、file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html
4、http://www.sxgjpx.net/
5、ftp://10.255.254.253/
5.2组成
1、https://www.w3school.com.cn/html5/index.asp
2、http://www.sxgjpx.net
3、file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html
4、ftp://10.255.254.253/
5、https://www.baidu.com/img/bd_logo1.png
一个完整的URL由8个部分组成：
协议：prococol 如
1、http:超文本传输协议，用来访问WEB网站Hyper text Transfer protocol
2、https:更加安全的协议 SSL安全套接子层
3、ftp文件传输协议，用来访问服务器上的文件，实现文件的上传和下载File Transfer protocol
4、file:文件协议，用来访问本地文件
主机名hostname服务器地址或服务器Netbios名称,如www.baidu.com ftp://10.255.254.254
端口：port位于主机名的后面，使用冒号进行分隔
1、不同的协议使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 ，如果使用的是默认端口，则端口可以省略
2、如果使用的不是默认端口，则必须指定端口http://59.49.32.213:7070/路径：path目标文件所在的路径结构，如:https://www.bilibili.com/video/av93425449//
资源resource要访问的目标文件，如bd_logo1.png
查询字符串：query string 也称为参数
在资源后面使用?开头的一组名称/值
名称和值之间以=分隔，多个表达式之间用&分隔，如:?name=tom&age=2&sex=male
锚点anchor，在资源后面使用#开头的文本，如#6
身份认证authentication,指定身份信息，如：ftp://账户:密码@ftp.bbshh010.com
五、表格
1.简介
表格是一个规则的行列结构，每个表格是由若干行组成，每行是由若干个单元格组成
table、row、column
2.基本结构
2.1 table标签
用来定义表格
常用属性：
- border边框,默认值为0
- width/height宽度/高度
- align对齐方式,取值：left center right
- bordercolor:边框颜色
- bgcolor:背景颜色
- background:背景图片
- cellspacing:间距 单元格与单元格之间的距离
- cellpadding:边距 单元格内容与边界之间的距离
2.2 tr标签
用来定义行:table row
常用的属性：
- align水平对齐 取值left(默认)
- center right valign垂直对齐 取值top middle bottom
- bgcolor:背景颜色
- background：背景图片
2.3 td标签
用来定义单元格：table data
常用属性:align valign bgcolor background
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px"><tr align="right" valign="top"><td>hello</td><td>hello</td><td>hello</td></tr><tr align="center" valign="middle" bgcolor="blue"><td>hello</td><td bgcolor="yellow" valign="bottom">hello</td><td>hello</td></tr><tr valign="bottom" background="../../img/heihei.gif"><td>hello</td><td>hello</td><td>hello</td></tr></table>
</body>
</html>
案例：
3.合并单元格
合并单元格也称为表格的跨行和跨列
两个属性:
rowspan
设置单元格所跨的行数,如rowspan=“2” 表示跨越2行
colspan
设置单元格所跨的列数,如clospan=“4” 表示跨越4列
步骤：
- 在跨直的单元格中设置rowspan/colspan属性
- 将被跨越的单元格删除
- 注意：必须要保证每行的实际列数是相同的，否则表格可能会出现错乱
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- table>(tr>td{hello$}*4)*4 --><table border="1" width="500px" height="300px"><tr><td colspan="4" align="center">hello1</td></tr><tr><td rowspan="3">hello1</td><td>hello2</td><td>hello3</td><td>hello4</td></tr><tr><td>hello2</td><td rowspan="2" colspan="2">hello3</td></tr><tr><td>hello2</td></tr></table>
</body>
</html>
案例：
4.高级标签
4.1 caption标签
表格的标题标签
4.2 thead标签
表格的头部table head
4.3th标签
表格的头部标题table head title
一般在thead中，设置头部标题，替代td标签，与td的区别，加粗和居中对齐
4.4 tbody标签
表格的主体 table body
4.5 tfoot标签
表格的底部table foot
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1" width="600px" height="300px" align="center"><caption><h2>学生基本信息表</h2></caption><thead bgcolor="cyan"><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th></thead><tbody bgcolor="#cccccc"><tr><td>1001</td><td>阿牛</td><td>21</td><td>男</td></tr><tr><td>1002</td><td>阿花</td><td>20</td><td>女</td></tr><tr><td>1003</td><td>张三</td><td>19</td><td>男</td></tr><tr><td>1004</td><td>李四</td><td>22</td><td>女</td></tr></tbody><tfoot bgcolor="yellow" align="center"><tr><td width="25%">总计人数</td><td colspan="3">4</td></tr></tfoot></table>
</body>
</html>
案例：
六、表单
1.简介
表单是一个包含若干表单元素的区域，用于回去不同类型东东用记信息
表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉按钮、列表等
2.表单结构
2.1表单的语法
<form acition="" method="">多个表单元素
</form>
2.2form标签
用来定义表单，可以包含多个表单元素
常用属性：
action提交数据给处理，即处理数据的程序，默认为当前页面，并且以查询字符串的形式来表现 （此处暂时先了解便可）
method提交数据的方式，取值：get（默认）、post
get和post的区别：
get：以查询字符串形式提交，在地址栏中能够看到，长度有限制，不安全
post：以表单数据组形式提交，在地址栏中看不到，长度无限制，安全
enctype：提交数据的编码，取值：application/x-www-form- urlencode（默认）、multipart/form-data（文件上传) (此处暂时先了解便可)
3.表单元素
大多数表单元素都是使用标签来定义，通过设置type属性来定义不同的表单元素
<input type="表单元素的类型" name="名称" value="默认值" size="宽度">
| 表单元素的类型 | 含义 | 说明 |
|---|---|---|
| text | 单行文本框 | 省略时默认就是text |
| password | 密码框 | 输入时以点号显示，安全 |
| redio | 单选按钮 | 只能选择其中一个 |
| checkbox | 复选框 | 可以同时选择多个 |
| submit | 提交按钮 | 提交表单数据 |
| reset | 重置按钮 | 重置表单元素的初始值 |
| image | 图像按钮 | 可以使用图片作为按钮 |
| button | 普通按钮 | 默认情况下无功能 |
| file | 文件选择器 | 选择要上传的文件 |
| hidden | 隐藏域 | 在页面上不显示，但是会提交，可以用来存储数据 |
3.1单行文本框
常用属性：
- name属性：名称，很重要，如果没有指定name，则该表单元素的数据是无法提交的
- value属性：当用户没有输入数据时，文本框中的默认值
- size文本框显示宽度
- maxlength最大字符数，默认字符数
- readonly：只读readonly=“readonly”，可以简写readonly，即只写属性名
- disabled：不可用，禁用disbled=“disabled” 可以简写disabled，完全被禁用
readonly和disabled的区别：readonly的数据会提交，而disabled的数据不会提交
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h2>用户注册</h2><form action="" method="get" enctype="application/x-www-form-urlencoded">用户名：<input type="text" name="usr_name" value="张杰" size="4" maxlength="4"><br>密码：<input type="password" name="pwd" size="9" maxlength="6"><br>年龄：<input type="text" name="age" disabled><br><input type="submit"></form>
</body>
</html>
案例：
3.2单选按钮
常用属性
- name：名称，多个radio的name属性必须相同，才可以实现互斥（单选）
- value：值
- checked是否被选中，两种状态，选中，未选中 checked="checked"简写“checked”
3.3 复选框
常用属性与radio类似
3.4 文件选择器
常用属性：
name属性：名称
accept设置可以选择的文件类型，用来限制上传文件的类型
使用MIME格式字符串对资源类型进行限制
常用MIME类型：
- 纯文本：text/plain text/heml text/xml
- 图像：image/png image/gif image/jpeg
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h2>用户注册</h2><form action="" method="get" enctype="multipart/form-data">用户名：<input type="text" name="usrname" value="张杰"><br>密 码：<input type="password" name="pwd"><br>年 龄：<input type="text" name="age" value="18" enabled><br>性 别：<input type="radio" name="sex" value="male" checked><img src="../../img/male.gif" alt=""><input type="radio" name="sex" value="female"><img src="../../img/female.gif" alt=""><br>爱 好：<input type="checkbox" name="hobby" value="eat">吃饭<input type="checkbox" name="hobby" value="sleep">睡觉<input type="checkbox" name="hobby" value="doudou">打豆豆<br>头 像：<input type="file" name="head" accept="image/jpeg"><input type="hidden" name="usr_id" value="9528"><hr><input type="submit"><input type="reset"><hr><input type="image" src="../../img/submit.gif"><input type="image" src="../../img/reset.gif"><hr><input type="button" value="普通按钮"></form>
</body>
</html>
案例：
4.特殊表单元素
| 表单元素 | 含义 | 说明 |
|---|---|---|
| select | 下拉列表 | |
| option | 列表选项 | |
| optgroup | 选项组 | 用来对option分组 |
| textarea | 文本域/多行文本框 | 用于创建一个多行文本框，会保留编码的格式 |
4.1 下拉列表
select 常用属性：
- name属性
- size：下拉列表所显示的行数，同时显示多个选项
- multiple允许同时选择多个
option常用属性：
- value选项值
- selected设置默认选中的项
optgroup常用属性：
- table分组的标题
4.2 文本域
常用属性：
- name：名称
- rows行数
- cols列数
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">学历<select name="degree"><option value="0">--请选择学历--</option><option value="dazhuan">大专</option><option value="benke" selected>本科</option><option value="yanjiusheng">研究生</option><option value="shuoshi">硕士</option></select><br>城市：<select name=""><optgroup label="山西省"> <option value="taiyuan">太原</option><option value="datong">大同</option><option value="changzhi">长治</option></optgroup><optgroup label="山东省"><option value="jinan">济南</option><option value="qingdao">青岛</option><option value="nanjing">南京</option></optgroup><optgroup label="江苏省"><option value="rizhao">日照</option><option value="yangzhou">杨洲</option><option value="xuzhou">徐州</option></optgroup></select><br>个人简介：<textarea name="intrduce" ></textarea><br>服务协议：<textarea name="intrduce" rows="10" cols="20" eadonly>请遵守本网站的相关协议和国家的法律规定请遵守本网站的相关协议和国家的法律规定请遵守本网站的相关协议和国家的法律规定请遵守本网站的相关协议和国家的法律规定</textarea><hr><input type="submit"></form>
</body>
</html>
案例：
5、其他表单元素
5.1 label标签
为表单元素提供标签，当选中label标签中的文本时会自动将焦点切换到与之相关联的表单元素中。
常见属性：
- for必须将该属性值设置为 与之相关联的表单元素 的id属性值 相同
注意：几乎所有的HTML标签都有id属性，且id属性值必须是唯一的
5.2button 标签
也表示按钮，与input按钮类似
语法：
<button type="按钮类型">按钮文本或图像</button>
常用属性：
- type按钮的类型：取值submit（默认）、reset、button
5.3fieldset和legend标签
fieldset标签：对表单元素进行分组
legend标签：对分组进行添加标题
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><fieldset><legend>个人信息</legend><label for="name">用户名：</label><input type="text" name="usrname" id="name"><br><label for="email">邮 箱：</label><input type="text" name="email" id="email"><hr></fieldset><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"><input type="image" src="../../img/submit.gif"><input type="button" value="普通按钮"><hr><button type="submit">提交按钮</button><button type="reset">重置按钮</button><button type="button">普通按钮</button><button><img src="../../img/submit.gif" alt=""></button><hr><fieldset><legend>学院信息</legend>学号：<input type="text" name="stuID"><br>学校：<input type="text" name="stuSchool"><br>专业：<input type="text" name="stuMajor"><br></fieldset></body>
</html>
案例：
七、内嵌框架
1、简介
使用iframe可以在一个页面中引用另一个页面，实现页面代码的复用，这样应用是非常的灵活。
2、基本语法
语法：
<iframe src=""></iframe>
常用属性;
- src引用的页面
- width/height宽度/高度 像素或百分比
- frameborder是否显示边框 ，取值：1（yes 显示边框）0（no 不显示边框）
- scrolling是否显示滚动条 ，取值：yes（显示）no（不显示）auto（默认、自动调整）
- name为框架定义名称
3、在框架中打开超链接
<iframe name="hello"></iframe><a href="链接地址" target="hello">链接的文本或图像</a>
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><iframe src="7.2 top.html" width="100%" height="200" frameborder="0" scrolling="auto"></iframe><h3>主体部分</h3><hr><a href="1.表格.html" target="hello">1.html</a><a href="2.合并单元格.html" target="hello">2.html</a><iframe src="./7.1 foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>
foot的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>底部和版权</p>
</body>
</html>
topd 代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul><li>网页</li><li>咨讯</li><li>视频</li><li>图片</li><li>知道</li><li>文库</li><li>贴吧</li></ul>
</body>
</html>
案例：
八、HTML简介
1、发展
W3C于1992年12月发布了HTML4.0.1标准
W3C于2014年10月发布了HTML5标准
2、特点：
- 取消了过时的标签，如font、center等，它们仅限于展示外观
- 增加了一些更具有语义化的标签，如：header、footer、aside等
- 增加了一些功能标签，如：audio、video、canvas等
- 增加了一些表单控件，如：emall、date、time、url、search等
- 可以直接在浏览器中绘图（canvas），无需flash
- 增加了本地存储的功能
3、兼容性
如何知道浏览器是否支持HTML5？通过关于HTML5的兼容性来确定
可通过一个网站来查看：http://caniuse.com
提供了各浏览器版本对HTML2和CSS3规范的支持度
九、HTML5新增内容
1、结构相关标签
用来进行页面结构布局，本身无任何特殊样式，需要使用CSS进行样式设置
- article定义一个独立的内容，完整的文章
- section定义文档的章节、段落
- header文章的头部、页眉、标题
- footer文章的底部、页脚、标注
- aside定义侧边栏
- figure图片区域
- figcaption为图片区域定义标题
- nav定义导航菜单
结构标签只是表明各部分的角色，并无实际外观样式，与普通的div相同
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><article><header>标题</header><section>第一段</section><section>第二段</section><footer>脚注</footer></article><aside>广告</aside><br><figure><figcaption>log标题</figcaption><img src="../../img/google.png" alt=""><img src="../../img/facebook.png" alt=""></figure><nav><ul><li>网页</li><li>咨讯</li><li>视频</li><li>图片</li><li>知道</li><li>文库</li><li>贴吧</li></ul></nav>
</body>
</html>
案例：
2、语义相关的标签
2.1 mark标签
标注，用来突出显示文本，默认添加黄色背景
2.2 time标签
定义日期和时间，便于搜索引擎智能查找
2.3 details和 summary标签
默认显示summary中的内容，点击后显示details中的内容
注：并不是所有的浏览器都兼容，chrome、opera支持、Firefox、IE浏览器不支持
2.4 meter标签
计数仪，表示度量
常用属性：
- max定义大值，默认为1
- min定义小值，默认为0
- value定义当前值
- high定义限定为高的值
- low定义限定为低的值
- optimum定义佳值
规则：
如果optimum大于high，则表示值越大越好
当value大于high时为绿色
当value在low与high之间时为黄色
当value小于low时为红色
如果optimum小于low，则表示值越小越好
当value小于low时为绿色
当value在low与high之间时为黄色
当value大于high时为红色
当optimum介于low和high之间，则表示值在low和high之间好
当value在low与high之间时显示绿色，否则显示黄色
2.5 progress标签
进度条，表示运行中的进度
常用属性：
- value定义当前值
- max定义完成的值
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>welcom <mark>to</mark> html!<hr>我在<time datetime="2020年3月14日">情人节</time>有个会!<hr><details><summary>HTML简介</summary><p>HTML是一门用来制作网页的标签语言</p><p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p></details><meter max="100" min="1" value="30"></meter><hr><meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter><hr><meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter><hr><meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter><hr><meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter><hr><meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter><hr><meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter><hr><meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter><meter max="100" min="1" value="90" high="60" low="20" optimum="15"></meter><hr><meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter><meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter><meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter><hr>
<!-- 上面 的为什么只有两个颜色？ 应该是 optimum 的值在high与low之间，所以颜色只有两个--><progress value="20" max="50"></progress></body>
</html>
案例：
3.表单相关
3.1 新增表单元素
新增以下type类型：
- email接收邮箱
- url接收URL
- tel接收电话号码，目前仅在移动设备上有效
- search搜索文框
- number/range接收数字/数字滑块,包含min,max,step属性
- date/month/week/time/datetime日期时间选择器，兼容性不好
- color颜色拾取
作用：
- 具有格式校验的功能
- 可以与移动设备的键盘相关联
3.2新增表单属性
form标签的属性：
- autocomplete是否启动表单的自动完成功能， 取值:on(默认)、off
- novalidate提交表单时不进行校验，默认会进行表单校验
3.3 新增表单元素的属性
新增表单元素属性：input/select/textarea等
- placeholder提示文字
- required是否必填
- autocomplete是否启用该表单元素的自动完成功能
- autofocus设置初始焦点元素
- pattern使用正则表达式（RegExp后面会讲解），进行数据校验
- list使文本元素具有下拉列表的功能，需要配合datalist和option标签一起使用
- form可以将表单元素写在form标签外面，然后通过该属性关联指定的表单
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- <form action="" autocomplete="off" novalidate></form> --><form action="" autocomplete="on" id="myform"><label for="email">邮箱：</label><input type="email" name="email" id="email"><br><label for="home">个人主页</label><input type="url" name="home" id="home"><br><label for="phone">电话：</label><input type="tel" name="phone" id="phone"><br><label for="keyword">关键字</label><input type="serch" name="keyword" id="keyword"><br><label for="num">数字</label><input type="number" name="num" id="num" min="1" max="10" step="2"><br><label for="birthday">出生日期</label><input type="month" name="birthday" id="brirthday"><br><label for="color">颜色：</label><input type="color" name="color" id="color"><br><label for="username">用户名</label><input type="text" name="name" id="username" placeholder="请输入用户名" required onautocomplete="off" autofocus><br><label for="age">年龄：</label><input type="text" name="age" id="age" pattern="\d{1,2}"><!-- 年龄只能输入1-2位的数字 --><br><label for="city">城市</label><input type="text" name="city" id="city" list="cityList"><datalist id="cityList"><option value="1">北京</option><option value="2">南京</option><option value="3">上海</option><option value="4">天津</option></datalist></form><hr><input type="submit" form="myform"></body>
</html>
案例：
4、多媒体标签
4.1audio标签
在页面中插入音频，不同的浏览器对音频格式的支持不一样
audio常用属性：
- src音频文件的来源
- controls是否显示控制面板，默认不显示
- autoplay是否自动播放，默认不自动播放
- loop是否循环播放
- muted是否静音
- preload是否预加载，取值：none不预加载、auto预加载（默认）、metadata只加载元数据 如果设置了autoplay属性，则该属性无效
可以结合source标签使用，指定多个音频文，浏览器会检测并使用第一个可用的音频文件
4.2 video标签
在页面中插入视频，不同的浏览器对视频格式的支持不一样
用法与audio标签基本相同，增加属性：
- widht/height视频播放器的宽度/高度
- poster在视频加载前显示的图片
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- <audio src="../../audio/water.mp3" controls loop muted preload="metadata"></audio> --><audio controls><source src="../../audio/earth.ogg"><source src="../../audio/water.mp3">您的浏览器不支持audio标签，请更换浏览器</audio><video src="../../video/volcan.mp4" controls="600px" poster="../../img/p1.jpg"></video>
</body>
</html>
案例：
链接：https://pan.baidu.com/s/15OgJJBaVraGJB1tQwxbcug
提取码：zj6z
HTML5课堂入门笔记（完）相关推荐
- HTML5基础入门(笔记分享)
[整理来源]:html5+css3+jQuery Mobile (2th) [笔记分享]: HTML5 和 HTML4 差异: 简化:DOCTYPE.html.meta.script等标记被大幅度简化 ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- python3入门与进阶笔记_16_变量进阶 — 黑马程序员《Python入门教程完整版》笔记...
变量进阶(理解) - 黑马程序员<Python入门教程完整版>笔记 目标变量的引用 可变和不可变类型 局部变量和全局变量 01. 变量的引用变量 和 数据 都是保存在 内存 中的 在 Py ...
- 《html5 从入门到精通》读书笔记（一）
今天看了<html5 从入门到精通>这本书,感觉阅读下来很舒心,不像阅读其他书籍很揪心.html增加的知识点,我觉得非常有价值,看完几章记录了一些内容,不但能巩固,也为下次遗忘知识点做好准 ...
- Unity 入门笔记 - 07(完) - 菜单手机端静态类生成游戏
Unity 入门笔记 - 07(完) - 菜单&手机端&静态类&生成游戏 前言:入门笔记的最后一篇.这个系列教程看完了.接下来有空就看例子项目,动手做点东西. 目录 Unity ...
- python设计游戏的背景_04_游戏背景 — 黑马程序员《Python入门教程完整版》笔记...
游戏背景 黑马程序员<Python入门教程完整版>笔记 - 黑马程序员<Python入门教程完整版>笔记 目标背景交替滚动的思路确定 显示游戏背景 01. 背景交替滚动的思路确 ...
- 前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 十年公务员转行IT，自学AI三年，他淬炼出746页机器学习入门笔记
整理 | Jane 编辑 | Just 出品 | AI科技大本营(ID:rgznai100) 近期,梁劲传来该笔记重大更新的消息.<机器学习--从入门到放弃>这本笔记的更新没有停止,在基于 ...
最新文章
- 专访英特尔AIPG全球研究负责人Casimir Wierzynski：物理学、隐私和大脑将根本性塑造AI
- 周礼栋：成熟的AI不再只是谈“颠覆”！
- 管理学中的知名定律之阿尔布莱特法则
- Java关键字及其作用
- 什么是python编程例子_案例详解：优化Python编程的4个妙招
- PYPL 4 月排行：Python 最流行，Java 还行不行？
- 计算UILabel带行间距的行高
- linux （阿里云 CentOS7） 中安装配置 RocketMQ
- 揭示地理数据分布规律的方法
- Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)
- Linux下Nginx+多Tomcat负载均衡实现详解
- Linux命令解释之sudo
- 线性表的顺序存储C++代码实现
- 拜耳2020年10个新植保制剂商业化，3个生物技术性状项目推进至上市阶段
- keepalived mysql 主主_MySQL主主+Keepalived高可用(一)：解决单点故障
- 在Ubuntu上部署ROS以及如何搭建工作空间和功能包的创建与编译
- 30万人追更，年度重磅Go图书出版，百万流量博主带你学习Go底层原理
- YOLOv5目标检测➕声音告警
- php求一个人的生日,【星月随笔】一个人的 生日
- 擎创科技正式加入openEuler社区，共建开源生态