Home >Web Front-end >HTML Tutorial >List of common HTML5 syntax

List of common HTML5 syntax

不言
不言Original
2018-05-08 15:45:522192browse

这篇文章主要介绍了关于HTML5 常用语法一览,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

HTML 5 常用语法一览(列举不支持的属性)

HTML头部标记

标记 描述 HTML5标准
定义页面中所有链接的基准URL
</td> <td>设定显示在浏览器左上方的标题内容</td> <td><br></td> </tr> <tr> <td><isindex></td> <td>表明该文档是一个可用于检索的网关脚本</td> <td>不支持</td> </tr> <tr> <td><meta></td> <td>文档本身的元信息,例如查询关键词,有效期等</td> <td><br></td> </tr> <tr> <td><style></td> <td>设定CSS层叠样式表内容</td> <td><br></td> </tr> <tr> <td><link></td> <td>设定外部资源的链接</td> <td><br></td> </tr> <tr> <td><script></td> <td>页面脚本内容</td> <td><br></td> </tr> </tbody></table> <p> </p> <p><strong>元信息标记<meta>属性</strong></p> <table width="559" border="2"><tbody> <tr class="firstRow"> <td width="70">标记</td> <td>描述</td> <td>值</td> <td>HTML5标准</td> </tr> <tr> <td>http-equiv</td> <td><p>生成一个HTTP标准域,把Content属性关联到HTTP头部</p></td> <td><p>content-type / expires / refresh / set-cookie</p></td> <td><br></td> </tr> <tr> <td>name</td> <td><p>把content属性关联到一个名称</p></td> <td><p>author / description / keywords / generator /revised /others</p></td> <td><br></td> </tr> <tr> <td>content</td> <td>定义与http-equiv 或 name属性相关的元信息 关键字/值内容</td> <td><br></td> <td><br></td> </tr> <tr> <td>charset</td> <td>文档的字符编码</td> <td><br></td> <td>新增属性</td> </tr> </tbody></table> <p> </p> <p>注:HTML5中不支持scheme属性,新增charset属性,具体查看:HTML5 <meta>标签</p> <p> </p> <p><strong>HTML 主体标记<body>属性</strong></p> <table border="2"><tbody> <tr class="firstRow"> <td>属性</td> <td>描述</td> <td>HTML5标准</td> </tr> <tr> <td>text</td> <td>设定页面文字颜色</td> <td>删除</td> </tr> <tr> <td>bgcolor</td> <td>设定页面背景颜色</td> <td>删除</td> </tr> <tr> <td>background</td> <td>设定页面背景图像</td> <td>删除</td> </tr> <tr> <td>bgproperties</td> <td>设定页面的背景图像为固定,不随页面的滚动而滚动</td> <td>删除</td> </tr> <tr> <td>link</td> <td>设定页面默认的链接颜色</td> <td>删除</td> </tr> <tr> <td>alink  </td> <td>设定鼠标正在单击时候的链接颜色  </td> <td>删除</td> </tr> <tr> <td>vlink  </td> <td>设定访问过后的链接颜色  </td> <td>删除</td> </tr> <tr> <td>topmargin  </td> <td>设定页面的上边距  </td> <td>删除</td> </tr> <tr> <td>leftmargin  </td> <td>设定页面的左边距</td> <td>删除</td> </tr> </tbody></table> <p> </p> <p>注: 在 HTML 5 中,删除了所有 <body> 的特殊属性。具体查看:HTML5 <body>标签</p> <p> </p> <p><strong> </strong> </p> <p><strong>特殊符号</strong></p> <table border="1"><tbody> <tr class="firstRow"> <td>特殊符号</td> <td>符号码</td> </tr> <tr> <td>"  </td> <td>"</td> </tr> <tr> <td>&</td> <td>&</td> </tr> <tr> <td><</td><td><</td></tr><tr><td>></td> <td>></td> </tr> <tr> <td>©</td> <td>©</td> </tr> <tr> <td>®</td> <td>®</td> </tr> <tr> <td>±</td> <td>±</td> </tr> <tr> <td>×</td> <td>×</td> </tr> <tr> <td>§</td> <td>§</td> </tr> <tr> <td>¢</td> <td>¢</td> </tr> <tr> <td>¥</td> <td>¥</td> </tr> <tr> <td>·</td> <td>·</td> </tr> <tr> <td><br></td> <td>€</td> </tr> <tr> <td>£</td> <td>£</td> </tr> <tr> <td>™</td> <td>™</td> </tr> </tbody></table> <p> </p> <p> </p> <p><strong>标题字标记</strong></p> <table border="1"><tbody> <tr class="firstRow"> <td>标记</td> <td>描述</td> </tr> <tr> <td><h1>.....</h1></td> <td>一级标题</td> </tr> <tr> <td><h2>.....</h2></td> <td>二级标题</td> </tr> <tr> <td><h3>.....</h3></td> <td>三级标题</td> </tr> <tr> <td><h4>.....</h4></td> <td>四级标题</td> </tr> <tr> <td><h5>.....</h5></td> <td>五级标题</td> </tr> <tr> <td><h6>.....</h6></td> <td>六级标题</td> </tr> </tbody></table> <p> </p> <p>Note: See specifically the HTML5 <h1> to <h6> tags</p> <p>In HTML 4.01, the "align" attribute of h1 - h6 elements is deprecated. </p> <p>In HTML 5, the "align" attribute of h1 - h6 elements is not supported. </p> <p> </p> <p><strong> Text modification tags</strong></p> <table border="1"><tbody> <tr class="firstRow">## Tags<td></td>Description<td></td>HTML5Standard<td></td> </tr> <tr><b><td></td>Bold<td></td> <td><br></td> </tr>##< strong><tr> <td>bold</td> <td></td> <td><br></td>##<i></tr> <tr>italic<td></td> <td></td> <td> <br>##<em></td> </tr>italic<tr> <td></td> <td></td> <td>##<cite><br> </td>italic</tr> <tr> <td></td> <td></td>#<sup><td> <br>superscript</td> </tr> <tr> <td></td> <td></td><sub><td> <br>subscript</td> </tr> <tr> <td></td> <td>##<big></td> <td>Large font size<br> </td>Not supported</tr> <tr> <td>##<small></td> <td>Small font size</td> <td>Not supported</td> </tr> <tr> <td><u></td> <td>Underscore</td> <td>Not supported</td> </tr> <tr> <td><s></td> <td>Strikethrough </td> <td>Not supported</td> </tr> <tr> <td><strike></td> <td>Strikethrough</td> <td>Not supported</td> </tr> <tr> <td><address></td> <td>Address</td> <td></td> </tr> <tr> <td>#<tt></td> <td>Typewriter text</td> <td>Not supported<br> </td> </tr>##<blink><tr> <td>Blinking text (only applicable to Netscape browser)</td> <td>Not supported</td> <td></td> </tr><code><tr> <td>Same width</td> <td></td> <td></td> </tr>##<samp><tr> <td>Same width </td> <td></td> <td><br></td>##<kbd></tr> <tr>Keyboard input text<td></td> <td></td> <td><br></td><var></tr> <tr>Declare variables<td></td> <td></td> <td><br></td> </tr> <tr> <td></td> <td>##Font Tag<font>Attribute</td> <td><br></td> </tr>##Attribute</tbody></table>Description<p></p>HTML5 Standard<p> </p> <p><strong>face</strong></p>Font<table border="1"> <tbody>Not supported<tr class="firstRow"> <td></td> <td>size</td> <td>Font size</td> </tr>Not supported<tr> <td></td>##color<td></td>Color<td></td>Not supported</tr> <tr> <td></td> <td> </td> <td>Note: Please see the HTML 5 <font> tag</td> </tr>In HTML 4.01, this element is deprecated. <tr> <td>In HTML 5, this element is not supported, but insertion by WYSIWYG editors is allowed. </td> <td>In HTML 5, only the style attribute is supported. </td> <td> </td> </tr> </tbody>List tags</table> <p></p> <p></p>## Tags<p></p>Description<p></p>HTML5 Standard<p></p> <p></p><ul><p><strong>Unordered list</strong></p> <table border="1"> <tbody> <tr class="firstRow"> <td>#<ol> ;</td><td>Ordered list</td><td></td></tr><tr><td>#<dir></td> <td>Directory list</td> <td>No Support<br> </td> </tr> <tr><dl><td></td>Definition list<td></td> <td><br></td> </tr>#<menu> <tr> <td>Menu list</td> <td>Redefined; used to arrange the form control</td> <td></td> </tr>##<dt>, <dd><tr> <td></td>Define the tags of the list<td></td> <td><br></td> </tr>##<li><tr> <td>The tags of the list items</td> <td></td> <td></td> </tr> <tr> <td> <p></p> </td>Hyperlink tag<td></td> <td><br></td> </tr>Attribute <tr> <td>Description</td> <td>HTML5 Standard</td> <td><br></td>href</tr> </tbody>Specify the link address</table> <p></p> <p><strong></strong></p>name<table border="1"> <tbody>Name the link<tr class="firstRow"> <td>Name an anchor, not supported, use id instead</td> <td></td> <td>title</td> </tr>Prompt text for the link<tr> <td></td> <td></td> <td> <br>target</td> </tr>Specify the target window of the link<tr> <td></td> <td></td> <td></td> </tr>Link target window attribute target<tr> <td></td> <td></td>Attribute value<td> <br>Description</td> </tr> <tr> <td>_parent</td> <td> opens in the previous window. Generally, when using frame pages, </td> <td><br></td>_blank</tr> </tbody> opens in a new window. Open </table> <p></p> <table border="1">_self<tbody> <tr class="firstRow"> to open in the same frame or window, default <td></td> <td></td>_top</tr> <tr> in Opens the entire window of the browser, ignoring any frames <td></td> <td></td> </tr> <tr> <td></td> <td>##Image tag <img> attribute</td> </tr> <tr> <td></td> <td>Attributes</td> </tr>Description<tr> <td>HTML5 Standard</td> <td></td> </tr>src</tbody> </table>Source file of image<p></p> <p></p> <p><strong></strong>alt</p> <table border="1">Prompt text<tbody> <tr class="firstRow"> <td></td> <td> </td> <td>width, height</td> </tr>Width, height<tr> <td></td> <td></td> <td>##border<br> </td>Border</tr> <tr>Not supported<td></td> <td></td>vspace<td> <br>Vertical spacing</td> </tr>Not supported<tr> <td></td> <td>hspace</td> <td>Horizontal spacing<br> </td>Not supported</tr> <tr> <td></td>align<td></td>Arrangement<td></td>Not supported</tr> <tr> <td> </td> <p>Image arrangement align attribute value</p> <table border="1"><tbody> <tr class="firstRow"> <td>Attribute value</td> <td>Description</td> <td>HTML5 standard</td> </tr> <tr> <td>top</td> <td>The middle line of the text is above the picture</td> <td> </td> </tr> <tr> <td>middle</td> <td>The middle line of the text is in the middle of the picture</td> <td> </td> </tr> <tr> <td>bottom</td> <td>The middle line of the text is at the bottom of the picture</td> <td> </td> </tr> <tr> <td>left</td> <td>The picture is on the left side of the text</td> <td> </td> </tr> <tr> <td>right</td> <td>The picture is on the right side of the text</td> <td><br></td> </tr> <tr> <td>absbottom</td> <td>The bottom line of the text is at the bottom of the picture</td> <td><br></td> </tr> <tr> <td>absmiddle</td> <td>The bottom line of the text is in the middle of the picture</td> <td><br></td> </tr> <tr> <td>baseline</td> <td>The baseline alignment of English text</td> <td><br></td> </tr> <tr> <td>texttop</td> <td>Align the top edge of English text</td> <td><br></td> </tr> </tbody></table> <p></p>##Note: Please view HTML 5 <img> tag<p></p> <p></p> <p>Table tag<strong></strong></p> <table border="1"> <tbody> <tr class="firstRow">Mark<td></td>Description<td></td> </tr>##<table>...</table><tr> <td>Table Mark</td> <td></td> </tr><tr>...</tr><tr> <td>Line markers</td> <td></td> </tr><td>...</td> <tr> <td>Cell tags</td> <td></td> </tr> </tbody>Note: In HTML 5, </table> <p> does not support any attributes of the <table> tag. </p> <p>No attributes of the <tr> tag are supported. </p> <p>Only supports the <td><th> tag "colspan" and "rowspan" attributes. </p> <p> </p> <p></p>Form tag <form> attribute<p><strong></strong>Note:</p> <p>There is a new attribute in HTML 5: replace. It defines what happens after the form is submitted. </p> <p></p> <p>Form tag <form> element<br><strong></strong></p> <table border="1"><tbody>Tag<tr class="firstRow"> <td>Description</td> <td>HTML5 Standard</td> <td></td> </tr><input><tr> <td>Form input tag</td> <td>The type attribute has many new values. </td> <td></td> </tr><select><tr> <td>Menu and list markers</td> <td>New attributes</td> <td></td>##<option> ;</tr><tr>Menu and list item tags<td></td> can be used for <td></td><td></td><textarea></tr> <tr> text in the new element <datalist> Domain tag<td></td>New attribute<td></td> <td></td> </tr> </tbody></table> <p></p>##Input tag<input>Tag attribute Type Value<p></p> <p><strong></strong></p><input Type="Attribute value"/><table border="1"><tbody>Description<tr class="firstRow"> <td>HTML5 Standard</td> <td></td> <td>text</td> </tr>Text field<tr> <td></td> <td></td> <td>##password<br> </td>Password field</tr> <tr> <td></td> <td></td> <td>file<br> </td>File domain</tr> <tr> <td></td> <td></td> <td>checkbox<br> </td>Check box</tr> <tr> <td></td> <td></td> <td>radio<br> </td>Radio button</tr> <tr> <td></td> <td></td> <td>button<br> </td>Normal button</tr> <tr> <td></td> <td></td>##submit<td> <br>submit button</td> </tr> <tr> <td></td> <td></td>reset<td> <br>Reset button</td> </tr> <tr> <td></td> <td># #hidden</td> <td>hidden field<br> </td> </tr> <tr> <td></td>##image<td></td>Image field (image submit button)<td><br></td> </tr> <tr> <td></td> <td> </td> <td> <br>Frame mark</td> </tr> </tbody></table> <p></p>Frame mark <p><strong>Description</strong></p>HTML5 Standard<table border="1"><tbody> <tr class="firstRow">##<frameset><td></td>Frameset<td></td>Not supported<td> </td> </tr> <tr><frame><td></td>Frame<td></td>Not supported<td></td> </tr> <tr><iframe><td></td> Inline frame<td></td>Only supports the src attribute<td></td> </tr> <tr><noframe><td></td>No frame<td></td>Not supported<td></td> </tr> <tr> <td> Note: Please review the HTML 5 <frameset> tag</td> <td>Due to the negative impact of this tag on web page usability, the <frameset> tag is not supported in HTML 5. </td> <td></td> </tr> </tbody></table> </tr> </tbody> </table><p>The above is the detailed content of List of common HTML5 syntax. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="Introduction to the use of HTML5 video video tags" href="https://m.php.cn/faq/395687.html">Introduction to the use of HTML5 video video tags</a></span><span>Next article:<a class="dBlack" title="Introduction to the use of HTML5 video video tags" href="https://m.php.cn/faq/395690.html">Introduction to the use of HTML5 video video tags</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>