HTML标签（上）

标签：标签 HTML 图像页面链接属性

摘要：（1）标签的书写注意规范

（2）HTML骨架标签

（3）超链接标签

（4）图片标签，以及alt和title的区别

（5）相对路径的三种形式

一.HTML语法规范

①基本语法概述

1）HTML标签是由尖括号包围的关键词，例如<html>

2）HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签。标签对的第一个标签是开始标签，第二个标签是结束标签。

3）有些特殊的标签必须是单个标签（极少情况），例如<br/> 我们称为单标签。

②标签关系

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

包含关系(父子关系)

<head>
    <title></title>
</head>

并列关系（兄弟关系）

<head>    </head>
<body>    </body>

二.HTML基本结构标签

①第一个HTML页面

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

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称为根标签
<head></head>	文档的头部	注意在head标签中我们要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body><body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML页面</title>
</head>

<body>
    小远编程，越来越好
</body>

</html>

②基本结构标签总结

三.VS code工具生成骨架标签新增代码

①文档类型声明标签

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

<!DOCTYPE html>   //表明当前页面采用的是HTML5版本来显示网页

（注意：（1） <!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前

（2） <!DOCTYPE>不是一个HTML标签，它就是文档声明标签）

②lang语言种类

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

1.en定义语言为英语

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

（只是对浏览器和搜索引擎有提示、警示作用）

③字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UIF-8"/>

UIF-8被称为万国码，基本包含了全世界所有国家需要用到的字符

四.HTML常用标签

①标签语义

简单理解每个标签的含义，即这个标签是用来干什么的

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰

②标题标签

HTML提供了6个等级的网页标题，即<h1>-<h6>

单词head的缩写，意为头部，标题

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

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

特点：1.加了标题的文字会变粗，字号也会依次变大。

2.每个标题独占一行

<!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>
    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <h3>标题标签3</h3>
    <h4>标题标签4</h4>
    <h5>标题标签5</h5>
    <h6>标题标签6</h6>
</body>

</html>

③段落标签

在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落

单词paragragh的缩写，意为段落

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

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

特点：1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落和段落之间保有空隙

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广西科技大学</title>
</head>

<body>
    <p>广西科技大学坐落于国家历史文化名城和西南地区工业重镇、交通枢纽、商贸物流中心——柳州市，是直属广西壮族自治区人民政府管理的普通高等学校。学校前身为1958年在南宁筹建的广西工学院。1985年经广西壮族自治区人民政府决定将广西工学院移到柳州市办学。2012年广西工学院与柳州医学高等专科学校合并，2013年经教育部批准建立广西科技大学。
    </p>

    学校坚持“育人为本，师生为重”的办学理念，以“求真近道，明德致新”为校训，弘扬“敢为人先、百折不挠，务实创新、追求卓越”的广西科技大学精神，不断深化“校市相融，校企合作”的办学特色。全面落实立德树人根本任务，始终坚守为党育人、为国育才的初心使命，主动服务区域经济社会发展，大力培养德智体美劳全面发展，知识、能力、素质各方面协调发展，专业基础扎实，有社会责任感和家国情怀，富有创新精神和实践能力，具有在未来成为行业骨干，在技术、管理、服务等领域发挥创新纽带作用的高素质应用型人才。
</body>

</html>

④换行标签

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

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

<br/>

标签语义：强制换行

特点：1.<br/>是个单标签。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广西科技大学</title>
</head>

<body>
    <p>广西科技大学坐落于国家历史文化名城和西南地区工业重镇、交通枢纽、商贸物流中心——柳州市，<br />
        是直属广西壮族自治区人民政府管理的普通高等学校。学校前身为1958年在南宁筹建的广西工学院。1985年经广西壮族自治区人民政府决定将广西工学院移到柳州市办学。2012年广西工学院与柳州医学高等专科学校合并，2013年经教育部批准建立广西科技大学。
    </p>

    学校坚持“育人为本，师生为重”的办学理念，以“求真近道，明德致新”为校训，弘扬“敢为人先、百折不挠，务实创新、追求卓越”的广西科技大学精神，不断深化“校市相融，校企合作”的办学特色。全面落实立德树人根本任务，始终坚守为党育人、为国育才的初心使命，主动服务区域经济社会发展，大力培养德智体美劳全面发展，知识、能力、素质各方面协调发展，专业基础扎实，有社会责任感和家国情怀，富有创新精神和实践能力，具有在未来成为行业骨干，在技术、管理、服务等领域发挥创新纽带作用的高素质应用型人才。
</body>

</html>

⑤文本格式化标签

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

（重点记住加粗和倾斜）

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>

<body>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>

</html>

⑥`<div>`和`<span>`标签

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

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

<div>这是头部</div>
<span>今日价格</span>

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>盒子标签</title>
</head>

<body>
    <div>我是div标签我一个人单独占一行</div>
    <div>我是div标签我一个人单独占一行</div>
    <span>新浪</span>
    <span>搜狐</span>
    <span>百度</span>
</body>

</html>

⑦图像标签和路径

1.图像标签

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

单词image的缩写，意为图像。

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

（属性：属于这个图像标签的特性）

其他属性：

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>

<body>
    <h4>图像标签的使用</h4>
    <img src="微信图片_20240702170121.png" />

    <h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
    <img src="微信图片1_20240702170121.png" alt="小远编程" />

    <h4>title 提示文本 鼠标放在图像上，提示的文字：</h4>
    <img src="微信图片1_20240702170121.png" title="人民日报" />

    <h4>width 给图像设定宽度：</h4>
    <img src="微信图片_20240702170121.png" width="300" />

    <h4>height 给图像设定高度</h4>
    <img src="微信图片_20240702170121.png" height="500" />

    <h4>border 给图像设定边框</h4>
    <img src="微信图片_20240702170121.png" width="300" height="500" border="15" />
</body>

</html>

注意点:

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

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

3）属性采用键值对的格式，即key="value"的格式---属性 = "属性"

2.路径

页面中的图片会非常多，通常会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用"路径"的方式来指定图像文件的位置。

路径可以分为：1.相对路径 2.绝对路径

1）相对路径

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

（即图片相对于HTML页面的位置）

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

<body>
    <img src="微信图片_20240702170121.png" />
</body>

<body>
    <img src="images/微信图片_20240702170121.png" />
</body>

<body>
    <img src="../微信图片_20240702170121.png" />
</body>

2）绝对路径

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

例如：电脑上的：C:\Users\18264\Desktop\前端入门教程\微信图片_20240702170121.png

完整的网络地址：https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png

<body>
    <img src="https://i0.hdslb.com/bfs/archive/c8fd97a40bf79f03e7b76cbc87236f612caef7b2.png" />
    <img src="C:\Users\18264\Desktop\前端入门教程\微信图片_20240702170121.png" />
</body>

⑧超链接标签

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

1.链接的语法格式

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

(单词anchor的缩写，意为:锚。)

两个属性的作用如下：

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

2.链接的分类

（1）外部标签，例如<a href="https://www.baidu.com 百度/>

（2）内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可,例如<a href="index.html">首页</a>

(3）空链接：如果没有确定空链接目标时，<a href="#">首页</a>

(4）下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

（5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

（6）锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>

<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <a href="http://www.qq.com" target="_self">腾讯</a>
    <h4>2.内部链接</h4>
    <a href="08-图像标签.html" target="_blank">人民日报</a>
    <h4>3.空链接：#</h4>
    <a href="#" target="_blank">网页地址</a>
    <h4>4.下载链接：地址链接的是文件 .exe或者是zip等压缩包形式</h4>
    <a href="微信图片_20240702170121.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="微信图片_20240702170121.png"></a>
</body>

</html>

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

①注释

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

HTML中的注释以""结束

（一句话：注释标签里面的内容是给程序员看的，这个代码是不执行并且不显示到页面中的）

<body>
    <!-- 我想喝霸王别姬 -->
</body>

（添加注释是为了更好地解释代码的功能，便于开发人员理解和阅读，程序是不会执行注释内容的）

②特殊字符

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

特殊字符	描述	字符的代码
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方	&sup2
³	立方	&sup3

<body>
    &lt; p &gt;
</body>

标签：标签,HTML,图像,页面,链接,属性
From： https://blog.csdn.net/sys19897976523/article/details/140433935

一.HTML语法规范

①基本语法概述

②标签关系

二.HTML基本结构标签

①第一个HTML页面

②基本结构标签总结

三.VS code工具生成骨架标签新增代码

①文档类型声明标签

②lang语言种类

③字符集

四.HTML常用标签

①标签语义

②标题标签

③段落标签

④换行标签

⑤文本格式化标签

⑥`<div>`和`<span>`标签

⑦图像标签和路径

1.图像标签

2.路径

1）相对路径

2）绝对路径

⑧超链接标签

1.链接的语法格式

2.链接的分类

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

①注释

②特殊字符

相关文章

赞助商

阅读排行

HTML标签（上）

一.HTML语法规范

①基本语法概述

②标签关系

二.HTML基本结构标签

①第一个HTML页面

②基本结构标签总结

三.VS code工具生成骨架标签新增代码

①文档类型声明标签

②lang语言种类

③字符集

四.HTML常用标签

①标签语义

②标题标签

③段落标签

④换行标签

⑤文本格式化标签

⑥<div>和<span>标签

⑦图像标签和路径

1.图像标签

2.路径

1）相对路径

2）绝对路径

⑧超链接标签

1.链接的语法格式

2.链接的分类

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

①注释

②特殊字符

相关文章

赞助商

阅读排行

⑥`<div>`和`<span>`标签