HTML5

1.新增布局标签

header 整个页面,或部分区域的头部
footer 整个页面,或部分区域的底部
nav 导航
artical 文章、帖子、杂志、新闻、博客、评论等
section 页面中的某段文字,或文章中的某段文字(里面文字通常里面会包含标题)
aside 侧边栏

2.新增状态标签

image.png
    <span>手机电量:</span>
    <meter max="100" value="70" low="10" high="20" optimum="90"></meter>
    <span>当前进度:</span>
    <progress max="100" value="20"></progress>
image.png

3.新增列表标签

image.png
    <form action="#">
        <input type="text" list="mydata">
        <button>搜索</button>
    </form>
    <datalist id="mydata">
        <option value="张一">张一</option>
        <option value="张二">张二</option>
        <option value="李三">李三</option>
        <option value="李四">李四</option>
    </datalist>
    <br>
    <details>
        <summary>问题</summary>
        <p>对于问题的解释</p>
    </details>
image.png

image.png

4.新增文本标签

4.1 文本注音
ruby 包裹需要注音的文字
rt 写注音,rt标签写在ruby的里面

    <ruby>
        <span>尚硅谷</span>
        <rt>shàng guī gǔ</rt>
    </ruby>
image.png

4.2 文本标记
mark

5.表单相关的新增

5.1新增表单控件属性

placeholder="" 提示文字
required 必填
autofocus 自动获取焦点
autocomplete="" 值为on/off
pattern="正则表达式" 与required配合

5.2input新增的type属性值
image.png
    <form action="" novalidate>
        <div>
            邮箱:
            <input type="email" name="email">
        </div>
        <div>
            url:
            <input type="url" name="url">
        </div>
        <div>
            数值:
            <input type="number" name="number" step="2">
        </div>
        <div>
            搜索:
            <input type="search" name="keyword">
        </div>
        <div>
            电话:
            <input type="tel" name="phone">
        </div>
        <div>
            范围:
            <input type="range" name="range" max="80" min="0" value="22">
        </div>
        <div>
            颜色选择器:
            <input type="color" name="color">
        </div>
        <div>
            日期:
            <input type="date" name="date">
            月份:
            <input type="month" name="month">
            周:
            <input type="week" name="week">
            时间:
            <input type="time" name="time">
            日期+时间:
            <input type="datetime-local" name="time2">
        </div>
        <button>提交</button>
    </form>
image.png

6.新增多媒体标签

video
audio

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 HTML5 新增语义化标签 1.1 新增页面结构标签 标签名语义和功能属性单标签or双标签备注header定...
    采蘑菇的仔仔阅读 3,520评论 0 1
  • 一、html5语法特点 1.DOCTYPE及字符编码① 文档声明DOCTYPE:<!doctype html>② ...
    MGd阅读 4,662评论 0 2
  • 本文主要介绍Html5和Html4的区别。 语法的改变 内容类型HTML5 的文件扩展符与内容类型保持不变。扩展符...
    layjoy阅读 5,849评论 0 23
  • 状态标签 meter:用来显示已知范围的标量值或者分数值。 value:当前的数值。 min:值域的最小边界值。如...
    Precipice阅读 4,292评论 0 0
  • HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成. *HTML5语法 DOCTY...
    尘中老阅读 3,552评论 0 0

友情链接更多精彩内容