文章目录
前言
感觉堕落一段时间了，最近开始重新写博客了，准备重新学一学前端，有空自己搭个前后端分离的项目。
提示：这篇文章只是对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的特殊符号，我分成了两种，一种是常用的，另一种是不常用。
| 特殊符号 | 说明 | 代码 |
|---|---|---|
| " | 双引号（英文） | " |
| ‘ | 左单引号 | ‘ |
| ’ | 右单引号 | ’ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| > | 大于号 | > |
| < | 小于号 | < |
| & | “与”符号 | & |
| — | 长破折号 | — |
| | 竖线 | | |
| 特殊符号 | 说明 | 代码 |
|---|---|---|
| § | 分节符 | § |
| © | 版权符 | © |
| ® | 注册商标 | ® |
| ™ | 商标 | ™ |
| € | 欧元 | € |
| £ | 英镑 | £ |
| ¥ | 日元 | ¥ |
| ° | 度 | ° |
空格
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 | 高度 |
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
