【前端(六)】HTML5 新特性笔记总结

文章目录1. 语义化布局标签1.1 HTML5 新增布局标签1.2 结合实例理解语义1.3 疑问解答1.4 ❓ 为什么要使用语义标签优势是什么2. 文本与多媒体标签2.1 文本标签2.1.1 注音标签 ruby rt2.1.2 标记标签 mark2.2 多媒体标签 video 与 audio2.2.1 video 视频标签属性2.2.2 audio 音频标签属性3. 新增列表与交互标签4. 新增表单功能4.1 新增的 input 类型4.2 表单控件新增属性4.3 ❓ 问题答疑5. 状态指示标签5.1 ️ 度量标签 meter5.2 ⏳ 进度标签 progress6. 元素显示模式总结行内、块级、行内块1. 语义化布局标签 回顾基础块级元素标签语义说明h1~h6标题h1最重要建议每个页面只出现一次h2~h6可多次使用但不能相互嵌套p段落用于表示一段文字内部不能包含任何块级元素div无特殊语义通用的块级容器常用于页面布局1.1 HTML5 新增布局标签标签名语义典型用途单/双header头部页面或区域顶部Logo、导航栏、搜索框双footer底部页面或区域底部版权、友情链接、联系方式双nav导航主导航菜单PC/移动端菜单栏双aside侧边栏广告、热门文章、作者信息、相关链接双article独立文章博客帖子、新闻、评论、论坛帖子可独立分发双section章节页面中的某个内容区块通常包含标题双1.2 结合实例理解语义header如图番茄小说页面的顶部搜索框 菜单图标 Logo区域nav如图所示的首页、书库、书架、个人中心。注意导航不一定在顶部也可在侧边或底部。footer页面最底部的版权信息、备案号等aside侧边栏内容如书籍分类榜单、相关推荐。它承载与主内容互补的辅助信息。article独立完整的内容块例如一篇小说的章节正文。section页面或文章中的某个章节分区如“小标题 正文”区块。1.3 疑问解答问1为什么一些大型网站页面打开检查几乎全部是divclass而不是语义标签历史兼容性有些网站诞生于HTML5普及之前庞大的历史代码重构成本极高。CSS框架与组件化如今大型网站普遍使用 Vue、React 等框架。在组件化开发中div 退化成一个纯粹、无特定语义的容器元素被组件内部大量使用。组件名本身才是真正的语义单元。打包后组件名消失留下的就是 div因此开发者工具中看到的是底层实现而非源码中的语义结构。部分语义标签支持不完美老版本 IEIE8 及以下不认识 header 等标签需要额外技术手段如 html5shiv.js才能兼容。虽然现在已不是问题但遗留项目的代码风格得以延续。SEO的实际策略搜索引擎现在对divclass也能较好理解语义标签只是加分项而非决定性因素。对于大站而言内容质量与链接权重远比标签本身更重要。问2section和div以及article到底怎么区分是不是不用太纠结标签含义使用场景article独立、可分发的内容单元一篇博客、一条新闻、一个用户评论、一个论坛帖子。它应该能脱离当前页面上下文被理解section强调的是分段或分块文档或应用的主题性分区通常包含一个标题h2~h6。比如联系表单区块、商品列表区块、文章中的“方法论”章节div无任何语义的容器用于布局样式或作为 JavaScript 钩子小结如果内容可以独立分发 →article如果是页面内一个带标题的主题区块 →section如果只是为了样式或脚本分组 →div不必过度纠结但合理使用语义标签能让代码更健壮。我们要知道h5的优势之一是多了很多语义标签h5也更强调语义这些文本标签直接书写没有什么默认效果但是在布局上有语义1.4 ❓ 为什么要使用语义标签优势是什么优势说明SEO搜索引擎优化搜索引擎爬虫能识别nav是导航、article是核心内容从而更准确地抓取和权重分配可访问性A11y屏幕阅读器如NVDA、VoiceOver可以让用户快速跳转到header、nav、main等区域极大提升残障人士体验代码可维护性结构自解释新成员接手项目时一眼就能看懂布局意图未来兼容性浏览器和搜索引擎会持续优化对语义标签的支持使用它们更符合Web标准HTML5 强调语义语义标签本身没有默认视觉效果但为布局赋予了明确的结构意义。在新项目中应优先使用这是现代 Web 开发的最佳实践。2. 文本与多媒体标签2.1 文本标签回顾:强调与通用行内元素标签语义说明em强调语气稍弱通常显示为斜体strong强调语气更强通常显示为粗体表示重要性span无特殊语义通用的行内容器常用于包裹一小段文本以便单独设置样式2.1.1 注音标签rubyrt标签名语义单/双标签ruby包裹需要注音的文字双rt写注音rt 标签写在 ruby 的里面双用途为汉字或词语标注拼音、音标或注释。语法必须先写基准文本再用rt包裹注音。换句话说必须先告诉浏览器要给哪个字注音然后再给出注音内容但是显示在页面的时候默认注音在上文本在下。正确示例rubyephemeralrt/ɪˈfemərəl//rt/rubyrubyspan魑魅魍魉/spanrtchī měi wǎng liǎng/rt/ruby显示效果基准文本在下注音在上方。❌错误写法rubyrt/ɪˈfemərəl//rtephemeral/rubyrubyrtchī měi wǎng liǎng/rtspan魑魅魍魉/span/ruby这样会导致注音文本单独显示在上方基准文本显示在下方且不对齐。2.1.2 标记标签mark语义表示与上下文相关性的一段文字如搜索结果中的关键词、当前高亮内容。注意W3C建议mark用于标记搜索结果中的关键字不要滥用为普通高亮普通高亮可用spanCSS。2.2 多媒体标签video与audio2.2.1video视频标签属性属性值示例说明srcvideo.mp4视频文件地址width / height640 / 360播放器尺寸controls布尔属性显示播放控件播放/暂停/音量/全屏autoplay布尔属性自动播放现代浏览器通常要求同时设置 muted muted布尔属性静音播放loop布尔属性循环播放posterposter.jpg视频加载前显示的封面图preloadauto / metadata/ none预加载策略。若设置 autoplay 此属性被忽略2.2.2audio音频标签属性属性与video类似但没有width/height/poster。3. 新增列表与交互标签标签名语义用途datalist为输入框提供预定义选项列表实现“输入提示/自动补全”效果details可折叠的详细信息区域常见于FAQ、代码示例折叠summary用于内作为可见标题点击标题可展开/收起详情示例代码!-- 1. datalist搜索框提示 --inputtypetextlistsuggestionsplaceholder输入明星名字datalistidsuggestionsoptionvalue周杰伦optionvalue周冬雨optionvalue周润发optionvalue马冬梅/datalist!-- 2. details summary折叠面板 --detailssummary如何走上人生巅峰/summaryp第一步学习HTML5第二步掌握JavaScript第三步... 然后你就发现路还要一步一步走。/p/details注意datalist 只是提示用户仍可以输入列表外的值。如果需要严格的选择框请使用 select。4. 新增表单功能回顾经典表单控件控件类型标签示例文本输入框input type“text”input type“text” name“username” placeholder“请输入用户名”密码输入框input type“password”input type“password” name“pwd”单选框input type“radio”input type“radio” name“sex” value“男” 男复选框input type“checkbox”input type“checkbox” name“hobby” value“读书” 读书隐藏域input type“hidden”不显示用于携带固定数据提交按钮input type“submit”/ buttonbutton提交/button默认 type 为 submit重置按钮input type“reset”/ button type“reset”重置表单内所有控件到初始状态普通按钮input type“button” / button type“button”通常配合 JavaScript 使用文本域textarea多行文本输入下拉框select option选择列表4.1 新增的input类型type 值说明验证email邮箱地址提交时检查是否包含和域名空值不验证url网址检查协议头(http://等)number数字限制只能输入数字有上下箭头search搜索框不验证格式但提供清除按钮tel电话号码不验证格式但移动端唤起数字键盘range滑块默认值50不验证格式color颜色选择器比如返回十六进制颜色值默认#000000date日期选择器返回YYYY-MM-DDmonth月份YYYY-MMweek周YYYY-Wwwtime时间HH:MMdatetime-local本地日期时间YYYY-MM-DDTHH:MM关于 step 属性的补充step控制数字增减的粒度。默认 step“1”。如果设置 step“2”则只能选择偶数2,4,6…且手动输入奇数会被拦截。示例input typenumber step2不可能得到3。同时 min 和 max 可限制范围。4.2 表单控件新增属性属性适用控件说明placeholder文本类输入框提示文本不是默认值。若需默认值用 valuerequired除按钮外的所有控件标记为必填。提交时若为空则阻止提交并提示autofocus所有表单控件页面加载后自动获得焦点。autocomplete文本类输入框注意密码输入框、多行输入框不可用。是否启用浏览器自动填充历史。值on/offpattern文本类输入框用正则表达式验证输入。注意空值不会触发验证所以通常与 required 配合使用4.3 ❓ 问题答疑问1equired 放在多选框checkbox和单选框radio上时行为有什么不同单选框radio如果一组 name 相同的单选框中有任意一个设置了 required那么用户必须选择其中一项才能提交。通常只需给第一个或任意一个加 required 即可。复选框checkbox如果某个复选框设置了 required那么用户必须勾选它才能提交。常用于“我已阅读并同意条款”。多个复选框如果需要用户至少勾选一个不能只靠 required它会要求每个都勾选。需要借助JavaScript。问2autofocus 先写谁就先聚焦谁所以一般不全部都写吧一个页面只能有一个元素获得自动焦点。如果多个元素都写了 autofocus行为未定义不同浏览器可能聚焦最后一个或第一个。最佳实践最多只在一个主要输入框上使用。问3autocomplete 需要浏览器开启保存而且必须输入严丝合缝不能输入“杰”就出来“周杰伦”autocomplete 依赖浏览器保存的完整历史记录并且匹配策略是前缀匹配即输入的内容必须和历史记录的开头一致。例如您曾经提交过“周杰伦”再次输入“周”时会提示“周杰伦”但输入“杰”则不会提示。不能用于password出于安全、radio/checkbox无意义、textarea。5. 状态指示标签5.1 ️ 度量标签meter语义表示已知范围内的标量测量值如电量、磁盘使用量、温度、投票占比。属性属性说明value当前值必须min最小值默认为0max最大值默认为1low“低”阈值high“高”阈值optimum最优值颜色变化规则低区间[min, low)中区间[low, high]高区间(high, max]其中optimum 表示“最优值”它决定了哪个区间被认为是“好的”。大多数浏览器将 optimum 默认为中区间的某个值。如果 value 在最优区间内 → 显示绿色好如果 value 在最优区间的相邻区间 → 显示黄色一般如果 value 在最优区间的相隔区间 → 显示红色差若 optimum 落在 低区间[min, low)则低区间为最优区间中区间为相邻高区间为相隔若 optimum 落在 中区间[low, high]则中区间为最优区间低区间和高区间均为相邻通常低和高都显示黄色若 optimum 落在 高区间(high, max]则高区间为最优区间中区间为相邻低区间为相隔。5.2 ⏳ 进度标签progress语义表示任务完成进度如上传、安装、加载。属性属性说明value当前完成的量max总量默认为1注意 没有 min 属性最小值始终为0代表进度为0。6. 元素显示模式总结行内、块级、行内块显示模式标签列表块级元素header,footer,nav,aside,article,section,details,summarydiv,h1~h6,p,form等行内元素span,em,strong,mark,ruby,rt,a等行内块元素img,video,audio,progress,meter等以上为个人学习总结旨在梳理个人理解。如有疏漏或不当之处欢迎指正与交流。