HTML元素大合集来了
提示:刘亦菲们和彭于晏们会多看几分钟哦,精华都在后面呢
文章目录
- 前言
- 一、基本格式
- 1、 基本框架
- 2、快捷注释
- 3、head和body
- 4、超链接
- 5、提高书写效率
- 二、文本元素
- 1、元素介绍
- 2、超链接属性
- 3、超链接路径
- 三、分组元素
- 四、表格元素
- 五、文档元素
- 六、嵌入元素
- 七、音频和视频元素
- 1、编解码器
- 2、容器
- 3、video属性
- 八、表单元素
- 九、Type属性值汇总
- 十、全局属性
- 1、特殊字符
- 1、id属性(用“#”)
- 2、class属性(用.)
- 3、accesskey属性
- 4、contentditable属性
- 5、dir属性
- 6、hidden属性
- 7、lang属性
- 总结
前言
随着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.baidu.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="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="./123.jpg"】
alt:图像替代文本属性,图像不加载时显示【<img src="12.jpg" alt="肖战剧照"】
ismap:用来创建服务器端分区响应,获取图片的坐标
usemap:关联img元素与map元素【<img src="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="gg.mp4"></video>】
width 定义视频宽度(px)
height 定义视频高度(px)
controls 显示播放控件(播放按钮、进度条、音量按钮)
autoply 设置后自动播放视频
loop 设置后循环播放视频
muted 设置后视频处于静音状态
poster 在视频的第一帧位置,做一张预览图
preload 设置后表示预先载入视频
none:表示播放之前什么都不加载
metadata:表示播放之前只加载元数据
auto:表示请求浏览器尽快下载整个视频(默认属性值)
八、表单元素
form 创建一个供用户输入的表单
action:默认提交到当前页面的URL【<form action="http://www,baidu.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:设置上下调节的步长,默认步长为1checkbox 复选框
radio 单选框
img 生成一个图片按钮
color 颜色代码按钮
email 检测电子邮件的文本框
tel 检测号码的文本框
url 检测网址的文本框
date 获取日期和时间框
hidden 生成一个隐藏框
file 生成一个上传框,用于文件的上传
十、全局属性
1、特殊字符
空格
< <
> >
只有中文两边的尖括号才能被HTML直接识别
英文需要改为实体名称才行& &
“ "
' '(IE不支持)
➖ −
✖ ×
➗ ÷
分(cent) ¢
镑(pound) £
¥ ¥
欧元(euro) $euro;
版权 ©
注册商标 ®
商标 ™
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总体并不是很难,但很多标签是需要去记忆并使用的,尤其是其中的各种属性值要分清楚用法,好的,再会豪杰们!
HTML元素大合集来了相关推荐
- Android软件开发之盘点自定义View界面大合集(二)
Android软件开发之盘点自定义View界面大合集(二) - 雨松MOMO的程序世界 - 51CTO技术博客 雨松MOMO带大家盘点Android 中的自定义View界面的绘制 今天我用自己写的一个 ...
- 京东java笔试_2017阿里,百度,京东java面试+笔试大合集,2018的你会吗?
2017阿里,百度,京东java面试+笔试大合集 1.阿里 面试(一二面合集) 1.介绍一下你自己. 2.介绍一下你认为做的最好的一个项目. 3.请用五分钟的时间把你做的项目的流程图画一下. 4.项目 ...
- 最佳助攻!25款轻巧实用的SKETCH插件大合集
最佳助攻!25款轻巧实用的SKETCH插件大合集 CocoaChina Sketch绝对是除了PS和AI之外在Mac 平台上最热门的设计工具,它更新迅速,功能完备,并且非常契合目前对于UI设计的需求, ...
- 【数据结构】- 【考研复试面试题】-汇总大合集
数据结构-考研复试面试题-汇总大合集 _写在前面的话:第二次写文章,本篇文章涉及内容主要包括数据结构与算法,包含市面上最热门的面试题,加以总结,用于本人的专业课面试复习,包括一些个人理解和总结, 如果 ...
- php基础从入门到面向对象(大合集)
php基础复习应用大合集 1.不知道有没有人很长不是不复习基础或者一些编程思想,会忘记,博主呢秉承着温故而知新的道理把基础从到位复习了一边,其中还包括一些算法指针,统计目录,字符串,数组的方法,mvc ...
- 2017年8月前端开发者超实用干货大合集
2017年8月前端开发者超实用干货大合集 在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升.其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局 ...
- 【收藏】Java多线程/并发编程大合集
(一).[Java并发编程]并发编程大合集-兰亭风雨 [Java并发编程]实现多线程的两种方法 [Java并发编程]线程的中断 [Java并发编程]正确挂起.恢复.终止线程 [ ...
- 值得收藏!基于激光雷达数据的深度学习目标检测方法大合集(下)
作者 | 黄浴 来源 | 转载自知乎专栏自动驾驶的挑战和发展 [导读]在近日发布的<值得收藏!基于激光雷达数据的深度学习目标检测方法大合集(上)>一文中,作者介绍了一部分各大公司和机构基于 ...
- 年度盘点!必看AI顶会论文、Github高星项目大合集(附链接)
目前,国外计算机界评价学术水平主要是看在顶级学术会议上发表的论文,特别是在机器学习.计算机视觉和人工智能领域,顶级会议才是王道.本期我们盘点了2019年人工智能领域的顶会,如最核心的顶会AAAI.IJ ...
最新文章
- 连接统计学、机器学习与自动推理的新兴交叉领域——因果科学读书会再起航...
- 这可能是最详细的Python文件操作!
- PHP5.2.3+apache2.2.4的最简单安装方法
- 自学python方法-十二种学习Python的方法【Programming】
- Linux下查看CPU型号,内存大小,硬盘空间命令
- Augury翻译---io-demo
- java 发送邮件带附件
- 设计模式-职责链模式 (分离职责,动态组合)
- 智乃的01串打乱(思维+暴力)
- 解决远程主机不能cv问题
- 3. CSS 派生选择器
- 如何解决stata数据管理器中变量变红的问题
- 英伟达史上最便宜AI硬件发布:可运行所有AI模型,算力472 GFLOPS,功耗5瓦
- 导航动态避让算法RVO的优化ORCA(Optimal Reciprocal Collision Avoidance)
- Eclipse刚下好,代码没问题,就是运行不起来
- IDEA中运行SparkSql报javax.jdo.JDOFatalInternalException: Error creating transactional connection factory
- jqGrid----下拉列表框下拉联动,dataEvents回调函数。
- fragment android:onclick,Android Fragment的布局中使用android:onClick 属性时需要注意的问题...
- Linux挂载Windows共享文件夹
- 计算机行业职业名称英语,行业英语学习