What new tag elements are added to HTML5?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

What new tag elements are added to HTML5?

php中世界最好的语言

Nov 23, 2017 pm 03:50 PM

h5 html5 element

Everyone knows that H5 has added a lot of new element tags, so let us summarize for you, what tags has been added to H5? What do these tags do?

Input type="XXX"

Email: The prompt format is incorrect

url Address: Address format: http://www.....

Number: Numeric type

Attributes: min minimum max maximum

Range: Input field for numbers within the range Slider understanding

Date: Date selector

Tel: Input box for phone number

Color: Color selector

New form attribute:

autocomplete attribute specifies form or input The domain should have autocomplete functionality. Value on is turned on and off is turned off.

The autofocus attribute of the form prompt box stipulates that the field automatically gains focus when the page is loaded. autofocus="autofocus" There is only one

formaction on the page - rewrite the action attribute of the form and redirect the form submission. When the form data is submitted, it is submitted to that page for data processing

formmethod - rewrite The method attribute of the form

The width and height of the input element of image type

height:

width:

list: The attribute specifies the datalist of the input field

Explanation: The associated option input-à is associated into a drop-down list datalist list="val" =è datalist id="val"

All options in Datalist must be option

Label Tip

Value The value that appears in the drop-down list

required attribute stipulates that the input field must be filled in before submission (cannot be empty). Required fields can be used on all input type elements.

Case:

Css代码
@charset "utf-8";
/* CSS Document */
*{ margin:0px;padding:0px;}
ul,li{ list-style:none;}
a{ text-decoration:none;}
header{
      border:0px solid #ff0000;
      width:90%;
      height:80px;
      margin:0 auto;
      font-size:50px;
      background-color:#E9F8FE;
      text-align:center;
      line-height:80px;
}
nav{
      width:90%;
      height:30px;
      margin:20px auto;
      border:0px solid #ff0000;
      background-color:#8CCFF0; 
}
nav ul{ padding-left:30px;}
nav ul li{
      width:80px;
      float:left;
      line-height:30px;
      font-weight:bold;    
}
nav ul li a:hover{ color:#F00;}
 
section{
      height:600px;
      width:90%;
      border:1px solid #CCC;
      margin:0 auto;  
}
aside{
     width:20%;
      float:left;
      height:600px;
      border-right:1px solid #ccc; 
}
aside ul{
      border:0px solid #00ff00;
      height:400px;   
}
aside ul li a{
      color:#000;
      line-height:40px;
      border-bottom:1px solid #ccc;
      text-align:center;
      display:block;   
}
form{
     width:75%;
      float:left;
      margin-left:10px;    
      padding-left:30px;
      padding-top:20px;
}
form p{ line-height:30px;}
 
footer{
      width:90%;
      height:100px;
      text-align:center;
      margin-top:20px;    
}

Copy after login

Html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
      XXX科技有限公司出品
</header>
<nav>
      <ul>
          <li><a href="#">首    页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">产品介绍</a></li>
          <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<section>
      <aside>
        <ul>
            <li><a href="#">客服中心</a></li>
            <li><a href="#">用户中心</a></li>
            <li><a href="#">产品中心</a></li>
            <li><a href="#">反馈中心</a></li>
        </ul>
    </aside>
      <form action="1.html">
          <p>用户名<input type="text" name="uName"></p>
          <p>邮箱<input type="email" name="uEmail"></p>
          <p>
              性别<input type="text" list="uSex" name="sex">
               <datalist id="uSex">
                 <option value="男"></option>
                 <option value="女"></option>
             </datalist>
        </p>
          <p>手机<input type="tel" name="uTel"></p>
          <p><input type="submit" value="注册"></p>
    </form>
</section>
<footer>
      京ICP：111111111 地址：XXXXXX
</footer>
</body>
</html>

Copy after login

There are so many new tags and functions in H5. For more exciting content, please pay attention to other related articles on the php Chinese website!