HTML：简述、特点及常用标签
HTML：语言简述
HTML:超文本标记语言，一种标识性语言。包括一系列标签，我们通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、表格、链接等等。
HTML：语言特点
1.HTML文件不需要编译，直接使用浏览器打开即可解析效果。因为在浏览器内部内置了解析引擎。
2.HTML文件的扩展名是.html或.htm。实际上，这两者只是写法上有差别，其他没有任何差别。
3.HTML由预定义好的标签组成，想要使用HTML,先要学习他的标签。
4.通常情况下标签由开始标签和结束标签组成，开始标签和结束标签之间的信息，叫做元素的内容体。
<font color="red">HelloWorld!</color>
5.HTML中的标签有一部分并没有结束标签，比如：
<input /> //表单元素标签
<br/> //换行
<hr/> //水平线
<img /> //图片
<option/> //下拉菜单项
在这些情况下，用/结尾。
6.HTML代码中的空格和换行会被忽略，多个空格会被解析为一个空格
7.HTML标签是有属性的，属性用于修饰标签效果，比如字体颜色、编码格式等等。
<标签名 属性名1= " 属性值1" 属性名2=" 属性值2"/>
<meta charset="UTF-8"> 文档的编码为utf-8
8.HTML标签可以包裹嵌套。
HTML:常用标签
注释标签
单/多行注释：<!--内容-->
快捷键：ctrl+/
标题标签
使用：
<h1>一级标题</h1>
<h2>二级标题</h2>
特点：
1.标题标签会自动换行，加粗。
2.标题的字体大小随着数字的增大而变小，范围1-6
水平线标签
使用：<hr/>
1.可以为水平线添加属性来自定义样式。
| 属性名 | 属性说明 |
|---|---|
| size | 定义水平线粗细 |
| color | 定义水平线颜色 |
| width | 定义水平线长度取值 |
2.颜色的设置方法有三种：
①用英文单词，比如：red，blue……
②#+六位十六进制表示法，比如：#FFC07B
③使用rgb函数，比如rgb（0,0,255,x),参数x（取值范围0-1）可以不加，用于调节透明度。
3.宽度设置有如下两种：
①给出具体的像素值（px）。
②给出占宽百分比。
字体标签
<font size="5" color="blue">爱吃板栗吖</font>
可以为其设置属性：
| 属性名 | 属性说明 |
|---|---|
| size | 定义字体大小（范围1-7，逐渐变大），默认3号 |
| color | 定义字体颜色 |
粗体&斜体标签
<b>内容体</b> //页面展示文字加粗效果
<i>内容体</i> //页面展示文字倾斜效果
段落标签
<p>第一段</p>
<p>第一段</p>
1.特点：与换行标签相比，段落标签使段落与段落之间有空白行，而换行标签并不会留出空行。
2.属性：
align：对齐方式
取值：
left ：左对齐
right：右对齐
center：居中对齐
换行标签
蒹葭苍苍，白露为霜。<br/>所谓伊人，在水一方。
空格标签
  //页面展示一个空格
图片标签
属性
| 属性名 | 属性说明 |
|---|---|
| src | 定义图片所在路径 |
| alt | 定义图片加载失败时的提示信息 |
| width | 定义图片宽度，单位：像素/百分比 |
| height | 定义图片高度，单位：像素/百分比 |
相对路径
<!--相对路径--> 不需要联网
<img src="/test/img/fengjing.jpg"/>
<img src="../img/fengjing.jpg"/> ../ 向上一级
绝对路径
<!--绝对路径--> 需要联网
<img src="https://img14.360buyimg.com/n0/jfs/t1/104518/14/13161/288800/5e55443cE33c2176e/41f55182bc7ec321.jpg" />
列表标签
有序列表
定义有序列表，可以指定type列表类型，取值：A、a、I、i、1
<!--有序列表-->
<!--不写type默认值就是1-->
<ol type="A">
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ol>
无序列表
定义无序列表，可以指定type列表类型为：disc实心圆、square方块、circle空心圆
<!--无序列表-->
<!--不写type默认值就是disc-->
<ul type="circle">
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
超链接标签
标签名：<a>
注意事项：
1.必须有内容体
2.必须有href属性
| 属性名 | 属性说明 |
|---|---|
| href | 定义需要连接并打开页面路径（可以是外网路径也可以是内网路径） |
| target | 定义以何种方式打开页面。取值：_blank:在新窗口打开。_self:当前页面打开 |
表格标签
表格作用
1.用来展示数据
2.用来做网页布局
表格结构标签
| 标签名 | 作用 |
|---|---|
| table | 定义表格容器 |
| tr | 定义行 |
| th | 定义列标题（加粗居中效果） |
| td | 定义列 |
| caption | 定义表格标题 |
常用表格属性
| 属性名 | 作用 |
|---|---|
| width | 定义表格宽度 |
| border | 定义表格外边框样式 |
| align | 定义对齐方式，可用在table、tr、td中 |
| rowspan | 定义跨几行 |
| colspan | 定义跨几列 |
| cellspacing | 设置单元格之间的间隔 |
| cellpadding | 设置单元格边框与文字之间的距离 |
| bordercolor | 边框颜色 |
| bgcolor | 背景颜色 |
| background | 背景图片 |
表格综合使用案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0px" align="center" width="450px">
<caption>三国武力值</caption>
<tr align="center">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>武力值</th>
</tr>
<tr align="center">
<td>001</td>
<td>吕布</td>
<td>男</td>
<td>800</td>
</tr>
<tr align="center">
<td>002</td>
<td>赵云</td>
<td>男</td>
<td rowspan="2">700</td>
</tr>
<tr align="center">
<td>003</td>
<td>马超</td>
<td>男</td>
</tr>
<tr align="center">
<td>总武力</td>
<td colspan="3">1500</td>
</tr>
</table>
</body>
</html>
