"HTML5 and CSS3 Basic Course" (8th Edition) personal notes (supplementary)

15 to 21

Title of the list: use regular headings or paragraphs
The tag of the list is located outside the list item by default, and the custom tag is inside the list item and can be changed by using List-style-position:inside/outside
Sequence list: breadcrumb navigation (usually horizontally displayed above the main content area, indicating the location of the current page in the site navigation path)
<ol reversed/reversed= "Reversed" (Boolean) > ordered list in descending order
List-style-type:disc Solid dot Circle square decimal digit upper-alpha Capital ABC Lower-alpha upper-roman uppercase Roman numerals Lower-roman
Most browsers let the numbers align Right
<ol type= "a/a/i/i/1>
In order to display the same effect in different browsers, it is often necessary to set both Margin-left and Padding-left (dir= "ltr")
List set list items indent with Padding-left, it is best to add margin-left:0 before this sentence
<ol start= "2" ><li></li><li value= "5" ></li><li></li><li value= "6" > </ol> (2,5,6,6)
When using start and type, always use a number
It is best to apply background images to Li instead of using list-style-image
List-style can inherit
Ul{list-style:url () Circle outside}
By default, unordered list first level to n level: Disc,circle,square,squanre ...
Sequence table first level to n level: I,a,1,a,1,a,1,a ...
Nested lists to create a drop-down or fly-out navigation menu
. Class{left:-999em (hidden); position:absolute;z-index:1000;}
: Hover. Class{left:auto}
DL Description List dt name DD value
You should not use p to mark individual text in a DD element, unless you are using multiple paragraphs, you should use multiple P tags in DD
Input Type:email,search,tel,ur,date,number,range,color,datetime Global date, datetime-local local date, Month,time,week
List of data in input:
<input type= "text" name= "favfruit" list= "fruit"/>
<datalist id= "Fruit" ><option></option></datalist>
<output></output> output
Form
Action: The URL of a script that processes data on the server when a visitor submits the form
Method:get/post,post is used for many
Get: Data for submitted forms is displayed in the address bar (you want information from the server after the form is submitted)
Post: More secure, more data can be sent to the server (data is stored to the server)
Some table cells have built-in validation capabilities
The FIELDSET element groups related elements together (grouped, such as radio buttons), legend provides a caption for each fieldset (which, if any, must be the first element), and a border is added by default
In addition to radio buttons, it is best to use H1~H6 instead of legend
CSS has a limited ability to modify legend styles, especially with regard to positioning

Input type= "text"
You must set the Name property for each text box to have the server and JS recognize the text of the input data
The value of the for in the label corresponds to the ID of the associated element
Value= "Default", if the user does not enter data, "default" will be sent to the server
Placeholder= "Hinttext" (hint text)
Required/required= "Required": the form can be submitted when there is a value
Autofocus/autofocus= "Autofocus", the first form that owns this property gets the focus, preferably a field that gets focus automatically when the page loads
Size= "n", defines the size of the text box, in characters, by default is 20
Maxlength= "n", maximum number of characters
If the entire form or the input setting autocomplete= "Off", the prompt text will not be displayed, the browser will not save the user input content
Splitting form elements with P or div is better than using a list
You can nest input in a label, you don't need to use for and ID associations, but it's better to separate, because it's easy to add styles
Label setting Vertical-align:top aligns the labels with the related form fields
Naming habits:
For, id-separate words
Name with _
The password box is not encrypted while it is being sent to the server
When a visitor submits a form in a modern browser, the email and website URL are automatically validated, and only the format is verified, regardless of whether it exists
Pattern: Customizing validation rules using regular expressions, such as phone number formats
Use FieldSet to nest each group of radio buttons and describe them with legend
CheckBox
chencked or checked= "checked"
Name= "boxse[]", when PHP processes the form, it automatically creates an array with a check box named $_post[' Boxset ']
TextArea
Cols: Set width (character)
Rows: Setting height (rows)
When MaxLength is not set, you can enter 32,700 characters by default
Resize:none, you cannot change the size of the text area by dragging the slash in the lower-right corner of the text area
No value
Select (Selection box/drop-down menu):
By default, the first one is selected, and if size is set, there is no default option, and size indicates the height of the selection box (the height shown)
Option: Set the value of values
Selected
Multiple/multiple= "multiple": You can select more than one menu option (press CTRL or command)
Group: Optgroup, wrapping the Option,label to be grouped specifies the title
Input type= "file" to create a file upload box and a browse button
Multiple allow uploading of multiple files
The Enctype property ensures that files are uploaded in the correct format
Size: Enter the width of the path and file name
Allow uploading of forms, not with Get method
Do not put the password/bank card number in the hidden field, input type= "hidden"
Hide Field Example: To edit the data before the user submits the data, go back
Text input box and text area, use readonlyia/readonly= "ReadOnly" to become read-only, can copy, get focus, but can't modify
Submit button (usually without name, unless there are multiple submit buttons):
Input type= "Submit/image"
Button type= "Submit", create a Submit button with text and image, default to SUBMT or submit Query when no value is set
button is not used when there are multiple submit buttons, because the behavior of the browser is not exactly the same
Reset button, similar to the Submit button
Using formnovalidate in input turns off the automatic verification feature
disabled/disabled= "Disabled" disabled
If you are concerned about the protection of media files, do not use HTML5 native multimedia for the time being (can be downloaded via the URL pointing to the original file)
3 video file formats in HTML5
. OGG/.OGV
. mp4/.m4v
. webm
At least two formats for video (MP4 and WEBM) are required to ensure support for all compatible HTML5 browsers
Video properties:
Width: Default 300px
Height: Default 150px
AutoPlay
Controls such as the play button
Muted Mute
Loop
Poster specifies the image to display when the video is loaded
Preload:none (not loaded)/metadata (load metadata only, length size, etc.)/auto (browser determines that auto is the default value)
In video, a single video source with SRC, multiple with source wrapped SRC, the browser will first check SRC, can not find again check the source
Audio format: preferably using MP3 and OGG formats
. ogg
. mp3
. wav
. AAC
. mp4
. Opus
Audio properties:
AutoPlay
controls, such as the play button, omit control audio is not visible
Muted Mute
Loop
Preload:none (not loaded)/metadata (load metadata, length, etc.)/auto (browser determines that auto is the default value)
Type:audio/ogg,audio/mp3 ...
$ (' video '): Get video elements in jquery
Advanced Multimedia:
Canvas
Svg
Table with scope= "Col"/row to set the title of the row or column headings, caption for the table title, Thead table header, tbody table body, tfoot the end of the table
If you use Thead and TFOOT, you must use tbody at the same time, a table can have only one thead and TFOOT, but you can have multiple tbody
Th scope= "Rowgroup" is the title of an entire column
Rowspan,clospan

After placing the JS code in the link CSS file, try to put the JS code before the </body> end tag, not in the head (which will affect the rate of page display)
JS can be compressed, the compressed file name is. min.js
Usually the browser loads a file faster than loading two files
JS Event:
OnMouseMove
onmouseout
onMouseOver pointing to an element with the mouse
OnMouseUp click on the element and then release
OnMouseDown Press the mouse
Onblur leaving the previously focusable element
onchange Change content/value
OnClick
Onblclick Double-click
Onfocus Select/Click etc
OnKeyDown Press the
OnKeyPress Press and release
Release a key after onkeyup input
OnLoad
OnReset
Onselect Select one or more elements in an element
OnSubmit
The HTML validator can compare code and language rules and display inconsistencies found as errors or warnings
&quot; character reference double quotes
When you define width and height directly in img, you do not need to write PX, default unit, write words are wrong
The default value for Font-style is normal is not none

"HTML5 and CSS3 Basic Course" (8th Edition) personal notes (supplementary)