HTML标签（上）

最新推荐文章于 2024-05-21 18:11:13 发布

zzaaa 1

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量177

点赞数 1

分类专栏：前端笔记文章标签： html html5 前端

本文链接：https://blog.csdn.net/qq_58782226/article/details/121698978

版权

前端笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键词，例如
HTML标签通常是成对出现的，例如和，我们称双标签。标签中的第一个标签是开始标签，第二个是结束标签
有些特殊的标签必须是单个标签，例如
我们称为单标签

标签关系

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

包含关系

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

并列关系

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

HTML基本结构标签

第一个HTML网页

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

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

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

<!DOCTYPE>标签

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

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML 5版本来显示网页

lang语言种类

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

en定义语言为英文
zh-CN定义语言为中文
简单来说，定义为en就是英文网站，定义为zh-CN就是中文网站

字符集

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

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

<meta charset="UTF-8"/>

UTF-8被称为万国码，上面语法是必须要写的代码，否则可能引起乱码的情况

HTML 常用标签

1. 标题标签 < h1 >-< h6 > (重要)

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

2. 段落标签 < p > < /p >

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

段落和段落之间保有空隙

3. 换行标签

< br />

4. 文本格式化标签

语义	标签	说明
加粗	或	更推荐语义更强烈
倾斜	或	更推荐语义更强烈
删除线	或	更推荐~~语义更强烈~~
下划线	ins>或	更推荐语义更强烈

5. 没有语义的标签

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

<div>标签用来布局，一行只能放一个，大盒子

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

6. 图像标签和路径

(1)图像标签

<img scr="图像URL"/>

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

(2)路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速找到，因此我们需要一个文件夹来管理他们。

相对路径

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

简单来说，图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像路径位于HTML文件同一级如
下一级路径	/	图像位于HTML文件下一级如
上一级路径	…/	图像文件位于HTML文件上一级如

绝对路径

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

例如：“https://www.csdn.net/” 或“C:\Users\Desktop\前端学习代码\day2 案例”

7. 超链接标签（重点）

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

(1)链接的语法格式

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

文本或图像

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

(2)链接分类

外部链接，例如：百度

<a href="http://www.baidu.com">百度</a>

内部链接：网站内部页面之间的相互链接。

直接链接内部页面名称即可。

例如：首页
```
<a href="index.html">首页</a>
```
空链接：如果当时没有确定链接目标时，先用空链接代替

<a href="#">首页</a>

下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为 #名字的形式，如

<a href="#two">第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如

<h3 id="two">第二集介绍</h3>

HTML中的注释和特殊字符

注释

HTML中的注释以” “结束

快捷键：Ctrl + /

特殊字符

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

重点记住：空格，大于号，小于号

zzaaa 1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML标签（上）

HTML语法规范基本语法概述HTML标签是由尖括号包围的关键词，例如HTML标签通常是成对出现的，例如和，我们称双标签。标签中的第一个标签是开始标签，第二个是结束标签有些特殊的标签必须是单个标签，例如我们称为单标签标签关系可以分为两类：包含关系和并列关系包含关系<head> <title> </title></head>并列关系<head></head><bod
复制链接

扫一扫