自学web前端（一）HTML常用标签（上）

目录

前言

1.标题标签

2.段落标签和换行标签

2.1段落标签

2.2换行标签

3.文本格式化标签

4.div和span标签

5.图像标签

6.链接标签

6.1链接的语法格式

6.2链接的分类

7.特殊字符

---

前言

• 应急管理工程师
• 野路子学IT
• 键盘敲烂，薪资过万

1.标题标签

-

我是一级标签

我是二级标签

我是三级标签

我是四级标签

我是五级标签

我是六级标签

注意：标题标签独占一行

2.段落标签和换行标签

2.1段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落

我是一个段落标签

单词 paragraph[lpaeragraef]的缩写，意为段落

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

2.2换行标签

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

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

标签语义: 强制换行。

特点:

1.
是个单标签

2.
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

3.文本格式化标签

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

标签语义: 突出重要性,比普通文字更重要

语义	标签	说明
加粗	或者	更推荐使用标签加粗语义更强烈
倾斜	或者	更推荐使用标签加粗语义更强烈
删除	或者	更推荐使用标签加粗 语义更强烈
下划线	或者	更推荐使用标签加粗 语义更强烈

4.div和span标签

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

这是头部

今日价格

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

特点:

1.

标签用来布局，但是现在一行只能放一个

。大盒子

2.标签用来布局，一行上可以多个。小盒子

5.图像标签

图像标签的其他属性：

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

注意点：

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

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开属性采取键值对的格式，即key=“value"的格式，属性=“属性值”

6.链接标签

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

6.1链接的语法格式

文本或图像

单词anchor['aenka(r]的缩写，意为:锚

两个属性的作用如下:

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

6.2链接的分类

• 外部链接：例如 ">百度。
• 内部链接：网站内部页面之间的相互链接，直接接内部页面各称即可，
• 例如首页
• 空链接：如果当时没有确定链接目标时，首页
• 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
• 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
• 锚点链接：点我们点击链接可以快速定位到页面中的某个位置
  • 在链接文本的href属性中，设置属性值为#名字的形式，如第2集
  • 找到目标位置标签，里面添加一个id 属性= 刚才的名字，如:

    第2集介绍

7.特殊字符

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

特殊字符	描述	字符的代码
	空格符
<	小于号	&It;
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
℃	摄氏度	°
±	正负号	±
✖	乘号	×
➗	除号	÷
²	平方2（上标2）	²
³	立方3（上标3）	³