HTML——基本结构及常用标签

<!DOCTYPE html>  -->表示当前的网页支持html5标准
<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>Document</title> -->网页标题
</head>
<body>
				
</body>
</html>

2、标签分类

所有用'<>'括起来的元素都称为标签(标记)

A、双标签：是指由开始和结束两个标签符组成的标签。<标签名>内容</标签名>

B、单标签：是指用一个标签符号即可完整地描述某个功能的标签。< 标签名 />

*标签的属性是放在起始标签中

例如："<html lang='en'>"中'lang'表示的html标签的属性

三、HTML的常用标签

1、文本标签：

A、标题标签：<hn>文本</hn> , n的取值在1~6之间，数字越大字体越小,可以自动换行

 B、段落标签：内容,会自动换行

 C、显示文本：内容,不会自动换行

 D、水平线: <hr 属性="属性值" />

水平线隔开，使得文档结构清晰，层次分明。

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center三种值，默认为center，居中对齐显示。
size	设置水平线的粗细	以像素为单位，默认为2像素。
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb(r,g,b)。
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。

E、居中标签：<center></center>

2、文本样式标签：

文本内容
eg：

文本样式标签属性：

属性名	含义
face	设置文字的字体，例如微软雅黑、黑体、宋体等
size	设置文字的大小，可以取1到7之间的整数值
color	设置文字的颜色

3、文本格式标签：

标记	显示效果
<b></b>和<strong></strong>	文字以粗体方式显示（XHTML推荐使用strong）
<i></i>和<em></em>	文字以斜体方式显示（XHTML推荐使用em）
<s></s>和<del></del>	文字以加删除线方式显示（XHTML推荐使用del）
<u></u>和<ins></ins>	文字以加下划线方式显示（XHTML不赞成使用u）

4、语义标签：只表示某种特定的含义

A、mark：高亮显示某些字符

B、cite：创建一个引用，用于对文档引用参考文献的说明，使用了该标签，被标注的文档内容将以斜体的样式展示在页面中。

5、换行标签： 

6、特殊字符：

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

7、图像标签

7.1、常见的图像格式

GIF：支持动画、采用无损压缩、支持透明处理。通常用来做Logo、色彩相对单一的图像

           PNG：体积小、支持透明、不支持动画、颜色过渡平滑

           JPG(JPEG)：支持的颜色多(超过256种)、体积大、采用有损压缩技术

7.2、图像标签：<img />

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left	将图像对齐到左边
	right	将图像对齐到右边
	top	将图像的顶端和文本的第一行文字对齐，其他文字居图像下方
	middle	将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方

7.3、路径：文件的存储位置

A、绝对路径：从盘符开始的路径或完整的网络路径

比如：E:\deyun前端\9月新班\2021-9-25\code\images\7.png

http://localhost:8080/code/images/7.png

B、相对路径：从当前文件夹开始的路径，通过层级关系来描述文件的位置

在使用相对路径时，我们使用一个点（.）来表示当前目录，

使用两个点（..）来表示当前目录的父目录。

   ./ ：代表当前文件夹(目录)

(对于相同目录下的文件，直接写文件名即可)

../：代表当前文件夹的上一级文件夹(目录)