zoukankan      html  css  js  c++  java
  • HTML5—— 你肯定会用到的新知识

    HTML5 简介

    语义化标签

    新增结构标签

    表单

    多媒体

    HTML5 简介

    XML是更加严格的语言 是HTMLXHTML的结合 

    语义化标签

      新增的语义化标签 header nav section aside footer

    新增结构标签

    <details>关于文档的细节

    <details>

    <summary>我的标题我做主</summary>

    <p>搞笑</p>

    </details>

     

    Figure

    独立的文档流内容,与主题无关 可以盛放标签和图片等 与托尼盖的div不一样的是他与其他部分上下左右均有距离

    <figure>

      <figcaption>黄浦江上的的卢浦大桥</figcaption>

      <img src="shanghai_lupu_bridge.jpg" width="350" eight="234" />

    </figure>

    Time标签 使时间变得有意义但是不熬变其形式

    Section 定义文档中的流

    <section>

      <h1>PRC</h1>

      <p>The People's Republic of China was born in 1949...</p>

    </section>

    Progress

    用来显示进度

    <progress value="22" max="100">

    进度条

    </progress>

    如果认则显示进度条 不认就显示字体

    Meter 度量衡

    <p>

           Christmas is in

           <meter value ="30" min="1" max="366" title="days">

           30 days!

    </p>

    Title 是鼠标上去显示title的值

    表单

    表单属性新增

    Autofocus自动获取焦点 适用于所有的input 就是一打开就能看到框框里有闪动的光标

    User name: <input type="text" name="user_name"  autofocus="autofocus" />

    Placeholder 提示期待值

    Required 必须输入东西在提交前不能不输入

    Name: <input type="text" name="usr_name" required="required" />

    新增input类型

    E-mail: 

    E-mail: <input type="email" name="user_email" />

    URL网址

    Homepage: <input type="url" name="user_url" />

    输入的时候必须是http开头的网址

    Number数字域

    必须是可以接受的范围

    <input type="number" name="points" min="1" max="10" />

    具有最大值 max 最小值min 和步长 step

    Range滑动条

    <input type="range" name="points" min="1" max="10" />

    同样具有最大值最小值和步长

    Date - pickers{日期选择)

    date - 选取日、月、年

    month - 选取月、年

    week - 选取周和年

    time - 选取时间(小时和分钟)

    datetime - 选取时间、日、月、年(UTC 时间)

    datetime-local - 选取时间、日、月、年(本地时间)

    Date: <input type="date" name="user_date" />

    Search 搜索域

    <input type=”search”>

    value值为16进制的时候默认颜色

    <input type =”color” value=”ff0000”/>

    默认为黑色 改变颜色的时候需要改变value的值

      Tel 电话框

    <input type=”tel” value=””/> 没有变化只是提供一个框

    正则表达式

    <input type=”tel” value=”” name=” tellphone” pattern=”d{11}”/> 

    多媒体

    音频

    <audio src=”song.mp3” controls=controls>

    音频兼容

    <audio controls="controls">

      <source src="song.ogg" type="audio/ogg">

      <source src="song.mp3" type="audio/mpeg">

    Your browser does not support the audio tag.

    </audio>

  • 相关阅读:
    Ceph
    linux五天光速入门
    shell编程
    Docker&K8S&持续集成与容器管理--系列教程
    openstack系列
    爬虫快速入门
    python奇闻杂技
    机器学习
    数据分析
    量化分析
  • 原文地址:https://www.cnblogs.com/chongzixing/p/7353893.html
Copyright © 2011-2022 走看看