HTML5基础知识

学习技术推荐大家以实战为导向，先做出效果，然后再回头理解和记忆，HTML和CSS的知识点非常多，远远超出高中大学时代一门课的内容，所以千万不要死记硬背，而是要学会查阅技术文档。不查阅文档是技术学习的大忌，这会阻碍你对技术知识全面而又系统的了解。

写出第一行HTML代码

VS Code编辑器内置一套emmet语法，可以大大提高我们书写HTML代码的效率 。下面我们就来看如何使用它。

打开编辑器，在hackwork-webpage的文件夹下新建一个html文件，比如lesson2.html（先确定了文件的格式为html，emmet语法才会生效），在lesson2.html里输入一个英文状态下的感叹号!，之后按一下tab键，就会出现以下代码：

我们可以把上面的代码称之为HTML文件的骨架结构，以后新建完html文件都可以按照上面的操作先把架子搭起来再说。

emmet语法可以大大提高我们书写html代码的效率，除了!以外，还有哪些快捷方式呢？大家可以查阅emmet技术文档，或直接查看emmet的快捷方式，先可以放在一边，以后我们会经常用到的。关于emmet，我们在介绍VS Code的上节视频里有说明哦~

HTML骨架结构代码解读

下面这些知识点，大家可以粗略了解即可，很多计算机的概念都是一个约定，一个规则，大家可以不必刨根问底，只需大致了解即可。

  • <!DOCTYPE>：<!DOCTYPE html>是HTML5的声明，它定义文档类型，必须是 HTML 文档的第一行，位于 <html> 标签之前。
  • <html>：告知浏览器其自身是一个 HTML 文档。<html> 与 </html> 标签限定了html文档的开始点和结束点，在它们之间是文档的头部和主体。
  • <meta>：meta标签定义了网页的一些信息，比如charset是编码格式，http-equiv向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，viewport则定义页面的宽度与打开页面的屏幕宽度的关系等。
  • <head>：文档的头部描述了文档的各种属性和信息，包括文档的标题等、Meta以及css等外部链接的引入。

标签栏的标题

使用Chrome浏览器打开lesson2.html，发现页面一片空白，但是在页面的标签栏上我们可以看到页面的标题是：Document，这就是<title></title>标签的作用，修改title标签里面的内容，比如：

保存后，然后刷新浏览器的页面查看效果。

页面的内容

在<body>和</body>标签之间的内容是网页的主要内容，在网页上要展示出来的页面内容也一定要放在body标签中，因为lesson2.html的<body></body>标签没有内容，所以打开页面时会是空白的。在<body></body>里添加如下内容。

保存后，然后刷新浏览器的页面查看效果。下面的代码我们都会添加在<body></body>标签之中。

富文本编辑器与HTML代码

打开富文本html编辑器UEditor，这样的界面是不是似曾相识？在Word文档以及很多博客、公众号等写文章的地方都可以看到类似的界面。

富文本编辑器：UEditor

我们可以在富文本编辑器里写一段文字，比如“HackWork技术工坊”，然后插入一个效果，比如加粗B，然后点击左上角的<html>查看对应的html源代码。取消加粗后，我们再来查看对应的html源码。

在富文本编辑器UEditor、135编辑器等把获得的html代码复制粘贴在<body></body>标签之内，保存之后用浏览器打开查看一下效果。通过富文本编辑器以及与之对应的代码，对网页有哪些标签，以及对标签和样式有一个大致的了解（无需太深究）

给文字添加效果

我们可以依次给”HackWork技术工坊”加斜体、下划线、删除线、引用、颜色、背景、有序列表、无序列表、段前距、段后距、行间距、段落、字体、文字大小、居中对齐、超链接等效果以及可以插入表格，然后查看对应的html源代码，为了避免混淆，建议一次添加一个。

标签tag与元素element

我们看到的<strong></strong>、<p></p>、<em></em>、<h1></h1>、<a></a>、<blockquote></blockquote>等等就是html标签，标签是html的基础组成部分，可以说一个网页就是由一个个html标签组装而成的。

标签+标签里的内容，我们称之为元素element，比如上面这一段加粗代码<strong></strong>是标签，其中<strong>为起始标签，而</strong>为闭合标签，而上面整段代码我们可以称之为strong元素。

样式style

在添加下划线、删除线、颜色、背景、大小等等时，我们会看到HTML标签里面会有一个style=””，引号””里面的我们称之为样式，样式相当于是美化标签。

很多内容运营人员会常使用135编辑器、i排版（在这上面编辑都可以查看html源码）等来编辑文章，这些工具就是富文本html编辑器。相对于html编程来说，富文本编辑器的功能极其有限，大家可以借助这些编辑器弄一些复杂的排版来了解一下与之对应的HTML代码，但是不要花太多时间在这上面。

给页面添加标题和文字

标题标签

复制下面的代码到lesson2.html文件的<body></body>标签内，然后保存，用浏览器打开查看效果。

我们只需要把一段文字放在标题标签内，标题在页面的效果就显示出来了。

为什么给文字加了标题标签就会有加粗以及不同字体大小等效果呢？原因就在于浏览器给这些标签添加了加粗、不同字体大小等默认样式。关于样式的知识我们会在CSS里面详述。

段落标签和强调标签

我们可以把文字内容放到段落<p></p>标签里，而要加粗强调的放在强调标签<strong></strong>里，斜体强调的放在<em></em>标签里。将下面代码输入到lesson2.html的<body></body>标签内，保存后用浏览器打开lesson2.html查看效果。

注意p标签和strong标签的嵌套写法是<p><strong></strong></p>，也就是要成对书写。

由于VS Code 内置emmet语法，我们可以在输入法是英文状态的情况下，直接输入p、strong等标签名，然后按一下Tab键，emmet会补全整个成对的标签，这样写代码就非常惬意了。

块级元素与内联元素

在上面的案例中，因为有了p标签，文字换行了，分成了两段，而em元素、strong元素却没有让文本换行，这是为什么呢？因为p元素是块级元素，em、strong是行内元素。

块级(block)元素会换行，高度，行高、内外边距都可控制，行内(inline)元素不会换行，高度，行高以及内外边距不可改变。大家可以先只需要知道大致的概念即可。还有哪些元素是块级元素或行内元素呢？大家可以查阅技术文档，先花一分钟大致了解有哪些即可。

技术文档：块级元素、行内元素

为什么块级元素会换行，而内联元素不会换行呢？原因和前面标题标签自带样式一样，浏览器给块级标签默认加了一个display:block;的样式，我们给em加这样的样式也会有换行等效果，如<em style=”display:block”>HackWork技术工坊</em>。

span标签

有时我们希望给一些文字加一些颜色，但是又不希望文字换行，这时可以使用span标签（因为它是行内标签），大家可以把下面的代码输入到lesson2.html里，保存后用浏览器查看效果。

我们发现文字并没有什么效果，这是因为span标签浏览器没有给它提供默认的样式，所以这个标签什么效果也没有，那span标签的意义在哪里呢？它可以方便我们给标签内的内容添加样式，比如：

这里的style是span标签的属性attribute，而双引号””里的内容就是style属性的值。大家只需要知道这个概念就可以了。

网页的内容分区

使用emmet语法快速书写代码

大家可以使用VS Code新建一个page.html，然后保证输入法是英文状态下的时候，输入感叹号!之后按一下Tab键，然后在body标签内输入main按一下Tab键，在main标签内再输入header按一下Tab键。参考下面的代码（不用输注释里面的内容），依次输入div、nav、section、article、aside、footer等后按Tab键快速书写下面的代码（别复制粘贴）

id和class属性

为了更好的区分每个标签元素，我们会使用id属性来标识它的唯一性，而使用class属性来给每个标签归类。

语义化标签

书写完毕之后保存，使用浏览器打开，我们发现页面是空白的，上面的这些标签是为了让网页开发更有规划，让代码结构清晰，方便自己、团队阅读以及浏览器和搜索引擎的解析而写的。这也是语义化标签的作用。大家可以先只大致了解概念即可。

  • main标签里放的是网站的主体内容；
  • header标签用于网页或某个元素的头部的展示介绍性内容，比如标题，Logo、搜索框等等；
  • nav标签用于导航栏的链接列表；
  • article标签表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目；
  • footer标签用于网页或某个元素的页脚，通常包含该作者、版权数据或者与文档相关的链接等信息；
  • aside标签主要用于侧边栏或widgets，这些内容通常比较独立，与页面内容几乎无关，单独拆分出来也不会使整体受影响；
  • section标签表示网页中的一个区域，一个节；

即使你不用或只部分使用上面的语义化标签对代码都不会有什么影响，很多程序员甚至还只用div标签。这里的<main>标签相当于 &lt;div class="main"&gt;&lt;/div&gt;或者 &lt;div id="main"&gt;&lt;/div&gt;，同理header、footer、article、aside、section、nav等，甚至标题标签也是如此，但我们建议大家尽可能使用语义化标签。

链接a标签

HTML的<a>元素可以创建一个其他网页、文件、当前网页的某一个位置、电子邮件地址、电话以及其他URL的链接。

创建链接到其他网页的超链接

同样我们不要只看而是结合VS Code，把下面的代码输入到lesson2.html里面。

保存之后，使用浏览器打开lesson2.html，然后：

  • 思考一下链接的文字为什么会有颜色和下划线；
  • 把鼠标放在链接的文字上，注意鼠标变成了手型；
  • 把鼠标放在链接的文字上上3秒左右，看会弹出什么内容；
  • 点击一下链接会有什么效果，以及注意链接的文字样式的变化；
  • 把代码里的target=”_blank” 删掉之后，再来点击链接看和之前有什么不同

每一个html标签都有属性attribute，有的属性是所有HTML元素都会有的属性，我们称之为全局属性，这里的href、title、target就是a标签的特有属性。要彻底掌握一个标签，我们就要清楚它有哪些属性以及每个属性的作用。

  • href属性规定指向的链接地址；
  • title属性表示的是鼠标滑过链接文字时会显示这个属性的文本内容。title属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容，有利于被搜索引擎检索也就是SEO；
  • target属性指定在何处显示链接的内容，如果不添加，那它默认的是”_self”，也就是在当前页面打开内容，而”_blank”则是在浏览器新的窗口或标签页来加载内容

通过上面的案例我们也发现html标签的有些属性并非必须，比如第二个链接就没有title属性和target属性。

跳转到锚点位置

我们希望点击一个链接可以跳转到页面的某一个具体的位置，这个时候就需要锚点，HTML的所有标签都有id属性，而id又是独一无二的，只需设置一个id值，跳转的时候就能“精确导航”啦。

方法是给要跳转到具体位置的html标签创建一个id值，href值为”#+锚点的id值”即可。（为了让效果更清晰，我们特意加了一些style，大家可以忽略。）输入下面的代码到lesson2.html的body标签，保存后用浏览器打开查看效果。

创建邮件、电话链接

为了让交互体验更好，我们可以使用a标签创建邮件和电话的链接，创建邮件链接的方法是让href属性的值为mailto:+邮件地址，当点击链接就会启动邮件客户端；创建电话链接的方式是让href的值为tel:+电话号码，点击链接就可以拨打电话。

图片img标签

img 元素向网页中嵌入一幅图像。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。

插入图像

使用<img>标签来插入图片，图像可以是GIF，PNG，JPEG格式的图像文件。在lesson2.html的body标签里输入下面的代码，保存后查看效果。然后右键另存为动图run.gif，把图片放置在之前建好的img文件夹里，刷新页面再来查看效果。

  • alt属性规定图像的替代文本，当图像下载不成功时，可看到该属性指定的文本
  •  title属性提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
  • src属性规定显示图像的 URL。可能的值：绝对 URL – 指向其他站点（比如 src=”http://www.example.com/”）;相对 URL – 指向站点内的文件（比如 src=”/i/image.gif”）
  • height属性定义图像的高度；width属性定义图像的宽度

闭合标签

我们发现<img>标签和之前的标签有点不一样，img标签不是成对出现的，这类标签我们可以称之为闭合标签，可能有时候大家在看其他的资料时有把<img src=””>写成<img src=”” />，标签里有一个/的小尾巴，这是以前的写法，新版本的html5不需要（写也没有关系）。

相对路径与绝对路径

在我们学习a标签和img标签的src属性时，都会有相对url和绝对url，这个就涉及到相对路径和绝对路径的知识了。

绝对路径

绝对路径就是文件的真正存在的路径，是指从硬盘的根目录(盘符)开始，进行一级级目录指向文件，也可以是存放在服务器上的URL链接。

这个在电脑的绝对路径是该文件在你电脑上的位置，如果你把文件发给其他人，他存放文件的位置和你的有所不同，那他就打不开链接了。

相对路径

而相对路径就是以当前文件为基准进行一级级目录指向被引用的资源文件。

  • ../ 表示当前文件所在的目录的上一级目录
  • ./ 表示当前文件所在的目录(可以省略)
  • / 表示当前站点的根目录(域名映射的硬盘目录)

相对路径有个好处就是只要把当前项目整体打包发给别人或者上传到服务器上面，文件链接地址都不会失效。

关于相对路径以及绝对路径，你只需要知道如何把网页里面的图片链接呈现到网页上，知道如何把电脑上面（有多层二三级目录）的图片通过相对路径和绝对路径的方式用img标签显示出来。

列表

在word文档里面有有序列表和无序列表，对应的，网页里面也就有了这些标签了。

链接内嵌套其他标签

网页是由一个个标签组成的，标签与标签之间是可以嵌套的，而且实际开发中标签往往嵌套的层数非常多。大家可以把下面的代码输入到body标签内，保存之后使用浏览器打开预览效果。

上面这一段代码就嵌套了很多层：

  • 通常我们会使用div像一个集装箱一样把所有的内容都装进去；
  • 在这里a标签里面也嵌套了很多层，里面包括标题、图片、文字，当我们点击任一块内容的时候都会跳转链接
  • 我们通常会给div等标签的id或class属性添加一些区分它们的值；
  • 大家预览效果的时候发现没有添加样式页面会比较难看，而且浏览器给一些标签默认添加了一些样式，比如a标签里面的文字有颜色以及下划线

技术文档

上面我们只是列举了HTML最常见的一些标签，我们可以在HTML元素参考里面看到所有的标签。掌握最常见的标签才算入门，知道如何找到所有的标签，如何查阅标签的用法，是技术进阶所要必备的。HTML的技术文档比较推荐的有以下两个，大家可以先各花五分钟左右的时间快速浏览一下即可，学习先以我们的教程为主。

技术文档的内容是非常多的，在初次使用之时，我们需要快速掌握它们的文档结构，就跟我们看一本书的目录一样。技术文档相当于我们学习英语时的辞典，你无需记住全文，只需要培养查阅辞典（技术文档）的习惯，以及知道如何快速查阅。