Introduction to HTML5

What does HTML5 look like and how to use it? In fact, in the first chapter of our HTML tutorial, the codes used in the examples we gave you were all written in HTML. Let’s take a closer look at HTML5

## Introduction to HTML5

What is HTML5?

HTML5 is the next generation HTML standard.

HTML, the previous version of HTML 4.01 was born in 1999. The world of the Web has changed dramatically since then.

HTML5 is still a work in progress. However, most modern browsers already have some HTML5 support.

How did HTML5 get started?

HTML5 is the result of collaboration between W3C and WHATWG, which stands for Web Hypertext Application Technology Working Group. .

The WHATWG focuses on web forms and applications, while the W3C focuses on XHTML 2.0. In 2006, the two parties decided to collaborate to create a new version of HTML.

Some interesting new features in HTML5:

Canvas element for drawing

Video and audio elements for media playback

For local Better support for offline storage

New special content elements, such as article, footer, header, nav, section

New form controls, such as calendar, date, time, email, url, search

HTML5

declaration must be located on the first line of the HTML5 document and is very simple to use:

You can see if our first chapter example starts with

The smallest HTML5 document

The following is a simple HTML5 document:

    文档标题 
  文档内容......

Note: For Chinese web pages, you need to use to declare the encoding, otherwise garbled characters will appear.

Improvements in HTML5

##New elements
New properties
Fully supports CSS3
Video and Audio
2D/3D graphics
Local storage
Local SQL data
Web application

HTML5 Multimedia

##HTML5 ApplicationUsing HTML5 you can simply develop applications

Using HTML5 you can simply Draw graphics:

Use inline SVG
Use CSS3 2D/3D

HTML5 using CSS3

New Selector
New Properties
Animation
2D/3D Conversion
Rounded Corners
Shadow effect
Downloadable font

Please learn more about CSS3 Check out this site’s CSS3 tutorial.

Semantic Elements

HTML5 adds a lot of semantic elements as follows:

Using HTML5, you can simply play video and audio on web pages.HTML5HTML5##HTML5 GraphicsUse

HTML5 is the latest revised version of HTML. The standard was completed by the World Wide Web Consortium (W3C) in October 2014.

HTML5 is designed to support multimedia on mobile devices.

HTML5 is simple and easy to learn.

Define independent content areas of the page. Define the sidebar content of the page. Allows you to set a piece of text independent of the text direction setting of its parent element. Define command buttons, such as radio buttons, check boxes or buttons ##

tag	Description

## Define a dialog box, such as a prompt box

The label contains the title of the details element

Specifies independent stream content (images, charts, photos, code, etc.).

Definition of the title of the

element ##

	Used to describe the details of a document or a certain part of the document

	Define the footer of section or document.
	Defines the header area of the document
	Define text with tokens.
	Define weights and measures. Use only for measurements with known maximum and minimum values.
	Define the part of the navigation link.

## Defines the interpretation or pronunciation of characters (Chinese phonetic notations or characters). ##

	Define the progress of any type of task.
	Define ruby comments (Chinese pinyin or characters).

Used in ruby comments to define the content displayed by browsers that do not support ruby elements.
Define the section (section, section) in the document.

HTML5 Form

New form elements, new attributes, new input types, automatic validation.

##Element removed

<li><p></p>##<strike></li> <li><p></p></li> <li><p>Example</p></li> </ul> <hr> <p></p> <strong><span style="font-size: 18px;">You You can find a video locally, put the location and name of the video in src, try it</span></strong> <p></p> <p></p> <hr> <p><br></p> <p><img src="https://img.php.cn/upload/image/429/199/199/1476409619308981.jpg" title="1476409619308981.jpg" alt="7.jpg"><img src="https://img.php.cn/upload/image/213/902/390/1476409875360668.jpg" title="1476409875360668.jpg" alt="4.jpg"></p> <hr> <p><strong>You can make some older browsers (that do not support HTML5) support HTML5.</strong></p> <p><br></p> <hr> <p><span style="line-height: 1.76em;">Modern browsers support HTML5.</span><br></p> <p>Additionally, all browsers, old and new, will automatically treat unrecognized elements as inline elements.</p> <p>Because of this, you can "<span style="font-size: 16px;"><strong>teach the browser</strong></span>" to handle "<span style="font-size: 16px;">Unknown</span>" HTML elements.</p> <p><span style="line-height: 1.76em;">You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.</span></p> <p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 18px;"></span></p> <hr> <p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 18px;">##Defining HTML5 elements as block elements<strong></strong></span><br></p> <p></p> <p></p> <blockquote> <p>##header<span style="font-size: 16px;">,<strong>section</strong>,<strong>footer</strong>,<strong>aside</strong>,<strong>nav</strong>,<strong>main</strong>,<strong>article</strong>,<strong>figure</strong>{<strong>Display: block;</strong>}<br><br></span></p> </blockquote> <p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">Add new elements to HTML<span style="font-size: 18px;"><strong></strong></span>You can add new elements to HTML.</p> <p>This example adds a new element to HTML and defines a style for the element. The element is named <myHero>:</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html></pre> <p>Run the program to see</p> <p>The JavaScript statement document.createElement("myHero") is to add a new element to the IE browser.</p> <hr> <p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 18px;"><strong>Internet Explorer browser issues</strong></span></p> <p>You can use the above method to add HTML5 elements for IE browser, but:</p> <p><span style="line-height: 1.76em;">Internet Explorer 8 and earlier IE browsers do not support the above method.</span><br></p> <p><br></p> <p>We can solve this problem using "HTML5 Enabling JavaScript", " shiv" created by Sjoerd Visscher:</p> <blockquote> <p><span style="font-size: 16px;"></span></p> </blockquote> <p>The above code is a comment, which is used to read the html5.js file when the IE browser version is smaller than IE9 , and parse it.</p> <p><strong>Note</strong>: Domestic users please use Baidu static resource library (Google resource library is unstable in China):</p> <blockquote> <p></p> </blockquote> <p>html5shiv is a better solution for IE browser. html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8. These new elements cannot be used as parent nodes to wrap child elements, and CSS styles cannot be applied.</p> <hr> <p style="border: 0px; margin: 2px 0px; padding: 0px; font-size: 1.8em; line-height: 1.8em; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 18px;">##Perfect Shiv solution<strong></strong></span></p> <p></p> <p></p> <hr> <p><br></p> <p><br><a class="course-btn course_code_header_next" href="//m.sbmmt.com">Continuing Learning</a></p> <div class="layui-col-md3" id="viewPort-content"></div> <div class="phpSyyBox"> <div class="phpSyyLeft"> <div class="phpSyySyj"> <span class="right"><a href="//m.sbmmt.com/code/768.html" title="Previous section"><b class="icon3"></b>Previous section</a></span> <em></em> <span class="right"><a href="//m.sbmmt.com/code/789.html" title="Next Section"><b class="icon2"></b>Next Section</a></span> </div> <div class="phpSyyQhlx"> <a href="//m.sbmmt.com/course.html" target="_blank" title="Tutorial List"><b></b>Tutorial List</a> </div> <div class="phpSyyHqbz"> <a href="//m.sbmmt.com/wenda.html" target="_blank" title="get help"><b></b>get help</a> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="layui-main"> <div class="layui-row"> <div class="layui-col-md9"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">Course Recommendations</li> <li id="code_down_li">Courseware download</li> </ul> <div class="layui-tab-content">  <div class="layui-tab-item layui-show"> <ul class="diy-vodeo diy-li-left php-video-ul"> <li><a href="//m.sbmmt.com/course/1496.html" title=""><img alt="Front-end Vue3 actual combat [handwritten vue project]" src="https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Front-end Vue3 actual combat [handwritten vue project]</h3> </div> <div class="php-course-bottom"> <span class="l">2857 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1495.html" title=""><img alt="APIPOST tutorial [Popularization of technical concepts related to network communication]" src="https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>APIPOST tutorial [Popularization of technical concepts related to network communication]</h3> </div> <div class="php-course-bottom"> <span class="l">1795 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1494.html" title=""><img alt="Issue 22_Comprehensive actual combat" src="https://img.php.cn/upload/course/000/000/068/6396fa7cacf3b832.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Issue 22_Comprehensive actual combat</h3> </div> <div class="php-course-bottom"> <span class="l">5521 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1493.html" title=""><img alt="Issue 22_PHP Programming" src="https://img.php.cn/upload/course/000/000/068/6396fa6f383ca123.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Issue 22_PHP Programming</h3> </div> <div class="php-course-bottom"> <span class="l">5172 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1492.html" title=""><img alt="Issue 22_Front-end development" src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Issue 22_Front-end development</h3> </div> <div class="php-course-bottom"> <span class="l">8713 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1491.html" title=""><img alt="Big data (MySQL) video tutorial full version" src="https://img.php.cn/upload/course/000/000/068/639188999c8fd700.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Big data (MySQL) video tutorial full version</h3> </div> <div class="php-course-bottom"> <span class="l">4525 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1490.html" title=""><img alt="Go language tutorial-full of practical information and no nonsense" src="https://img.php.cn/upload/course/000/000/068/638eb9972ff0a840.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Go language tutorial-full of practical information and no nonsense</h3> </div> <div class="php-course-bottom"> <span class="l">2794 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1489.html" title=""><img alt="GO Language Core Programming Course" src="https://img.php.cn/upload/course/000/000/068/63884a6b0880e953.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>GO Language Core Programming Course</h3> </div> <div class="php-course-bottom"> <span class="l">2814 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1488.html" title=""><img alt="JS advanced and BootStrap learning" src="https://img.php.cn/upload/course/000/000/068/638702e2c8dda719.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>JS advanced and BootStrap learning</h3> </div> <div class="php-course-bottom"> <span class="l">2563 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1487.html" title=""><img alt="SQL optimization and troubleshooting (MySQL version)" src="https://img.php.cn/upload/course/000/000/068/63846a02a06a2889.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>SQL optimization and troubleshooting (MySQL version)</h3> </div> <div class="php-course-bottom"> <span class="l">3374 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1486.html" title=""><img alt="Redis+MySQL database interview tutorial" src="https://img.php.cn/upload/course/000/000/068/637c751460263927.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermediate</i>Redis+MySQL database interview tutorial</h3> </div> <div class="php-course-bottom"> <span class="l">2963 people are watching</span> </div></a></li> <li><a href="//m.sbmmt.com/course/1485.html" title=""><img alt="Deliver food or learn programming?" src="https://img.php.cn/upload/course/000/000/067/64be34e8b4aa0653.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Elementary</i>Deliver food or learn programming?</h3> </div> <div class="php-course-bottom"> <span class="l">5708 people are watching</span> </div></a></li> </ul> </div> <div class="layui-tab-item"> <div id="code_down" style="margin: 0 30px 26px;"> <div class="no_data" style="text-align: center;min-height: 490px;line-height:112px;padding: 190px 0;box-sizing: border-box;color: #e3e3e3;font-size: 20px;"> <div style="background: url(/static/images/lesson_video_lists.png) no-repeat;margin-right: 20px;width: 118px;height: 112px;background-position: 0 -389px;float:left;"></div>The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ </div> </div> </div> </div> </div> </div> <div class="layui-col-md3 video-right-course"> <div class="layui-col-md12 title"> <p>Students who have watched this course are also learning</p> </div> <div class="layui-col-md12 php-video-img"> <a class="recommend" href="//m.sbmmt.com/course/812.html" target="_blank"><img width="300" height="160" src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"><span class="font14">491043 plays</span></a> </div> <div class="layui-col-md12 php-video-list"> <ul> <li><a class="font14 color66" title="Let's briefly talk about starting a business in PHP" href="//m.sbmmt.com/course/1503.html" target="_blank">Let's briefly talk about starting a business in PHP</a></li> <li><a class="font14 color66" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html" target="_blank">Quick introduction to web front-end development</a></li> <li><a class="font14 color66" title="Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things" href="//m.sbmmt.com/course/836.html" target="_blank">Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things</a></li> <li><a class="font14 color66" title="Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]" href="//m.sbmmt.com/course/902.html" target="_blank">Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]</a></li> <li><a class="font14 color66" title="Login verification and classic message board" href="//m.sbmmt.com/course/866.html" target="_blank">Login verification and classic message board</a></li> <li><a class="font14 color66" title="Computer network knowledge collection" href="//m.sbmmt.com/course/1463.html" target="_blank">Computer network knowledge collection</a></li> <li><a class="font14 color66" title="Quick Start Node.JS Full Version" href="//m.sbmmt.com/course/1462.html" target="_blank">Quick Start Node.JS Full Version</a></li> <li><a class="font14 color66" title="The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]" href="//m.sbmmt.com/course/1455.html" target="_blank">The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]</a></li> <li><a class="font14 color66" title="Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)" href="//m.sbmmt.com/course/1467.html" target="_blank">Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)</a></li> </ul> </div> </div> </div> </div> <div class="phpcn-modal-layer fixed" style="z-index:9004;visibility:visible;opacity:1;display:none;"> <div class="phpcn-modal-title"> <div class="phpcn-modal-draggable dragging"> <span>notes</span> <a href="javascript:void(0)" class="phpcn-icon-close phpcn-modal-close js-modal-close">X</a> </div> </div> <div class="phpcn-modal-inner"> <div class="phpcn-modal-dialog"></div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> php.cn：Public welfare online PHP training，Help PHP learners grow quickly！ </dd> </dl> </div> </div> </div> </div> <table width="-642"> ## <time> <tbody> <tr class="firstRow"> Define date or time. <td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"></td> <td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"></td><wbr> </tr> <tr> Specifies where in the text it is appropriate to add line breaks. <td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"></td> <td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"></td>The following HTML 4.01 elements have been removed in HTML5:The following example shows you how to play a video on a webpage <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 你的浏览器不支持 video 标签。 </video> </body> </html></pre>HTML5 browser support <p>Latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support certain HTML5 features.</p>HTML5 defines 8 new HTML semantic elements. All these elements are block-level elements.In order to allow older versions of browsers to display these elements correctly, you can set the CSS display attribute value to block: <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>渲染 HTML5</title>  <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1>学习HTML就到PHP中文网</h1> <article> php中文网 —— php中文网！！ </article> </body> </html></pre>html5shiv.js reference code must be placed in the <head> element because IE The browser needs to load this file first when parsing new HTML5 elements. <div class="layui-col-md6 editor-box"> <div id="code_spread_shrink"> <div id="code_spread_shrink_show" unselectable="on"> <span>||</span> </div> </div> <div class="editor-tab js-editor-tab"> <div class="editor-left icon-left editor-op"></div> <div class="editor-view"> <ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;"> <li class="ui-tabs-active"><a href="javascript:;">new file</a></li> </ul> </div> <div class="editor-right icon-right editor-op"></div> </div> <div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html> </div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit" id="J_Commit" title="submit">submit</a> <a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="Reset Code">Reset Code</a> <div class="aotorun" style="display: block;"> <input type="checkbox" id="aotoruncheck" title="If selected, modifying the code will automatically take effect. If unchecked, submission is required to take effect"> <label for="aotoruncheck" title="If selected, modifying the code will automatically take effect. If unchecked, submission is required to take effect">Automatic operation</label> </div> </div> </div> </div>  <input type="hidden" id="verifycode" value="/captcha.html"> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body> </html>