"HTML5 and CSS3 Basic Course" Study notes--four Day

16th Chapter

1. Inputs and elements

Email box <input type= "Email" >

Search box <input type= "Search" >
Phone box <inputtype= "Tel" >
URL box <inputtype= "url" >
The following elements are supported by some browsers
Date <input type= "Date" >

Digital <input type= "number" >
Range <input type= "range" >
Data list

<input type= "text" name= ""  list= "fruit"/><datalist><option> </option><option> </option><option> </option></datalist>

The following inputs or elements are rarely supported, and the HTML5 is likely not to be included in the 2014 decision.
Color <input type= "Color"/>

Global date and Time <inputtype= "datetime"/>
Local date and time <input type= "datetime-local"/>
Month <input type= "month"/>
<input type= "Time"/>
Zhou <input type= "Week"/>
Output <output></output>

2. Properties:

1) Accept restricts the types of files that users can upload

2) AutoComplete If you add a form element or a specific field

3) autocomplete= "Off" will turn off the browser's AutoFill function for the form or the field. The default value is on

4) Autofocus the focus to the field after the page is loaded

5) Multiple allow multiple email addresses to be entered, or upload multiple files

6) List links DataList to input.

7) maxlength Specifies the maximum number of characters for textarea (this feature is supported in a text box before HTML5)

8) pattern defines the mode that a user enters before committing the text that must be followed placeholder specifies a hint text that appears in the text box, and the text disappears after the user starts typing

9) required requires a visitor to complete the field before submitting the form

Formnovalidate turns off the automatic verification function of the HTML5. The automatic validation function applied to the submit button novalidate off HTML5. Apply to form elements

3, <fildset> can add <legend> added title

4, <label> Special properties: The value is the same as the value of the ID of a form field

eg

<p class= "Row" ><label for= "First-name" > First name:</label><input type= "text" id= "First-name"  name= "first_name"  class= "Field-large"/></p>

5. Naming habits: For, ID, name

1) Single word: three consistent

2) Multiple words: For, id-separated, name separated by _

6. Text box

eg :

<textarea id= "bio" name= "bio" cols= "rows=" 5 "class=" Field-large "></textarea>

7. Group the selection box options:<optgroup>

eg

<select id= "Referral" name= "Referral" ><optgroup label= "><option value=" "> </option>< Option Value= "" > </option></optgroup><optgroup label= "" ><option value= "" > </option ><option value= "" > </option></optgroup></select>

8, let visitors upload files:enctype= "Multipart/form-data"

<form method= "POST" action= "show-data.php" enctype= "Multipart/form-data"  >

9. Create hidden field: type= "hidden"

1) name= "information submitted to the server"

2) value= "The information to be submitted itself"

10. Set the style of the form according to the status

17th Chapter

1. Video file format:. ogg,. mp4,. webm

2. Video Properties

1) src (source) specifies the URL of the video file

2) AutoPlay (AutoPlay) starts playing as soon as the video is ready to play

3) controls (controls) Add the default controls that the browser sets for the video

4) muted (mute) to mute video

5) loop (loop) to play the video loop

6) Poster (poster) specifies the image to display when the video loads (without displaying the first frame of the video). Accept the URL of the desired image file

7) Width (width) of the video (in pixels), usually 300 by default

8) Height (height) of the video (in pixels), usually 150 by default

9) Preload (pre-load) tells the browser how much video content to load. Can be the following three values:

? None means no video is loaded

Metadata indicates that only the metadata of the video is loaded (such as length, size, etc.)
? Auto

3. Add control and AutoPlay: controls, Autopaly

4. Loop playback: Loop

5. Poster Image: Poster= "xx.jpg"

6. Prevent pre-loading video: preload= "None/auto/metadata (best)"

7. Use multiple sources of video and alternate text (audio not yet loaded to display text)

eg

<video width= "369" height= "208" Controls><source src= "Paddle-steamer.mp4"  type= "Video/mp4" >< SOURCE src= "PADDLE-STEAMER.WEBM" type= "VIDEO/WEBM" ><p><a href= "Paddle-steamer.mp4" >Download the Video</a></p></video>

8. Audio format:. Ogg/.mp3/.wav/.aac/.mp4/opus

9. Add Audio: <audio src= "" controls></audio>

10. Audio Properties

11. Provide multiple video sources with alternate content

1)        <script src= "Build/jquery.js" > </script><script src= "build/mediaelement-and-player.min.js" ></script><link rel= "stylesheet" href= "Build/mediaelementplayer.min.css"/>2)        <!-- The following code is placed after all content--><script>$ (' Audio/video '). MediaElementPlayer ();</script>

18th Chapter

1, scope= "col/row" column/row header cell

2. rowspan/colspan= "n" Across multiple rows and multiple columns

"HTML5 and CSS3 Basic Course" Study notes--four Day