HTML是什么？
HTML：超文本标签(标记)语言
功能：通过HTML标签对网页的文本，图像，声音等内容进行描述，而且文本中还包含了超链接，可以将网站，网页和各个网页元素链接起来，构成丰富的网站
HTML的基本格式
1 |
|
<!DOCTYPE>
位置：文档最前面
作用：说明当前文档使用那种HTML或XHTML标准的规范。
<html> 根标签
位置：<!DOCTYPE>之后
作用：告诉浏览器器自身是一个HTML文档，包裹着文档内容
结构：<html> </html>
<head>头部标签
位置：紧跟<html>之后
作用：封装其他头部的标签
结构：<head></head>
<body>主体标签
位置：与<head>并列
作用：浏览器中所有的文本图像，音频和视频等都位于此。
标签
放在<>内，表示某个功能的编码命令
1.标签的分类
双标签(体标签)
由开始和结束两个标签符号组成
结构：<标签名>内容</标签名>
单标签(空标签)
只用一个标签符
结构：<标签名 />
如：注释标签：
<!-- 这是一个注释 -->
注释标签内容会背浏览器忽略
2.标签关系
嵌套关系（包含关系）
一个标签里包含其他标签
并列关系（兄弟关系）
两个标签处于同一级
3.标签属性
作用：使标签提供更多的信息。如颜色，位置等
结构：<标签名 属性1="属性值1" 属性2="属性值2"> 内容</标签名>
注：多个属性之前用空格分开.
3.页面格式化标签
作用：使文章的结构清晰
位置：以下标签都位于主体<boby></boby>中
1.标题标签
作用：使网页具有语义化（语义化：赋予普通网页文本特殊的含义)
结构：<hn align="对齐格式">标题文本</hn>
n:取值为：1到6：代表1到6个等级的标题。
align：可选属性，指定对齐方向（默认为左，left：左，centre：中，right：右)
注：
1.浏览器会自动地在标题前后添加空行
2.标题很重要，搜索引擎会使用标题为你的网页的结构和内容编辑索引，所以<h1>标签常作为网站的logo
2.段落标签
作用：定义段落
结构：<p align="对齐方式"> </p>
3.水平线标签
作用：将段落与段落隔开
结构：<hr 属性="属性值"/>
hr常用属性表：
| 属性名 | 含义 | 属性值 |
|---|---|---|
| align | 对齐方式 | 默认：中，left：左，centre：中，right：右 |
| size: | 粗细 | 以像素为单位，默认为2 |
| color | 颜色 | 可用颜色英文名称 |
| width | 宽度 | 确定的像素值或浏览器窗口的百分比，默认100% |
4.换行标签
作用：强制换行
结构：<br/>
文档头相关标签
作用：设置页面的基本信息，如：页面的标题，作者等
1.页面标题标签<title>
作用：给页面取一个名字
结构：<title>轻松学习</title>
2.定义页面原信息标签<meta />
作用：定义元数据（关于数据的数据），不显示但可以被机器解析
常用于：指定字符集，页面描述，关键字，文档作者和视口设置浏览器（如何显示内容或重新加载页面)，搜索引（关键词）和其他网络服务会用到元数据
结构：<meta 属性="属性内容"/>
常用设置：
.一。<meta name="名称" content="值"/>
name:提供搜索内容的名称
content：对应的搜索内容值
用法：
1.设置网页关键字
例如：<meta name="keywords" content="信息"/>
2.设置网页描述 name=”description
3.设置网页作者 name=”author”
二。<meat http-equiv="名称" content="值"/>
http-equiv:属性提供参数类型
content：属性提供对应的参数值
用法：
设置页面自动刷新与跳转
例如：定义某个网页10秒后跳转至百度
<meta http-equiv=”refresh” content=”10;ur1=https://www.baidu.com/“>
3.文本样式标签
作用：用于设置文字的效果（如：字体，加粗，颜色）
结构：<font 属性=”属性值”>文本内容</font>
位置：<p></p>之间
常用属性
| 属性名 | 含义 |
|---|---|
| face | 设置字体，例如黑体，宋体 |
| size | 设置字体的大小，可以取1~7之间的整数值 |
| color | 设置字体的颜色,用英文标识，如red：红色 |
4.文本格式化标签
位置：放在<p></p>之间
常用的文本格式化标签
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字加粗 |
| <u></u>和<ins></ins> | 文字加下画线 |
| <i></i>和<em></em> | 文字斜体 |
| <s></s>和<del></del> | 文字加删除线 |
图像标签
图像格式
1.GIF格式：图形交换格式
特点：1.动画，2.透明背景，3.图形渐进（使图片渐渐显示在屏幕上），4.无损压缩（适合线条，图标和图纸）
2.PNG格式：包括PNG-8和真色彩（PNG-32)
特点：1.静态，2.支持Alpha透明(全，半，全不透明)，3.体积小。4
3.JPG格式：
特点：1.有损压缩，2.色彩丰富
图像标签<img/>
结构：<img src="图像URL"/>
src：只图像文件的路径和文件名，必备属性
<img />标签的常用属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| sir | URL | 图像的路径 |
| alt | 文本 | 图形不能显示使的替换文本 |
| title | 文本 | 鼠标指针悬停时显示的内容 |
| width | 像素值 | 图像的宽度 |
| height | 像素值 | 图像的高度 |
| border | 数字 | 图像边框的宽度 |
| vspace | 像素值 | 图像顶部和底部的空白（垂直边框） |
| hspace | 像素值 | 图形左侧和右侧的空白（水平边框） |
| align | “left” “right” “top” “middle” “middle” “bottom” | 对齐左边；对齐右边；图像顶端与文本第一行对齐其他文字居图像下发；图像的水平中线与文本第一行文字对齐，其他文字居图像下方；图形底部与文本第一行对齐，其他文字居图像下方。 |
图像的路径（相对和绝对）
1.绝对路径：网页的文件目录所在硬盘上的真正路径
2.相对路径：相对于当前文件的路径，有以下三种情况
- 图像文件和HTML文件在同一文件夹：只需输入图像文件的名称。如：<img src=”logo.gif”/>
- 图像文件位于HTML文件的下一级文件：输入文件名和文件夹名，之间用”/“隔开。
- 图像文件位于HTML文件的上一级文件夹：在文件名前加入”../“,如果是上两级，则”../../“，以此类推。如：<img src=”../logo.gif”/>
注：网页中不推荐使用绝对路径
特殊字符标签
数学公式，版权信息等包含特殊字符的文本
使用方式：直接在文本中输入即可自动替换
常用特殊字符表格
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| x | 称号 | × |
注：别忘记加”;”
