html 5学習ノート(2)
html5
リスト:
http://www.w3school.com.cn/tags/html_ref_byfunc.asp
リスト:無秩序リスト: ラベル
リスト:
http://www.w3school.com.cn/tags/html_ref_byfunc.asp
リスト:
- を使用
- プロパティ:disc,circle,square
- 順序リスト:
- ラベル
- を使用
- 属性:A,a,I,i,start
- ネストされたリスト:
- 使用ラベル:
- ,
- カスタムリスト:
- 使用ラベル:
- ,
- ,
- htmlブロック要素
- ブロック要素は、表示時に通常、新しい行で を開始する.
-
,
.
- htmlインライン要素:
- のインライン要素は、通常、新しい行で を開始しません.
- ,, html要素:要素被称为布洛克要素,主要是配合html要素的容器.html要素:要素是印线要素,可以成为网络容器.与通常一起使用的index.html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="divcss.css"> <style type="text/css"> span{ color: crimson; } </style> <title></title> </head> <body> <p>hello world</p> <h1>hello world</h1> <br/> <b>helloworld</b> <a href="hrefht.html">hrefht</a> <br/> <div id="divid"> <p>helloworld</p> <a>click</a> </div> <div id="divspan"> <p><span>hello world</span>this is a text</p> </div> </body> </html> divcss.css: #divid p{ color : chartreuse; }htmlリモート:リモートの使用<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style type="text/css"> body{ margin: 0px; } div#container{ width: 100%; height: 950px; color : gainsboro; } div#heading{ width: 100%; height: 10%; background-color: cornflowerblue; } div#content_menu{ width: 30%; height: 80%; background-color: gainsboro; float: left; } div#content_body{ width: 70%; height: 80%; background-color: burlywood; float: right; } div#footing{ width: 100%; height: 10%; background-color: black; clear: both; } </style> <title></title> </head> <body> <div id="container"> <div id="heading">ヘッダ</div> <div id="content_menu">コンテンツメニュー</div> <div id="content_body">コンテンツ本体</div> <div id=「footing」>下部</div> </div> </body> </html>使用莱恩特<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="950px" style="background-color: aliceblue"> <tr> <td colspan="2"width="100%"height="10%"style="background-color:cornflowerblue">ヘッダ</td> </tr> <tr> <td width="20%" height="80" style="background-color: darkgray"> <ul> <li>ios</li> <li>ios</li> <li>ios</li> </ul> </td> <td width="60%"height="80%"style="background-color:azure">エンティティ</td> <td width="20%"height="80"style="background-color:darkgray">左メニュー</td> </tr> <tr> <td colspan="2"width="100%"height="10%"style="background-color:blue">下部</td> </tr> </table> </body> </html>極客学院:http://www.jikexueyuan.com/course/135.html
- ,
<body> <ul type="circle"> <li>apple</li> <li>bnana</li> <li>orange</li> </ul> <ul type="square"> <li>apple</li> <li>bnana</li> <li>orange</li> </ul> <ol type="a"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol type="A"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol type="i"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol type="I"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol start="10"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ul type="square"> <li>fruit</li> <ol> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <li>vegetable</li> <ol> <li>potato</li> <li>tomato</li> <li>cabbage</li> </ol> </ul> <dl> <dt>helloworld</dt> <dd>print helloworld</dd> <dt>helloworld</dt> <dd>print helloworld</dd> </dl> </body>
htmlブロック