• 【前段基础入门之】=＞HTML5 的新增特性！

    在这里插入图片描述

    这里写目录标题

    导语：

    在前面章节中，我们介绍的有关 HTML 的知识点，更多是基于HTML4来讲解的，目前HTML的版本已经发展到第五代的，所以本章节就针对性的对HTML5做一期概述讲解。

    在这里插入图片描述

    HTML5简介

    HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（ W3C ）完成标准制定。
    官网地址：

    • W3C 提供： 官网
    • WHATWG 提供：官网
      HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端开发岗位。

    HTML5 优势

    • 针对 JavaScript ，新增了很多可操作的接口。
    • 新增了一些语义化标签、全局属性。
    • 新增了多媒体标签，可以很好的替代 flash 。
    • 更加侧重语义化，对于 SEO 更友好。
    • 可移植性好，可以大量应用在移动设备上。

    新增语义化标签

    新增布局标签

    标签名语义化标签特征
    header整个页面，或部分区域的头部双
    footer 整个页面，或部分区域的底部双
    nav 导航双
    article 文章、帖子、杂志、新闻、博客、评论区域等双
    section页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题双
    aside 侧边栏双
    main 文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用双
    hgroup 包裹连续的标题，如文章主标题、副标题的组合 （ W3C 将其删除）双

    在这里插入图片描述

    新增状态标签

    meter 标签

    • 语义： 定义已知范围内的标量测量。也被称为 gauge （尺度），双标签，例如：电量、磁盘用量等
    • 常用属性如下:
    属性名描述属性值
    high规定高值数值
    low规定低值数值
    max规定最大值数值
    min规定最小值数值
    optimum规定最优值数值
    value规定当前值值数值
      meter状态标签: <meter high="80" low="10" max="100" min="0" value="45" optimum="81">meter>

    • 1

    在这里插入图片描述

    progress 标签

    • 语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。
    • 常用属性如下：
    属性名描述属性值
    max规定最大值数值
    value规定当前值数值
    <progress max="100" value="75">progress>

    • 1

    在这里插入图片描述

    新增列表标签

    标签名语义化标签特征
    datalist用于搜索框的关键字提示 （自动补全）双
    details用于展示问题和答案，或对专有名词进行解释双
    summary写在 details 的里面，用于指定问题或专有名词双
    <input type="text" list="mydata"><button>搜索button>
<datalist id="mydata">
  <option value="西瓜">西瓜option>
  <option value="西边">西边option>
  <option value="鸡肉">鸡肉option>
  <option value="鸡腿">鸡腿option>
datalist>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述
    在这里插入图片描述

      <details>
    <summary>前端怎么学？summary>
    <p>一步一步学p>
  details>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述
    在这里插入图片描述

    新增文本标签

    文本注音

    标签名语义化标签特征
    ruby包裹需要注音的文字双
    rt 写注音， rt 标签写在 ruby 的里面双
    <ruby>
  <span>魑魅魍魉span>
  <rt>chī mèi wǎng liǎng rt>
ruby>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    文本标记

    标签名语义化标签特征
    mark标记关键字双

    在这里插入图片描述

    新增表单功能

    表单控件新增属性

    属性描述
    placeholder提示文字（注意：不是默认值， value 是默认值），适用于文字输入类的表单控件
    required 表示该输入项必填， 适用于除按钮外其他表单控件
    autofocus 自动获取焦点，适用于所有表单控件
    autocomplete自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用
    pattern填写正则表达式，适用于文本输入类表单控件。注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合使用

    input 新增属性值

    属性描述
    email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式
    urlurl 类型的输入框，表单提交时会验证格式，输入为空则不验证格式
    number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式
    search搜索类型的输入框，表单提交时不会验证格式
    tel电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字拨号键盘
    range范围选择框，默认值为 50 ，表单提交时不会验证格式
    color 颜色选择器，默认值为黑色，表单提交时不会验证格式
    date日期选择框，默认值为空，表单提交时不会验证格式
    month 月份选择框，默认值为空，表单提交时不会验证格式
    week 周选择框，默认值为空，表单提交时不会验证格式
    time 时间选择框，默认值为空，表单提交时不会验证格式
    datetime-local日期+时间选择框，默认值为空，表单提交时不会验证格式

    form 标签新增属性

    属性描述
    novalidate如果给 form 标签设置了该属性，表单提交的时候不再进行验证

    新增多媒体标签

    视频播放标签

    标签用来定义视频，它是双标签。

    属性属性值描述
    src URL地址视频地址
    width像素值设置视频播放器的宽度,几乎不用（通过css调整）
    height 像素值设置视频播放器的高度,几乎不用（通过css调整）
    controls-向用户显示视频控件（比如播放/暂停按钮
    muted -视频初始化静音
    autoplay -自动播放
    loop -循环播放
    posterURL地址视频封面；如果不设置，视频默认第一帧为封面
    preloadauto / metadata / none视频预加载，如果使用 autoplay ，则忽略该属性
    none : 不预加载视频
    metadata : 仅预先获取视频的元数据（例如长度）
    auto : 浏览器自动调控是否预加载

    音乐播放标签

    标签用来定义音频，它是双标签。

    属性属性值描述
    src URL地址音频地址
    controls-向用户显示音频控件（比如播放/暂停按钮
    autoplay -自动播放
    muted -音频初始化静音
    loop -循环播放
    preloadauto / metadata / none音频预加载，如果使用 autoplay ，则忽略该属性
    none : 不预加载音频
    metadata : 仅预先获取音频的元数据（例如长度）
    auto : 浏览器自动调控是否预加载

    新增全局属性（拓展）

    属性描述
    contenteditable表示元素是否可被用户编辑，可选值如下

    true：可编辑

    false：不可编辑
    draggable表示元素是否可被用户拖动，可选值如下

    true：可拖动

    false：不可拖动


    备注：需结合 JS 实现
    hidden隐藏元素；不占位
    spellcheck规定是否对元素进行拼写和语法检查，可选值如下：，可选值如下

    true：检查

    false：不检查
    contextmenu规定元素的上下文菜单，在用户鼠标右键点击元素时显示

    需结合 JS 实现定制化右键菜单
    data-*用于存储页面的私有定制数据

    HTML5兼容性处理

    由HTML5新增很多新特性，这就对很多老旧浏览器，不够友好，所以处理兼容性的问题，也是前端的一门必修课。

    在这里插入图片描述

    处理方式：

    • 添加元信息，让浏览器处于最优渲染模式。
    
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<meta name="renderer" content="webkit">

    • 1
    • 2
    • 3
    • 4
    • 使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。
    

    • 1
    • 2
    • 3

    在这里插入图片描述

    示例：

    
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    讲在最后：

    本章节介绍有关 HTML5 的新特性，其实远远不止于这些，但是由于 HTML5 开放的更多接口方法,需要结合 JavaScript 一起使用，才能发挥出更大的作用，所以在本章节中没有提及，且在这里出现的意义不大，所以后续会在 JavaScript 专区进行梳理使用，到时候才能真正发挥出 HTML5 强大的新特性功能。

    🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
    ——————————————————————————————
    🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
    ——————————————————————————————
    🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
    ——————————————————————————————

  • 相关阅读:
    云计算 3月6号 （crontab-计划任务 日志轮转 免密登录）
    32、学习 Java 中的注解（参照官方教程）
    1064 Complete Binary Search Tree
    pycharm 2023.2.3设置conda虚拟环境
    道可云元宇宙每日资讯｜元宇宙行业产教融合共同体成立仪式举行
    基于Nodejs的电商管理平台的设计和实现
    【Python基础入门8】关于字符串
    ROS下机器人系统仿真及部分SLAM建图
    数据治理-常见的OLAP操作
    asp.net core mvc 视图组件viewComponents
  • 原文地址：https://blog.csdn.net/qq_60961397/article/details/132659598