HTML一个月甩开一堆人

文章目录

• • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结

概要

HTML的列表标签和表格的制作

1.列表标签的介绍

2.表单标签的介绍

3.表格的制作

整体架构流程

第一大类:列表

1.有序列表

2.无序列表

3.自定义列表

第二大类:表格

1.基本结构

2.表格标题

3.合并单元格

第三大类:

1.表单

2.文本表单

3.单选按钮

4.复选框

5.提交按钮

6.下拉选择

7.文本域

技术名词解释

有序列表ol

无序列表ul

自定义列表dl,dt

表格table

基本结构

table:定义表格

th:定义表格的标题栏

tr:定义表格的行

td:定义表格的列

表格标题<caption>

合并单元格有两个属性:

一个是rowspan:合并行

一个是colspan:合并列

技术细节

<ol type="A">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
<ul type="square">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
<dl>
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
    </dl>

 

<table border="1" align="center" width="600">
        <tr>
            <th bgcolor="pink" height="30">表格标题</th>
            <th height="60">表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr align="center">
            <td rowspan="3">第一行第一列</td>
            <td colspan="2">第一行第二列</td>
            <!-- <td>第一行第三列</td> -->
        </tr>
        <tr align="center">
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <!-- <td>第二行第三列</td> -->
        </tr>
        <tr align="center">
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <!-- <td>第三行第三列</td> -->
        </tr>
    </table>

<form action="demo01.html">
        姓名: <input type="text" name="password" value="大帅哥">
        密码: <input type="password" name="password">
        数字: <input type="number"  name="number">
        单选按钮:
            <input type="radio" name="sex" value=nan>男
            <input type="radio" name="sex" value="nv">女
            <input type="radio" name="sex" value="qita">其他
        多选按钮:
            <input type="checkbox" name="a">吃
            <input type="checkbox" name="a">喝
            <input type="checkbox" name="a" checked>玩
            <input type="checkbox" name="a" checked>乐
            <input type="checkbox" name="a" checked>睡
            <input type="checkbox" name="a">学习
            <br>
            <!-- select 下拉框
                select - option --选项
                       - value: 选项值
            -->
        下拉框:
            <select name="地区" id="">
                <option value="" selected></option>
                <option value="1">北京</option>
                <option value="2">深圳</option>
                <option value="3">上海</option>
                <option value="4">太原</option>
            </select>
        文本域:
            <textarea name="" id="" cols="80" rows="10"></textarea>

        提交:
            <input type="submit">
    </form>

 

小结

代码是枯燥无味的,但是你可以让他变得有点乐趣,用复杂的指令，去增加更多的创造力。