零基础必看的Html5+Css3+移动端前端教程(三)

目录

一、前言 

二、表格标签

1.主体表格

 2.表头表格

 3.表格标签的属性

4.合并单元格

三、列表标签

1.无序列表（重点）

2.有序列表

3.自定义列表

四、表单标签

 一、表单域

 二、表单控件（重点）

1.Input输入标签

2.lab标签

 3.select下拉标签

4.textarea文本域标签

 5.案例

一、前言 

        对于教程二，主要学习了文字标签、图像标签和链接标签的使用，教程三主要针对表格、列表、表单标签的使用方法。

二、表格标签

1.主体表格

     <!-- <table></table>是定义表格的标签 -->
    <table>
        <!-- <tr></tr>用来定义行，嵌套在table标签中 -->
        <tr> 
            <!-- <td></td>用来定义表格中的单元格，必须嵌套在tr标签中        -->
            <td>单元格内的文字</td>

        </tr>
    </table>

 2.表头表格

表头表格就是上面表格中的第一行，它和下面几行主要区别就是有加粗和居中显示。

 3.表格标签的属性

 cellpadding:文字距离左侧表格线的距离

cellspacing：表格两条线中的距离

4.合并单元格

就像excel中一样，html也有合并单元格这个功能，只不过需要特定的代码。

 将上面的表格按照1~9编号，以跨列合并为例，colspan="2"表示合并2个单元格，起始位置就是第二列，其中第三列被合并了，所以就不需要了，删除。

上面图中具体代码实现为：

    <!-- 为表格设置居中、边框、文字与表格相距5、表格与表格相距0、宽度（宽高设置一个会自动调节） -->
    <table align="center" border="1"  cellpadding="5" cellspacing="0" width="250">
        <!-- 下图中的thead和tbody只是把表头和主体做一个分类，没什么特殊作用 -->
        <thead>
            <tr>
                <!-- 将2和3按照列来合并，确定合并的起始点，删除多余的单元格 -->
                <th>1</th>
                <th colspan="2">2</th>
                <!-- <th>3</th>删除这一个 -->
            </tr>
        </thead>
        <tbody>
            <!-- 将4和7按照行来合并，确定合并的起始点，删除多余的单元格 -->
            <tr>
                <td rowspan="2">4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <!-- <td>7</td>删除这个多余的 -->
                <td>8</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

三、列表标签

1.无序列表（重点）

<ul>标签表示HTML中的无序列表，一般会以项目符号作为列表项<li>.

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

• 无序列表中列表项并列

• <ul></ul>中只能嵌套<li></li>，在<ul></ul>标签中输入其他标签或者文字的做法不正确。

• <li>与</li>之间相当于一个容器，可以容纳所有元素。

 特点可以简单理解成<ul>只有<li>这一个儿子，假如p标签也行冒充儿子，那不行。对于<li>这个儿子来讲，他也会有儿子而且不限量，所以<ul>有一个儿子，无限个孙子。

2.有序列表

<ol type="A"> 
  <li>列表项一</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

1. <ol>标签中的type属性值为排序序列号，不添加type属性时，有序列表默认从1开始排序。

2. 常用的type属性值分别为是1，a，A，i，I

3. <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。

4. <ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。

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>

 自定义列表就是<dt>创建的一个名词，剩下的<dd>用来描述和它相关的内容，具体关系如下图：

代码段：

 <!-- 无序列表ul中间不能嵌套别的标签，li可以 -->
    <ul>
        <li>甄嬛</li>
        <li>宜秀</li>
        <li>年世兰</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>甄嬛</li>
        <li>苹果</li>
        <li>西瓜</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>雍正</dt>
        <dd>甄嬛</dd>
        <dd>宜秀</dd>
        <dd>年世兰</dd>
    </dl>

四、表单标签

表单标签对于信息收集有着重要的作用，分为表单域、表单控件和提示信息三个部分，下图为常见用户注册收集信息的表单域。

 一、表单域

表单域是一个包含完整表单元素的区域。

<form action="url地址" method="提交方式" name="表单域名称">
    各种元素控件
</form>

在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

常用属性：

属性	属性值	作用
action	url地址	指定接受并处理表单数据服务器程序的url地址
method	get/post	设置表单数据的提交方式，取值为get/post
name	名称	指定表单的名称

 二、表单控件（重点）

1.Input输入标签

在英文单词中，Input为输入的意思，在表单元素<input>标签用于收集用户信息。

在input标签中，包含一个type属性，根据不同的type属性值，输入字段有多种样式。

<input type="属性值 "   />

• <input />为单标签
• type属性设置不同用来指定不同的控件类型

type之外的属性： ​​​​​

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了
maxlength	正整数	规定输入字段中字符最大长度

代码段：

 <form>
        <!-- text一个文本框 value是默认出现在文本框中的值  -->
        用户名：<input  type="text" name="username"    value="请输入用户名" maxlength="12">                
        <br>
        <!-- password不显示密码的文本框 -->
        密码：&nbsp;&nbsp;&nbsp;<input   name="password"  type="password"   maxlength="16"> 
        <br>
        <!-- radio实现多选一 -->
        <!-- name对于radio实现多选一必须都要求写上 checked为默认选中-->
        性别：<input  type="radio" name="sex"  checked="checked" id="man"> <label for="man">男</label>  <input  type="radio" name="sex">女<br>
        <!-- checkbox实现多选多 -->
        爱好：
        吃饭 <input  type="checkbox" name="hobby"> 
        睡觉<input  type="checkbox" name="hobby"> 
        打游戏<input  type="checkbox" name="hobby"> <br>
        <!-- submit把当前表单的数据提交到后台，reset恢复到初始界面 -->
        <input type="submit" value="免费注册"><br>
        <input type="reset" value="重置"><br>
        <!-- button按钮实现与JS的交互，file实现上传文件 -->
        <input type="button" value="发送短信验证码"><br>
        <input type="file" value="上传文件"><br>
    </form>

2.lab标签

• label 标签为 input 元素定义标注（标签）。

• label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

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

如何绑定元素呢

• 第一种用法就是用label标签直接包含input表单， 适合单个表单选择

• 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

  第一种
  <label> 用户名： 
    <input type="radio" name="usename" value="请输入用户名">   
  </label>
  
  第二种
  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

 3.select下拉标签

在页面中，如果有多个选项让用户选择，并且想节约空间，<select>定义下拉列表就是个不错的选择。

        <select>
            <option>选项一</option>
            <option>选项二</option>
            ........

        </select>

 <select>至少包含一对<option>，在<option>中定义select="selected"时，默认选中

        出生地：
        <select>
            <option>北京</option>
            <option>上海</option>
            <!-- 默认选中广州 -->
            <option selected="selected">广州</option>
        </select><br>

4.textarea文本域标签

        <!-- cols="每行中的字符数" rows="显示的行数" -->
        留言：
        <textarea rows="5" cols="50">
            文本内容
        </textarea>

 textarea相当于放大版的输入标签

 5.案例

实现一个简易的用户信息注册网站

 如果想要全面了解可以看一下：零基础必看的Html5+Css3+移动端前端教程(一)

                                                    零基础必看的Html5+Css3+移动端前端教程(二)