文章目录
前言
感觉堕落一段时间了,最近开始重新写博客了,准备重新学一学前端,有空自己搭个前后端分离的项目。
提示:这篇文章只是对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 | 高度 |