HTML5基础标签有哪些,HTML5基础标签

HTML标签

HTML是标记语言，里面的所有功能都是通过标签来实现的，可以说标签就像一个个“砖块”，H5前端开发工程师就像是建筑工人，用这些“砖块”按照一定规则组合起来建造成网页。

想要造一栋HTML大楼，不了解各个标签是不行的。下面就让我们来简单认识这些常用标签。

1、标签的简单介绍

1.1 单标签、双标签

单标签：单个出现，以⾃身单个标签标识结束

双标签：成对出现，以自身第二个标签标识结束

1.2 ⾏内标签、块级标签、行内块标签

行内标签：可与其他行内元素并列一行；不能设置宽度和高度，高度是行高(line-height：100px；可设置)，宽度是内容的总宽度；默认文字会被放在中间显示。例：

块级标签：拥有⾃身宽⾼，通常独⾃占据⼀⾏独占一行；如果不设置宽度，会默认占满父元素的百分之百；可以当做容器包含其他标签。例：

行内块标签：可以设置宽度高度等样式；可以和其他元素并排显示，现在只有input标签符合行内块元素；

1.3 单⼀标签、组合标签

单⼀标签：单独出现，表示具体的功能或展示具体的内容。

组合标签：配合使⽤，才能产⽣相应的内容与效果。例：

1.4 标签大小写书写规范

html5中的标签不区分大小写，都可以识别，不过这里建议标签全部小写。

因为js只能识别小写，为了之后对接js，标签最好全部小写。

2、head 中的标签

head是网页的头部，里面放置的代码是用来对网页进行相关设置

2.1  meat  标签

在网页中meat标签最常用的设置是用来设置字符集，字符集设置错误将会导致网页打开乱码。

2.2 title 标签

网页标题

title 标签里是网页的标题，如下图所示：

显示在浏览器标签栏中

这里需要注意的一点是 

需要写在    标签后

meta 标签设置字符集，若title写在前，则网页运行  title  时还没有设置字符集导致标题乱码。

2.3 style 标签

*{

margin:0;

padding:0;

}

style标签是用来在head标签中设置CSS样式，美化修饰网页。

2.4 script 标签

script 标签可以在其中写入js代码

var a = 10;

var b = 20;

console.log(a+b);

当然也可以通过 script 标签来引入外部的js文件

2.5 link 标签

通过 link 标签可以引入外部的 CSS 样式文件

2.6 ico 图标

在网页标题前引入ico图标，如下图标签栏前的百度小图标

3、body 中的标签

body是网页的主体，网站上所能见到的内容基本都在body中，大部分标签也都是在body中使用。

3.1 h1-h6 标题标签

h1-h6 标签是标题标签。数字表示标题的大小，1最大，6最小。

3.2 p 段落标签

块级元素。段落标签，内部通常放置文本

3.3 span 标签

行内元素 。类似 p 标签，span 里同样用来放置文本，。

注意，span标签可以放在 p 标签内，但 p 标签里不能放 span 标签

3.4 hr 水平线

---

hr 标签在网页中产生一条水平线

3.5 del 删除线

del标签中的文字字中间会被划上一条横线

3.6 b 加粗

b 标签中的文字会被加粗

3.7 strong 加粗强调

strong 标签中的文字会被加粗，并且强调

3.8 I 倾斜文本

I 标签中的文字会被倾斜，在网页中显示斜体

3.9 em 倾斜强调

em 标签中的文字会被倾斜，并且强调

3.10 pre 预格式文本

pre标签表示预格式文本。由于在html会有多个空格会被合并成一个，回车换行会失效等问题，导致网页布局混乱。

pre标签内的内容可以原样显示到网页中

3.11 br 换行

br标签表示换行，相当于enter回车键

3.12 ul li 无序列表

ul li 标签表示无序列表，类似于表格，可以使文字等以清单的方式显示

3.13 ol li 有序列表

ol li 标签表示有序列表，类似于表格，可以时文字等以清单的方式显示，并且会在最前面标注序号，1、2、3、4等

3.14 img 图片

img标签表示在网页中引用图片

3.15 a 超链接

a 标签表示在网页中添加超链接，a标签中点内容就会有超链接效果

3.16 div 网页分割

div标签常用于切割划分网页，把网页切割成各个部分，方便网页开发。

3.17 table tr th td 表格标签

table标签是在网页中插入表格。tr表示行，td表示单元格。表格还常用于网页的布局

3.18 form 标签 & input标签

表单标签：用于收集用户输入的信息，并提交到服务器。

input标签：可设置为输入框，按钮等

4、实体字符

由于标签字符的特殊性，、空格、等特殊符号。会被浏览器误认成html语言的标签，不会在网页中显示。

所以为了在网页中正常使用这些字符则需要用到实体字符

下面介绍一些常用实体字符

实体字符

字符含义

网页中显示效果

空格符号

&li;

小于号

<

>

大于号

>

©

版权符号

@

¥

人民币符号

¥

&

和

&

®

注册商标

®

™

商标

™

×

乘号

×

÷

除号

÷

本次的文章就分享到这，如果有错误欢迎评论区指出。