---------------------------------------elements that can wrap a line cannot wrap--------------------------------
Block-level element in-line element
Div-dl-form---Interactive form a-link br-line wrap em-emphasize
H1-h6 Title HR-Horizontal Divider I-italic img-Picture input-input box
OL-sorted list ul-non-sorted list label-label SELECT-Project Selection
P-Paragraph table-table span-text within chunk strong-bold accent
TEXTAREA-MultiRow
--------------------------------------------------------------------------------------------------------------- -----------------------------
The semantics of
HX Series for title importance increment H1 to page content title, H2 to page relevance title
P is a paragraph, using <br/> segmentation is wrong
Strong is emphasis on <b><u><i><em> is the key word emphasis
The caption in table is the title, summary is a summary
ALT and Title attributes make elements more semantic
<DL><DT><DD>DL is a list of definitions, such as the interpretation of words in a dictionary, defined
Eg.<dl>
<dt>Dog</dt>
<dd>an animal</dd>
</dl>
HTML5 Semantic Tags <footer>
--------------------------------------------------------------------------------------------------------------- --------------------------
div default style does not have spacing up or down p default style is spaced up and down
iframe can load Web pages into their own web pages
-----------------------------------------------------
Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<meta name= "keywords" content= "keywords" >
<meta name= "description" content= "description" >
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" >
<body>
<p>
<a href= "http://map.baidu.com/" target= "_blank" > Baidu map </a>
</p>
<br/>
<span>2016baidu</span>
<div>div1</div>
<div>div2</div>
<p>p1</p>
<dl>
<dt>dog
<dd>is an animal</dd>
</dt>
</dl>
<ul>
<li><a href= "" > Good business Can't </a></li>
<li> Spider-Man haha </li>
</ul>
<ol>
<li>no 1</li>
<li>no 2</li>
</ol>
<table border= "1" cellpadding= "20px" cellspacing= "2px" width= "300px" height= "300px" align= "Center" >
<caption> Ranking List </caption>
<thead>
<tr>
<th> name </th>
<th> rankings </th>
</tr>
</thead>
<tbody>
<TR align= "center" >
<td> Zhang San </td>
<TD rowspan= "2" >no 1</td>
</tr>
<tr>
<td> John Doe </td>
</tr>
<TR align= "center" >
<TD colspan= "2" > Wang er flaxseed No 3</td>
</tr>
</tbody>
</table>
<iframe src= "www.imooc.com" width= "300px" height= "300px" ></iframe>
</body>
Block-level elements and semantics of elements in HTML lines