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