Study Notes of HTML5 and CSS3 basic tutorial-Four Day, afourday

Study Notes of HTML5 and CSS3 basic tutorial-Four Day, afourday
Chapter 2

1. Input and Element

Email Box <input type = "email">

Search box <input type = "search">
Phone number <inputtype = "tel">
URL <inputtype = "url">
The following elements are supported by some browsers:
Date <input type = "date">

Number <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. W3C points out that they may not be included in HTML5 at the time of finalization in 2014.
Color <input type = "color"/>

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

2. attributes:

1) accept limits the types of files that can be uploaded by users

2) autocomplete if you add a form element or a specific field

3) autocomplete = "off" will disable the browser's automatic filling of this form or field. The default value is on.

4) after the autofocus page is loaded, place the focus to this field.

5) multiple allows you to enter multiple email addresses or upload multiple files.

6) list associates datalist with input.

7) maxlength specifies the maximum number of characters of textarea (this feature is supported in text boxes before html5)

8) pattern Defines the mode that must be followed before the user inputs the text. placeholder specifies a prompt text that appears in the text box. After the user inputs the text, the text disappears.

9) required requires that the visitor complete this field before submitting the form

10) formnovalidate disables the HTML5 automatic verification function. Apply to the submit button novalidate to disable the HTML5 automatic verification function. Apply to form elements

3. <fildset> you can add <legend> to add titles.

4. Special attribute: The value is the same as the id value 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 Conventions: for, id, and name

1) single word: Three consistent words

2) Multiple words: for and id are separated by-, and name is separated _.

6. Text Box

Eg:

<textarea id="bio" name="bio" cols="40" 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. allow visitors to upload files:Enctype = "multipart/form-data"

<form method="post"action="show-data.php"  enctype="multipart/form-data">

 

9. Create a hidden field: type = "hidden"

1) name = "information submitted to the server"

2) value = "information to be submitted"

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

 

 

Chapter 2

1. Video file formats: .oggw..mp4 and. webm

2. video attributes

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

2) autoplay (automatic playback) starts playing immediately when the video can be played.

3) Add a browser to the controls control to set the default control for the video.

4) muted (mute) mute the video

5) loop (loop) for video loop playback

6) poster specifies the image to be displayed when the video is loaded (rather than the first frame of the video ). URL for receiving the required Image File

7) width (width) the video width (in pixels). The default value is 300.

8) height (height) specifies the video height (in pixels). The default value is 150.

9) preload tells the browser how much video content to load. It can be the following three values:

None indicates that no video is loaded.

Metadata indicates loading only the video metadata (such as length and size)
Auto

3. Add controls and automatic playback: controls and autopaly

4. loop playback: loop

5. Poster image: poster?”xx.jpg"

6. Prevent preloading videos: preload = "none/auto/metadata (BEST )"

7. Use videos and alternate texts from multiple sources (the audio has not been 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 attributes

 

11. Multiple video sources with backup content are provided.

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 the content --> <script >$ ('audio/video'). mediaelementplayer (); </script>

 

 

Chapter 2

1. scope = "col/row" column/row title Cell

2. Cross-row and multi-column rowspan/colspan = "n"