1 Introduction
The predecessor of the HTML5 draft is Web Applications 1.0. It was proposed by WHATWG in 2004 and accepted by W3C in 2007, and a new HTML working team was established.
Definition:
Broadly speaking, it is a new generation of rich customer service solutions. In a
narrow sense, it is a new generation of html4 products.
2. HTML5 basics
2.1, semantic structure label
- section: represents a content area in the page
- article: represents a piece of independent content that has no context
- aside: the content in the auxiliary article area
- header: indicates the title of a content block or the entire page in the page
- footer: indicates the footnote of a content block or the entire page in the page
- nav: represents the navigation bar part of the page
- figure: Represents a piece of independent stream content, use the figurecaption element to add a title to it (the position of the first or last child element)
- main: indicates the main content of the page (id is not compatible)
2.2, form-control
New control
- datalist :
defines the option list of the input field; the
datalist element specifies the option list of the input field, the list is created by the option element in the datalist. If you need to bind the datalist to the input field, you need to reference the list attribute of the input field to the id of the datalist. The option element must set the value attribute.
[Note: ie and Safar browsers do not support]- keygen:
defines the key pair generator, used to generate keys;
keygen specifies the key generator field used in the form, when the form is submitted, the private key is stored locally, and the public key is sent to the server- output:
used to calculate and display the results;
this is a semantic label that defines different types of output, such as the output of scripts;
[Note: ie does not support]
Example:<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>- progress:
Used to mark the progress or progress of the task (usually used to indicate the process);
related attributes (if the attributes are not set, there will be a round-trip effect of the progress bar):
- max: specifies how much work the task requires
- value: Specifies how much work has been completed
[Note: not supported by ie and Safar browsers]
Example:<input id="btn" type="button" value="开始下载">
下载进度：<progress id="test" value="0" max="100"></progress>
<script>
var oTimer;
btn.onclick = function(){
if(oTimer){
return;
}
oTimer = setInterval(function(){
test.value++;
if(test.value >= test.max){
clearInterval(oTimer);
}
},50);
}
</script>
- meter:
used to display remaining capacity or remaining inventory, usually indicating status
[Note: ie and Safar browsers do not support]
related attributes
- form: Specifies one or more forms to which the meter element belongs
- high: specifies the range of values that are considered high
- low: specifies the range of values that are considered low
- max: the maximum value of the specified range
- min: the minimum value of the specified range
- optimum: the optimal value of the specified metric
- Specifies the current value of the metric (required)
[Note]: min is less than low and less than high and less than max
Traditional controls
input
<input type="">
- Traditional type
- button: defines a clickable button, the single default does not have any behavior
- checkbox: Define checkboxes.
Allow users to select one or more options in a given number of choices. For buttons in the same group, the name value is always
[Note: checkbox type input elements cannot set padding and border (except ie10-)]- file: define input fields and "browse" button for file upload
- hidden: Define the input hidden type to add additional data that is not visible to the user but needs to be submitted in the form
[Note: the disabled attribute cannot be used with the input element whose type is hidden]- image: define the image form and button, you
can set the width, height, src, alt attributes- password: Password input box, the
letters will be hidden after input, usually a series of dots- radio: define a radio button,
allowing the user to select an option from a given number of choices, the same group of buttons, the same name value
[Note: the input element of the radio type cannot set padding and border (except ie10-browser)]- reset: define a reset button, the reset button will clear all the data in the form
- submit: Define the submit button and send the form data to the server
- text: Define a single-line input field in which the user can input text
- New type
- color: Define
the input type of palette type="color" to create a palette for selecting colors, and the color values are submitted as URL-encoded hexadecimal values. For example, black will be sent as %23000000, where %23 is the URL encoding of #
[Note: safari and IE do not support this type]- date: Define the input field for selecting the day, month, and year
- datetime: Define the input field of the selected time, day, month, and year (UTC time)
- datetime-local: Define the input field of the selected time, day, month, and year (local time)
- email: Define the input field
type="email" that contains the email address. The input input type is used to represent the semantic e-mail address input field, and the value of the email field will be automatically verified. The appearance is the same as the input input of type="text" There is no difference between the
types, the input element of the English keyboard email type will be called on the mobile phone to support multiple attributes
[Note: IE9-browser and safari browser do not support]- month: define the input field for selecting month and year
- number: Define the input field
type="number" that contains numeric values. The input input type is used to process digital input, and the numeric keyboard will be called out on the mobile phone
[Note: IE does not support this type]
Related attributes
a, max allowable maximum value
b, min allows the minimum value
c, step specifies the legal number interval
d, the default value of value- range: Define the input field that contains a certain range of numeric values. The input input
type with type="range" is used to process the numeric input included in a certain range, similar to the input type with type="number"
[Note: IE9-not supported This type]
Related attributes
a, max specify the maximum allowed value
b, min specify the allowed minimum value
c, step specify the legal number interval
d, value specify the default value
Tip: If min and max are not set, the default values are 0 and 100- search:
The input input type that defines the search domain >type="search" is used to represent the semantic search box, and there is no difference in appearance with the input input type of type="text"- tel: Defines the input field
type="tel" that contains the phone number to represent the semantic phone input field, and there is no difference in appearance from the input input type of type="text". The number will be called out on the mobile phone. keyboard- time: Define the input field for selecting month and year
- url: Define the input field
type="url" that contains the URL address. The input input type is used to represent the input field of the url address in the semantics, and the value of the url field will be automatically verified. The appearance is the same as the input input type of type="text" No difference
[note that IE9-browser and safari browser do not support]- week: Define the input field for selecting the week and year
- Traditional attributes
- alt: The alt attribute specifies alternative text for image input. Its function is similar to the alt attribute of the image element. It provides alternative information when the user cannot view the image for some reasons.
[Note: The alt attribute can only be used with input elements with type="image" With the use of】- size: The size attribute is the number of visible characters for input elements with type="text" or "password"; for other types, it is the width of the input field in pixels
[Note that since the size attribute is a visual design attribute, it is recommended Use CSS instead]- src: The URL of the image displayed by the src attribute as the submit button
[Note that the src attribute can only and must be used in conjunction with the input element of type="image"]- checked: Support tag
input type type is radio
input type type is checkbox
checked attribute specifies the input element that should be pre-selected when the page is loaded, or it can be set through javascript after the page is loaded- name: The name attribute is used to specify the name of the input element, which is used to identify the form data submitted to the server, or to reference the form data through javascript on the client side
[Note that only form elements with the name attribute set can be passed when the form is submitted Their value
All form controls have a name attribute]- type: used to specify the type of the input element
[note that if the input element does not set the type attribute, or the set value is not supported in the browser, the input type will become type="text"]- disabled: The disabled attribute specifies that the input element should be disabled. The disabled field cannot be modified, nor can you use the tab button to switch to the field, but you can select or copy its text
[Note 1: The disabled attribute cannot be used with input elements with type="hidden"]
[Note 2: For IE7-browser, it must be set to disabled=“disabled”, instead of setting disabled directly, otherwise it will be invalid when using javascript control]- readonly: The readonly attribute specifies that the input field is read-only. The read-only field cannot be modified, but the user can still use the tab button to switch to the field, and can also select or copy its text. The
readonly attribute can be used with the input element of type="text" or "password"
[Note: IE7- The browser does not support the use of javascript to control the readonly attribute]- maxlength: The maxlength attribute specifies the maximum length of the input field, in terms of the number of characters
[Note: this attribute can only be used with input elements with type="text" or type="password"
value] The
value attribute sets the value for the input element . For different input types, the usage of the value attribute is different:
type="button", "reset", "submit" is used to define the text displayed on the button
type="text", "password", "hidden" is used Define the initial value of the input field
type="checkbox", "radio", "image" is used to define the value associated with the input
[Note 1: type="checkbox" or "radio" must set the value attribute]
[Note 2: The value attribute cannot be used with the input element of type="file"]
- New attribute
- autocomplete: The autocomplete attribute can turn on or off the browser's autocomplete function on individual elements or the entire form.
When the user starts typing in the field, the browser displays the options filled in the field based on the previously entered value. The
autocomplete attribute applies to the form element and the following types of input elements: text, search, url, telephone, email, password, date pickers, range, color
[Note: IE browser does not support this attribute, this attribute is valid only if the element has a name attribute]- autofocus: The autofocus attribute specifies that when the page is loaded, the domain automatically gets the focus. The
autofous attribute applies to button, input, keygen, select, and textarea elements- novalidate: The novalidate attribute specifies that the form or input field is not validated when the form is submitted. The
novalidate attribute applies to form elements and the following types of input elements: text, search, url, telephone, email, password, date pickers, range, color
[Note: IE9 -Browser does not support]- height The
height attribute is used to specify the image height of the input tag of image type. The
height attribute is used to specify the image height of the input tag of image type.- width The
width attribute is used to specify the image width of the image type input tag
[Note: This attribute is only applicable to the image type input tag]- min: minimum value
- max: maximum
- step: number interval
- multiple: The multiple attribute stipulates that by holding down the ctrl key, multiple values can be selected in the input field.
This attribute is suitable for input elements with type="email" and "file"
[Note: This attribute is not supported by IE9-browser]- pattern
specifies the pattern used to verify the input domain.
Model pattern is a regular expression. The
pattern attribute is applicable to the following types of input elements: text, search, url, tel, email, and password
[Note: IE9-browser and safari browser do not support]
<form action="#">
<input pattern="\d{3}">
<input type="submit">
</form>- placeholder The
placeholder attribute provides placeholder text that describes the expected value of the input field. The placeholder will appear when the> input field is empty, and disappear when the input field is focused. The
placeholder attribute is applicable to the following types of input elements: text, search, url, tel, >email, password
[Note: IE9-Browser Not supported]
To modify the color of placeholder, you need to use ::placeholder
Example:::placeholder{color:green;}- required
required attribute stipulates that the input field must be filled in before submission (cannot be empty)
required attribute applies to the following types of input elements: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file
[Note : IE9-browser and safari browser do not support]- The form
attribute specifies one or more forms to which the input field belongs. The form attribute and the id
form attribute of the form must be applicable to all input tag types. If more than one form needs to be quoted, separate it with a space
[Note: IE browser This attribute is not supported. This attribute is valid only if the element has a name attribute]
<form id="form" action="#">
<input type="submit">
</form>
<input name="test" form="form">- Form override attribute: The form override attribute allows some attribute settings of the form element to be overridden. Among them, formnovalidate applies to button or input elements, and other attributes apply to submit or reset button or input elements
a, formaction: rewrite the action attribute of the form
b, formenctype:: rewrite the enctype attribute of the form, in the case of absolute large numbers There is no need to set
c, formmethod: rewrite the method attribute of the form
d, formnovalidate: rewrite the novalidate attribute of the form
e, formtarget: rewrite the target attribute of the form
select
The select element is used to define a drop-down list, which contains any number of option and optgroup elements.
The attributes that can be used:
1. autofocus> specifies that the text area automatically gets the focus after the page is loaded
2. disabled specifies that the drop-down list is disabled
3. form specifies One or more forms to which the text area belongs
4. multiple specifies that multiple options can be selected
5. name specifies the name of the drop-down list
6. size specifies the number of visible options in the drop-down list
> [Note: size cannot be 0, default is 1]
7. [Note: Safari browser cannot set the height]option
- The option element defines an option in the drop-down list
- The option element has two application scenarios, in addition to the drop-down list select, it can also be used in the option list datalist
- Supported attribute
disabled: specifies that this option should be disabled when it is first loaded
label: defines the label used when using optgroup, instead of the option element content
[Note: firefox does not support label attribute]
selected: specifies that the option is displayed in the list for the first time Shown as the selected state
value: define the option value sent to the server
[Note: when setting the value value, the server submits the value of value; otherwise, the element content of option is submitted to the server]- [Note: Option cannot set box model styles such as margin, padding, border, etc.]
optgroup
The optgroup element defines an option group for combining options
[Note: optgroup cannot set the box model styles such as margin, padding, border, etc.]
Related attributes
label: specifies the description for the option group (required)
disabled: specifies that the option group is disabled (optional)
button
Define button
- Text or images or other multimedia content can be placed inside the button element
- The prohibited element is image mapping, because it is sensitive to mouse and keyboard actions that interfere with the behavior of form buttons
- Always have the type attribute
IE7-the browser’s default type is button------IE7-submit the text between the button elements
and the default type of other browsers is submit------and other browsers will submit The content of the value attributelabel
- The label element defines the label for the input element and establishes the association between the text label and the form control. Clicking on the text in the label element will trigger this control. When the text is selected, the browser will automatically turn the focus to the form control related to the label
- The label element has two uses: one is to use the for attribute, and the other is to nest form controls inside the label. But IE6 browser only recognizes the method of using the for attribute.
Related attributes
for: specifies which form element the label is bound to.
Form: specifies one or more forms to which the label field belongs.
[Note: The for attribute of the label must be related to the id attribute of the related element the same】
textareal
textarea defines a multi-line text input control, the text area can hold an unlimited amount of text
[Note: browsers do not allow textarea nesting textarea]
[Note: IE8-Browser width and height settings do not include scroll bars; other browser width and height settings Include scroll bar]
related attributes
- name: Specifies the name of the text area
- value: represents the value of the text area
- disabled: stipulate that the text area is disabled in
IE7-the browser does not support the writing of setAttribute('disabled',''), it must be set to setAttribute('disabled','disabled')- readonly: stipulate that the text area is read-only
[Note: IE7-browser does not support setting readonly attribute through javascript]- autofous: Specifies that the text area automatically gets the focus after the page is loaded
[Note: IE9-Browser does not support this attribute]- required: The required text area is required
[Note: IE9-browser and safari browser do not support this attribute]- placeholder: Specifies a short prompt describing the expected value of the text area
[Note: IE9-Browser does not support this attribute]- maxlength: Specifies the maximum number of characters in the text area
[Note: IE9-Browser does not support this attribute]- cols: specifies the number of visible columns in the text area
- rows: Specify the number of visible lines in the text area
[Note: You can use cols and rows to specify the size of the textarea, but a better way is to use the CSS height and width properties]- wrap: Specifies how to deal with
the wrapping in the text area when submitting in the form. When wrap="soft", it means that when the form is submitted, although the text is wrapped on the screen, there will be no line breaks in the submitted data (default value) ); and when wrap="hard", it means that when the form is submitted, the submitted data contains text line breaks %0D%0Afieldsetl
1 The fieldset element is used to group related elements in the form to improve accessibility. Most browsers use a simple border to display fieldset
related attributes
- disabled: disabled fieldset
- form: specifies one or more forms to which the fieldset belongs
- name: Specifies the name of the fieldset
legend
The legend element is used to define the title of the fieldset element
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
2.3, multimedia label
audio
- Music player
- Related attributes
autoplay: autoplay
controls: display controls
loop: loop playback
preload: audio is loaded when the page is loaded, and ready to play (if autoplay is used, this attribute is ignored)
src: the audio url to be played
[Note: element does not support Play files in wma format]video
- Video playback
- Related attributes
autoplay: autoplay
controls: display controls
height: player height
width: player width
loop: loop playback
preload: the video is loaded when the page is loaded, and ready to play (if autoplay is used, this attribute is ignored)
src: required Play video url
poster: specify the image displayed when the video is downloaded, or the image displayed before the user clicks the play button.
For example
<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>source
- Provide media resources for video and audio
media: specify the type of media resources (no browser support)
src: specify the url of the media file
type: specify the MIME type of the media resource- Common types
audio
audio/ogg
audio/mpeg
video
video/ogg
video/mp4
video/webm
such as
<audio> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mp3"> audio player not available. </audio><video> <source src="video.webm" type="video/webm; codecs='vp8,vorbis'"> <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'"> <source src="video.mp4"> video player not available. </video>
Tip: The use of multimedia tags should include certain prompt content in the middle of the tag, so that it can be displayed when the user's browser does not support it