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;
}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>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!
Related reading:
The above is the detailed content of What new tag elements are added to HTML5?. For more information, please follow other related articles on the PHP Chinese website!
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AMWebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AMThe role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.
HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AMHTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract
HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AMHTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PMHTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Dreamweaver Mac version
Visual web development tools
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
