Specifies where in the text it is appropriate to add line breaks. | |
HTML5 Form
New form elements, new attributes, new input types, automatic validation.
##Element removed
The following HTML 4.01 elements have been removed in HTML5:- <acronym>
##<applet>- ##<big>
##<center>
<dir>
- ##<font>
##<frame>- ##<strike>
Example
The following example shows you how to play a video on a webpage<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<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>
You You can find a video locally, put the location and name of the video in src, try itHTML5 browser support
Latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support certain HTML5 features.
You can make some older browsers (that do not support HTML5) support HTML5.
Modern browsers support HTML5.
Additionally, all browsers, old and new, will automatically treat unrecognized elements as inline elements.
Because of this, you can "teach the browser" to handle "Unknown" HTML elements.
You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.
##Defining HTML5 elements as block elements
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:##header, section, footer, aside, nav, main, article, figure { Display: block; }
Add new elements to HTMLYou can add new elements to HTML.
This example adds a new element to HTML and defines a style for the element. The element is named <myHero>:
<!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>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>Run the program to see
The JavaScript statement document.createElement("myHero") is to add a new element to the IE browser.
Internet Explorer browser issues
You can use the above method to add HTML5 elements for IE browser, but:
Internet Explorer 8 and earlier IE browsers do not support the above method.
We can solve this problem using "HTML5 Enabling JavaScript", " shiv" created by Sjoerd Visscher:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ;
<![endif]-->
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.
Note: Domestic users please use Baidu static resource library (Google resource library is unstable in China):
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif ]-->
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.
##Perfect Shiv solution
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>学习HTML就到PHP中文网</h1>
<article>
php中文网 —— php中文网！！
</article>
</body>
</html>
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.
Next Section
<!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>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
