文章目录
- 前言
- 一、HTML是什么？
- 二、HTML的特点
- 三、HTML的使用
- 四、块级元素与行内元素
- 五、基础标签的使用
- 总结
前言
第一次接触HTML，是大三上学期开设的web基础课程，里面不仅介绍了HTML，还有CSS和JS。那是我第一次接触HTML，学起来也很简单。因为它不是一门编程语言，所以并没有像C++和Java那样学起来晦涩难懂，而且我们是边授课边实践的，讲到一个知识点，就要打一个代码例子，所以上手也很快。时间过了也快有一年了，有些知识也遗忘了一些，现在重新整理一遍，希望能对初学者有一定的帮助。
一、HTML是什么？
HTML是HyperText Markup Language(超文本标记语言)的缩写，它不是一种编程语言，而是一种标记语言 。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML用于构造浏览器页面的，你可以利用HTML元素来构造一个简单或者复杂的页面。
二、HTML的特点
1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类 元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用 在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
三、HTML的使用
1.开发环境搭建
可用于编写HTML的编译工具有很多
- 记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；
- Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；
- VSCode（推荐）：特点：丰富的插件支持、可进行git管理；
- HBuilderX：特点：性能更高、启动更快、体量小，国内开发团队研发，全中文界面，对新手比较友好
HTML是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试；
主流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。
推荐各位使用Google Chrome（谷歌），Google Chrome（谷歌）浏览器界面简洁，清爽干整洁净，性能也是非常好的，速度快插件资源丰富，支持HTML5全面以及浏览器兼容性问题等等，而且大多数前端程序员都在用
2.Hello HTML
打开VSCode编译器，新建一个后缀名为.html的文件，创建HTML文档基本结构，如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
</head>
<body>
Hello HTML!
</body>
</html>
运行到浏览器打开
对HTML文档基本结构的解析，如下
html文档头，html5标准网页声明
<!DOCTYPE html>
不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。
h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式以后，浏览器解析页面会导致页面无法正常显示，所以为了避免进入该模式，一定要写文档声明。
html根标签
<html ></html>
一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中,属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文
head标签
<head></head>
该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的
meta标签
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介， meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/ 。
charset="UTF-8"字符编码格式为UTF-8。
viewport 设备的屏幕 width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览， 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
title标签
<title>Hello</title>
设置浏览器选项卡的名称
body标签
<body>
Hello HTML!
</body>
body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写， 在body里的内容都是显示在浏览器的视图区的
四、块级元素与行内元素
1.块级元素
作用：搭建网页结构
特点：
- 独占一行空间
- 默认宽度为100%
- 高度由子元素或内容决定
- 可以通过css指定其宽度
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
建议：不要将块级元素嵌套在行内元素中。
常用的块级元素
| 元素 | 作用 |
| div | 无意义的块元素 |
| h1~h6 | 标题标题 |
| p | 段落 |
| ul，li | 无序列表 |
| ol，li | 有序列表 |
| dl，dt，dd | 定义列表 |
2.行内元素
作用：在结构中填充网页内容
特点：
- 与其他行内元素共享一行空间
- 宽高由自身决定
- 由于不用来搭建网页结构，所以也无需通过css指定其宽度
- 行内元素中不可以嵌套块元素
元素：span、a、img、strong、b、i、em、sub、sup...
常用的行内元素
| 元素 | 属性 |
| span | 无意义的行内元素 |
| a | href=" " target="_blank" rel="external nofollow" 跳转路径 |
五、基础标签的使用
1.div标签
div是一个无语义的标签，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来进行页面基本结构的搭建
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
2.h标签
h标签 标题标签 在HTML中，一共有六级标题标签 h1~h6 在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心 6级标题中，h1的最总要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说， h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容 h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签 一般的页面中，我们只使用h1 h2 h3，其他的基本不用
<h1>这是一个h1标签</h1>
3.p标签
段落标签，段落标签用于表示内容中的一个自然段 使用p标签来表示一个段落 p标签中的文字，会独占一行，并且段与段之间会有一个间距
<p>
HTML是HyperText Markup Language(超文本标记语言)的缩写，
它不是一种编程语言，而是一种标记语言 。它包括一系列标签．
通过这些标签可以将网络上的文档格式统一，使分散的Internet
资源连接为一个逻辑整体。HTML用于构造浏览器页面的，你可以
利用HTML元素来构造一个简单或者复杂的页面。
</p>
4.br标签
表示换行标签 br标签是一个自结束标签
<body>
<div>hello html!</div>
<br>
<br>
hello
</body>
5.hr标签
hr标签 可以在页面中生成一个分割线
<body>
<div>hello html!</div>
<hr>
hello
</body>
6.img标签
img标签 告诉浏览器要显示一张图片
img标签的格式
<img src="图片的url或本地路径地址" alt="" width="100px" height="100px" title="">
src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）
alt:可以用来设置在图片不能显示的时，对图片的描述
img标签的其他属性 width:设置图片的宽度 height:设置图片的高度
title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容
7.a标签
a标签的作用 用于控制页面与页面之间跳转的
<a href="指定需要跳转的目标界面" target="_blank" rel="external nofollow" >需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" title="百度">百度一下</a>
a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转
self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转
8.video(H5新增)
作用：播放视频 web网页中专用的视频格式
格式:<video src="" controls></video>
video标签的属性 src:告诉video标签需要播放的视频地址
autoplay:用于告诉video标签是否需要自动播放视频
controls:用于告诉video标签是否需要控制条
poster:用于告诉video标签视频没有播放之前显示的占位图片
loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放
muted:静音
width/height: 和img标签中的一模一样
9.audio(H5新增)
作用: 播放音频
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
注意：
audio标签的使用和video标签的使用基本一样 , video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, height/width/poster
基础标签大概罗列这些出来，还有一些其他的基础标签没有列出，大家可以自己去找找并且尝试一下
总结
以上就是我对HTML知识的一些整理，希望能对大家有所帮助。这是我的第一篇博客，有什么不好的地方，欢迎大家评论区指出或者私聊我。