【前端学习-初阶-HTML】HTML标签（上）

我自闭了？

已于 2023-02-23 17:29:10 修改

阅读量155

点赞数

分类专栏：前端学习日记 HTML 文章标签：前端 html 学习

于 2023-02-23 11:44:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_48234463/article/details/129177421

版权

前端学习日记同时被 2 个专栏收录

25 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

本文介绍了HTML的基本标签语法，包括文档结构、开发工具如DW、WebStorm和VSCode的使用。重点讲解了VSCode中新建文件和文档类型声明，以及HTML的常用标签如标题、段落、文本格式化、图像和超链接的使用方法。同时提到了字符编码的重要性和注释的编写，以及特殊字符的表示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML标签（上）

1. 语法规范

<html>//(HTML标签)

<head>

<title>第一个页面 </title>

</head>//(文档头部)

<body>//(双标签、文档主体)

//（单标签）

</body>

</html>

2. 网页开发工具

DW
WebStorm
Builder
Visuol Studio Code

3. VSCode的使用

打开软件
新建文件（ctrl+N）
保存（ctrl+S）

3.1 文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>(当前页面采用的是HTML5版本来显示页面的)

注:文档最前面，它不是一个HTML标签，是文档类型声明标签

<html lang="en">语言种类

1.en定义语言为英语

2.zh-CN定义语言为中文

注：对于文档显示来说，定义成en的文档也可以显示中文，定义为zh-CN的文档也可以显示英文

<meta charset>char-字符，set-集合。
charset属性规定HTML文档应该使用哪种字符编码

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

2.上面的语法是必须要写的代码，否则可能会引起乱码的情况，一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”，不要写成“utf-8”或者“utf8/UTF8”

4. HTML常用标签

4.1 标签语义

标签含义

作用：使页面结构更清晰

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

6个级别的标题标签

h是head的缩写

标签语义：作为标题使用

4.3 段落标签和换行标签

<p></p>(段落标签)

注：paragraph缩写

<br/>换行标签

强制换行，另起一行，并未分段

注：barter rabbet缩写(barter：货物交换；rabbet：槽口；barter rabbet：换行)

4.4文本格式化标签

粗体斜体下划线

突出重要性，区别普通文字

加粗标签<strong></strong>或者<b></b>

注：strong（强烈的，强壮的）；bolder（粗体的）

斜体标签<em></em>或者<i></i>

注：emphasize(强调)；italic（斜体

~~删除线~~<del></del>或者<s></s>

注：delete（删除）；Strikethrough（删除线，strike：罢工）

下划线 <ins></ins>或者<u></u>

注：inserted(插入)；underlined（下划线）

注:推荐使用复杂的，因为语义更强烈，加粗倾斜重要

4.5<div>和<span>标签

<div>和<span>没有语义，是一个盒子，用来装内容。

<div>我是一个div标签，我一个人占一行</div>大盒子

注：division（划分，区域）

<span>我是一个span标签，一行可以放多个<span></span>小盒子

注：span（范围）

4.6图像标签和路径（重点）

1.图像标签

在HTML标签中，<img>标签用来定义HTML页面中的图像。

<img src="图像URL"/>

注：单词image（图片）缩写

src是<img>标签的必须属性，用于指定图像文件的路径和文件名。

属性：标签特性

图像属性说明

属性	属性值	说明
src	图片路径	必须属性（source：路径）
alt	文本	替换文本，图像不能显示时的文字（alttext：替换文本）
title	文本	提示文字，鼠标放到图像上，显示的文字（提示文本）
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框粗细（border：边）

图像标签属性注意点：

①图像标签可以拥有多个属性，必须写在标签名后面

②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开

③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

例：<img src="image.jpg">img:标签名；src：属性；image.jpg：属性值

2.路径

目录文件夹：普通文件夹，存所有素材

根目录：第一个文件夹

vscode可以打开目录文件夹

②相对路径和绝对路径：

相对路径：以引用文件所在位置为参考基础而建立的目录路径，以文件相对于html页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于html文件同一级，如<img src="baidu.gif"/>
下一级路径	/	图像文件位于html文件下一级如<img src="images/baidu.gif"/>
上一级路径	../	图像文件位于html文件上一级，如<img src="../baidu.gif"/>

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

例如：“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。本地完整路径或者网址

注：绝对路径与相对路径的反斜杠不一样

4.7超链接标签（重点）

1.链接语法格式

<a href="跳转目标"target=“目标窗口的弹出方式”>文本或图像</a>

注：单词anchor的缩写，意思：锚。

两个属性的作用如下：

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就有了超链接的功能
target	用于指定链接页面的打开方式，其中_ self为默认值(当前页直接变)，_ blank为在新窗口中的打开方式（新窗口打开）。

2.链接分类

1.外部链接：例如<a href="http://www.baidu.com" target="_blank">百度</a>

2.内部链接：网站内部页面的相互链接，直接链接内部名称即可，例如<a href="demo.html" target="_blank">首页</a>

3.空链接：<a href="#">公司地址</a>

4.下载链接：地址链接的是.exe或.zip等，<a href=''images.zip">压缩包</a>

5.网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接， <a href="http://www.baidu.com" target="_self"> <img src="image.jpg"/></a>

6.锚点链接（页面跳转）：

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3>

5.HTML中的注释和特殊字符

5.1注释

""结束

快捷键：Ctrl+k+c

5.2特殊字符

特殊字符	描述	字符的代码
	空格符	&nbsp ;
<	小于号	&lt ;
>	大于号	&gt ;
&	和号	&amp ;
￥	人民币	&yen ;
©	版权	&copy ；
®	注册商标	&reg ;
°	摄氏度	&deg ;
±	正负号	&plusmn ;
×	乘号	&times ；
÷	除号	&divide ;
²	平方2（上标2）	&sup2 ;
³	平方3（上标3）	&sup3 ;