生活中，我们常常会浏览网页，网页渗透到我们生活的方方面面。
一、什么是网页(Web)？- 网页是前端开发人员写的，通过浏览器才能访问阅读的页面
- 网页是网站的”一页“。
- 文件扩展名为.html
HTML是用来描述网页结构的一种语言，是Web最基本构件块，它定义了Web内容的含义和结构。
- HTML指的是超文本标记语言(Hyper Text Markup Language)，“超文本”是指在单个网站内或网站之间将网页相互连接起来的链接。
- HTML不是一种编程语言，而是一种标记语言(markup language)，由一系列标记组成。
标签的一些格式规定：
-
常规标记，也叫双标记。其基本格式为:
- <标记>
- <标记 属性=“属性值” 属性=“属性值”>
如
-
空标记，也叫单标记。其基本格式为:
- <标记 属性=“属性值” />
如
(换行)，“/”可以省略。
下面我们在例子中通过10个注释认识HTML，首先创建一个test.html文件：
前端一万小时 
① HTML 基础
本知识学习用时：2 小时……
前言：学习前端我们有个比喻：先打地基……
那接下来的系列文章，我们开始我们的……
1 认识 HTML
在《Oli's 前端一万小时》之……
网页运行预览图如下：
相关注释：
-
每个页面都要从 DOCTYPE 开始，它为浏览器指定这个页面的文档类型，以便浏览器更正确的显示 HTML。只要按照这样的格式和位置写，那么浏览器就会认为你在使用标准 HTML。
-
必须以 标记开始我们的页面，以 标记结束，注意要多出一个"/"。 对于元素，页面中的所有内容都嵌套在这个元素中。
的一个属性“lang”，其含义为language，意在告诉浏览器我们是用什么语言写的网页。可以为浏览器的翻译功能提供提示，如下图所示：
-
只有
和 元素能直接放在 元素里：- 里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——可以设置它的 meta、title等，也可以放置 CSS语句，这些部分不会被用户看到；
在vscode中，可以输入html:5和回车键来快速创建格式，如下图所示：
- 里边放的是和页面内容相关的元素，即你想让用户看到的内容。
- 里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——可以设置它的 meta、title等，也可以放置 CSS语句，这些部分不会被用户看到；
-
标签可以包含我们要告诉浏览器关于我们页面的一些信息。
“charset” 是 标记的属性，我们可以在 charset 属性中指定字符编码。
“UTF-8”是charset属性的属性值，是互联网上使用最广泛的一种Unicode(通用字符集)的实现方式。使编码无国界，这样就可以显示世界上所有文化的字符了——不管字母、数字还是中文、阿拉伯文等等。
-
就是我们经常说的网站标题。</p> </li><li> <p> 元素，img=image 图像。我们知道，HTML 页面是一个纯文本，图像无法作为页面的一部分直接显示出来的，都是通过外部引入（链接）的方式来展现。</p> <p>我们浏览器在看到这个元素时，会做的处理不是像看到 或 <p> 元素那样直接在页面上显示相关内容，而是需要先到 Web 服务器去获取这个图像，然后再显示出来。</p> <p>Web 常用的图像格式有 JPEG、PNG 和 GIF：</p> <ul><li> <p>JPEG：最适合保存照片和其他复杂图像；</p> </li><li> <p>PNG 或 GIF：最适合保存 LOGO 和其他包含单色、线条或文本的简单图形。</p> </li></ul> <p> 有两个必要的属性——src 和 alt。</p> <ul><li>src：是 source 的缩写，意指这个图像来源自哪里，可以是本地的图片路径，也可以是图片的URL；</li><li>alt：是alternative的缩写，主要是为了规避——例如因网速差、硬件设备限制等外部因素，我们的浏览器不能很好的显示出图像，那 alt 后边的文本将会取代图像告诉用户这里会是什么东西，如例子就是展示的缺失图像后页面的样子。</li></ul> </li><li> <p>用来写我们的注释，便于我们阅读、修改等。这部分所有内容都不会被浏览器显示出来。</p> </li><li> <p>这里用一个 开始标记，来说明这句话是一个一级标题。我们的标题可以往下分到 ，实际工作中，一般到 。</p> </li></ol> <p></p> <ol start="9"><li> <p><p> 是 “paragraph” 段落的意思。所以这里 <p> 开启一个段落。</p> </li><li> <p><br> 元素，是我们 HTML 中专门用来换行的元素。“br”=“break” 间断，换行的意思。</p> </li><li> <p><hr> 画出一条水平线。</p> </li></ol> <p><u>其他一些常见的文本标签</u>：</p> <ul><li>加粗： </li><li>倾斜：<em></em> <i></i></li><li>删除线：<del></del> <s></s></li><li>下划线：<u></u></li><li>上标：<sup></sup></li><li>下标：<sub></sub></li></ul> <p>可以尝试用以上所学标签完成如下的页面：<br /> </p> 五、标签属性与属性值 <ul><li>所有HTML元素都可以有属性。</li><li>属性提供有关元素的附加信息。</li><li>属性在标签内指定，通常以名称+值的形式出现。</li></ul> <p>如在上面的例子中，<html>标签就含有属性lang，其属性值为en；<meta>标签含有属性charset，其属性值为UTF-8；标签含有属性src和alt，其属性值分别是图像的来源和纯文本代替内容。<br /> <em>我们可以对 <hr> 标签设置多个属性，来达到我们想要的效果，如下面的例子：</em></p> <pre class="brush:java;toolbar:false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
有width（宽度）、color（颜色）、align（对齐方式）、noshade（取消阴影）等属性，其中noshade没有属性值，上面例子的页面展示为：
六、列表标签列表标签是HTML的一个重要标签，分为有序列表和无序列表，下面是两种列表的代码实现。
Document - 第一项
- 第二项
- 第一项
- 第二项
- 标签和
- 标签，
- 标签内可以嵌套任意标签。
若想要有序列表实现以A为计数标记，且从第四位开始计数，或改变无序列表的样式。可以给
- 或
- 第一项
- 第二项
- 第1项
- 第2项
- div标签是块级元素，每个div标签都会从新行开始显示，占据一行；
- div标签内可以添加其他的标签元素；
- span标签是行内元素，会在一行显示；
- span标签内只能添加行内元素的标签或文本。
- 添加属性实现：
和 都是我们常用的盒子标签。
div标签
div标签是块级元素。每对div标签里的内容都可以占据一行，不会其他标签在一行显示；
div标签总是从新行开始显示；
div标签可以设置宽高，且还可以设置标签之间的距离（外边距和内边距）；
span标签
span标签是行内元素。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示；
span标签的宽度、高度都无法设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；
span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置；
span标签里只能容纳文本或者是其他的行内元素，不能容纳块级元素；
div和span的区别
其中.ogg是音频文件格式。
元素用于在网页上播放音频文件，如下面代码。
九、a和iframe标签
显示的内容
a标签是定义网页的超链接，是用在从一个页面往另一个页面的超链接；
a标签中最重要的一个属性是href属性，也是a标签必须的一个属性，因为href属性定义的是链接的目标；
a标签还可以设置title属性，表示鼠标悬停上去后所显示的提示信息；
a标签还有一个target属性容易遗忘，其属性值可以为：
- 标签内只能嵌套