首页 前端知识 HTML/HTML5常用标签大全

HTML/HTML5常用标签大全

2024-06-14 09:06:24 前端知识 前端哥 53 307 我要收藏

用于文档的声明

<!DOCTYPE>声明位于文档中的最前面的位置,处于文档声明

<!DOCTYPE>

<html>标签之前。用于告诉浏览器此文档的类型是什么。目前开发中常用的声明是<!DOCTYPE html>,表示声明-一个HTML5文档。

注意它不属于HTML标签,而是一条指令

html

每创建一个HTML文件, 都需要创建html标签对。除了声明文档类型的代码,其他的所有内容都存放在html标签对中

文档结构标签

head

定义文档的头部,用来包含网页的配置(例如网页的标题title,网页的基础配置meta都放在head中)

title

定义网页的标题,标题内容会显示在浏览器的标签栏上

body

定义网页的主体,例如:网页中的图片、文字等

元标签,用来表示网页的基础配置(如设置页面关键字和描

功能标签

meta

元标签,用来表示网页的基础配置(如设置页面关键字和描述,字符编码的声明)

h1

一级标题

h2

二级标题

h3

三级标题

h4

四级标题

h5

五级标题.

h6

六级标题

块级元素

(块级元素可以独ol占- -行,可以设置宽高。有关块级元素以及后面的内联元素,在学习了后面的css相关课程之后会有所了解) 

段落标签,用来描述网页中的段落内容
p
例如:一篇文章,每一个段落都可以使用一个p标签:或者一段比较长的文本,也可以使用即标签
用于页面区域的划分。它就像一个容器,用来放某一个区域的
内容
div
例如:整个网页分成头部、主体和尾部,那么头部、主体、尾
部的内容,要分别放在一个单独的dv中块级元素
ul
<ul>
li
<li>列表项一<li>
<li>列表项二<li>
</ul>

定义列表标签,配合dt和dd一起使用。示例:
<dl>
dl
<dt></dt>
<dd></dd>
</dl>
dt
定义列表中的项目
dd
描述列表中的项目
figure
定义一段独立的内容(不常用,了解即可)
figcaption
定义figure元素的标题(不常用,了解即可)

内联元素

form(内联元素不会自占一行,与其他内联元素在一行显示且宽高由内容撑起)

表单标签,里面包含很多搜集信息的表单元素,如输入框,复选框等

a

超链接标签,用于从一张页面链接到另一张页面

span

用来组合文档中的行内元素,一般用来包裹文字
b
字体加粗标签(不常用,了解即可)
u
下划线文本标签(不常用,了解即可)
i
斜体文本标签(不常用,了解即可)
strong
用于强调文本的标签,字体会加粗(不常用,了解即可)
内联元素
em
用于强调文本的标签,字体变成斜体(不常用,了解即可)
Mark
突出显示文本的标签,字体会有背景颜色,默认的是黄色(不常用,了解即可)

label
为input元素定义标注(标记)。label可设置for属性,用于把label绑定到另外一个元素。即让label的for属性值与input的id属性值相同时(id属性在后面会学到,暂时了解)。当点击label元素时,浏览器就会自动将焦点转到和标签相关的input元素上。
示例:
label
<label for=male>Male</label>
<input type=*text"id=*male"/>
(上面的例子建议练习并在浏览器中测试,能更直观的查看效果)


datalist
标签/控件,需要结合option标签使用(不常用,了解即可)


img
图片标签,用于在网页中嵌入图片


audio
音频标签,用于在页面中引入音频

video
视频标签,用于在页面中引入视频

input
定义用户可输入数据的输入字段。例如登录页面的用尸名和密码框,都是使用input标签


特殊的内联元素(可以设置宽高,但不独占一行)

select
定义下拉列表

option

(块元素,写在这里是因为它需要跟select标签一起使用)


定义下拉列表项,需要与select配合使用。option标签中,可以设置value值.示例:
<select>

<option value ="html">html</option>

<option value ='css">css</option>

<option value="JavaScript">JavaScript</option>
</select>


textarea
定义多行文本框,常用于留言框、备注框等

lang
htm标签的属性,用来标i记网页的语言:常见属性值
有:"en"和"zh';en代表英语,zh代表中文

charset

meta标签的属性,声明页面文档使用的字符编码类型
常用的属性值有:UTF-8和GB2312

type
修改无序列表与有序列表默认的前号样式(已被废弃,了解即
可)
1、ype属性写在无序列表中,属性值有:
(1)disc:默认值,实心圆样式
(2)circle:空心圆样式
(3)square:实心方块样式


2、type属性写在无序列表中,属性值有:
(1)1:默认值,数字编号
(2)A:大写英文编号
(3)i:小写罗马数字编号
(4):大写罗马数字编号
(5)a:小写英文编号

标签中的属性

start
有序列表的属性,指定列表编号的起始值,能修改有序列表标
签默认的前导样式(不常用,了解即可)

reversed
有序列表的属性,指定列表中的条目是否倒序排列的(不常用,了解即可)

src
(1)img标签的属性,指定图片的路径
(2)audio标签和video标签也可以设置src属性,指定音频.,视频的路径


alt
img标签的属性,用来对引入的图片进行文本描述


width
规定元素的宽度。此属性不常用,了解即可。后续学习c55课
程,会使用css样式设置元素宽度

height
规定元素的高度。此属性不常用,了解即可。后续学习cs5课
程,会使用css样式设置元素高度。注意,height或者width:如
果省略其中一个属性,则按照图片原始比例缩放图片
标签中的属性
href
标签属性,规定该链接要跳转到目标页面的地址


title
a标签属性,设置鼠标悬停的文本

target
a标签属性,规定在何处打开链接文档;如果属性值为blanki或
blank,会打开新的标签页


controls
audio/video的属性,用于显示播放控件


autoplay
audio/video的属性,设置音频/视频自动播放


loop
audio/video的属性,设置音频/视频可以循环播放

class
所有标签部可以使用这个属性用来定义元素的类名(后续学习css课程,会有详细的讲解)

action
form标签的属性,用来设置form表单的数据要提交到哪个地
址。提交到哪个地址,后端开发会告诉我们(不常用,了解一
下,提交数据常用ajax,后面会学习到的)


method
form标签的属性,用来设置表单的提交方式,常用的,有
get或post(不常用,了解即可)

rows
textarea标签属性,设置多行文本框有多少列
cols
textarea标签属性,设置多行文本框有多少行
list
datalist控件的属性,二者结合,可以与输入框绑定,为输入
框设置备选项(不常用,了解即可)
border
边框属性,可为table添加边框

border-collapse
css样式,通常给表格设置border-collapse:collapse;让表
格边框合并,成为单线表格:
table(
border-collapse:collapse;
表格标签的属性,实现跨列合并的效果,用来设置td或th跨列
colspan
合井
表格标签的属性,实现跨列合并的效果,用来设置td或th跨行
rowspan
合并
cellspacing
设置表格单元格内容与边框之间的间隙(不常用,了解即可)
cellpadding
设置两个单元格之间的间隙(不常用,了解即可)
&nbsp:
表示空格符号
&lt;
表示小于号“<“
转义字符
&gt
表示大于号“>“
&copy;
表示版权符号““
header
定义页头
nav
定义导航

区块标签
(html5新增的语义化标签)
main
定义页面的主体区域
aside
可用作文章的侧栏
article
可用作文章的内容

input元素中的属性

section
可用作文档的区域块,类似于dv

footer
定义页脚

type
用来定义表单元素的类型。属性值如下:
(1)text:单行文本输入框
(2)radio:单选按钮
(3)checkbox:复选框
(4)password:密码框
(5)button:
普通按钮,也可以直接写成button按钮,例

(6)submit:
提交按钮
(7)reset:重置按钮
(8)color:颜色控件(不常用,了解即可)
(9)date:日期控件
(10)time:时间控件
(11)email::电子邮件输入控件
(12)fle:文件选择控件,需要上传本地文件时,可以使用它
(13)number:表示数字输入控件
(14)range:表示拖拽条(不常用,了解即可)
(15)search:t表示搜索框(不常用,了解即可)
(16)u:表示网址输入控件

name
规定input元素的名称
checked
用来设置单选按钮、多选按钮的默认选中项
placeholder
表示提示文本,用来设置输入框的提示信息,告诉用户该输入
框需要输入什么内容
disabled
用于禁用linput元素,表示只读
max表示最大值,表示数字输入控件(即ype="number"的
max
input元素)允许输入的最大值
mi表示最小值,最小值,表示数字输入控件(即
min
type="number"的input元素)允许输入的最小值
表示必填字段,约束某项内容是必填项,比如规定”用户
require
名“项,是必填项

表格标签
table

tr
表格行
td
表格列
th
标签,可替代td标签,
用来设置表格的标题
表格标签
thead
定义表格头部
tbody
定义表格主体内容
tfoot
定义表格尾部
caption
设置表格的标题

内联文本语义标

abbr

HTML Abbreviation元素(<abbr>)表示,title属性为缩写提供扩展或描述。
用法:<abbr title=世界卫生组织'>WHO</abbr>成立于
1948年.

mark
HTML标记文本元素(<mark>)表示由于标记的段落在封闭上下文中的相关性或重要性而被标记或突出显示以供引用或注释的文本。
用法:<p>arry老师是<mark>最帅<mark>的A_A<p>
HTML Citation元素(<cite>)用于描述对所引用创意作品的

cite
引用,并且必须包含该作品的标题签
用法:<p><cite>Mona Lisa</cite>Painting by
Leonardo da Vinci</p >

small
独立于其风格表示,HTML<small>元素代表旁注和小字,
例如版权和法律材料。默认情况下,它会将其中的文本呈现小
一种字体大小,例如从小到x-smal.
用法:<p><small>:A very small piece of text..</small>
<p>

time
HTML<time>元素表示特定的时间段
用法:<p>The library can be visited from
<time>9:00</time>to <time>19:00</time>from
monday to friday.</p >

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12099.html
标签
评论
发布的文章

fastjson升级为fastjson2

2024-06-20 09:06:18

protobuf对象与JSON相互转换

2024-06-20 09:06:14

NVM 及 PNPM 安装

2024-06-20 09:06:01

npm有哪些插件包??

2024-06-20 09:06:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!