2.HTML标签（上）_在下面的html代码段中,属于兄弟关系的元素有()-CSDN博客

本文链接：https://blog.csdn.net/sss_white/article/details/119081698

HTML标签（上）

目标

标签的书写注意规范

HTML骨架标签

超链接标签

图片标签 alt和title的区别

相对路径的三种形式

1、HTML语法规范

标签关系

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

1.包含关系：一个标签里再包含另一个标签嵌套（父子关系）

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

2.并列关系（兄弟关系）

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

2、HTML基本结构标签

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

HTML页面也称HTML文档

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        你我之间，黑马洗练，月薪过万，一飞冲天
    </body>
</html>

标签名	定义	说明
	HTML标签	页面中最大的标签，称为根标签
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	网页顶部标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

页面的头部标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Y7irPoR-1629025904243)(C:\Users\PXQ\AppData\Roaming\Typora\typora-user-images\image-20210721170620964.png)] 网页标题文字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LIHVZyiG-1629025904245)(C:\Users\PXQ\AppData\Roaming\Typora\typora-user-images\image-20210721170620964.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QsvQq2cA-1629025904246)(C:\Users\PXQ\AppData\Roaming\Typora\typora-user-images\image-20210721175818345.png)]

3、开发工具

1.VS Code的使用

D:\桌面\前端案例\03-vscode创建页面.html

★ 创建的新文件先保存为.html文件

！快速生成页面骨架

2.VS Code插件安装

插件	作用
Chinese(Simplified)Language	中文（简体）语言包
Open in Browser	右键选择浏览器打开html文件
Auto Rename Tag	自动重命名配对的HTML/XML标签
CSS Peek	追踪至样式

3.VSCode工具生成骨架标签新增代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    写代码真好
</body>
</html>

1、<!DOCTYPE> 标签

2、lang语言

3、charset字符集

1.文档类型声明标签

文档类型声明，作用：告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>//当前页面采取的是HTML5版本来显示页面

注意：

1、 <!DOCTYPE>声明位于文档最前面的位置，处于标签之前

2、 <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

2.lang语言种类

用来定义当前文档显示的语言，英文网页、中文网页

<html lang="en">//language  English

en 英语 zh-CN 中文

定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎（百度、谷歌等）有作用：翻译页面

3.字符集

存储各种文字，以便计算机识别和存储文字

<meta charset="UTF-8"

charset的值：GB2312（简体中文）、BIG5（繁体中文）、GBK（包含简体和繁体）、UTF-8（万国码，基本包括了全世界所有国家需要用到的字符）

采取UTF-8来保存文字，必须写，如果不写会引起乱码的情况。写"UTF-8"

4、HTML常用标签

标签语义：标签的含义

添加语义标签可让页面结构更清晰

1.标题标签🔺

-

6个等级

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

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

标签语义：作为标题使用

特点：

加了标题的文字加粗，字号也会依次变大
一个标题独占一行

2.段落标签🔺

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

p, paragragh的缩写，段落

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落与段落之间保有空隙

3.换行标签🔺

<br />  或者  <br>

🔸强制换行

特点：

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

4.文本格式化标签

加文字效果：粗体、斜体、下划线

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

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

5.< div >和 < span > 标签

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rLBGVFdv-1629025904249)(2.HTML标签（上）.assets/image-20210723174856647.png)]

用来布局网页，盒子里可以放图片、文字

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

div：division的缩写，分割、分区 span：跨度、跨距

特点：

标签用来布局，一行只能放一个

大盒子

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

6.图像标签和路径🔺

1、图像标签

在HTML标签中，标签用于定义HTML页面中的图像，单标签，image图像

<img src="图像URL" /> / 可以不写

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

图片必须和网页文件放在同一个文件夹中

文件后缀名也要写上

属性

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

width和height只修改一个即可，另外一个会同比缩放

注意

图像标签可以拥有多个属性，必须写在标签名img后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开
属性采取键值对的格式，即key = "value"的格式，属性 = “属性值”

2、路径

目录文件夹：就是普通文件夹，里面存放做页面所需的相关素材，比如html文件、图片等

(2)VSCode打开目录文件夹

文件 - 打开文件夹选择目录文件夹，后期方便管理文件

也可将目录文件夹直接拖拽到vscode中

绝对路径

绝对路径：是指文件的绝对位置，通常从盘符开始

<img src="D:\桌面\前端案例\img.jpg" /> 电脑不同，路径不同，此路径只在我的电脑上试用，别人电脑则找不到该图片（不推荐）

或者完整的网络地址<img src="https://www.ideaxcollege.cn/static/images/banner/1.png" /> 网络上的绝对地址（路径），地址唯一，需要网络

相对路径

相对路径：图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图片和html文件在同一级目录，
下一级路径	/	图片在html文件的下一级，
上一级路径	…/	图片在html文件的上一级，

7.超链接标签🔺

定义超链接，作用是从一个页面链接到另一个页面

1、链接的语法规范

< a > 文本或图像 </ a>

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

文字或图像具有超链接功能

anchor:锚

属性	作用
herf	(必须属性) 链接目标的url地址
target	打开链接页面的方式，其中_self（当前窗口打开页面）为默认值， _blank在新窗口中打开

2、链接的分类

外部链接，外部网站的链接地址，< a href=“http://www.baidu.com”> 百度 </ a>

网址语法要求：http://外部地址
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，

< a href=“gongsijianjie.html” target="_blank"> 公司简介 </ a>
空链接：如果当时没有确定链接目标时，< a href="#"> 首页 < /a>

还没有做好的网站，有地址后再更换
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

< a href=“img.zip”>下载文件</ a>
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：当点击链接时，可以快速跳转到该页面中的某个位置
- 1、写链接：herf属性值为"#名字", <a herf = "#two"> 第二集 </a>
- 2、找到目标位置标签，里面添加一个id属性 = 名字，<h3 id="two">第二集介绍 </h3>