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;
小于号
<
>
大于号
>
©
版权符号
@
¥
人民币符号
¥
&
和
&
®
注册商标
®
™
商标
™
×
乘号
×
÷
除号
÷
本次的文章就分享到这,如果有错误欢迎评论区指出。
HTML5基础标签有哪些,HTML5基础标签相关推荐
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- HTML5的基础知识的梳理及常用标签
HTML5的基础知识的梳理及常用标签 1.HTML5的介绍 前端:展示页面.与用户交互 - HTML 后端:数据的交互和传递 - JavaEE/JavaWeb 1.前端开发的工作模式 网页的组成部分( ...
- html5变动标签新写法,Html5新标签解释及用法
Html5新标签解释及用法 发布时间:2012-02-17 22:50:45 作者:佚名 我要评论 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1. ...
- html5语义化标签 加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...
- html中什么是围堵标签,HTML回顾(基础标签)
在对HTML进行回顾之前我们先对web的相关知识进行讲解 JavaWeb:使用Java语言开发基于互联网的项目 软件架构: C/S: Client/Server 客户端/服务器端:在用户本地有一个客户 ...
- 前端基础第一天:HTML常用标签知识点
学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径的使用 1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...
- 【HTML5】HTML语法和基本常用标签(字符集)
一.HTML语法规则 HTML 标签是由尖括号包围的关键词,例如<html>. 围堵标签(双标签): 有开始标签和结束标签.如 <html> </html> 自闭合 ...
- HTML基础之常用标签第二篇:有序无序标签,以及框架标签
上一篇聊了一些HTML中的一些基础标签,现在开始再聊HTML中的一些其它标签,比如有序无限标签,还有一些框架标签.表单标签涉及内容有点多,后面再来一篇. li <li> 标签定义列表项目. ...
- html5才有的标签是什么意思,html5header标签是什么意思?html5header标签的用法详解(附实例)-...
本篇文章主要的向大家介绍了关于html5 header标签的元素的基本介绍,和header标签的用法实例解析.下面就让我们一起来看看这篇关于html5 header标签的文章吧 一.首先我们来说说ht ...
最新文章
- binlog流程 mysql_小米 MySQL 数据实时同步到大数据数仓的架构与实践
- C#隐藏手机号中间四位为*
- 9个用于构建容错系统的开源工具
- Java标签Label,如何不使用continue和break跳出循环
- 第二阶段_第二小节_C#调试
- 201114阶段二qt自定义图元类
- 如何用python写数值运算_如何理解Python的数值运算?
- svg操纵方案 基于 D3 还是 angular?
- 笔记5 | 监听scroollview、listview、gridview页面滑动,判断是否滑动到顶部以及底部...
- HIbernate Session 线程安全的问题
- 第十二章 采购管理 采购合同类型以及其区别 合同类型与风险分担 自制与外购分析 招标文件 工作说明书(SOW) 工作大纲 (TOR) 投标人会议 采购谈判 检查 审计 索赔管理 采购合同争议解决方式对
- ps还原上一步快捷键,ps返回上一步快捷键是什么
- java——阿里云短信工具类
- 数据结构导论 笔记整理
- 检测到 Mac 文件格式: 请将源文件转换为 DOS 格式或 UNIX 格式
- BUCT 程序设计基础第三篇20~30算法题答案(上)
- 《程序是怎么跑起来的》第五章学习笔记
- Base编码(贝斯家族)
- Java学习-数据操作高级篇
- docker 镜像使用
热门文章
- [解决]Converting circular structure to JSON
- 新知实验室 TRTC实时音视频
- Sentiment Word Aware Multimodal Refinement for MultimodalSentiment Analysis with ASR Errors
- linux作为网络防火墙,如何用linux做防火墙
- 语义分割之边缘准确率提升
- 嵌入式开发工具介绍与下载
- app被Rejected 的各种原因
- 人生没有白读的书,每一本都算数~
- VBS 请求WebAPI接口_从零开始实现简单的webapi框架【Golang 入门系列十一】
- 【个人记录 | UNet | 整理ing】