HTML基础02-HTML标签（上）

2021-03-04 10:44:29 浏览数 (2)

02-HTML标签（上）

01-HTML语法规范

1.1基本语法概述
  1. HTML标签是由尖括号包围的关键词，例如<html>。
  2. HTML标签通常是成对出现的，例如<html></html>，我们称为双标签。标签对中第一个标签是开始标签，第二个是结束标签。
  3. 有些特殊的标签必须是单个标签（极少数），例如<br/>，我们称为单标签。
1.2标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系（父子关系）：

代码语言：javascript复制
<head>
    <title></title>
</head>

并列关系（兄弟关系）：

代码语言：javascript复制
<head>
</head>

<body>
</body>

02-HTML基本结构标签

2.1第一个HTML网页

每个网页都有一个基本的结构标签（也称骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

标签名

定义

说明

<html></html>

HTML标签

页面中最大的标签，我们称为根标签

<head></head>

文档的头部

注意在head标签中我们必须设置title标签

<title></title>

文档的标题

让页面拥有一个属于自己的网页标题

<body></body>

文档的主体

包含文档的所有内容，页面内容基本都是放在body里的

代码语言：javascript复制
<html>
    <head>
    	<title>我的第一个页面的标题</title>
    </head>
    <body>
        我的第一个页面的内容
    </body>
</html>

03-开发工具 VS Code

VS Code工具生成的骨架

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中新增加的代码：<!DOCTYPE>文档类型声明标签、lang语言种类、charset字符集

3.1<!DOCTYPE> 文档类型声明标签

作用是告诉浏览器使用哪种HTML版本来显式网页

代码语言：javascript复制
<!DOCTYPE html>

这句代码的意思是：当前页面采用HTML5版本来显式网页

注意：

  1. 必须声明在文档最前面的位置，处于<html>标签之前。
  2. 它是文档类型声明标签，不是一个HTML标签。
3.2lang 语言种类

用来定义当前文档显示的语言：

  1. en定义语言为英文，表示该页面是一个英文网页
  2. zh-CN定义语言为中文，表示该页面是一个中文网页

实际上，对于文档显示来说，定义为en的文档也可以显示中文，同样定义为zh-CN的文档也可以显示英文。

3.3charset 字符集

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

代码语言：javascript复制
<meta charset="UTF-8">

charset常用的值由：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码。

04-HTML常用标签

4.1标题标签<h1> - <h6> (重要)

为了使网页更具有语义化，我们经常在页面中用到标题标签。HTML提供了6个等级的标题标签，即<h1> - <h6>（分别为1级标题到6级标题）。

代码语言：javascript复制
<h1></h1>
<h2></h2>
...
<h6></h6>

其中h为head的缩写，意为头部、标题

标签语义：作为标题使用，并且重要性依次递减。

特点：

  1. 加了标题标签的文字会加粗，字号也会增大
  2. 每个标题独占一行
4.2段落和换行标签（重要）
  • 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

代码语言：javascript复制
<p>
    我是一个段落标签
</p>

p为paragraph的缩写，意为段落

标签语义：可以把HTML文档分割为若干段落

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行
  2. 段落和段落之间保有空隙
  • 换行标签

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

代码语言：javascript复制
<br />

br为break的缩写，意为打断、换行

标签语义：强制换行

特点：是一个单标签

4.3文本格式化标签

在网页中，有时需要为文字设置粗体、斜体、或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要

语义

标签

说明

加粗

<strong></strong>或<b></b>

推荐使用语义强烈的<strong>

倾斜

<em></em>或<i></i>

同理推荐使用<em>

删除线

<del></del>或<s></s>

同理推荐使用<del>

下划线

<ins></ins>或<u></u>

同理推荐使用<ins>

注：重点记住加粗和倾斜

4.4<div></div>和<span></span>标签

和 是没有语义的，它们是一个盒子，用来装某些内容。

代码语言：javascript复制
<div>
    这是一个盒子
</div>
<span>这也是一个盒子</span>

其中div是division的缩写，表示分割、分区。span意为跨度、跨距。

特点：

  1. <div></div>标签用来布局，但是一行只能放一个,可以理解为一个大盒子
  2. <span></span>标签用来布局，一行上可以放多个span，可以理解为小盒子
4.5图片标签和路径（重点）

注：通常width和heigth只需要设置一个即可，另一个会等比例缩放，避免失真。

图像标签属性注意点：

  1. 图像标签可以拥有多个属性，必须写在标签名img的后面
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
  3. 属性采取键值对的格式，即 key="value"的格式，属性=“属性值”。
4.6超链接标签（重点）

在HTML标签中，<a></a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

05-HTML中的注释和特殊字符

5.1注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

代码语言：javascript复制
<!-- 这是一个注释 -->
<!-- 快捷键：ctrl / -->
5.2特殊字符

在HTML页面中，一些特殊符号很难或不方便直接使用，此时我们可以使用下面的字符代码来代替。

特殊字符

描述

字符代码

空字符

&nbsp；

<

小于号

&lt；

>

大于号

&gt；

&

与号

&amp；

￥

人民币

&yen；

©

版权

&copy；

®

注册商标

&reg；

°

摄氏度

&deg；

±

正负号

&plusmn；

×

乘号

&times；

÷

除号

&divide；

²

平方2（上标2）

&sup2；

³

立方3（上标3）

&sup3；

注：末尾分号应为英文输入

图像标签 html

0 人点赞