HTML5 first look at 2 new elements-H5 Tutorial-php.cn

1. Block element

##HTML5 defines 8 new HTML semantic (semantic) elements, 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 property to block：

header, section, footer, aside, nav, main, article,figure{
 display: block;
}

Copy after login

##2.

Add new element

Add a new element to

HTML, and define the style and element name for the element For ##:

<!DOCTYPE html>
  <html>
  
  <head>
    <title>Creating an HTML Element</title>
     <script>document.createElement("myHero")</script>
    <style>
    myHero {
      display: block;
      background-color: #ddd;
      padding: 50px;
      font-size: 30px;
    } 
    </style> 
  </head>
  
  <body>
  
  <h1>我的第一个标题</h1>
  
  <p>我的第一个段落。</p>
  
  <myHero>我的第一个新元素</myHero>
  
  </body>
  </html>

Copy after login

MultimediaElement

##label

and

sign Description
##DefinitionAudio Content
DefinitionVideo (	video or movie)
##Define multimedia resources
Define embedded content, such as plug-ins.	#
##Specify external text tracks for media such as	elements. ##4. Canvas ElementElement

##<
canvas>

## Label definition graphic , such as charts and other images. This tag is based on

Drawing

JavaScript

API

5. New form element

#labelsign

Description

list>

Define the option list. Please use this element in conjunction with the input element to define the input possible values.

#<keygen>

Specifies the key pair to be used for the form

Generator field.

##Define different types of output, such as script output.

6. New semantic and structural elements

Define page content content outside. ##, such as ##

# The ## tag contains the Specify independent stream content (images, charts, photos, code, etc.). Definition

section ##Define weights and measures. Use only for measurements with known maximum and minimum values. ## (Chinese phonetic pronunciation or characters). # ## Used in ruby #

## LabelTag	Description
	##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 Button	radio button , checkbox or button
##Details used to describe a document or a certain part of a document	##
##Definition Dialog box, such as prompt box	##
details title of the element	#
#
The title of the element	##< ;footer> define
or document footer.	# ##Defines the header area of the document
##	Define text with tokens.
#
##Define the running progress (process).
##Define the progress of any type of task.	#
##Definition ruby Comment
## Define the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).	#
comments to define the content displayed by browsers that do not support the ruby element.
	定义文档中的节（section、区段）。
<time>	定义日期或时间。
	规定在文本中的何处适合添加换行符。

7. 已移除的元素

在HTML5中不再使用，已经被删除。

·    <acronym>
·    <applet>
·    <basefont>
·    <big>
·    <center>
·    <dir>
·    <font>
·    <frame>
·    <frameset>
·    <noframes>
·    <strike>
·    <tt>

Copy after login

The above is the detailed content of HTML5 first look at 2 new elements. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

HTML5，新元素

source：php.cn

Previous article：A first look at HTML5 Next article：Example analysis of how Html5 implements asynchronous file upload function

Statement of this Website

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