使用软件
vscode、火狐浏览器
前言
大家好,我是蕾姆。苦于之前学艺不精,如今只能进行系统的复习来回忆起大脑中关于HTML的内容。
经过学习之后,我根据自身的经验和所学知识,想要尽可能简单但是全面的将html的知识框架梳理出来,于是便有了这个系列。
事先强调,笔者在今后的文章中所写出的一切内容,若笔者也不太清楚原因,则会直接展示代码效果,不会强行解释,所以诸君可放心观看。
必需拓展
vscode的功能十分齐全,为开发者的日常使用提供了大量的拓展,在这里我贴一张图,希望能对诸位像我一样的“初学者”们提供一定的帮助。
基础框架
首先,我们先需要了解一个快捷键 !(英文状态)
(建议安装上图拓展,不然后续可能有些快捷键无法使用)
在vscode中创建一个html文件后,我们直接输入英文状态的!就可以快捷生成一个基础的代码模板。如图
既然是初识HTML,那自然先需要了解一下在这个基本模板中,每一行代码的意义是什么。
1.<!DOCTYPE html>
这是HTML5的标准文档声明,它可以告诉浏览器在解析我们的网页时要按照HTML5的标准进行解析。
备注:每个浏览器都有一套自己的解析标准,如果不加这个声明,可能在不同的浏览器中就会有不同的展示结果。
<!DOCTYPE html>
2.<html lang="en">
这是这个页面的根标签,也叫做根元素。一个页面最多只能有一个根标签(根元素),而所有的代码内容全部要写到这个根标签中。
其中lang="en"表示该html文件中的代码的语言是英语,lang是language的缩写。
<html lang="en">
<head>
</head>
<body>
</body>
</html>
3.<head></head>
文件头部标签,该标签中包含的内容不会直接显示在浏览器的视口区域。该标签中内容的作用是帮助浏览器正确解析网页。
<head>
......
</head>
4.<meta charset="UTF-8">
meta是单元素(单标签),同时也是自结束标签。它可以用来设置网页的一些元数据,比如网页的字符集,关键字、简介等。
charset="UTF-8"指的是文本内容的字符编码,浏览器会根据字符编码进行解析。
常见的字符编码有:gb2312、gbk、unicode、UTF-8
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5.<title>Document</title>
被title标签包裹住的Document就是当前文件加载为网页时的选项卡标题,其中的内容可以自行修改。如图
(这破水印怎么去啊)
<title>Document</title>
6.<body></body>
这部分是网页的主体部分,在body中的内容都会显示在浏览器的视口区域中。
<body>
......
</body>
最后,我们使用</html>结尾,与前文中的根标签相互呼应。
这就涉及到了接下来要说的部分,HTML的基本语法。
基本语法
一、注释
在HTML中,有着统一的注释格式,快捷键是 ctrl+/
<!--这是一段注释-->
作为开发者,我们应该拥有良好的开发习惯,合理地应用注释可以让我们的代码在整体的阅读上更加舒适。而注释的作用,便是对某一行代码的解释说明,方便代码阅读和维护。
二、标签 元素
标签又分为单标签与双标签。
比如前文中的meta就是单标签,只由一个标签组成,后面我们还会复习到<hr>分割线、<br>换行等许多单标签。
双标签则是由<开始标签>元素内容</结束标签>组成,其中开始标签与结束标签是相同的。例如
<html></html>
<head></head>
<body></body>
<table></table>
<div></div>
......
三、属性
笔者初学的时候,对这个词到底是个什么意思苦恼了许久,后来想了个较为简单的理解办法。
(引用百科)属性:我们把一个事物的性质与关系,都叫作事物的属性。事物与属性是不可分的,事物都是有属性的事物,属性也都是事物的属性。
在HTML中,上述的“事物”就是我们所说的标签,所以属性指的就是标签的属性。属性是一个“整体”,由属性名和属性值组成,中间使用等号连接。
<img src="" alt="这是一个图片标签">
其中src和alt就是img的属性,“这是一个图片标签”就是alt的属性值。
html标签都拥有的属性
id 唯一标识一个标签
class 标识一类标签、操作一类标签
style 给标签设置样式
title 标签提示说明 鼠标悬浮到标签上提示说明
四、空白语法
通俗点说就是无论敲了多少个空格,在网页展示时都会被解析成一个
五、字符实体
在HTML中,许多字符有着其他的含义。例如小于号<和大于号>,浏览器在解析时会误认为它们是标签。所以我们写HTML中的一些特殊符号时,要使用字符实体(character entities)替代。
字符实体以&符开始,以;结尾。例如
空格
" "
> >
< <
© ©
......
以下是一些常见的字符实体
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |   |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | &apos (IE不支持) | ' |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | &trade | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |