Home > Developer > Web Develop
the enhanced version of ol with the DL
1, OL's Start property and reversed property
1. You can define the start value of a label by using the Start property.
2. You can use the reversed property to reverse the numbering.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<ol start= "4" type= "I" reversed= "reversed" >
<li><a href= "index.html" > ordered list a</a> </li>
<li><a href= "index.html" > ordered list b</a> </li>
<li><a href= "index.html" > ordered list c</a> </li>
<li><a href= "index.html" > ordered list d</a> </li>
<li><a href= "index.html" > ordered list e</a> </li>
<li><a href= "index.html" > ordered list f</a> </li>
<li><a href= "index.html" > ordered list g</a> </li>
</ol>
</body>
2. Redefine the meaning of the DL element
DL elements in HTML4:
The DL element, in HTML4, is a list that is specifically used to define terms.
DL elements in HTML5:
DL element in HTML5, the DL element is redefined. Each item contains one or more names of DT elements, which are used to denote the term, and the DT element is followed by one or more DD elements to represent the definition. The redefined DL list contains multiple named list items.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<article>
<p> "HTML5" mainly explains how to use HTML5! </p>
<aside>
<dl>
<dt>HTML5</dt>
<DD>HTML5 is Hypertext Markup Language </dd>
<dt>CSS3</dt>
<DD>CSS3 is a cascading style sheet </dd>
</dl>
</aside>
</article>
</body>
L<dialog></dialog> Defining a Conversation
<dialog open>
<dt> Teacher </dt>
<dd>2+2 equals? </dd>
<dt> Students </dt>
<dd>4</dd>
<dt> Teacher </dt>
<dd> Answer it! </dd>
</dialog>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Untitled Document </title>
<script>
Document.createelement ("Leo");
Document.createelement ("header");
Document.createelement ("article");
Document.createelement ("aside");
Document.createelement ("section");
Document.createelement ("footer");
</script>
<style>
body{margin:0;}
Header{height:100px;background: #9F3; display:block;}
article{padding:10px;background: #CF6; overflow:hidden;zoom:1; position:relative; Display:block;}
Aside{width:200px;height:300px;background: #F06; position:absolute;left:10px;top:10px; Display:block;}
Section{margin-left:210px;background: #F90; height:300px; Display:block;}
footer{height:100px;background: #C6C; display:block;}
leo{background: #F03; height:100px; display:block;}
</style>
<body>
<article>
<aside> Side Bar </aside>
<section> Content Area </section>
</article>
<footer> bottom of page </footer>
<leo> Liu Wei is a fat </leo>
</body>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Untitled Document </title>
<script src= "Html5shiv.js" ></script>
<style>
body{margin:0;}
Header{height:100px;background: #9F3;}
article{padding:10px;background: #CF6; overflow:hidden;zoom:1; position:relative;}
Aside{width:200px;height:300px;background: #F06; position:absolute;left:10px;top:10px;}
Section{margin-left:210px;background: #F90; height:300px;}
footer{height:100px;background: #C6C;}
</style>
<body>
<article>
<aside> Side Bar </aside>
<section> Content Area </section>
</article>
<footer> bottom of page </footer>
</body>
<form>
L New input type control
Email: e-mail text box, no difference from normal
– When the input is not a mailbox, the verification pass
– The keyboard on the mobile side will change
? Tel: Telephone number
URL: URL of a Web page
? Search: Search engine
When you enter text under –chrome, an extra x is turned off
? Range: A numeric selector in a specific range
–min, Max, step (steps)
– Example: Use JS to display the current value
? Number: An input box that can contain only numbers
? Color: Color Picker
? datetime: Show Full date
Datetime-local: Show full date, no time zone
? Time: Display times with no time zone
? Date: Show Dates
? Week: Show week
? Month: Show month
<input type= "Tel"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Email"/>
<input type= "Submit"/>
</form>
<form>
<input type= "url"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Search"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Range" step= "2" min= "0" max= "ten" value= "2"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Range" step= "2" min= "0" max= "ten" value= "2"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Number"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Color"/>
<input type= "Submit"/>
</form>
<form>
<input type= "datetime"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Datetime-local"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Time"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Date"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Week"/>
<input type= "Submit"/>
</form>
<form>
<input type= "Month"/>
<input type= "Submit"/>
</form>
New form attributes and functions
PLACEHOLDER: input box prompt information
– Example: Password box hint for Weibo
? AutoComplete: Whether to save user input values
– The default is on, turn off the prompt to select off
Autofocus: Specify the form to get input focus
? list and DataList: Construct a selection list for the input box
–list value is the ID of the DataList tag
Required: This entry is required and cannot be empty
? Pattern: Regular validation pattern= "\d{1,5}"
? FormAction define submission address in submit
<form>
<input type= "text" placeholder= "Please enter 4-16 characters"/>
<input type= "Submit"/>
</form>
<form>
<input type= "text" placeholder= "Please enter 4-16 characters" name= "user" autocomplete= "off"/>
<input type= "Submit"/>
</form>
<form>
<input type= "text" placeholder= "Please enter 4-16 characters" name= "user" autocomplete= "off"/>
<input type= "password" placeholder= "Please enter 4-16 characters" name= "password" autocomplete= "off" autofocus/>
<input type= "Submit"/>
</form>
<form>
<input type= "text" placeholder= "Please enter 4-16 characters" name= "user" autocomplete= "off" required/>
<input type= "password" placeholder= "Please enter 4-16 characters" name= "password" autocomplete= "off" required/>
<input type= "Submit"/>
</form>
<form action= "http://www.baidu.com" >
<input type= "text" placeholder= "Please enter 4-16 characters" name= "user" autocomplete= "off" pattern= "\d{1,5}"/>
<input type= "Submit" value= "Submission"/>
<input type= "Submit" value= "Save to draft box" formaction= "http://www.qq.com"/>
</form>
Validity object:
? The following valid can be used to see if the validation passed, and if eight kinds of authentication are returned by true, a validation failure returns false
–otext.addeventlistener ("Invalid", fn1,false);
–ev.preventdefault ()
–valuemissing: When the input value is empty
–typemismatch: The control value does not match the expected type
–patternmismatch: Input value does not meet the pattern regular
–toolong: Maximum limit over maxlength
–rangeunderflow: The range minimum value verified
–rangeoverflow: The range maximum value verified
–stepmismatch: Verifies that the current value of range conforms to the rules for Min, Max, and step
–customerror does not conform to custom validation
? setcustomvalidity (); Custom validation
? Invalid event: Verify feedback input.addeventlistener (' invalid ', fn,false)
– Block Default authentication: Ev.preventdefault ()
? formnovalidate properties: Turn off validation
<body>
<form>
<input type= "text" Required id= "text"/>
<input type= "Submit"/>
</form>
<script>
var Otext=document.getelementbyid ("text");
Otext.addeventlistener ("Invalid", fn,false);
function fn ()
{
alert (this.validity.valid);
Ev.preventdefault ();
}
</script>
</body>
<body>
<form>
<input type= "Email" id= "text"/>
<input type= "Submit"/>
</form>
<script>
var Otext=document.getelementbyid ("text");
Otext.addeventlistener ("Invalid", fn,false);
function fn ()
{
alert (This.validity.typeMismatch);
Ev.preventdefault ();
}
Valuemissing returns True when the input value is empty
Typemismatch returns True when the input type and the required type are inconsistent
</script>
</body>
<body>
<form>
<input type= "text" id= "text" pattern= "\d{1,5}"/>
<input type= "Submit"/>
</form>
<script>
var Otext=document.getelementbyid ("text");
Otext.addeventlistener ("Invalid", fn,false);
function fn ()
{
alert (This.validity.patternMismatch);
Ev.preventdefault ();
}
Valuemissing returns True when the input value is empty
Typemismatch returns True when the input type and the required type are inconsistent
Patternmismatch returns True when user input content and expected regular requirements do not match
</script>
</body>
<body>
<form>
<input type= "Email" id= "text" maxlength= "5"/>
<input type= "Submit"/>
</form>
<script>
var Otext=document.getelementbyid ("text");
Otext.value= "123456789";
Otext.addeventlistener ("Invalid", fn,false);
function fn ()
{
alert (This.validity.tooLong);
Ev.preventdefault ();
}
Valuemissing returns True when the input value is empty
Typemismatch returns True when the input type and the required type are inconsistent
Patternmismatch returns True when user input content and expected regular requirements do not match
Toolong returns True when the length of the user input exceeds the limit of maxlength
</script>
</body>
<body>
<form>
<input type= "Range" value= "2" min= "1" max= "Ten" step= "2" id= "text"/>
<input type= "Submit"/>
</form>
<script>
var Otext=document.getelementbyid ("text");
Otext.value= "2";
alert (Otext.value);
Otext.addeventlistener ("Invalid", fn,false);
function fn ()
{
alert (This.validity.rangeOverflow);
Ev.preventdefault ();
}
Valuemissing returns True when the input value is empty
Typemismatch returns True when the input type and the required type are inconsistent
Patternmismatch returns True when user input content and expected regular requirements do not match
Toolong returns True when the length of the user input exceeds the limit of maxlength
</script>
</body>
<body>
<form>
<input type= "text" id= "text"/>
<input type= "Submit"/>
</form>
<script>
var Otext=document.getelementbyid ("text");
Otext.addeventlistener ("Invalid", fn,false);
Otext.oninput=function ()
{
if (this.value== "sensitive words")
{
this.setcustomvalidity ("Please do not enter sensitive words");
}
Else
{
This.setcustomvalidity ("");
}
};
function fn ()
{
alert (this.validity.customError);
Ev.preventdefault ();
}
Valuemissing returns True when the input value is empty
Typemismatch returns True when the input type and the required type are inconsistent
Patternmismatch returns True when user input content and expected regular requirements do not match
Toolong returns True when the length of the user input exceeds the limit of maxlength
Customerror is not eligible to return true when defining validation
</script>
</body>
<body>
<form action= "http://www.baidu.com" >
<input type= "text" placeholder= "Please enter 4-16 characters" name= "user" pattern= "\d{1,5}" required/>
<input type= "Submit" value= "Submission"/>
<input type= "Submit" value= "Save to draft box" formaction= "http://www.qq.com" formnovalidate/>
</form>
</body>
HTML5 Foundation (v)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
