微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > H5教程 > 正文

HTML5所有标签汇总及标签意义解释_html5教程技巧

php中文网
发布： 2016-05-16 15:46:55
原创
1990人浏览过

结构标签：(块状元素) 有意义的div

    标记定义一篇文章
     标记定义一个页面或一个区域的头部

多媒体交互标签

Web应用标签

立即学习“前端免费学习笔记（深入）”；

命令列表
menu命令列表标签 FF（嵌入系统）
menu标记定义一个命令按钮
状态标签(实时状态显示:气压、气温)C、O
状态标签 (任务过程:安装、加载) C、F、O
为input标记定义一个下拉列表,配合option F、O
标记定义一个元素的详细内容 ，配合dt、dd   C

注释标签

标记定义 注释或音标
告诉那些不支持 Ruby元素的浏览器如何去显示
 标记定义对ruby的注释内容文本

其他标签

 标记定义表单里一个生成的键值(加密信息传送)O、F
标记定义有标记的文本 (黄色选中状态)
标记定义一些输出类型,计算表单结果配合oninput事

LibLib AI
LibLib AI

中国领先原创AI模型分享社区，拥有LibLib等于拥有了超多模型的模型库、免费的在线生图工具，不考虑配置的模型训练工具

LibLib AI 647
查看详情 LibLib AI

删除的HTML标签

纯表现的元素：
basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：
frame，frameset，noframes；

产生混淆的元素：
acronym ，applet，isindex，dir

重新定义的HTML标签

  代表内联文本，通常是粗体，没有传递表示重要的意思
  代表内联文本，通常是斜体，没有传递表示重要的意思

可以同details与figure一同使用，定义包含文本，dialog也可用
可以同details与figure一同使用，汇总细节，dialog也可用
表示主题结束，而不是水平线，虽然显示相同
重新定义用户界面的菜单，配合commond或者menuitem使用
表示小字体，例如打印注释或者法律条款
表示重要性而不是强调符号

示例代码：

XML/HTML Code复制内容到剪贴板
  1. xmp>  
  2. nbsp;html>  
  3. html>  
  4.     head>  
  5.         style>  
  6.               
  7.               
  8.             header{height:150px;background:#ABCDEF}   
  9.             nav{height:30px;background:#ff9900;margin-top:100px}   
  10.             nav ul li{width:100px;height:30px;float:left;line-height:30px}   
  11.               
  12.             div{margin-top:10px;height:1000px;}   
  13.             section{height:1000px;background:#ABCDEF;width:70%;float:left}   
  14.             article{background:#F90;width:500px;margin:0 auto;text-align:center}   
  15.               
  16.             aside{height:1000px;background:#ABCDEF;width:28%;float:right}   
  17.               
  18.             footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}   
  19.         style>  
  20.     head>  
  21.     body>  
  22.         header>  
  23.             p>这是一个header标签p>  
  24.             nav>  
  25.                 ul>  
  26.                     li>首页li>  
  27.                     li>起夜li>  
  28.                     li>论坛li>  
  29.                     li>商城li>  
  30.                     li>社区li>  
  31.                 ul>  
  32.             nav>  
  33.         header>  
  34.         div>  
  35.             section>  
  36.                 p>这是一个section标签p>  
  37.                 article>  
  38.                     h2>春晓h2>  
  39.                     p>  
  40.                     春眠不觉晓，br />  
  41.                     处处蚊子咬，br />  
  42.                     打上敌敌畏，br />  
  43.                     不至死多少。br />  
  44.                     p>  
  45.                   
  46.                 article>  
  47.                 hr />  
  48.                 article>  
  49.                     h2>上学歌h2>  
  50.                     p>  
  51.                     太阳当空照，br />  
  52.                     花儿对我笑，br />  
  53.                     小鸟说早早早，你为什么背上小书包?br />  
  54.                     我要炸学校老师不知道，一拉线，赶快跑，br />  
  55.                     轰的一声，学校炸没了。br />  
  56.                     p>  
  57.                   
  58.                 article>  
  59.                 hr />  
  60.                 figure>  
  61.                     figcaption>UFOfigcaption>  
  62.                     p>不明飞行物 Unknown Flying Objectp>  
  63.                 figure>  
  64.                 figure>  
  65.                      dt>DDSdt>  
  66.                      dd>大屌丝dd>  
  67.                 figure>  
  68.                 hr />  
  69.                 dialog>  
  70.                     dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？dt>  
  71.                     dd>悟空:...(看着)dd>  
  72.                     dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛dt>  
  73.                     dd>悟空:...(纠结)dd>  
  74.                     dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。dt>  
  75.                     dd>悟空:我靠!(一棍子抡上去！)dd>  
  76.                 dialog>  
  77.                 hr />  
  78.                 menu>  
  79.                     li>点击li>  
  80.                     li>右键单击li>  
  81.                 menu>  
  82.                 hr />  
  83.                 span contextmenu="candan">右键单击我试试span>  
  84.                 menu type="context" id="candan">  
  85.                     menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/baidu_sylogo1.gif">menuitem>  
  86.                 menu>  
  87.                 hr />  
  88.                 meter min="0" max="10" value="5" low="3" high="7" >meter>  
  89.                 progress max="100" value="0" id="pro">progress>  
  90.                 script>  
  91.                     var pro =document.getElementByIdx_x_x_x('pro');   
  92.                     setInterval(function(){   
  93.                         pro.value+=1;   
  94.                     },100);   
  95.                 script>  
  96.                 hr />  
  97.                 details>  
  98.                     dt>这是一个问题？dt>  
  99.                     dd>to be or not to bedd>  
  100.                     dt>这是一个问题？dt>  
  101.                     dd>to be or not to bedd>  
  102.                     dt>这是一个问题？dt>  
  103.                     dd>to be or not to bedd>  
  104.                 details>  
  105.                 hr />  
  106.                 ruby>夼rp>(rp>rt>kuangrt>rp>)rp>ruby>  
  107.                 hr />  
  108.                 女人mark>最喜欢做的事情mark>就是逛街。。。吃零食。。逛街。。吃零食，偶尔还会呜呜的哭，   
  109.                 于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·   
  110.             section>  
  111.             aside>  
  112.                 p>这是一个aside标签p>  
  113.                 hgroup>  
  114.                     h3>女生宿舍为何频频被盗h3>  
  115.                     h3>两百头母猪为何半夜惨死h3>  
  116.                     h3>是人性的扭曲？h3>  
  117.                     h3>还是道德的沦丧！h3>  
  118.                 hgroup>  
  119.             aside>  
  120.         div>  
  121.         footer>  
  122.             p>这是一个footer标签p>  
  123.             hr />  
  124.             small>法律条文small>  
  125.             small>联系我们small>  
  126.             small>客户意见small>  
  127.             small>商户合作small>  
  128.         footer>  
  129.     body>  
  130. html>  
  131. xmp>  


相关标签：
html5

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：html5实现完美兼容各大浏览器的播放器_html5教程技巧 下一篇：HTML5全屏(Fullscreen)API详细介绍_html5教程技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
H5页面如何实现全屏滚动效果 全屏滚动H5实现方法大全 要让H5页面实现全屏滚动效果，核心在于通过HTML、CSS和JavaScript配合控制每屏切换方式。1.使用CSS设置每个section高度为100vh并结合scroll-snap-type实现自动对齐；2.利用JavaScript监听滚轮事件并使用scrollIntoView控制平滑滚动；3.借助第三方库如fullPage.js或Swiper.js简化开发流程；4.注意移动端适配问题，启用touch事件并禁止默认行为以提升体验。
2025-07-25 14:49:01
471
H5页面如何实现动态内容加载效果 3种动态加载技术让你的H5页面活起来 实现H5页面动态内容加载的核心技术有三种：1.使用Ajax异步请求更新内容，通过XMLHttpRequest或fetchAPI向服务器获取数据并用JavaScript插入页面，适合点击加载更多等场景，优点是兼容性好但需注意网络压力；2.利用Vue/React框架的响应式数据绑定，只需更新数据即可自动渲染视图，适合结构复杂的交互页面，同时需优化性能；3.使用WebSocket建立持久连接实现服务器主动推送，适用于聊天室、直播弹幕等实时性需求高的场景，也可选用长轮询作为替代方案。根据项目需求选择合适
2025-07-24 13:28:01
789
H5页面制作中如何提升页面安全性 H5安全防护的10个必备措施 H5页面安全性可通过10项措施提升：1.防止XSS攻击，对用户输入转义处理并使用CSP；2.设置CSP策略限制脚本加载来源；3.防止CSRF攻击，启用Token验证机制；4.合理管理Cookie与Storage，敏感信息加密存储；5.使用HTTPS协议保障数据传输安全；6.图片与资源防盗链，设置Referer检查或CDN鉴权；7.接口请求防刷限流，设置频率限制并增加验证机制；8.移动端安全适配，检测调试模式并识别异常行为；9.谨慎引入第三方脚本，使用SRI校验完整性；10.定期做安全扫描与测试，
2025-07-22 16:44:01
637
H5页面如何实现背景音乐循环播放 背景音乐无缝循环播放技术 H5页面实现背景音乐无缝循环需解决自动播放限制、循环播放控制及音频格式优化等问题。1.移动端需通过用户点击触发播放，可在页面加载时添加“开始”按钮并监听点击事件调用play方法；2.使用JavaScript监听ended事件，在音频结束时设置currentTime为0并重新播放，实现无缝循环；3.选择兼容性好的音频格式如MP3或苹果设备更适配的AAC，并配合preload属性或JavaScript预加载资源以减少播放延迟。
2025-07-21 16:42:01
373
H5页面制作中如何设计高点击率按钮 提升按钮点击率的7个技巧 设计H5页面高点击率按钮的关键在于清晰传达意图和提供顺手操作体验。1.明确按钮文案，使用动词开头并加入利益点，如“立即领取优惠券”；2.突出主按钮、弱化次要操作，主按钮用对比色并置于视觉焦点区域；3.按钮尺寸适中，建议44px×44px以上，并保持间距与合理布局；4.适度使用动效提升交互体验，如点击反馈与加载提示；5.颜色对比强烈且符合品牌调性，引导用户视线聚焦；6.结合场景设置按钮位置，减少用户思考成本，如表单页按钮置底、卡片式布局右下角放置；7.通过A/B测试持续优化按钮文案、颜色、位置等要
2025-07-19 10:16:02
780
H5页面如何实现自动轮播图效果 轮播图自动切换实现方案 实现H5页面自动轮播图效果的关键在于HTML结构、CSS样式和JavaScript逻辑的结合。1.首先搭建基础结构，使用HTML定义外层容器和图片项，并通过CSS设置宽度、隐藏溢出内容及横向排列图片；2.接着用JavaScript实现自动播放逻辑，通过setInterval定时切换图片，利用translateX控制偏移量并添加过渡动画提升视觉效果；3.然后实现无限循环，通过复制第一张图片至末尾并在切换时判断位置，做到无缝滚动；4.最后优化用户交互，在鼠标悬停或滑动时暂停自动播放，离开后恢复，从而
2025-07-18 14:25:01
484
H5页面如何实现跨平台适配方案 一套代码适配多端的关键方法解析 H5页面跨平台适配可通过四个关键步骤实现。一、设置viewport并采用弹性布局，使用Flexbox或Grid布局结合媒体查询实现响应式设计；二、用rem/vw单位替代px，通过JS动态调整根元素字体大小实现自适应；三、处理高清屏1px边框问题，可使用伪元素缩放、SVG描边或框架方案；四、兼容多端差异，包括自动加前缀、UA判断、预留点击空间、使用WebP格式等细节优化，确保多端体验一致。
2025-07-17 15:39:01
1176
H5页面制作中如何管理多语言切换 多语言国际化实现完整流程 在H5页面中实现多语言切换的核心方法是统一管理语言资源并动态替换文案。1.准备结构清晰的语言资源文件，如zh-CN.json、en-US.json等，便于维护和扩展；2.封装语言切换逻辑，通过i18n模块加载语言包并提供统一的文案获取方法；3.实现语言切换触发机制，并使用localStorage持久化用户偏好，优先读取用户选择或浏览器默认语言；4.处理动态内容与本地化格式，借助工具库处理日期、数字、货币及语序差异，确保不同语言下的正确展示。
2025-07-16 12:57:02
1010
H5页面制作中如何适配不同分辨率屏幕 多分辨率适配终极方案 H5页面适配不同分辨率的核心在于设置viewport、使用rem弹性布局、图片响应式处理和媒体查询微调。1.设置viewport元标签，通过width=device-width、initial-scale=1.0等属性确保页面正确识别设备宽度并禁用缩放；2.使用rem单位动态计算html字体大小，实现整体布局按比例缩放；3.图片采用srcset、sizes属性及background-size等技术适配多分辨率屏幕，建议提供@2x/@3x高清资源；4.通过媒体查询对极端分辨率做细节调整，如按钮字体
2025-07-15 14:37:01
1205
H5页面制作中如何嵌入地图定位服务 主流地图API接入方法详解 在H5页面中嵌入地图定位服务主要通过调用主流地图服务商API实现，具体步骤包括选择地图服务、申请密钥、引入SDK、初始化地图、处理定位及异常。一、选择地图API：高德适合多数场景，百度适合国内精准定位，腾讯适合微信生态；二、注册账号并申请APIKey，注意使用限制；三、引入SDK并初始化地图容器，设置中心点及调用定位插件获取当前位置；四、处理定位失败情况，如提示用户开启权限、设置默认位置或提供手动输入选项，并通过监听事件处理成功或错误状态。
2025-07-14 13:24:02
843
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部