[前端入门]01-HTML标签(上）

最新推荐文章于 2025-04-07 11:18:24 发布

莯风

最新推荐文章于 2025-04-07 11:18:24 发布

阅读量121

点赞数 1

分类专栏：前端入门文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_47667221/article/details/112299842

版权

前端入门专栏收录该内容

2 篇文章

订阅专栏

1. HTML语法规范

1.1 基本语法概述

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

1.2 标签关系

包含关系

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

并列关系

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

2. HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签（骨架标签）

<html> 
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        这里是内容
    </body>
</html>

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

3. 网页开发工具

3.1 文档类型说明标签

<!DOCTYPE html>

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

注意：

<!DOCTYPE>声明位于文档最前面的位置，处于<html>标签之前。
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

3.2 lang语言种类

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

en定义语言为英语
zh-CN定义语言为中文

3.3 字符集

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

<meta charset="UTF-8" />

charset常用的值有：GB2312，BIG5，GBK和UTF-8

3.4 总结

以上三个代码vscode自动生成，基本不需要我们重写
<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面
<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站
<meta charset="UTF-8" />必须写，如果不写会乱码

4. 常用标签

4.1 标签语义

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

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

    <h6>标题标签</h6>

特点：

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

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

    <p>段落标签</p>

特点：

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

    <br />

特点：

<br />是个单标签
<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>这是头部</div>
    <span>今日价格</span>

特点：

<div>标签用来布局，但现在一行只能放一个<div>，大盒子
<span>标签用来布局，一行可以多个<span>，小盒子

4.6 图像标签和路径(重点)

1. 图像标签

    <img src="图像URL" />

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

2. 路径

相对路径
绝对路径

4.7 超链接标签(重点)

1. 链接的语法规范

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

2. 链接分类

外部链接
内部链接
空链接
下载链接
网络元素链接
锚点链接

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

5.1 注释

<!-- 注释内容 -->

5.2 特殊字符

特殊字符	描述	字符代码
	空格号
<	小于号	<
>	大于号	>
&	和号	&
¥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	\times;
÷	除号	÷
²	平方2	²
³	立方3	³