HTML 목록
목록 태그
标签 | 描述 |
---|---|
定义有序列表。 | |
定义无序列表。 | |
定义列表项。 | |
<dl> | 定义定义列表。 |
定义定义项目。 | |
定义定义的描述。 | |
<dir> | 已废弃。使用
|
已废弃。使用
|
자주 사용하는 목록
1.
은 태그를 사용합니다:
속성: 디스크, 원, 사각형
예:
<!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.
태그
속성 사용: 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 . 목록(순서 있는 목록 중첩, 정렬되지 않은 목록 중첩 포함)
<!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. 자체 정의 목록
<!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 블록 요소
블록 요소는 일반적으로 새 줄로 시작됩니다.
예:
2.HTML인라인 요소
인라인 요소는 일반적으로 새 줄로 시작하지 않습니다
예: < ;b>, ,
3. HTML
요소
요소는 블록 요소라고도 합니다. HTML 컨테이너 결합
4. HTML 요소
스팬 요소는 인라인 요소이며 텍스트의 컨테이너로 사용할 수 있습니다
예: 붙여넣고 실행하면 효과보기(개발도구 IntelliJ IDEA)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块元素</title> <!--样式--> <style type="text/css"> #wraper p{ color: blueviolet; } #span span{ color: indianred; } </style></head><body><!--块元素--><h1>visual:</h1><p>视力的, 视觉的</p> <!--内联元素--><b>vision:</b><a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a> <!--p元素--><p id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><!--span元素: 文本的容器--><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>
두 가지 방법이 권장됩니다:
1.
요소 레이아웃 사용
예: 실제로 CSS 코드에 p를 추가할 필요가 없으며 일반적으로 추가할 필요가 없습니다. add
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{margin: 0px} p#container{ /*可以充满全屏*/ width: 100%; height: 950px; background-color: darkgray; } p#heading{ width: 100%; height: 10%; background-color: aqua; } p#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } p#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } p#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style></head><body><p id="container"> <p id="heading">头部</p> <p id="menu">内容菜单</p> <p id="mainbody">内容主体</p> <p id="footing">底部</p></p></body></html>
2.