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;

小于号

<

>

大于号

>

©

版权符号

@

¥

人民币符号

¥

&

&

®

注册商标

®

商标

×

乘号

×

÷

除号

÷

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

HTML5基础标签有哪些,HTML5基础标签相关推荐

  1. css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识

    好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

  2. HTML5的基础知识的梳理及常用标签

    HTML5的基础知识的梳理及常用标签 1.HTML5的介绍 前端:展示页面.与用户交互 - HTML 后端:数据的交互和传递 - JavaEE/JavaWeb 1.前端开发的工作模式 网页的组成部分( ...

  3. html5变动标签新写法,Html5新标签解释及用法

    Html5新标签解释及用法 发布时间:2012-02-17 22:50:45   作者:佚名   我要评论 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1. ...

  4. html5语义化标签 加粗,html5标签 H5标签

    html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...

  5. html中什么是围堵标签,HTML回顾(基础标签)

    在对HTML进行回顾之前我们先对web的相关知识进行讲解 JavaWeb:使用Java语言开发基于互联网的项目 软件架构: C/S: Client/Server 客户端/服务器端:在用户本地有一个客户 ...

  6. 前端基础第一天:HTML常用标签知识点

    学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径的使用 1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...

  7. 【HTML5】HTML语法和基本常用标签(字符集)

    一.HTML语法规则 HTML 标签是由尖括号包围的关键词,例如<html>. 围堵标签(双标签): 有开始标签和结束标签.如 <html> </html> 自闭合 ...

  8. HTML基础之常用标签第二篇:有序无序标签,以及框架标签

    上一篇聊了一些HTML中的一些基础标签,现在开始再聊HTML中的一些其它标签,比如有序无限标签,还有一些框架标签.表单标签涉及内容有点多,后面再来一篇. li <li> 标签定义列表项目. ...

  9. html5才有的标签是什么意思,html5header标签是什么意思?html5header标签的用法详解(附实例)-...

    本篇文章主要的向大家介绍了关于html5 header标签的元素的基本介绍,和header标签的用法实例解析.下面就让我们一起来看看这篇关于html5 header标签的文章吧 一.首先我们来说说ht ...

最新文章

  1. binlog流程 mysql_小米 MySQL 数据实时同步到大数据数仓的架构与实践
  2. C#隐藏手机号中间四位为*
  3. 9个用于构建容错系统的开源工具
  4. Java标签Label,如何不使用continue和break跳出循环
  5. 第二阶段_第二小节_C#调试
  6. 201114阶段二qt自定义图元类
  7. 如何用python写数值运算_如何理解Python的数值运算?
  8. svg操纵方案 基于 D3 还是 angular?
  9. 笔记5 | 监听scroollview、listview、gridview页面滑动,判断是否滑动到顶部以及底部...
  10. HIbernate Session 线程安全的问题
  11. 第十二章 采购管理 采购合同类型以及其区别 合同类型与风险分担 自制与外购分析 招标文件 工作说明书(SOW) 工作大纲 (TOR) 投标人会议 采购谈判 检查 审计 索赔管理 采购合同争议解决方式对
  12. ps还原上一步快捷键,ps返回上一步快捷键是什么
  13. java——阿里云短信工具类
  14. 数据结构导论 笔记整理
  15. 检测到 Mac 文件格式: 请将源文件转换为 DOS 格式或 UNIX 格式
  16. BUCT 程序设计基础第三篇20~30算法题答案(上)
  17. 《程序是怎么跑起来的》第五章学习笔记
  18. Base编码(贝斯家族)
  19. Java学习-数据操作高级篇
  20. docker 镜像使用

热门文章

  1. [解决]Converting circular structure to JSON
  2. 新知实验室 TRTC实时音视频
  3. Sentiment Word Aware Multimodal Refinement for MultimodalSentiment Analysis with ASR Errors
  4. linux作为网络防火墙,如何用linux做防火墙
  5. 语义分割之边缘准确率提升
  6. 嵌入式开发工具介绍与下载
  7. app被Rejected 的各种原因
  8. 人生没有白读的书,每一本都算数~
  9. VBS 请求WebAPI接口_从零开始实现简单的webapi框架【Golang 入门系列十一】
  10. 【个人记录 | UNet | 整理ing】