HTMl结构分析
完整的HTML结构
一个完整的HTML结构包括哪几部分呢？
-
文档声明
- HTML最上方的的一段文本我们惩治为文档类型声明，用于声明文档类型 （可以声明HTML版本）
<!DOCTYPE html><!DOCTYPE html>- HTML文档声明，告诉我们浏览器当前页面上是HTML5页面；
- 让浏览器用HTML5的标准去解析识别内容
- 必须放在HTML文档的最前面，不能省略，省略了会出席那兼容性问题
-
html元素
<html>元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。- 所有其他于是怒必须是此元素的后代
- W3C标准建议为html元系增加—个lang属性,作用是
-
帮助语音合成工具确定要使用的发音;
-
帮助翻译工具确定要使用的翻译规则;
-
- 比如常用的规则:
- lang= "en”表示这个HTML文档的语言是英文;
- lang= "zh-CN”表示这个HTML文档的语言是中文;
- head元素
-
HTML head元素规定文档相关的配置信息（也称之为元数据)，包括文档的标题，引用的文档样式和脚本等。
-
什么是元数据（(meta data)，是描述数据的数据;
-
这里我们可以理解成对整个页面的配置:
-
常见的设置有哪些呢?一般会至少包含如下2个设置。
-
网页的标题:title元素
<title>网页的标题</title>
-
网页的编码:meta元素
- 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码;
- 一般都使用utf-8编码，涵盖了世界上几乎所有的文字;
<meta charset="UTF-8" />
-
- body元素
- body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
- 之后学习的大部分HTML元素都是在body中编写呈现的;
HTML
-
HTML元素本身很多，但是常用的元素就是那么几个。
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
- 我们只需要记住常用的，不常用的学会查看文档即可;
-
常用的元素∶
-
p元素、h元素;
-
img元素、a元素、iframe元素;
-
div元素、span元素;
h1~h6、p元素
-
h元素
-
在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。
-
<h1>-<h6>标题(Heading)元素呈现了六个不同的级别的标题-
Heading是头部的意思，通常会用来做标题
-
<h1>级别最高，而<h6>级别最低。
-
-
注意:h元素通常和SEO优化有关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>h1标题标签</h1> <h2>h2标题标签</h2> <h3>h3标题标签</h3> <h4>h4标题标签</h4> <h5>h5标题标签</h5> <h6>h6标题标签</h6> </body> </html> -
-
p元素
<body> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </body>
img、a、iframe元素
-
img元素
-
我们可以使用img元素来告诉浏览器显示一张图片
-
HTML 元素将一份图像嵌入文档。
- img是image单词的所以，是图像、图像的意思;
- 事实上img是一个可替换元素（ replaced element ) ;
-
img有两个常见的属性:
-
src属性:source单词的缩写，表示源
- 是必须的，它包含了你想嵌入的图片的文件路径。
-
alt属性:不是强制性的，有两个作用
- 作用一:当图片加载不成功（错误的地址或者图片资源不存在)，那么会显示这段文本;
- 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义;
<body> <img border="0" src="https://www.keaidian.com/uploads/allimg/190424/24110307_4.jpg" alt="" width="304" height="228"> </body> -
-
a元素
-
在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素;
-
HTML 元素(或称锚(anchor)元素)∶
-
定义超链接，用于打开新的URL;
-
-
a元素有两个常见的属性:
-
href: Hypertext Reference的简称
- 指定要打开的URL地址;
- 也可以是一个本地地址;
-
target:该属性指定在何处显示链接的资源。
- _self:默认值,在当前窗口打开URL;
- _blank:在一个新的窗口中打开URL;
<body> <a href="https://www.baidu.com/" target="_blank">访问百度</a> </body> -
-
-
锚点链接可以实现:跳转到网页中的具体位置
- 锚点链接有两个重要步骤:
- 在要跳到的元素上定义一个id属性;
- 定义a元素，并且a元素的href指向对应的id;
- 锚点链接有两个重要步骤: