HTML5标签-按功能分类整理
2024-04-28 18:13:27
HTML标签
- HTML实体字符
- 按标签的的功能分类
- HTML主体结构标签
- <head>标签中常用的标签
- <body>标签中常用的标签
- 排版标签
- 超链接标签
- 文本及文本格式标签
- 表格标签
- 表单相关标签
- HTML全局属性
- HTML框架标签
HTML实体字符
空格
> >
< <
& &
" "
' '
© 版权符号©
® ®
按标签的的功能分类
HTML主体结构标签
<!--文档级结构标签-->
<!DOCTYPE html> <!--声明头 -->
<html><!--头标签--><head></head><!--体标签--><body>内容级结构标签，都应该在body标签中</body>
</html>
1、最顶部声明<!DOCTYPE html>
声明是文档的第一成份，位于文档的最顶部。该标签就是告诉浏览器所使用的HTML规范。
2、以<html>开始，以</html>结束，中间包含头部标签及主体标签
<head>标签中常用的标签
设置网页标题及浏览器信息
<head lang="en"><!--lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录--><title></title>设置页面字符串<meta charset="utf-8" /> 设置页面字符集（h5）
<meta http-equiv="content-type" content="text/html;charset=utf-8" />设置页面字符
集(h4)
<!--http-equiv 告知浏览器的行为-->
设置5秒后自动跳转到学习猿地
<meta http-equiv="refresh" content="5;url=https://www**c.lmonkey.com" />
设置浏览器5秒刷新一次
<meta http-equiv="refresh" content="5" />
<!--name 告知浏览器的内容-->
设置网站关键字，多个关键字之间用英文状态下的逗号分割
<meta name="keywords" content="关键字1,关键字2"/>
设置网站的描述
<meta name="description" content="描述的内容" />
<!--阻止移动浏览器自动调整页面大小-->
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<!--name = "viewport" 说明此meta标签定义视口的属性initial-scale = 2.0 意思是将页面放大两倍width = device-width 告诉浏览器页面的宽度的能与设备的宽度
-->
<meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" />
<!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半-->
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放--><link />
定义两个文档之间连接的关系
<!--rel = "表示文档与被连接文档之间的关系"type = "被连接文档的类型"href = "被连接文档的地址"
-->
<link rel="icon" type="" href=""/>加载标题icon图标
<link rel="stylesheet" type="text/css" href="" />加载CSS样式<style></style> 加载CSS样式<script></script> 加载JS脚本<!--示例--><head><title>这是我们的第一个HTML页面</title><meta charset="utf-8" />
<!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com">--><meta name="keywords" content="h5,html5,js,jq,vue,react"/><meta name="description" content="mm131美图图片网。。。。。。" /><link rel="icon" href="./img/a.jpeg"><link rel="stylesheet" href="./style.css" /><script>alert('弹弹弹，弹奏鱼尾纹')</script><style>p{font-size:100px}</style></head>
<body>标签中常用的标签
网站主体显示的内容
排版标签
主要用于表示html代码的整体结构关系，或可理解为用于搭建出网页的基本层次结构。
语义化标签-布局
<div></div> 代表一个区块 独占一行
<span></span> 行内元素
<header></header> 代表一个页面的头部
<footer></footer> 代表一个页面的底部
<nav></nav> 导航标签
<address></address> 地址标签
<section></section> 代表一个区块
<article></article> 代表一篇文章
<aside></aside> 代表一个侧边栏列表标签-布局
<ol>有序列表
<ul>无序列表
<dl>定义列表
<dt>定义列表中的项：<dl><dt></dt></dl>
<dd>对于定义列表中定义项的描述
<!--案例-->
<body><h2>有序列表</h2><ol type="1 a A i I none" start="起始位置"><li>我是有序列表的列表项</li><li>我是有序列表的列表项</li><li>我是有序列表的列表项</li><li>我是有序列表的列表项</li></ol><h3>无序列表</h3><ul type="disc circle square"><li>我是无序列表</li><li>我是无序列表</li><li>我是无序列表</li><li>我是无序列表</li><li>我是无序列表</li></ul><hr><h2>定义列表</h2><dl><dt><img src="../lesson01/img/a.jpeg" width="80"/></dt><dd><p>商品价格:<span>￥99</span></p><p>商品描述：<span>前端</span></p><p>放入购物车</p></dd></dl></body>
超链接标签
<a></a>
<!--常用属性-->
<a href = "用于定义需要跳转页面的地址" target = "定义页面打开的方式" 常用的值：_self默认，当前窗口打开链接的文档_blank,在新窗口中打开文档 ></a>
<!--示例--><body><!--超链接 注意：如果网网络地址跳转请必须加协议--><a href="http://www.baidu.com">链接到百度</a><!--提示找不到404--><a href="www.baidu.com">去百度</a><!--本地的绝对路径--><a href="file:///C:\Users\Administrator\Desktop\web\lesson01\first.html">去lesson01里面找first</a><!--相对路径 相对于当前自己的位置--><a href="../lesson01/first.html" target="_blank">相对路径查找lesson01目录中的first文件</a><!--相对路径而言：../ 代表上一级目录./ 当前目录相对于自己的位置来查找绝对路径：从根开始查找网络地址：https://www.so.com:80/s?ie=utf-8&fr=none&src=360sou_newhome&nlpv=basezc&q=%E7%BE%8E%E5%A5%B3https:// 协议www.so.com 域名 名字 192.168.100.123:80 端口 门牌号 apache 服务器软件s 文件简写ie utf-8? 就是访问该页面所需要的参数& 表示继续传入礼品(参数)例如： http://localhost:63342/lesson01/first.html?fr=none&h=123-->
</body>
文本及文本格式标签
主要用于修饰文字内容，以实现一定的文字外观效果，或表达一定的含义，或二者兼具。
斜体：<i>、<em>（强调）
删除线：<s>、<del>
加粗：<b>（粗体，物理标记）、<strong>（加强，强调，逻辑标记）
下划线：<u> 、 <ins>
上标：<sup>
下标：<sub>
变大：<big> 115%
变小：<small>85%
字体：<font color= "" size="" face="">
标记文本：<mark></mark>（它会给你要突出显示的文本下加个背景色）。
h族标题标签：<h1>~<h6>; 属性：align：left，center，right用于设计一定级别的标题，h1最大，h6最小；注意：在网页文章中，h1最好只出现1次。
换行：<br/>
水平线： <hr width=“宽度值” size=“粗细” color=“颜色值” align=“对齐方式” noshade >
段落标签: <p align =left center right> ，表示“一个段落”。块标签，此时文字前后自然会有一个空行。
原格式输出：<pre>（预格式化标签）表示其中的内容“原样输出“，主要是其中的换行符，tab符以及空格能在网页上也直观演示出该有的效果。否则，代码中的换行在网页中无法体现出来，只能用<br>标签来实现换行效果。
引用标签：<blockquote>表示其中的内容是“引用别人的话”，通常在学术著作中比较常见。
<bdo></bdo> 覆盖默认的文本方向
<details></details> 交互式控件、可见的或者隐藏的补充细节
<summary></summary>为details定义标题
<dialog></dialog>定义对话框或窗口
<figure></figure>用于对元素进行组合。多用于图片与图片描述组合<!--示例-->
<body><p>80岁老太太为何<b>意外怀孕</b>，200头母猪为何半夜惨叫，<strong>女生宿舍</strong>为何频频被盗，<br/>这是人性的扭曲还是道德的沦丧，请看<i>灭绝</i>老师的<em>不归路</em></p><hr /><h1>打野七技香港脚->瞎子</h1><h6>打野七技香港脚->瞎子</h6><hr /><bdo dir="rtl">默认覆盖文本方向</bdo><p>H<sup>2</sup>0<sub>2</sub></p><hr /><details><summary>最新上映电影</summary>名称：灭绝重启版<br/>票价：￥45.00<br/>描述: 灭绝的一生</details><pre>1
+ 1
========2</pre><hr /><figure><img src="./img/s.png" alt="figure标签" title="figure标签" /><figcaption>figure的标题</figcaption></figure><br /><p>你是<mark>大长腿</mark>吗？</p></body>
表格标签
<table width(表格宽度) ，height (表格高度) ，align(表格在页面的水平摆放位置 )=left/center/right ，background(表格的背景图片)，bgcolor (表格的背景颜色) border(表格边框的宽度（以像素为单位)表格默认没有边框 ) bordercolor (表格边框颜色，当border >= 1时起作用)cellspacing (单元格之间的间距 ) cellpadding(单元格内容与单元格边界之间的空白距离大小 )>
<caption></caption>
<tr height(行高)align(行内容的水平对齐方式)valign( 行内容的垂直对齐方式)bgcolor(行的背景颜色)></tr>
<th></th>
<td width(单元格的宽度)height(单元格的高度)align( 设置水平对齐方式，取值left center right )valign(设置垂直对齐方式，可取值top middle bottom)bgcolor (单元格的背景颜色)colspan(设置单元格跨列)rowspan(设置单元格跨行)></td>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<!--案例-->
<body>
<table bgcolor="purple" border="1" width="800" align="center" cellspacing="0" cellpadding="0"><caption><h3>自我介绍</h3></caption><tr><td width="15%">姓名</td><td width="25%">徐枭雄</td><td width="10%">性别</td><td width="30%">男</td><td width="20%" rowspan="2"><img src="./img/a.jpeg" width="50" alt=""></td></tr><tr><td>电话</td><td>12312341234</td><td>年龄</td><td>18</td>
<!-- <td>照片</td>--></tr><tr height="100"><td align="right" valign="middle">自我介绍</td><td colspan="4" bgcolor="#8b0000"></td>
<!-- <td></td>-->
<!-- <td></td>-->
<!-- <td></td>--></tr><tr bgcolor="aqua"><td>项目经验</td><td colspan="4"></td>
<!-- <td></td>-->
<!-- <td></td>-->
<!-- <td></td>--></tr>
</table><hr><table border="1" width="800" align="center" cellspacing="0"><caption><h3>会员表</h3></caption><thead><tr><th>编号</th><th>会员名称</th><th>性别</th></tr></thead><tbody><tr align="center"><td>1</td><td>大熊</td><td>男</td></tr></tbody><tfoot><tr><td colspan="3" align="right"><a href="">首页</a> <a href="">上一页</a> <a href="">下一页</a> <a href="">尾页</a></td><!-- <td></td>--><!-- <td>1</td>--></tr></tfoot></table>
</body>### 多媒体标签
```html
<img src="" width height/>
<map></map>、<area />定义锚点用的，定义一个图片的映射，现在基本上不用了
<audio></audio>音频播放标签
<source />
<video></video>声明视频
<embed />多媒体标签，音频、视频、flash动画
<progress></progress>进度条标签
<meter></meter>度量给定范围内（gauge）内的数据，做密码的时候会用到，提示密码强度是弱、中级、高
<!--案例-->
<body>
<img src="./img/a.jpeg" width="200" alt="我是HTML5" title="我是标题"/><!--video 声明视频-->
<h2>这里是视频的标题</h2>
<!-- <video src="./a.mp4" controls height="400" poster="img/u.webp"></video>-->
<video controls><source src="a.mp4" /><source src="a.mp4a" /><source src="a.mp4b" /><source src="a.mp4c" /><source src="a.mp4d" />
</video>
<progress min="1" max="100" value="100"></progress>
<hr>
<meter value="2" low="4" high="10" optimum="8" min="0" max="10">十分之三</meter><meter value="100" min="0" max="100" low="30" optimum="100" high="80"></meter>
</body>
表单相关标签
<form></form>用于为用户输入创建HTML表单
<!--必须属性：action -- 浏览者输入数据被传送到的地方，比如一个PHP页面method -- 数据传送的方式get -- 此方式传递数据量少，但是传递的信息会显示在网址上。一般跟搜索相关的信息用get。post -- 此方式传递信息多，而且不会把传递的信息显示在网址上。一般跟用户相关的信息用post
-->
<input />为用户定义需要使用的表单项
<!--name -- 此表单项的名称value -- 此表单项的值type -- 代表一个输入域的显示方式(输入型、选择型、点击型)
-->
<input type="text" name="" value="" /> 普通文本域
<input type="password" name="" value="" /> 密码域
<input type="radio" name="" value="" />单选
<input type="checkbox" name="" value="" /> 复选
<label></label>为input元素定义标注(绑定元素)
<input type="file" name="" value="" />文件上传，有了这个属性后，表单的传值方式必须是post，且后面必须指出表单的传输编码格式enctype="multipart/form-data"，表单以二进制编码的方式传输，这样后端才能收到。
<input type="submit" name="" value="" />提交按钮
<input type="image" src="" title="" alt="" />用图片代替提交按钮
<input type="reset" name="" value="" />重置按钮
<input type="hidden" name="" value="" />隐藏域
<input type="button" name="" value="" />按钮，需要配合js使用
<button></button> 提交按钮
<button type="submit"></button>提交按钮
<button type="button"></button>按钮，需要配合js使用
<textarea></textarea> 多行文本输入域
<select></select>下拉列表
<option></option>为下拉列表定义列表项
<fieldset></fieldset>将表单内的相关元素分组
<legend></legend>为fieldset定义标题
<optgroup></optgroup>为下拉列表定义分组
<datalist></datalist>定义可选数据列表
<!--新增类型-->
<input type="email" name="" value="" />
<input type="url" name="" value="" />
<input type="number" name="" value="" />
<input type="range" name="" value="" />
<input type="search" name="" value="" />
<input type="color" name="" value="" />
<input type="tel" name="" value="" />
<input type="date" name="" value="" />
<input type="time" name="" value="" />
<input type="week" name="" value="" />
<input type="month" name="" value="" />
<input type="datetime-local" name="" value="" />
<!--表单中常用的属性-->
<!--
readonly 输入域可以选择，但是无法修改。
disabled 输入域无法获取焦点，无法选择，以灰色显示
selected 为下拉列表定义默认选中
autofocus 自动获取焦点属性
placeholder 表单提示信息
required 用于强制用户必须为该表单赋值，否则提示信息
min 用于设定表单的最小值
max 用于设定表单的最大值
multiple 设定当前表单允许同时选中多个文件，适用于input[type=file]
pattern 用于自定义验证规则(需要配合正则的语法)
step 设定跳步的数值或者设定2个数值之间的间隔
novalidate 取消表单验证，适用于form标签
formaction 用于在提交按钮中修改当前表单的提交页面
formmethod 用于在提交按钮中修改当前表单的提交方式
formenctype 用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用)
tabindex 切换索引属性
-->
<!--例子-->
<body>
<!-- <form action="" method="post" enctype="multipart/form-data">-->
<form action="" method="get">用户名：<input type="text" autofocus name="u1" value="" tabindex="2" placeholder="请您输入用户名"/><br/>密码：<input type="password" required name="pwd" tabindex="1"/><br/>单选:<input type="radio" name="sex" value="0" id="nv" /><label for="nv">女</label><label><input type="radio" name="sex" value="1" checked />男</label><input type="radio" name="sex" value="2" />保密<br>复选：爱好：<input type="checkbox" name="hobby[]" value="0" />吃<input type="checkbox" name="hobby[]" value="1" id="he" /><label for="he">喝</label><input type="checkbox" name="hobby[]" value="2" checked/>玩<input type="checkbox" name="hobby[]" value="3" checked />乐<br/>文件上传<input type="file" name="pic" id="" /><br><input type="submit" value="登录"><hr><input type="image" src="./img/a.jpeg" width="50" title="" alt="" />用图片代替提交按钮<input type="reset" name="" value="重置按钮" /><input type="hidden" name="" value="隐藏域" /><input type="button" name="" value="按钮" /><button> 提交按钮</button><button type="submit">提交按钮</button><button type="button">按钮</button><hr><textarea name="address" id="" cols="50" rows="5"></textarea><br><select name="" id=""><option value="">初中</option><option value="">高中</option><option value="" selected>本科</option><option value="">专科</option></select><fieldset><legend>汽车</legend>为<select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup></select></fieldset><!--下面是一个 <input> 元素，<datalist> 中描述了其可能的值：--><input list="browsers">111<datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Fun"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><hr><input type="email" name="" value="" /><input type="url" name="" value="" /><input type="number" name="" value="" /><input type="range" name="" value="" /><input type="search" name="" value="" /><input type="color" name="" value="" /><input type="tel" name="" value="110" disabled /><input type="date" name="" value="" /><input type="time" name="" value="" /><input type="week" name="" value="" /><input type="month" name="" value="" /><input type="datetime-local" name="" value="" /></form>
</body>
HTML全局属性
contentEditable 内容可编辑属性
designMode 页面可编辑属性
HTML框架标签
<frameset ></frameset>代替body标签定义框架页(H5取消)
<frame />定义frameset标签中每个框架页的内容(H5取消)
<iframe></iframe>在页面中开一块空间连接一个子页面
<!--案例-->
<body>
<iframe src="./img.html" width="100%"></iframe>在页面中开一块空间连接一个子页面
</body>
HTML5标签-按功能分类整理相关推荐
- zdm各命令的功能和作用_ZDM快捷键(按功能分类整理)
ZDM 命令注释 一.绘制(通用功能类) ll 画线 jdcz 交点插矩形.插园 tx 画梯形 sx 画扇形 dmx 画图折断线 ydx 画园柱折断线 bzline 标记线 dxl 端点连线 rl 宽 ...
- 20 Java程序员面试宝典视频课程之HTML5新标签、功能
一.HTML5认识?(是什么,为什么) 答: 1.HTML5指的是包括 HTML . CSS 和 JavaScript 在内的一套技术组合. 2.HTML4陈旧不能满足日益发展的互联网需要,特别是移动 ...
- html5的在线播放页面,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- Android系统（97）---开源项目分类整理
200多个开源项目分类整理,Android开发者珍藏必备 原文地址 http://www.apkbus.com/blog-955606-77825.html 日历 星期视图日历 https://git ...
- HTML5讲解与演示转载整理
ZHENGLIL weiking 2010.12.06 html Html5从入门到精通 上周我们总结会上面主题的第二部分就是关于Html5的,后来自己想总结一下Html5 的支持列表,写了许久,无果 ...
- 04分类整理：会搜索还不够，整理、分类、归纳
在这个当一键收藏所需信息变得越来越简单的今天,如果不去定期收纳整理.我们可以想象一下,假如我们的电脑和手机是房子,我们下载.收藏.保存的信息,资源人脉是我们每天带回来的东西,如果不定期收纳整理,住在这 ...
- 入门讲解HTML5的画布功能（1）
个人认为在HTML5中画布功能其实并不实用,当然趋势是在FLASH不没落的情况下.通过学习我发现画布功能能够实现的东西非常有情调,但是前端人员也要有一定的审美和构思才能做出有意思的东西,因为canva ...
- [分类整理IV]微软等100题系列V0.1版：字符串+数组面试题集锦
微软等100题系列V1.0版整理IV:字符串+数组面试题集锦 July 2010年12月30日 第4章 字符串+数组面试题 在微软等100题系列V0.1版中,此类字符串+数组的问题,占了足足22道 ...
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5,今天这 ...
最新文章
- 02.Apollo配置中心整合spring cloud zuul
- ***组网不用愁之1-中小企业***网络组建应用实录
- Define change document object
- Timus1430(裴蜀定理应用)
- Spring4：具有Java 8 Date-Time API的@DateTimeFormat
- Linux中的软件源详解,Ubuntu Linux 软件源详解
- S-DES加密与解密
- （63）FPGA面试题-用verilog写一段代码，实现消除一个glitch（毛刺）（二）
- Linux下数据传输安全与加密
- 映日荷花别样红是什么季节，映日荷花别样红的上一句是什么?全诗赏析
- 基于卷积神经网络模型的MSTAR高分辨率图像数据集识别实践【后续：网络层可视化分析】
- R语言使用timeROC包计算存在竞争风险情况下的生存资料多时间AUC值、使用cox模型、并添加协变量、R语言使用timeROC包的plotAUCcurve函数可视化多时间生存资料的AUC曲线
- VC2010 MFC程序制作Flash动画欢迎界面
- 2015.2.2号工作日志------------------------赵鑫
- BCT4157/4157B是一种高带宽、快速单刀双掷（SPDT）CMOS开关
- 【机器视觉】圆形测量
- 基于matlab使用合成雷达和无线通信信号训练的语义分割神经网络执行频谱检测
- nacos注册中心死活发现不了服务问题
- 牛客网 2018年全国多校算法寒假训练营练习比赛（第二场） A.吐泡泡-STL(stack)
- GaussDB灾备方案的设计