前言：
今天各位老铁们对“html浏览器高度”可能比较关怀，我们都想要分析一些“html浏览器高度”的相关资讯。那么小编同时在网上网罗了一些对于“html浏览器高度””的相关文章，希望小伙伴们能喜欢，姐妹们一起来学习一下吧！从本篇文章开始成哥将带大家一起学习一下前端的基础知识，我们先讲解前端的基础HTML与CSS，这个讲完我们将讲解VUE前端框架，最后我们再讲讲Ant Design的VUE前端框架，从而形成前端一个系列的教程，下面就开始我们今天的内容吧！
01 HTML简介
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。
使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件"翻译"成可以识别的信息，即现在所见到的网页。HTML 不需要编译，可以直接由浏览器执行，非常方便开发时调试。
02 HTML实例
我们现在创建一个典型的HTML结构具体如下：
1. <!DOCTYPE html> 2. <html lang="ch"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>HTML实例</title> 6. </head> 7. <body> 8. <h1>我是标题</h1> 9. <p>我是段落。</p> 10. </body> 11. </html>
如上页面中各个标签代表的意思如下：
1）<!DOCTYPE html>是文档声明头，它告诉游览器当前处理的内容是HTML页面
2）html是 HTML 页面的根元素，用于标识HTML内容的开始与结束
3） head是HTML页面的头，包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8，title为文档的标题
4）body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题，p是body内容中定义的段落
我们现在通过游览器打开编写的HTML内容，具体内容如下
在HTML中的内容可以通过以下格式进行内容注释具体如下：
03 HTML标签、元素、属性、实体编码与事件
（1）HTML标签
HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签具有如下特点：
1）标签一般是成对出现的 如:<div></div>;也有空标签 如:<br />
2）标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)
3）标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母
标签的示列如下：
标签按照<>的对数可以分为如下两类分别为双标签与单标签，下面我们具体来了解一下这两类标签。
1）双标签
双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下：
1. <标记名></标记名>
常见的双标签有如下几种：
1. <html></html> 2. <head></head> 3. <title></title> 4. <body></body> 5. <h1></h1> 6. <p></p> 7. 8. <!-- 块级元素 --> 9. <div></div> 10. <span></span> 11. 12. <!-- 超链接元素 --> 13. <a></a> 14. 15. <!-- 列表元素 --> 16. <ul></ul>
2）单标签
单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
1. <标记名/>
常见的单标签有如下几种：
1. <!-- 换行标签 --> 2. <br /> 3. 4. <!-- 分隔线标签 --> 5. <hr /> 6. 7. <!-- 图片标签 --> 8. <img />
（2）HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，如<p>段落</p>。元素可以进行嵌套具体如下：
1. <div> 2. <h1>我是标题</h1> 3. 4. <div> 5. <p>元素嵌套示列</p> 6. </div> 7. 8. </div>
（3）HTML属性
属性为 HTML 元素提供附加信息，可分为全局属性（即所有元素均可使用的属性，如id,class等）和元素属性（部分元素可使用的属性，例如<a href=";>搜索</a>），属性通常由属性名="属性值"构成,存在于开始标签中，示列如下:
（4）HTML实体编码
对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码"，如< <> >空格 。
（5）HTML事件
通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色，事件可以分为多类比多鼠标点击、鼠标聚焦等，下面我看看看一个事件编写示列：
04 HTML常用标签示列
（1）h标签
h 标签有六种分别为h1、h2、h3、h4、h5、h6，这六个分别对应六种样式的标题，我们现在来编写这六种h标签，演示代码如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. <h1>H1标题</h1> 9. <h2>H2标题</h2> 10. <h3>H3标题</h3> 11. <h4>H4标题</h4> 12. <h5>H5标题</h5> 13. <h6>H6标题</h6> 14. </body> 15. </html>
我们来运行该HTML文件，来看看这六种h标签有什么样式差异，从示列中可以发现h1标签字体最大然后依次减小。
（2）p标签
p 标签是文本标签，现在我们来编写一段含有p标签的html文本，然后运行了看看p标签的样式具体操作如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. 9. <h4>标题一</h4> 10. <p>我是段落1</p> 11. 12. <h4>标题二</h4> 13. <p>我是段落2</p> 14. 15. </body> 16. </html>
（3）a标签
a标签是超链接标签，点击a标签可以跳转到其设置的网站，具体示列如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. <div> 9. <a href=";>点我跳转到百度页面</a> 10. </div> 11. 12. <div> 13. <a href=";>点我跳转到腾讯页面</a> 14. </div> 15. 16. </body> 17. </html>
（4）div标签
div标签是一个块级元素，它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子，我们可以为这个盒子设置各种各样属性（如高度、宽度、颜色等），下面我们编写一个div标签并设置其长为300px，宽度为200px，同时给其一个背景颜色，具体如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. 9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div> 10. 11. </body> 12. </html>
（5）列表标签
列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）
1）有序列表ul
有序列表的顺序是有序的，默认情况下会以数字来排列，但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列，我们现在来写一个示列，具体如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. 9. <!-- 有序列表，以默认方式数字排列 --> 10. <p>有序列表默认方式数字排列</p> 11. <ol> 12. <li>列表1</li> 13. <li>列表2</li> 14. <li>列表3</li> 15. </ol> 16. 17. <!-- 有序列表，以大写字母排列 --> 18. <p>有序列表大写字母排列</p> 19. <ol type="A"> 20. <li>列表1</li> 21. <li>列表2</li> 22. <li>列表3</li> 23. </ol> 24. 25. </body> 26. </html>
2）无序列表ol
无序列表的顺序是无序的，不会按照某个值来排序，无序列表中每个列表前默认都有一个实心圆，也可以通过type属性来设置成空心圆或者小方块，无序列表示列如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. 9. <p>无序列表默认type样式</p> 10. <ul> 11. <li>列表1</li> 12. <li>列表2</li> 13. <li>列表3</li> 14. </ul> 15. 16. <p>无序列表方块样式</p> 17. <ul type="square"> 18. <li>列表1</li> 19. <li>列表2</li> 20. <li>列表3</li> 21. </ul> 22. 23. </body> 24. </html>
3）自定义列表dl
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始，其列表内容是以<dd> 开始，自定义列表前面没有任何标识，其具体示例如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. 9. <p>自定义列表</p> 10. <dl> 11. <dt>东岳</dt> 12. <dd>泰山</dd> 13. 14. <dt>南岳</dt> 15. <dd>衡山</dd> 16. 17. <dt>西岳</dt> 18. <dd>华山</dd> 19. 20. <dt>北岳</dt> 21. <dd>恒山</dd> 22. 23. <dt>中岳</dt> 24. <dd>嵩山</dd> 25. </dl> 26. 27. </body> 28. </html>
（6）其它标签
1）换行标签<br/>
在HTML中如果想给内容进行换行可以使用换行标签，具体示列如下：
2）分割线标签<hr/>
<hr/> 标签用于在 HTML创建一条分割线，具体示列如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>HTML基础教程</title> 5. <meta charset="utf-8" /> 6. </head> 7. <body> 8. 9. <p>我是张三</p> 10. <!-- 分割线标签 --> 11. <hr/> 12. <p>我是李四</p> 13. </body> 14. </html>05 总结
至此我们《HTML基础教程上篇》就讲完了，下篇内容主要讲解HTML样式、HTML表单、Tabel等，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
一文秒懂Web框架基础之WSGI协议IT工程师都需要掌握的容器技术之扫盲篇
标签： #html浏览器高度
