002.前端开发知识，前端基础HTML（2020-01-07）

一、列表标签

1.无序列表 ul

<ul>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ul>

2.有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

<ol>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ol>

3.自定义列表

<dl>

  <dt>名词1</dt>

  <dd>名词1解释1</dd>

  <dd>名词1解释2</dd>

  ...

  <dt>名词2</dt>

  <dd>名词2解释1</dd>

  <dd>名词2解释2</dd>

  ...

</dl>

二、表格 table

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    </style>

</head>

<body>

<!-- cellspacing 单元格和单元格之间的距离   -->

<!-- cellpadding 单元格内容距离单元边框的距离   -->

    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">

        <caption>个人信息表</caption>  表格标题

        <tr>

            <th>姓名</th>

            <th>性别</th>

            <th>电话</th>

        </tr>

        <tr>

            <td>小王</td>

            <td>女</td>

            <td>110</td>

        </tr>

        <tr>

            <td>小明</td>

            <td>男</td>

            <td>120</td>

        </tr>

    </table>

</body>

</html>

1.表格属性

2.表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚。

　　<thead></thead>：用于定义表格的头部。

　　<tbody></tbody>：用于定义表格的主体。

3.表格标题

<table>

   <caption>我是表格标题</caption>

</table>

4.合并单元格

　　跨行合并：rowspan 跨列合并：colspan

　　合并单元格的思想：将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

　　公式：删除的个数 = 合并的个数 - 1

　　合并的顺序先上先左

<body>

    <table width="400" height="100" border="1">

        <tr>

            <td>123</td>

            <td>abc</td>

            <td>abc</td>

        </tr>

        <tr>

            <td colspan="2">123</td>

            <td>测试</td>

        </tr>

        <tr>

            <td>123</td>

            <td>abc</td>

            <td>abc</td>

        </tr>

    </table>

    1. 先确认跨列合并 colspan

    2. 先上后下  先左右后

    3. 删除的个数

    <table width="400" height="100" border="1">

        <tr>

            <td>123</td>

            <td>abc</td>

            <td rowspan="3">abc</td>

        </tr>

        <tr>

            <td>123</td>

            <td>123</td>

        </tr>

        <tr>

            <td>123</td>

            <td>abc</td>

        </tr>

    </table>

    1. 先确认跨行合并 rowspan

    2. 先上后下  先左右后

    3. 删除的个数

</body>

三、表单——目的是为了收集用户信息。

　　在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

　　表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

　　提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

　　表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

1.input 控件

    <form action="" method="post">

        用户名: <input type="text" name="yonghuming" value="用户名"> <br /> <br />     --value是在输入框中显示提示信息

        密　码: <input type="password" name="mima"><br /> <br />

        性别： <input type="radio" name="sex">

        <input type="submit" value="提交所填">

        <input type="reset" value="重新填写">

    </form>

显示效果如下：

2.label标签

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male">

点击标题，焦点定位到后面的输入框

        <tr height="60">

            <td>

                <label for="suibian">密码</label>

            </td>

            <td><input type="password" value="110120" maxlength="6"id="suibian" /></td>

        </tr>

3.textarea控件(文本域)

通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">

  文本内容

</textarea>

4.下拉菜单

<select>

  <option>选项1</option>

  <option>选项2</option>

  <option>选项3</option>

  ...

</select>

5.表单域

<form action="url地址" method="提交方式" name="表单名称">

  各种表单控件

</form>

四、查文档

经常查阅文档是一个非常好的学习习惯。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

value