HTML元素的结构
HTML标签
<p>就是一个典型的HTML标签。HTML的标签有三个特点:
1.由一对尖括号包围关键字组成,例如:<p>,<div>,<span>等;
2.通常成对出现,例如:<div> </div>,<p></p>.第一个为开始表签,第二个为结束标签,区别在于结束标签多了一个“/”;
3.虽然标签通常是成对出现的,但并不是所有的标签都有对应的结束标签,例如<input>、<img>等,它们都是单独出现的。
HTML中的嵌套
在HTML中,元素之间可以发生嵌套。例如下图:
第一个元素:
<p>HTML是一门伟大的语言!</p>
第二个元素:
<div><p>HTML是一门伟大的语言!</p></div>
第一个元素整体作为了<div></div>的内容,嵌套在了<div></div>内部,从结构上发生了嵌套关系。
div元素是p元素的父元素。p元素是div元素的子元素。
完整的html文档结构
1.<!DOCTYPE html>
(1)作用:告知浏览器该页面文件的文档类型,指示web浏览器使用哪个版本编写页面。
(2)<!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前。
(3)<!DOCTYPE>声明对大小写不敏感。
(4)<!DOCTYPE>声明没有结束标签。
2.<html lang="en">...</html>
(1).此元素可告知浏览器其自身是一个 HTML 文档。
(2).<htm1>与</htm1>标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。文档的头部由<head>标签定义,而主体由<body>标签定义。
(3).lang 属性 (语言属性) :当搜索引擎或者浏览器拿到语言属性后,有可能做一些针对指定语言的辅助操作,en表示英文。
3.标签属性
(1).标签可以拥有零个或多个标签属性,注意: 标签属性与标签名称、标签属性与标签属性之间需用一个空格隔开。
(2).标签属性可以赋予标签更多的信息,标签属性通常是以 key="value”即名称="值"的形式出现。
(3).常见的标签属性有: class、id、style.lang、src等。
4.文档的头部<head>...<head>
(1)head元素定义文档的头部,我们通常在这里引用样式表、提供元信息等。
(2).文档的头部中的<title>...</title>定义文档的标题,在网页上体现为网页标签的标题。
(3).一个<head> 元素必须包含且只能包含一个<title> 元素。
注:元信息又叫元数据,就是描述数据的数据。这里主要指文档的概
要信息。
5.文档的主体<body>...<body>
(1).body 元素定义文档的主体,包含文档的所有内容(比如文本超链接、图像、表格和列表等等)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示图片</title>
</head>
<body>
<img src="https://document.youkeda.com/P3-1-HTML-CSS/1.1/x2.png" />//标签属性
</body>
</html>
HTML中的注释
每一个编程语言都有注释,html也不例外,在HTML中我们用<!-- -->标签来表示注释
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>前端开发。</p>
认识MDN
什么是MDN
Mozilla 开发者网络(Mozilla Developer Network,MDN) 是由Mozilla、MicrosoftGoogle、Samsung 和 W3C 联合打造成的最好的Web 文档,是学习 Web 开发的一个权威、全面、高质量的x站,文档丰富,资料全面,非常适合大家学习使用,请把它当成你Web 开发学习的宝典。(即下网站)
为页面添加音频播放及按钮
<body>
<audio controls src="https://document.youkeda.com/P3-1-HTML-CSS/1.2/nocturne.mp3">
<p>您的浏览器不支持audio标签</p>
</audio>
</body>
使用controls 表示给音频一个控制播放按钮及进度条。
如果不成功,则会返回<audio></audio>之间的内容。
为页面添加进度条
<body>
<progress max="100" value="50" > 50%</progress>
</body>
max表示满进度是多少,value表示已进行程度。