HTML元素大合集来了

前端进击者

2024-04-24 帮助1人

提示：刘亦菲们和彭于晏们会多看几分钟哦，精华都在后面呢

前言

随着web前端的不断发展，html则是地基，只有打好基础才能学后面的内容，俗话说：不积跬步无以至千里，本文就介绍了html的基础内容。

提示：如有不足，可发表评论给出建议，谢谢指导

一、基本格式

1、基本框架


<!doctype html>//文档类型声明
<html lang="zh-cn">//表示HTML文档开始
<head>//表示文档元数据开始
<meta charset="utf-8">//声明字符编码
<title>无标题文档</title>//设置文档标题
</head>//表示文档元数据结束
<body>//表示文档内容开始
</body>//表示文档内容结束
</html>//表示HTML文档结束

2、快捷注释

HTML 注释为:<!--注释语句-->
HTML注释的快捷键：Ctrl ？

3、head和body

head区:给浏览器做信息配置，“不可见区域”
body区：网页的主体部分，“可见区域”或“主体”

4、超链接

<a>是一个双标签元素，href属性值为指定超链接目标的URL
<a href="http://www.百度.com">

5、提高书写效率

书写双标签或单标签：敲关键字 tab，自动生成首尾标签
创建并保存一个空的html文件，书写基本框架时，你只要敲html:5 tab

二、文本元素

1、元素介绍

a                      双标签   生成超链接
br                     空标签   并不强调，强制换行
wbr                    空标签   可安全换行
b                      双标签   标记一段文字但并不强调，字体加粗
strong                 双标签   标记一段文字且强调，字体加粗
i                      双标签   表示外文或科学术语，不强调，字体倾斜
em                     双标签   表示强调，字体倾斜
cite                   双标签   表示其他作品的标题，字体倾斜
dfn                    双标签   表示术语定义，字体倾斜
var                    双标签   表示程序输出，字体倾斜
code                   双标签   表示计算机代码，添加小号字体
samp                   双标签   表示变量，添加小号字体
kdb                    双标签   表示用户的输入，无任何效果
abbr                   双标签   表示缩写，无任何效果
del                    双标签   表示被删除的文字，强调，加删除线
s                      双标签   表示不准确或校对，不强调，加删除性
mark                   双标签   表示与另一段上下文有关的内容，添加黄色背景
q                      双标签   表示引自他处的内容，加一对双括号
rp                     双标签   与ruby元素结合使用，标记括号
rt                     双标签   与ruby元素结合使用，标记拼音
ruby                   双标签   位于表意文字上方或右方的注音符号，无效果
<ruby style="font-size:100px"></ruby>
<ruby style="font-size:100px">情<rp>(</rp><rt>qing</rt><rp>)</rp></ruby>

bdo                    双标签   控制文字输出的方向，默认为从左到右
<bdo dir="rtl">HTML5</bdo>文本输出方向:默认从左到右
<bdo dir="ltr">HTML5</bdo>文本输出方向:设置从右到左

small                  双标签   表示小号字体内容，字体缩小1号
sub                    双标签   表示下标字体，设置下标
sup                    双标签   表示上标字体，设置上标
time                   双标签   表示时间和日期，无效果
u                      双标签   标记一段文字但不强调，加下划线
ins                    双标签   添加一段文字强调，加下划线
span                   双标签   通用元素，没有任何语义，一般配合CSS修饰

2、超链接属性

href是必须属性，否则<a>元素就变成空元素了，空元素只能用来做锚点
如果属性值是以http://开头的URL，则意味着点击之后会跳到指定的外部网站

target：指定用打开所浏览资源的浏览环境
_blank：在新建窗口中打开
_self：在本窗口中打开
_parent：在父窗框组（frameset）中打开
_top：基于框架页面，在整个窗口中打开

hreflang:指向所链接资源的所使用的语言

media：说明所链接资源用于哪种设备

rel：说明文档与所链接资源的关系类型

type：说明所链接资源的MIME类型（text/html）

3、超链接路径

绝对路径：从盘符开始(file:///),到各级目录结束
file:///C:/windows/system32/index.html

相对路径：以当前所在页面的位置结束
.systenm32/index.html
但引用文件与链接文件必须在同一个盘符或目录下
(1)文件在统一目录下，相对路径就是“./被链接的文件名.后缀名”
(2)文件在同一个主目录下的不同子目录下（主目录下存在多个目录层次）
被链接文件在爷爷目录下：./../../index.html
被链接文件在父目录下：./../index.html
被链接文件在同一目录下：index.html
被链接文件在子目录下：./孩子目录名/index.html
被链接文件孙子目录下：孩子目录名/孩子目录名/index.html

三、分组元素

p                         表示定义段落，分段且设置段前段后
div                       语义上表示定义通用分组，只分段
blockquote                分段且设置段前段后，左右缩进
pre                       语义上表示定义预格式化的文本
hr                        表示段落级别的主题转换，定义水平线
ul                        表示无序列表，首行缩进，黑色点编号，换行
ol                        表示有序列表，首行缩进，数字编号，换行
start：表示从第几个序列开始排序，默认从1开始
<ol start="2">//表示列表从第二个序号2开始统计
reversed：表示是否倒序排列，一半主流浏览器不支持，火狐支持
<ol reversed>//表示列表采用倒序排列
type：表示列表编号采用何种类型，默认阿拉伯数字编号，属性值分别为1、a、A、i、I
<ol type="a">//表示列表采用希腊小写字母

li                       用于ul，ol元素中的列表项
value属性：表示强行设置某个项目的编号

dl                       表示定义说明列表
dt                       表示定义列表项的标题
dd                       表示定义列表项的内容设置，首行缩进，换行
figure                   表示定义插图，对所插入的图片进行布局
figcaption               表示figure图片元素的标题（图注）
<figure>
      <figcapation>这是一张我的照片</figcaption>
      <img src="https://blog.csdn.net/qq_48581968/article/details/img.jpg"//表示向网页中插入图像
</figure>

四、表格元素

table                               定义一个表格（表格主元素）
boder：属性值默认为0，不可见
<table  boder="1"    style="width:300px">

tr                                  定义表格中的一行（行标签）
td                                  表格中的一个单元格（单元格标签）
th                                  定义表格中的表头单元格（字体会居中加粗）
colspan:横向合并单元格，占用单元格
rospan：纵向合并单元格，占用单元格

thread                              定义表头（标题行），表格第一行
tbody                               表示表格主体，表头和表脚之间
tfoot                               表示表脚，最后一行
caption                             定义表格标题，在表格上方居中添加一个标题          
col                                 定义表格中的一列（列标签)
colgroup                            定义表格中的一组列（列组标签）
span：从列点位置开始，往后横跨几列
<colgroup    style="background:white;" span="1"><colgroup>
<colgroup    style="background:yellow;" span="1"><colgroup>
先把第1列设置为白色背景；再把第二列设置为黄色背景

五、文档元素

h1~h6                    表示标题
header                   表示首部
footer                   表示尾部
nav                      设置文档导航
section                  表示重要概念或主题
article                  表示添加一个独立成篇的小文档，文档“嵌套”
address                  表示文档或article的联系信息，字体倾斜
aside                    表示与周边内容少有牵涉的内容，给文档添加注释栏
hgroup                   设置标题组合
details                  生成一个区域，用户将其展开会获得更多细节，避免使用
summary                  用在detail元素中，表示该元素内容的标题或说明

学新通

六、嵌入元素

img                        嵌入图片，为被引用的图像创建占位符
src：图像路径属性，嵌入图像URL【<img src="https://blog.csdn.net/qq_48581968/article/details/123.jpg"】
alt：图像替代文本属性，图像不加载时显示【<img src="https://blog.csdn.net/qq_48581968/article/details/12.jpg" alt="肖战剧照"】
ismap：用来创建服务器端分区响应，获取图片的坐标
usemap：关联img元素与map元素【<img src="https://blog.csdn.net/qq_48581968/article/details/123.jpg" usemap="#Map"】

map                        定义客户端分区响应图，也就是图像映射
map是用来给图像加热点的，点击不同的热点区域可以链接不同页面

area                       表示一个用户客户端分区响应图的区域
shape：规定热点区域形状（rect矩形、circ圆形、poly多边形、default整张图片）
coords：规定热点区域坐标
矩形：写对角线坐标，左上角和右下角，即“x1,y1,x2,y2”
圆形：写圆心坐标和半径值，即“x,y,radius"
多边形：写每个角的坐标，即”x1,y1,x2,y2,x3,y3.....“

audio                      表示一个音频资源
video                      表示一个视频资源
iframe                     嵌入一个文档，在一个页面里面做一个框架来引用另一个页面
src：规定iframe中显示的文档URL
name：规定iframe名称（用作唯一标识）
frameborder：规定是否显示框架周围的边框（1有边框，0关闭边框）

embed                      多用于嵌入flash插件              
canvas                     生成一个动态的图形画布
meter                      嵌入数值在许可值范围背景中的图形表示
object                     可以嵌入flash插件，还可以嵌入图片等其他内容的插件
param                      表示将通过object元素传递给插件的参数
progress                   嵌入目标进展，或任务完成情况的图形表示
max是最大任务量，value是已经完成任务量

source                     表示媒体资源
svg                        表示结构化矢量内容

七、音频和视频元素

1、编解码器

编解码：实际上就是一组”压缩/解压算法“
编码器：压缩海量数据，使之变小，以适应网络传输
解码器：用来把压缩后的数据还原为原始的媒体文件，使我们可以正常的去播放这些媒体文件

2、容器

音频文件和视频文件实际上都是”容器文件“
视频文件里装有三样东西：音频轨道、视频轨道和元数据
元数据里又包含视频的封面、标题、子标题、字幕等相关信息
视频播放时，音频轨道和视频轨道是绑定在一起的
一般来说，容器文件都很大，所以我们需要编解码器对容器文件进行编解码
目前主流的视频容器格式有：.avi .flv .mp4 .mkv .ogg .webm
.webm是一种未来在web端播放的主流视频格式

3、video属性

src               视频资源的URL【<video src="https://blog.csdn.net/qq_48581968/article/details/gg.mp4"></video>】
width             定义视频宽度(px)
height            定义视频高度(px)
controls          显示播放控件（播放按钮、进度条、音量按钮）
autoply           设置后自动播放视频
loop              设置后循环播放视频
muted             设置后视频处于静音状态
poster            在视频的第一帧位置，做一张预览图
preload           设置后表示预先载入视频
none：表示播放之前什么都不加载
metadata：表示播放之前只加载元数据
auto：表示请求浏览器尽快下载整个视频（默认属性值）

八、表单元素

form               创建一个供用户输入的表单
action：默认提交到当前页面的URL【<form action="http://www,百度.com"】
method：get超链接提交，post表单提交，默认get
enctype：规定浏览器对发送给服务器的数据所采用的编码格式
name：设置表单名称，以便程序调用，但是并不提交
target：设置提交时的目标位置
autocomplete：设置浏览器记住用户以往输入的数据，实现表单元素的自动完成功能
novalidate：设置是否执行客户端数据有效性检查

input              用于收集用户输入和提交的数据
type：文本框、复选框、单选框、提交按钮
name：定义input元素的名称，以便接收到相应的值
autofocus：自动聚焦，光标聚焦到某个input元素，让用户直接输入
disabled：选择状态变成灰色
autocomplete：单独设置input的自动完成功能
value：自动输入input元素默认初始值

button              可用来提交或重置的表单按钮
submit提交按钮，reset重置按钮，button普通按钮

label               表示表单元素的说明标签
textarea            生成一个可变更大小的多行文本框
rows number：可见行高
cols number：可见列宽
wrap soft：自动软回车换行，隐藏的换行符不会被传送到服务器上去
wrap hard：自动硬回车换行，隐藏的换行符会被传送到服务器上去
output：表示两个文本框之间计算结果

select              生成一个下拉列表框
name：设定提交的名称
disabled：下拉列表框禁用
form：表单外的下拉列表框与某个表单挂钩
size：设置下拉列表框的高度
multiple：设置是否可以多选
selected：实现对下拉列表框中建议值的首选
autofocus：获取焦点
required：必须选择

option              表示用来提交一个选项
optgroup            表示一组相关的option元素
datalist            定义一组提供给用户的建议值
fieldset            表示一个表单分组
legend              fieldset的说明标签，给表单分组添加一个标题
output              表示计算结果

九、Type属性值汇总

text                默认值，表示一个单行文本框
size：设置文本框的宽度，默认20个字符
maxlength：设置文本框允许用户输入的最大字符长度
value：设置文本框的初始值
readonly：设置文本框处于只读状态，不能改，能选中、复制、提交
disabled：设置文本框处于禁用状态，不能改，不能选中、复制、提交
list：引用包含input输入字段下拉列表的datalist元素
datalist：input文本框定义下拉清单，需要设id作唯一标识
placeholder：设置帮助用户填写输入文字的提示
pattern：用于输入验证的正则表达式
required：设置文本框处于必填状态

password             隐藏字符的密码框
search               搜索框，在某些浏览器输入内容后会出现叉标记取消
number/range         只能输入数字的数字文本框
min：设置数字文本框可以接受的最小值
max：设置数字文本框可以接受的最大值
readonly：设置数字文本框只读
required：设置数字文本框必填
step：设置上下调节的步长，默认步长为1
  
checkbox             复选框
radio                单选框
img                  生成一个图片按钮
color                颜色代码按钮
email                检测电子邮件的文本框
tel                  检测号码的文本框
url                  检测网址的文本框
date                 获取日期和时间框
hidden               生成一个隐藏框
file                 生成一个上传框，用于文件的上传

十、全局属性

1、特殊字符

空格           &nbsp;
<             &lt;
>             &gt;
只有中文两边的尖括号才能被HTML直接识别
英文需要改为实体名称才行

&             &amp;
“             &quot;
'             &apos;(IE不支持)
➖            &minus;
✖             &times;
➗            &divide;
分(cent)       &cent;
镑(pound)      &pound;
￥             &yen;
欧元(euro)     $euro;
版权           &copy;
注册商标        &reg;
商标           &trade;

1、id属性（用“#”)

用来给同一页面中每一个元素分配一个唯一的标识符

<p id="abc">段落</p>
//把p元素的标识符设置为abc，此页面别的元素的id不可以叫abc

把一个HTML文档看作一个国家；元素就是这个国家的公民；
name则是每个元素的姓名，id是每个元素的身份证号码

2、class属性(用.)

用来给元素归类，通常给文档中相同或相似的元素分配共同的标识符
可以便于CSS和Javascript程序做批量设置

3、accesskey属性

用来给元素设置快捷键，alt 指定键，前提浏览器和alt不冲突

<input type="text" name="user" accesskey="a">
//按alt a键可以聚焦文本框

4、contentditable属性

用来设置一段文本的可编辑状态，true可以编辑；false默认值，不可以编辑

5、dir属性

用来设置文本对齐方向，Itr默认值，左对齐；rtl右对齐

6、hidden属性

用来隐藏元素

7、lang属性

用来设置局部语言

<p lang="en">I like HTMl5,</p>

总结

其实HTML总体并不是很难，但很多标签是需要去记忆并使用的，尤其是其中的各种属性值要分清楚用法，好的，再会豪杰们！

这篇好文章是转载于：学新通技术网