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

目录

前言

1.标题标签

2.段落标签和换行标签

2.1段落标签

2.2换行标签

3.文本格式化标签

4.div和span标签

5.图像标签

6.链接标签

6.1链接的语法格式

6.2链接的分类

7.特殊字符

---

前言

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

1.标题标签<h1>-<h6>

<h1>我是一级标签</h1>

<h2>我是二级标签</h2>

<h3>我是三级标签</h3>

<h4>我是四级标签</h4>

<h5>我是五级标签</h5>

<h6>我是六级标签</h6>

注意：标题标签独占一行

2.段落标签和换行标签

2.1段落标签

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

<p> 我是一个段落标签 </p>

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

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

2.2换行标签

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

<br />

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

标签语义: 强制换行。

特点:

1.<br/>是个单标签

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

3.文本格式化标签

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

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

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗语义更强烈
倾斜	<em></em>或者 <i></i>	更推荐使用<em>标签加粗语义更强烈
删除	<de</de> 或者 <s></s>	更推荐使用<del>标签加粗 语义更强烈
下划线	<ins></ins> 或者 <u></u>	更推荐使用<ins>标签加粗 语义更强烈

4.div和span标签

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

<div> 这是头部 </div>

<span>今日价格 </span>

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

特点:

1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

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

5.图像标签

图像标签的其他属性：

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

注意点：

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

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

6.链接标签

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

6.1链接的语法格式

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

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

两个属性的作用如下:

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

6.2链接的分类

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

7.特殊字符

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

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