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;

重学前端第一天——HTML结构和常见的HTML元素相关推荐

重学前端第一阶段完钢琴项目(document.querySelector js改变css样式的3种方式思路成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
【笔记】重学前端-winter
本文为:winter 发布在极客时间 [重学前端]系列课程的的笔记和总结支持正版哦: https://time.geekbang.org/col... 导语如果深入进去了解,你会发现,表面上看他们 ...
重学前端学习笔记（十三）--浏览器工作解析（三）
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
winter重学前端——训练营预习课
重学前端读书笔记 javascript javascript 类型 javascript对象面向对象与基于对象模拟类 JavaScript 中的对象分类 javascript 执行 Promise ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
判断字符串正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
重学前端学习笔记（八）--JavaScript中的原型和类
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端学习笔记（二十二）--选择器的机制
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
从零学前端第一讲：前端开发是什么？给初学者有什么建议？
这里是修真院前端小课堂,本篇分析的主题是 [从零学前端第一讲:前端开发是什么?给初学者有什么建议?] 初识前端 1.前端开发是什么? 2.前端开发有前途吗? 3.前端开发哪里学? 4.前端发展 5.对 ...
47、那些你与“重学前端”的不解之缘
写在前面的话不知不觉,专栏已经更新了一半有余了.在两个月的时间里,我收到了很多同学的留言,很开心可以跟大家保持交流,也很惊喜见证了大家的成长. 在整个学习过程中,你有没有一些学习感悟呢,有哪些新的学 ...

重学前端第一天——HTML结构和常见的HTML元素

HTMl结构分析

完整的HTML结构

一个完整的HTML结构包括哪几部分呢？

HTML

h1~h6、p元素

img、a、iframe元素

重学前端第一天——HTML结构和常见的HTML元素相关推荐

最新文章

热门文章