집 > 기사 > 웹 프론트엔드 > HTML5 연구 노트(4) - 목록, 블록 및 레이아웃 코드 예

HTML5 연구 노트(4) - 목록, 블록 및 레이아웃 코드 예

黄舟원래의: 2017-03-16 15:41:481214검색

HTML 목록

목록 태그

标签	描述
c34106e0b4e09414b63b2ea253ff83d6	定义有序列表。
ff6d136ddc5fdfeffaf53ff6ee95f185	定义无序列表。
25edfb22a4f469ecb59f1190150159c6	定义列表项。
def3eed00a09ea710a4bfa4b7fe74771	定义定义列表。
73de882deff7a050a357292d0a1fca94	定义定义项目。
67bc4f89d416b0b8236eaa5f43dee742	定义定义的描述。
e844f12ad266097c5818f79a28478846	已废弃。使用 ff6d136ddc5fdfeffaf53ff6ee95f185 代替它。
5c0e96d12fc7501cef2ae2efde646ee0	已废弃。使用 ff6d136ddc5fdfeffaf53ff6ee95f185 代替它。

자주 사용하는 목록

은 태그를 사용합니다: ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6

속성: 디스크, 원, 사각형

예:

<!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>

태그 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 . 목록(순서 있는 목록 중첩, 정렬되지 않은 목록 중첩 포함)

ff6d136ddc5fdfeffaf53ff6ee95f185, 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 블록 요소

블록 요소는 일반적으로 새 줄로 시작됩니다.

예: bee497b01c5ad14c52d37fe297a57351, ff6d136ddc5fdfeffaf53ff6ee95f185

　2.HTML인라인 요소

인라인 요소는 일반적으로 새 줄로 시작하지 않습니다

예: < ;b>, 3499910bf9dac5ae3c52d5ede7383485, a1f02c36ba31691bcfe87b2722de723b

3. HTML e388a4556c0f65e1904146cc1a846bee 요소

e388a4556c0f65e1904146cc1a846bee 요소는 블록 요소라고도 합니다. HTML 컨테이너 결합

4. HTML 45a2772a6b6107b401db3c9b82c049c2 요소

스팬 요소는 인라인 요소이며 텍스트의 컨테이너로 사용할 수 있습니다

예: 붙여넣고 실행하면 효과보기(개발도구 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>

HTML 레이아웃

두 가지 방법이 권장됩니다:

1. e388a4556c0f65e1904146cc1a846bee 요소 레이아웃 사용

예: 실제로 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. f5d188ed2c074f8b944552db028f98a1 요소 레이아웃 사용

예:

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 연구 노트(3) - HTML5 스타일, 연결 및 테이블 코드에 대한 자세한 설명다음 기사：HTML5 연구 노트(3) - HTML5 스타일, 연결 및 테이블 코드에 대한 자세한 설명