HTML初学笔记二

发表于

HTML列表

<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述

无序列表

使用标签:<ul>、<li>
属性：

  • disc(实体圆)
  • circle(空心圆)
  • square(方块实体)

方法<ul type="disc"> (type类型)

有序列表(默认显示1、2、3、4)

使用标签:<ol>、<li>
属性：A、a、I、i、start

  • <ol start="10">(显示从10开始)

嵌套列表

  • 使用标签: <ul>、<ol>、<li>

自定义列表

  • 使用标签:<dl>、<dt>、<dd>

HTML块元素

注释快捷键：ctrl+/

  • HTML 区块元素
    块级元素在浏览器显示时，通常会以新行来开始。
    实例: <h1>, <p>, <ul>
  • HTML 内联元素
    内联元素在显示时通常不会以新行开始。
    实例: <b>,<td>, <a>, <img>
  • HTML <div> 元素
    HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。(使用css)
  • HTML <span> 元素
    HTML <span> 元素是内联元素，可用作文本的容器

HTML布局

  • div 元素来创建多列布局(<div id="container">)
    (<style type="text/css">)
    didv#container{
    width:100%;
    height:950px;
    background-color:darkgray;
    }

  • <table> 元素布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>table布局</title>
    <body marginheight="0px" marginwidth="0px">
            <table width="100%" height="950px" style="background-color:blue">
            <tr>
                <td width="100%" height="10%" style="background-color:aqua" colspan="2">头部</td>
            </tr>
            <tr>
                    <td width="40%" height="80%" style="background-color:darkgray">
                        <ul>
                            <li>苹果</li>
                            <li>香蕉</li>
                            <li>猕猴桃</li>
                        </ul>
                    </td>
                    <td width="60%" height="80%" style="background-color:blue"></td>
            </tr>
            <tr>
                <td width="100%" height="10%" style="background-color:red" colspan="2">底部</td>
            </tr>
             </table>
         </body>
    </html>