Skip to Content

HTML基本结构标签

<html>标签

HTML标签是页面中最大的标签，一般称为根标签 lang属性用来定义当前文档显示的语言。zh表示中文，不改也行。

lang 语言种类：

  • en定义语言为英语
  • zh-CN定义语言为中文

简单来说，定义为en就是英文网页，定义为 zh-CN 就是中文网页。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

<head>和<body>标签

<head></head>标签是网页的配置，不要认为是网页的头部。 <body></body>标签对儿中书写网页的内容，包括网页的头部、主要内容、页脚等各个部分。

<!DOCTYPE html>
<html lang="en">
    <head>
        
    </head>
    <body>
        
    </body>
</html>

字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。 在<head>标签内，可以通过<meta>标签的charset属性来规定 HTML 文档应该使用哪种字符编码。

标签描述
<meta>表示网页的基础配置
<meta>标签属性描述
charset字符集
UTF-8charset的值
charset 常用的值： GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
字符集涵盖字符1个汉字字节数适用场景
UTF-8涵盖全球所有国家、民族的文字和大量图形字符3制作有非汉字文字的网页
gb2312 (gbk)收录所有汉字字符（包括简体、繁体）和英语、少量韩文、日语和少量图形字符2制作只有汉语和英语的网页，由于1个汉字仅占2字节，网页文件尺寸明显减少

无论使用哪种字符集，一定要在VScode编辑器中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签：

<meta charset="UTF-8">
<meta charset="gb2312">
<meta charset="gbk">

注意：<meta charset=" UTF-8">是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8” 。

Live Server插件不支持gb2312（gbk）字符集，只支持UTF-8字符集

移动端页面适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

开发者能确保网页在移动设备上以最佳状态呈现，提升用户浏览体验。

标题标签<title>

<title> 标签用来设置网页的标题，文字会显示在浏览器的标签栏上，title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的。

放在<head>标签中。

<title>我的第一个网页</title>

网页关键词和页面描述

SEO（Search Engine Optimization，搜索引擎优化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中内占据领先地位，获得品牌收益合理设置网页的网页的关键词和页面描述，也是SEO的重要手段。

使用<meta>标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能

  • name的值为Keywords时，意思是关键词
  • name的值为Description时，意思是描述
<meta name="Keywords" content="北京，beijing，首都">
<meta name="Description" content="北京是我国首都">

标题标签 <h1> ~ <h6>

h系列标签表示“标题”语义，h是headline的意思，搜索引擎非常看重<h1></h1>标签的内容，应该将重点内容放到<h1></h1>中，比如网页的logo等。<h1></h1>标签一般只能放置一个，否则会被搜索引擎视为作弊。

<h1>北京简介</h1>
 
<h2>北京历史</h2>
 
<h3>建国前历史</h3>
<h3>建国后历史</h3>
 
<h2>北京旅游</h2>
 
<h3>五A级景点</h3>
<h3>四A级景点</h3>

段落标签 <p>

<p></p>标签表示段落标签，p是英语paragraph的意思，任何段落都要放到<p></p>标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到<p></p>中。<p></p>标签中不能嵌套h系列标签和其他p标签。

特点： 文本在一个段落中会根据浏览器窗口的大小自动换行。 段落和段落之间保有空隙。

<p>1949年之后，对北京城池进行了大规模的拆除工作。朝鲜战争期间，为便于疏散民众，在内城城墙上增开了东四十条、小街、新街口等豁口。</p>
<p>北京城池遗存的只有正阳门城楼、箭楼，德胜门箭楼，东南角楼，内城护城河北段，以及北京站和西便门两处城墙残余，另外永定门被重建。</p>

换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br/>

<br/>是个单标签，只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

盒子标签 <div>

div是英语division“分割”的缩写，<div></div>标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰。

比如，网页的头部要放到一个<div></div>标签对中，轮播图也要放到一个<div></div>标签对中，文章内容也要放到一个<div></div>标签对中。

<div></div>是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。<div></div>像是一个容器，什么都可以容纳，因此工程师也习惯称呼<div></div>为“盒子”。

<div>
    <div>网站的logo</div>
    <h1>北京简介</h1>
</div>

<div>标签可以添加class属性表示“类名”，类名服务于CSS

区域类名
页头header
logologo
导航条nav
横幅banner
内容区域content
页脚footer

HTML语义化标签

Last updated on