前端-HTML总结

---

前言

感觉堕落一段时间了，最近开始重新写博客了，准备重新学一学前端，有空自己搭个前后端分离的项目。

---

提示：这篇文章只是对html一些常用知识进行总结。

一、什么是html？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。是制作超级文本文档的简单标记语言，可以从一个平台移植到另一个平台，通常用于制作网页。Html是网页设计的基础。在网站结构中，静态网页被称为基于 HTML的网页。
静态页面和动态页面的区别在于：是否与服务器进行数据交互

二、html基本结构

标签	说明
html	整个网页从开始 到结束
head	head标签代表页面的“头”，定义一些特殊的内容，大部分内容游览器不可见
body	body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。

1.什么是标签？

html中的标签是指超文本标记语言标记标签，是HTML语言中最基本的单位，也是HTML最重要的组成部分，并且HTML标签的大小写是无关的（推荐使用小写，标签也叫元素）。

标签分类	说明	补充
一般标签	有开始符号和结束符号	可以在内部插入其他标签或文字
自闭合标签	只有开始符号没有结束符号	不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了

2.head里面的标签

head内部标签	说明	补充
title	定义网页的标题	游览器可见
meta	定义网页的基本信息	<meta charset="UTF-8">编码格式
style	定义css样式
link	链接外部CSS文件或脚本文件
script	定义脚本语言
base	定义页面所有连接的基础位置	基本很少用

注意：<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面。

我只是列举了一些很常用的标签或者属性、有一部分可能没有列出来，需要大家自己去了解。比如<meta http-equiv="refresh" content="6;url=http://139.196.86.183/"/>这个意思就是6秒后跳到指定页面。

三、html常用标签

1.文本标签

文本标签	中文	英文	分析
1	粗体标签	strong、b	strong标签和b标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性
2	斜体标签	i、em、cite	如果想要实现文本的斜体效果，尽量使用em标签，而不是i标签或cite标签。这也是因为em标签比其他两个标签的语义性更好
3	上标标签	sup	想要将某个数字或某些文字变成上标效果，只要把这个数字或文字放在标签内就可以了
4	下标标签	sub	想要将某个数字或某些文字变成下标效果，只要把这个数字或文字放在标签内就可以了
5	中划线标签	s	中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中。大家在电商网站购物时肯定经常见到这种效果。
6	下划线标签	u
7	大字号标签	big	于字体大小的改变，我们几乎不会用big标签和small标签来实现
8	小字号标签	small

2.块元素、行内元素

在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

序号	块元素	说明
1	h1 - h6	标题元素
2	p	段落元素
3	div	div元素
4	hr	水平线
5	ol	有序列表
6	ul	无序列表

行内元素可以与其他行内元素位于同一行，行内元素内部可以容纳其他行内元素。

序号	行内元素	说明
1	strong	粗体元素
2	em	斜体元素
3	a	超链接
4	span	常用行内元素，结合CSS定义样式

3.特殊符号

html的特殊符号，我分成了两种，一种是常用的，另一种是不常用。

特殊符号	说明	代码
"	双引号（英文）	"
‘	左单引号	‘
’	右单引号	’
×	乘号	×
÷	除号	÷
>	大于号	>
<	小于号	&lt;
&	“与”符号	&amp;
—	长破折号	&mdash;
|	竖线	&#124;

特殊符号	说明	代码
§	分节符	§
©	版权符	©
®	注册商标	®
™	商标	™
€	欧元	€
£	英镑	£
¥	日元	¥
°	度	°

空格  
1个汉字约等于3个 。因此如果想要往p标签内加入2个空格，那么我们需要往p标签内加入6个 。

4.列表

列表共有3种：有序列表、无序列表和定义列表。
1、有序列表中，列表项之间有先后顺序之分。
2、无序列表中，列表项之间是没有先后顺序之分的。
3、定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。

列表	简介	语法	解释	属性
有序列表	有序列表中的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序	<ol><li>列表项</li> </ol>	ol，即ordered list（有序列表）；li，即list（列表项）。	type属性来改变列表项符号
无序列表	无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●	<ul> <li>列表项</li> </ul>	ul，即unordered list（无序列表）。li，即list（列表项）。	通过type属性来改变其样式
定义列表	定义列表由两部分组成：名词和描述	<dl> <dt>名词</dt> <dd>描述</dd> </dl>	dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）

有序列表type标签属性：

属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

无序列表type标签属性：

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

5.表格

名称	语法	解释
表格	table标签
标题	caption标签
行	tr标签	tr，指的是table row（表格行）
表头单元格	th标签	th，指的是table header cell（表头单元格）
单元格	td标签	td，指的是table data cell（表格单元格）

一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。它从语义上区分了表头、表身和表脚，方便分块来控制表格的CSS样式。

名称	属性	解释
合并行	rowspan	所谓的合并行，其实就是将表格相邻的N个行合并，指的是将“纵向的N个单元格”合并。
合并列	colspan	指的是将“横向的N个单元格”合并。

6.图片标签

	属性	解释
	img标签	显示图片

对于img标签，只需要掌握它的3个属性：src、alt和title。

img标签	属性	解释
	src	src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。
	alt	指定图片的提示文字，（图片不存在的时候）
	title	指定图片的提示文字，（存在图片时，放到图片上显示）

绝对路径和相对路径
绝对路径，指的是图片在你的电脑中的完整路径。
相对路径，指的是图片相对当前页面的位置
注意：在实际开发中，站内文件不管是图片还是超链接等，我们都是使用相对路径，几乎不会使用绝对路径。

7.图片

网页中，图片格式有两种：一种是位图(像素图)；另外一种是矢量图
1:位图，又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。

序号	图片格式	解释
1	jpg（或jpeg）	jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明
2	png	png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片
3	gif	gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的

总结一下：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

2矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。
矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）
矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略,网页中，很少用到矢量图，除非是一些字体图标。

对于位图和矢量图的区别`，我们总结有以下4点。
（1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
（2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。（3）位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
（4）网页中的图片绝大多数都是位图，而不是矢量图。

8.超链接

	属性	解释
	a标签	实现超链接

a标签	属性	解释
	href	表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。
	target	使用target属性来定义超链接打开窗口的方式
	title	指定图片的提示文字，（存在图片时，放到图片上显示）

超链接的范围非常广，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。

target属性取值

属性值	说明
_self	默认值，在原来窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

HTML中，超链接有两种：一种是外部链接；另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”,内部链接使用的都是相对路径，而不是绝对路径。

锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到当前页面的某一部分。

实现锚点链接，需要定义以下2个参数
1:id属性就是元素的名称，这个id名是随便起的（一般是英文）。不过在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。
2:a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。

9.路径

序号	描述	方法
1	html文件跟jpg文件(f盘)在不同目录下：	<img src="file:///f:/*jpg" width="300" height="120"/>
2	html文件跟jpg图片在相同目录下	<img src=".jpg" width="300" height="120"/>
3	html文件跟jpg图片在不同目录下	a、图片jpg在image文件夹中，html跟image在同一目录下：<img src="image/*jpg/"width="300" height="120"/>b、图片jpg在image文件夹中，html在connage文件夹中，image跟connage在同一目录下：<img src="../image/*jpg/"width="300" height="120"/>
4	如果图片来源于网络，那么写绝对路径	<img src="http://image.baidu.com/pcindexhot"/width="300" height="120"/>

10.表单

表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

	标签	说明
	form	表单
	input	单行文本框
	textarea	多行文本框
	select	下拉框
	option	下拉框内部标签

从外观上来划分
（1）单行文本框
（2）密码文本框
（3）单选框
（4）复选框
（5）按钮
（6）文件上传
（7）多行文本框
（8）下拉列表

1.form 标签

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

method属性取值有两个：一个是“get”，另外一个是“post”
get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多
form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。
enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

2.input 标签

input是自闭合标签，它是没有结束符号的。

text、password对应的值

属性	说明
value	设置文本框的默认值，也就是默认情况下文本框
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

radio，CheckBox对应的值

属性	说明
name	表示单选按钮所在的组名
value	表示单选按钮的取值
checked	表示默认选择

按钮

按钮种类	属性	说明
1	button	普通按钮
2	submit	提交按钮
3	reset	重置按钮

属性	说明
value	取值就是按钮上的文字

（1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。
（2）提交按钮一般都是用来给服务器提交数据的。
（3）重置按钮一般用来清除用户在表单中输入的内容。

加value和不加的区别
一般情况下，value属性取值跟后面的文本是相同的。之所以加上value属性，是为了方便JavaScript或者服务器操作数据用的。实际上，所有表单元素的value属性的作用都是一样的。

3.多行文本框

标签	说明
textarea	多行文本框

多行文本框使用的是textarea标签，而不是input标签
多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。

属性	说明
rows	行数
cols	列数

4.下拉列表

标签	说明
select
option	下拉列表内容

select 值

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

option 值

属性	说明
selected	是否选中
value	选项值

11.内嵌框架

iframe标签`
在当前页面再嵌入另外一个网页

属性	说明
src	链接页面的地址
width	宽度
height	高度

---