The semantic elements in text content are usually used to describe special content fragments. These semantic elements can be used to mark important information, such as: name, evaluation, precautions, date, etc.
The elements include: <bDI>, <details>, <summary>, <mark>, <Output>, <Ruby>, <RP>, <Time>, <wbr>, etc.
<bDI>: Mid a content of the text direction that is separated from the parent element, and uses the default text direction of the system.
<details>: It is used to describe the details of the document.
<summary>: The title of the <details> element is marked.
<mark>: Lalate the text that is prominent.
<OUTPUT>: Mark an area where the content will be filled in the future.
<Ruby>: mark notes (Chinese phonetic or character).
<RT>: Use in the <Ruby> element, define the interpretation or pronunciation of characters (Chinese phonetic or character).
<RP>: In the <Ruby> element, the content displayed by the browser that does not support Ruby elements is defined.
<Time>: Light or time.
<wbr>: It is marked that a word is changed when the subsequent space cannot be accommodated.
ClassificationIE browser's versions of each version of these elements are different. This is divided into IE support and unsuitable to introduce:
IE supports: <mark>, <Output>, <Ruby>, <RT>, <RP>, <Time>.
IE does not support: <bDI>, <details>, <summary>, <wbr>.
IE supportThe IE browser supports elements, which is also supported in the Chrome browser.
Including: <mark>, <Output>, <Ruby>, <RT>, <RP>, <Time>.
<mark>: Label the text that is prominentThe lowest version of the browser: IE 9, Chrome 26
Use scenario: important content.
Example:
<p> The capital of China is <mark> Beijing </Mark> </p><OUTPUT>: Mark a area where the content will be filled in the future
The lowest version of the browser: IE 9, Chrome 33
Use scenario: Show a area of calculation results, JavaScript return value, etc.
property:
For: associated element ID. If there are multiple, separate in space.
FORM: associated form ID. If you are in a form form, you don't need to assign this attribute.
Example:
<FORM ID = FORM OnPut = Result.Value = Username.value> <input Type = Text Name = Username/> <Output Name = Result> </Form><Ruby>, <RT>, <RP>: Note (Chinese phonetic or character)
<Ruby>: mark notes (Chinese phonetic or character).
<RT>: Use in the <Ruby> element, define the interpretation or pronunciation of characters (Chinese phonetic or character).
<RP>: In the <Ruby> element, the content displayed by the browser that does not support Ruby elements is defined.
The lowest version of the browser: IE 5, Chrome 5
Use scenario: Chinese Pinyin, Japanese pseudonym.
Example:
<H5> Chinese Pinyin </h5> <p> <Rub> zhong </rt> Guo <RT> Guo </RT> </P> <H5> Japanese fake name </h5> <p> <Ruby> Han <rt> か ん </rt> words <rt> じ </rt> </ruby> </p><Time>: Label date or time
The lowest version of the browser: IE 9, Chrome 33
Use scenarios: news and blog publishing date.
Example:
Creation Date: <TimedateTime = 2016-04-15T12: 30> 2016/04/15 12:30 </Time>
property:
Datetime {datetime}: Set the date and time of this element. The format of <Time> The format of the element display date is diverse. In the same time, some of the displayed texts are X minutes ago, and some are English months, but the actual date time only needs to be preserved in this attribute.
Example:
<p> Creation Date: <Time Datetime = 2016-04-15 12:30> 2016/04/15 12:30 </time> </p> <p> Creation Date: <Time Datetime = 2016-04-15 12:30> 30 minutes ago </Time> </P> <p> Creation Date: <Time Datetime = 2016-04-15 12:30> April 15 </Time> </P>IE does not support
The IE browser's unsuitable elements have also been supported in the Chrome browser.
Including: <bDI>, <Details>, <summary>, <wbr>.
<bdi>: marked a section of the content of the text of the parent element, and adopted the default text direction of the systemThe lowest version of the browser: IE does not support, chrome 16
Use scene: Arabic, Persian, etc.
<p> DIV Display text direction: RTL </p> <div dir = rtl> <p> The capital of China is Beijing! </P> <bdi> The capital of China is Beijing! </BDI> </p> </div><summary>, <details>: Mark the expanded and closed content block
<details>: It is used to describe the details of the document.
<summary>: The title containing the <details> element.
The lowest version of the browser: IE does not support, chrome 12
Use scene: product details, document details.
Example:
<summary> 2016-04-18 Weather conditions <Details> <p> Sunny turns cloudy </p> <p> 13 ~ 25 ° </p> </Details> </Summary><wbr>: Mark a word when the subsequent space cannot be fully tolerated
The lowest version of the browser: IE does not support, chrome 1
Use scene: longer English words.
Example:
<H5> excluding WBR elements: </h5> <p> NetScape named LiveScript in the original script language, and later NETSCAPE renamed it JavaScript after cooperating with Sun. </p> <H5> Contains WBR elements: </h5> <p> Netscape named LiveScript in the original script language, and later NETSCAPE renamed it Java <wbr> script after cooperating with SUN. </p>
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.