3.HTML_3

1 OL>LI:有序列表 – order

不管哪个?>Li用于列表; 百度推荐列表, 淘宝商品信息一块一块的

思考: 3列的li怎么做?

1. 设置ul宽度, 取消padding和list-style.
2. 设置li的宽度1/3, 浮动,
3. 清除浮动.

---

2. 自定义列表: dl > dt , dd

    <dl>
        <dt>魏国</dt>
        <dd>张辽</dd>
        <dd>蔡文姬</dd>
        <dd>夏侯惇</dd>
        <dt>蜀国</dt>
        <dd>法政</dd>
        <dd>诸葛亮</dd>
        <dd>庞统</dd>
        <dd>马谡</dd>
    </dl>

4. Table表格： datagrid

3.1 Table：

border: 边线

width: height;宽和高

cellpadding: 单元格中的内边距

cellspacing: 单元格间距

algin: style margin:0 auto; 水平左中右

通常我们用合并重叠线样式 border-collapse: collapse;

    <table border="1px" width="600px" cellpadding="0" cellspacing="0px" style="border-collapse: collapse;" >
        <tr>
            <th>球员</th>
            <th>得分</th>
            <th>篮板</th>
        </tr>
        <tr>
            <td>乔丹</td>
            <td>50</td>
            <td>14</td>
        </tr>
        <tr>
            <td>罗德曼</td>
            <td>3</td>
            <td>20</td>
        </tr>
    </table>

tr： 行

• width:??不好用

• height: 高

• align: left center right; 行内的内容，左中右

  • text-align:

• valign: top middle bottom; 垂直上中下

  • vertical-align:

<tr height="200" align="right" valign="bottom">

3.3 TH/TD

• TH,有样式： 粗体，水平居中

• TD，没有样式的

• col标签：用于规定列column的宽度

• caption: 表格的标题

  • align： top/bottom

• thead-tbody-tfoot; 表格中区域头-主题-脚

<table border="1px" width="600px" cellpadding="0" cellspacing="0px" style="border-collapse: collapse;" align="center">
        <caption align="bottom">这是一个表格</caption>
        <col width="100px" />
        <col width="30%" />
        <col widht="auto" />
        <thead>
            <tr>
                <th>球员</th>
                <th>得分</th>
                <th>篮板</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>合计</td>
                <td>53</td>
                <td>34</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>乔丹</td>
                <td align="right" >50</td>
                <td align="right">14</td>
            </tr>
            <tr>
                <td>罗德曼</td>
                <td >3</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>

3.4 合并

rowspan: 合并行

colspan：合并列

左上原则

5. Form表单：：：：：※name属性是提交用的！

https://www.baidu.com/s 请求i地址
问号后面的是参数列表
    https://www.baidu.com/s?wd=%E8%B5%B5%E4%B8%BD%E9%A2%96
action:请求地址
get:地址栏方式提交数据（有大小限制）
post:以数据流形式，更安全

    <form action="https://www.baidu.com/s" method="get">
        input是输入项， type类型是文本输入框  name要伪造的参数列表的参数名 value输入的值
        <input type="text" name="wd" value="goslin" /> 
        可以提交表单的按钮 ， value按钮的内容
        <input type="submit" value="百度以下" />
    </form>
    2
</body>

• action： 请求地址
• method； 默认是get
  • get,以地址栏方式放送请求
  • post,以数据流方式放送请求

5.1 Fiedlset 与 legend: HTML5的标签

fieldset黑框， legend黑框的标题

6. input标签：一堆type

• text:文本输入框， 默认
  • value属性：值
  • maxlength: 最大输入个数
  • size: 显示的个数（超级不准）
  • placeholder: 默认显示灰色的 HTML5

            <input maxlength="20" size="10" placeholder="。。。请输入"  />

• submit: 提交按钮

• password: 密码输入框

• button: 普通按钮

• reset: 重置按钮

• radio: 单选

• checkbox:多选

–一堆HTML5的

• color:
• range
• number;
• email
• .Date…

placeholder="。。。请输入" />

- submit: 提交按钮

- password: 密码输入框

- button: 普通按钮

- reset: 重置按钮

- radio: 单选

- checkbox:多选

  

--一堆HTML5的

- color:
- range
- number;
- email
- .Date..