【前端二】HTML标签（上）

qq_45945278

已于 2022-09-22 12:15:02 修改

阅读量46

点赞数

文章标签： html

于 2022-04-08 21:37:58 首次发布

本文链接：https://blog.csdn.net/qq_45945278/article/details/124050174

版权

本文详细介绍了HTML的基本语法，包括标签的使用规则，如成对出现和单标签。讲解了HTML标签的关系，如包含关系和并列关系，并展示了HTML基本结构标签的实例。此外，还提到了开发工具VSCode的使用技巧，如创建HTML文件、文档类型声明、语言种类定义和字符集。重点讲述了HTML常用标签，如标题、段落、文本格式化、图像和超链接的用法，以及路径和链接类型。最后，介绍了HTML中的注释和特殊字符。

摘要由CSDN通过智能技术生成

1.HTML语法规范

所有标签都包含在<>里，成对出现<></>
单标签<br />

1.1基本语法概述

1.HTML标签是由<>包围的关键词，如<html>
2.HTML标签通常成对出现，例如<html></html>
3.有些特殊的标签必须是单个标签，例如<br />

1.2标签关系

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

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

并列关系

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

2.HTML基本结构标签

2.1第一个HTML页面

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

<html>/*页面最大的标签，根标签
	<head>/*头标签
		<title>我的第一个页面</title>
	</head>
	<body>/*文本内容
	我的山楂树之恋
	</body>
</html>

head: 在这里插入图片描述
title:

2.2基本结构标签总结

3.开发工具

vscode：
1.新建：ctrl+N
2.保存为.html文件
3.ctrl+放大，ctrl-缩小
4.！（英文）就可以生成骨架
5.右键打开网页

3.1文档类型声明标签

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

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页。
注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。
2.<!DOCTYPE>不是一个html标签，它就是文档类型声明标签。

3.2lang语言种类

1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页。
对文档现实来说，定义为英文也可以显示中文，。。。。

3.3字符集

字符集是多个字符的集合。以便计算机能够识别和存储各种文字
在标签中，可以通过标签的charset属性来规定HTML文档应该使用哪中字符编码。

<meta charset="UTF-8" />

GB2312:简体中文
BIG5：繁体中文
GBK：包含简体和繁体
UTF-8：万国码

4.HTML常用标签

4.1标签语义

标题标签：
段落标签：

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

<h1>我是一级标题</h1>/*h-head

重要性递减
特点：
1.文字加粗，字号变大
2.一个标题独占一行

4.3段落和换行标签(重要)

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

<br />/*换行

4.4文本格式化标签

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

重点加粗和倾斜

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

大盒子<div>
小盒子<span>

<div>

这是头部

<span> 今日价格

<div>这是头部</div>/*div表示分区，分割
<span>今日价格</span>/*span表示跨度，跨距

特点：
1.<div>标签用来布局，但是一行只能放一个
2.<span>标签用来布局，一行可以放多个

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

1.图像标签

<img src="图像URL" />/*单标签

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

图像标签的属性：

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

注意：
1.属性之间用空格隔开

2.路径（铺垫）

目录文件夹：普通文件夹，只是存放我们做页面所需要的素材根目录：打开目录文件夹的第一层

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

4.7超链接标签（重点）

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
1.链接的语法格式
2.链接的分类

1.链接的语法格式

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

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

2.链接分类

1.外部链接，例如

在这里插入图片描述
2.内部链接：直接连接内部页面的名称即可
3.空连接：#
4.下载链接：文件或压缩包
5.网页元素链接：文本、图像、表格、音频、视频等
6.锚点链接：可以快速定位到页面中的某个位置，

	·在连接文本的href属性中，设置属性值为#名字的形式，如`<a href="#two">第2集</a>`
	·找到目标位置标签，里面添加一个id属性=刚才的名字，如`<h3 id="two">第2集j介绍</h3>`

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

5.1注释

注释 快捷键 ctrl+/

5.2特殊字符

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

qq_45945278

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端二】HTML标签（上）

1.HTML语法规范所有标签都包含在<>里，成对出现<></>单标签1.1基本语法概述1.HTML标签是由<>包围的关键词，如2.HTML标签通常成对出现，例如3.有些特殊的标签必须是单个标签，例如1.2标签关系双标签关系可以分为两类：包含关系和并列关系包含关系<head> <title></title></head>并列关系<head></head>&lt
复制链接

扫一扫