h5-常用标签

h5-常用标签

h5:语义化标签

 

语义化标签的好处:

           1)    html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
            2)    即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
            3)    搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
            4)    使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

定义一个导航
            nav  导航标签
            header  头部
            footer  底部
            hgroup  标题组
            section 划分区域的
            article 主题内容
            aside   主题内容的附属信息
            figure  定义媒体信息
            figcaption figure媒体的标题
            time    定义日期(datetime time标签上面的属性

     <time datetime="2019-02-14">情人节</time>有约会吗

html5中的

datalist下拉列表

        <datalist id="vlist">
            <option value="百度">百度</option>
            <option value="千度">千度</option>
            <option value="京东">京东</option>
            <option value="淘宝">淘宝</option>
        </datalist>
        <details open>  <!--属性和属性值一致的时候,可以只写一个open="open"   open-->
            <summary>人人教育</summary>
            <p>前端培训很专业</p>
        </details>

dialog对话

        <dialog open>
            <dt>老师在吗?</dt>
            <dd>1+1=?</dd>
            <dt>学生</dt>
            <dd>这个问题不会吗?你问的问题我没法接啊?</dd>
        </dialog>

address  地址信息,起提示作用

mark 标记,背景颜色默认是黄色,警告黄

progress 进度条

pre 可以按照指定的结构输出

sub 设置下标        例如H2O
sup 设置上标        例如2的2次方

 h5表单

action 提交地址

method 数据提交方式   get ,post

autofocus 自动获取焦点

required 验证信息

html5中表单新增的

            <input type="color" /> <!--取色器-->
            <input type="tel" />  <!--在手机端会调取数字键盘-->
            <input type="number" /> <!--可以增减数字的文本框-->
            <input type="email" /> <!--在手机端会调取键盘@-->            
            <input type="date" />  <!--带年月日的输入框-->
            <input type="week" />  <!--周-->
            <input type="month" /> <!--月-->
            <input type="url" />   <!--在手机端会调取带网址的输入框-->
            <input type="search" />  <!--搜索框-->
            <input type="datetime" /> <!--时间标签,这个框输入的是时间-->
<input type="range" value="0" /> <!--控制调节按钮-->

 

posted @ 2018-11-18 16:46  nannanxiaogege  阅读(303)  评论(0编辑  收藏  举报