HTML：简述、特点及常用标签_html技术的特点及功能-CSDN博客

本文链接：https://blog.csdn.net/ye398091/article/details/105198840

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/>所谓伊人，在水一方。

空格标签

&nbsp   //页面展示一个空格

图片标签

属性

属性名	属性说明
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>