HTML常见标签易踩坑笔记(一)
最近在学习HTML的时候,遇到一些容易踩坑的点,梳理一遍,顺便把常用的标签再巩固巩固。
1、article 标签(H5新标签)
(1)定义:<article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构。
(2)使用范围:如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。如下图所示:
2、section 标签(H5新标签)
(1)定义:section标签,表示文档中的一个区域(或节)。
(2)使用范围:如内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>。如下图所示:
(3)与article标签的区别:article 本身就是独立的、完整的,而section仅表示一部分。article和section的结构可以视为从属关系section不能独立出现,它的出现必定是在article下。就像一篇文章,每个article标签为一大章节,可以单独使用却互不干涉,独立成文;而大章节里的小章节就是section,是附属在大章节article之内的。
3、audio、video 标签(H5新标签)
定义:这两个标签分别用于在HTML或者XHTML文档中嵌入音频和视频内容。如下图所示:
4、button 标签
定义:button 标签表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方。如下图所示:
5、nav 标签
定义:导航栏 (<nav>) 描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。如下图所示:
6、 input 标签
(1)定义:<input> 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。
(2)常用参数:button、checkbox、date、emai、password、radio、range、submit、text、url等。如下图所示:
(3)几个易踩坑的点:
1>.checkbox和radio的区别:复选和单选,字面意思,一个是多选按钮,一个是单选按钮,切记不能混淆。
2>.checkbox和radio的区别:复选和单选,字面意思,一个是多选按钮,一个是单选按钮,切记不能混淆。
3>.checkbox和radio的区别:复选和单选,字面意思,一个是多选按钮,一个是单选按钮,切记不能混淆。
(汗颜,旧账号记不起来注册邮箱了,只有重新建个新号,搬运过来了。PS:本文写于:2018年10月13日。)
HTML常见标签易踩坑笔记(一)相关推荐
- EDUSOHO踩坑笔记之四十二:资讯
EDUSOHO踩坑笔记之四十二:资讯 获取资讯列表信息 GET /articles/{id} 权限 老API,需要认证 参数 字段 是否必填 描述 sort string 否 排序,'created' ...
- EDUSOHO踩坑笔记之五:edusoho的后台目录结构
EDUSOHO踩坑笔记之五:edusoho的后台目录结构 EDUSOHO从架构上讲把前后台整合在一起,做到了代码的最大限度的复用,这从体系架构设计上来说,没有瑕疵可以挑剔.但从安全管理上来说,这就是仁 ...
- iphone se 一代 不完美越狱 14.6 视频壁纸教程(踩坑笔记)
iphone se 一代 不完美越狱 14.6 加 视频壁纸教程-踩坑笔记 越狱流程 1.爱思助手制作启动u盘 坑点: 2.越狱好后 视频壁纸软件 1.源 2.软件安装 越狱流程 1.爱思助手制作启动 ...
- Linux内核踩坑笔记
systemtap embedded C踩坑笔记戳这: https://blog.csdn.net/qq_41961459/article/details/103093912 task_struct的 ...
- 阿里云部署Tiny Tiny RSS踩坑笔记
阿里云部署Tiny Tiny RSS踩坑笔记 前言 入坑了RSS,之前的配置是阿里云部署RSSHub,配合Inoreader进行文章阅读,详情见RSS入坑指南.阿里云部署RSSHub踩坑笔记.在202 ...
- VMWare WorkStation Pro 15下NeoKylin及达梦数据库安装过程及踩坑笔记
NeoKylin安装过程(CentOS亦可,推荐中标麒麟,相信以后会有更多的中国智造投入商用,中国加油!) (安装过程截图) 此处容易踩坑,如果是新手,还是乖乖在配置里把GUI选上,否则安装完重启,看 ...
- 「Java」基于Mirai的qq机器人开发踩坑笔记(其一)
目录 0. 前置操作 I. 安装MCL II. MCL自动登录配置 III. 安装IDEA插件 1. 新建Mirai项目 2. 编写主类 3. 添加外部依赖 4. IDEA运行 5. 插件打包 6. ...
- 「Java」基于Mirai的qq机器人开发踩坑笔记(其二)
目录 0. 配置机器人 1. onLoad方法 2. onEnable方法 3. 消息属性 4. 消息监听 I. 好友消息 II. 群聊消息 III. 无差别消息 5. 发送消息 I. 文本消息 II ...
- 昆仑通态触摸屏1003故障码,踩坑笔记
昆仑通态触摸屏1003故障码,踩坑笔记 第一次使用这个昆仑通态触摸屏,使用modbusRTU与金田变频器做通讯. 触摸屏在线后报1003通讯错误代码,现象是控制指令正常,但是读取不正常.读取变频器状态 ...
最新文章
- Design Pattern Template Method C
- SQL的四种连接-左外连接、右外连接、内连接、全连接(转)
- Programming Protocol-independent Packet Processors (P4)
- jpa 查询编写sql_学习编写基本SQL查询
- 理解First-Class Functions
- macbookpython常见问题_python读取文件常见问题(for macOS)
- [翻译] 5点建议,让iOS程序跑得更快
- 使用excel绘制统计分布表(T分布表)
- 计算机主机前耳机没声音,Win10电脑机箱前面板耳机没声音如何解决【解决方法】...
- C#获取SharePoint列表数据
- HBuilder开发App教程
- 经典解压缩软件 WinRAR 5.71 无广告版
- spring boot 源码解析23-actuate使用及EndPoint解析
- python 斗地主发牌_Python_斗地主发牌程序
- 程序员是青春饭吗-最新研究显示程序员的能力从50 岁后才会开始下降
- Python实现统计文本中各单词数量
- 大数据时代:预测未来5年各行业发展趋势
- 微信支付—— 扫码支付
- Android 在线升级APK
- uni-popup滚动无效的解决方案
热门文章
- javascript addEventListener()
- 命令行运行hadoop实例wordcount程序
- repeater中后台动态为控件添加属性
- 《head first java 》读书笔记(四)
- 09最短小说:意见统一
- html json 访问工程,SpringBoot:Web项目中如何优雅的同时处理Json和Html请求的异常...
- python编程未来就业方向有哪些?
- 3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
- html页面在ie上出现404怎么解决,如何解决自定义404页面在IE等浏览器中无法显示问题...
- php 读取excel转html,PHPExcel 转HTML