ホームページ > 記事 > ウェブフロントエンド > HTML5学習メモ(4) - リスト、ブロック、レイアウトのコード例
HTML5学習メモ(4) - リスト、ブロック、レイアウトのコード例
- 黄舟オリジナル
- 2017-03-16 15:41:481214ブラウズ
HTML list
リストタグ
| タグ | 説明 |
|---|---|
| c34106e0b4e09414b63b2ea253ff83d6 | は順序付きリストを定義します。 |
| ff6d136ddc5fdfeffaf53ff6ee95f185 | 順序なしリストを定義します。 |
| 25edfb22a4f469ecb59f1190150159c6 | リスト項目を定義します。 |
| def3eed00a09ea710a4bfa4b7fe74771 | define 定義リスト。 |
| 73de882deff7a050a357292d0a1fca94 | 定義定義項目。 |
| 67bc4f89d416b0b8236eaa5f43dee742 | 定義の説明。 |
| e844f12ad266097c5818f79a28478846 | は廃止されました。代わりに ff6d136ddc5fdfeffaf53ff6ee95f185 を使用してください。 |
| 72795ca3fa5b03e6f470aea68566ae46 | は廃止されました。代わりに ff6d136ddc5fdfeffaf53ff6ee95f185 を使用してください。 |
1. 順序なしリスト
使用タグ: ff6d136ddc5fdfeffaf53ff6ee95f185、25edfb22a4f469ecb59f1190150159c6
属性: disc、circle、square<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>聊表</title></head><body>
<!--无序列表, 列表项为li-->
<!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下--><ul type="disc">
<li>apple</li>
<li>orange</li>
<li>bananer</li>
<li>Berry</li></ul></body></html>2. はいシーケンスlist は、タグc34106e0b4e09414b63b2ea253ff83d6、25edfb22a4f469ecb59f1190150159c6を使用します 属性: A、a、I、i、start<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>列表</title></head><body><!--有序列表, 列表项为li--><!--A: 以A,B,C...排序
a: 以a,b,c...排序
I: 以I, II, III...排序
i: 以i,ii,iii...排序
start: 自己定义排序的第一个--><ol type="i">
<li>iOS</li>
<li>Android</li>
<li>Java</li>
<li>Swift</li>
<li>Objective-C</li></ol></body></html> 3. ネストされたリスト(順序付きリストのネスト、順序なしリストのネストを含む) タグ<を使用します;ul>、c34106e0b4e09414b63b2ea253ff83d6、25edfb22a4f469ecb59f1190150159c6<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>列表</title></head><body><!----><ul type="square">
<li>iOS</li>
<ul>
<li>iPhone</li>
<li>iWatch</li>
<li>iPod</li>
<li>iPad</li>
</ul>
<li>Android</li>
<ul>
<li>Any Call</li>
<li>Oppo</li>
<li>Vivio</li>
<li>Huawei</li>
</ul>
<li>Objective-C</li></ul></body></html> 4. リストをカスタマイズします タグ 5c69336ffbc20d23018e48b396cdd57a、73de882deff7a050a357292d0a1fca94、67bc4f89d416b0b8236eaa5f43dee742を使用します<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>自定义列表</title></head><body><!--定义自定义列表--><dl>
<!--定义自定义项目-->
<dt>cast:</dt>
<!--定义自定义描述-->
<dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd>
<dt>forecast:</dt>
<dd>v. 预测, 预报, /dd> <dd>n. 预测, 预报<</dd>
<dt>insight:</dt>
<dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd></dl></body></html>
HTMLブロック
1.
HTMLブロック要素 ブロック要素が表示される場合、通常は改行で始まります
例: 4a249f0d628e2318394fd9b75b4636b1、e388a4556c0f65e1904146cc1a846bee、ff6d136ddc5fdfeffaf53ff6ee95f185 2 。 HTMLインライン要素
例: a4b561c25d9afb9ac8dc4d70affff419、3499910bf9dac5ae3c52d5ede7383485、a1f02c36ba31691bcfe87b2722de723b 3. HTML e388a4556c0f65e1904146cc1a846bee要素 01ffcd5d1a840d2341909ced6bafa76c 要素はブロック要素とも呼ばれ、主に HTML を組み合わせるためのコンテナです 4. HTML 77174cecdc52329a5cc809f6223452a2 要素のレイアウトを使用します 例:<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>table布局</title></head><body marginheight="0px" marginwidth="0px">
<table width="100%" height="950" style="background-color: darkgray">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: aqua">
头部 </td>
</tr>
<tr>
<td width="20%" height="80%" style="background-color: cornflowerblue">
<ul>
<li>diktatet</li>
<li>diktator</li>
<li>diktation</li>
</ul>
</td>
<td width="60%" height="80%" style="background-color: cadetblue">中间部分</td>
<td width="20%" height="80%" style="background-color: crimson">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td>
</tr></table></body></html>
以上がHTML5学習メモ(4) - リスト、ブロック、レイアウトのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。