Home >Web Front-end >HTML Tutorial >Summary of how to use new tags and attributes in H5
Summary of how to use new tags and attributes in H5
- php中世界最好的语言Original
- 2018-05-07 17:38:312597browse
This time I will bring you a summary of how to use H5's new tags and attributes. What are the precautions for using H5's new tags and attributes? The following is a practical case, let's take a look.
##HTML5 syntaxMost of the syntax differences of html are continued: the
<html lang="zh-CN"> <meta charset="utf-8"></p> <p style="text-align: left;">Character encoding becomes concise, </p> <p style="text-align: left;"> is not case-sensitive, </p> <p style="text-align: left;"> adds a Boolean value, similar to checked, selected</p> <p style="text-align: left;">The quotation marks can be omitted, However, in terms of coding standards, it is not recommended. </p> <p style="text-align: left;"> has tags that can omit the end character, and tags that can be completely omitted. </p> <p style="text-align: left;"></p> <p style="text-align: left;">Add tags: <span style="color: #ff0000"><strong></strong></span></p>1. Structure tag <p style="text-align: left;"><strong></strong> (1) section: independent content Blocks can be composed of h1~h6 to form an outline, indicating the document structure, and can also have chapters, headers, footers or other parts of the header; (2) article: special independent block, indicating the core of the header of this article Content; (3) aside: auxiliary information related to the tag content in addition to the tag content; (4) header: header information/title of a certain block; (5) hgroup: supplementary content of the header information/title; ( 6) footer: bottom information; (7) nav: partial information of the navigation bar (8) figure: an independent unit, such as a news block with pictures and content. </p> <p style="text-align: left;"></p>2. Form tags<p style="text-align: left;"><strong></strong> (1) email: an email must be entered; (2) url: a url address must be entered; (3) number: a numerical value must be entered; (4) Range: Values within a certain range must be entered; (5) Date Pickers: </p>Date Picker<p style="text-align: left;">; <a href="http://www.php.cn/code/7268.html" target="_blank"></a>a.date: Select day, month, year b.month: Select Month, year c.week: Select week and year d.time: Select time (hours and minutes) e.datetime: Select time, day, month, year (UTC time) f.datetime-local: Select time, day, month , year (local time) </p> <p style="text-align: left;"> (6) search: search the regular text field; </p> <p style="text-align: left;"> (7) color: color </p> <p style="text-align: left;"></p>3, media tag <p style="text-align: left;"><strong></strong> (1) video: video (2) audio: audio (3) embed: embedded content (including various media), Midi, Wav, AU, MP3, Flash, AIFF, etc. </p> <p style="text-align: left;"></p>4. Other function tags<p style="text-align: left;"><strong></strong> (1) mark: mark (like a highlighter to take notes) (2) progress: </p>Progress bar<p style="text-align: left;">; <progress max="value of the maximum progress bar" value="value of the current progress bar"> (3) time: data label, used by search engines; release date<time datetime="2014-12-25T09: 00">9：00</time>Update date<time datetime="2015- 01-23T04:00" pubdate>4:00</time> (4) ruby and rt: comment on a certain word; <ruby><rt>Comment content</rt><rp>How to display when the browser does not support</rp></ruby> (5) wbr: Soft line break, when the page width reaches the point where line breaks are required Line wrap; (6) canvas: use JS code to make content for image drawing; (7) command: button; (8) deteils: expand menu; (9) dateilst: text field drop-down prompt; (10) keygen: encryption; <a href="http://www.php.cn/code/6151.html" target="_blank"></a></p> <p style="text-align: left;">New attributes: <span style="color: #ff0000"><strong></strong></span>Attributes added to js. </p> <pre class="brush:php;toolbar:false"><script defer src=".....js" onload="alert('a')"></script> <script async src=".....js" onload="alert('b')"></script>
If there are no above two attributes, the execution order is to first load (download) the first src, then execute its onload, and then execute it synchronously downwards. The defer attribute already exists before h5. , input delayed loading (delayed execution), it will first load (download) the file content in src, and then wait until the page is fully loaded, then load the js.async attribute in onload, which is asynchronous loading. It will be executed immediately after loading src. onload, and will continue to load the page in the above execution sequence. The alert display will first display b and then display a
Style code for adding small icons to the tags in the web page
<link rel="icon" href="url..." type="图片名称" sizes="16*16">
Ordered list ol: New Add start (list starting value), reversed (whether to reverse) menu type attribute (3 menu types) embedded css style: define a style block (scoped) inside the tag, which is only valid inside the style tag Embedded frame: iframe element, newly added seamless borderless, srcdoc defines the content of the inline frame
<iframe>新增属性： <!--seamless定义框架无边框 无边距--> <!--srcdoc的显示级别比sandbox高--> <!--sandbox用来规定一个内嵌框架的安全级别--> <!--sandbox="allow-forms:允许提交表单"--> <!--sandbox="allow-origin:允许是相同的源"--> <!--sandbox="allow-scripts：允许执行脚本"--> <!--sandbox="allow-top-navigation:允许使外面的页面进行跳转"-->
manifest attribute:
Define the offline application files that the page needs to use, usually placed in the tag
charset attribute:
One of the meta attributes, defining the character set of the page
sizes attribute:
New attribute, when link’s rel="icon", is used to set the icon size
base attribute:
defer attribute :
script tag attribute, indicating that after the script is loaded, it will only be executed when the page is also loaded (delayed execution)
async attribute:
script tag attribute, script loading Execute immediately after completion (the browser will parse the following content during operation), even if the page has not been loaded yet (asynchronous execution)
media attribute:
Element attribute: indicates Which device to optimize for
hreflang attribute:
attribute, indicating the language used by the URL pointed to by the hyperlink
ref attribute:
# The attribute of ## defines whether the hyperlink is an external link. reversed attribute: The attribute of- defines whether the serial number is reversed. start attribute :
- attribute, defines the starting value of the serial number scoped attribute: The attribute of the embedded CSS style, the definition of this style is limited to the owner of this Embedded style elements, suitable for single-page developmentHTML5
Global attributes: Can be used for any tag, the following 6
data-yourvalue, hidden, Spenllecheck, tabindex, contenteditable, desginMode; Global attributes: 1. Can be inserted directly in the tag: data-custom attribute name; hidden (put it directly to hide); spellcheck ="true" (grammar correction); tabindex="1" (Tab jump sequence); contenteditable="true" (editable state, click on the content to modify); 2. In I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website! Recommended reading:Detailed explanation of the use of Node debugging tool
The above is the detailed content of Summary of how to use new tags and attributes in H5. For more information, please follow other related articles on the PHP Chinese website!