HTML-2

标签-2

1. 表格标签

1. 表格的基本写法

• <table></table>用于定义表格的标签
• <tr></tr> 用于定义表格的中的行，必须嵌套在<table></table>标签中
• <td></td> 用于定义表格的中的单元格，必须嵌套在<tr></tr>标签中

    <table>
        <tr>
            <td>单元格内的文字</td>
            <td></td>
        </tr>
    </table>

2. 表格属性

• align，规定表格相对于周围元素的对齐方式“left、center、right"。
• border，规定表格单元是否拥有边框，默认为“”，表示没有边框。1表示有边框。
• cellpadding，规定单元边沿与其内容之间的边框，默认1像素。
• cellspacing,规定单元格之间的空白，默认2像素。
• width，规定表格的宽度，像素值或者百分百比。

3. 表格结构标签

• <thead></thead>用于定义表格的头部，<thead></thead>标签内部必须有<tr></tr>标签，一般是位于第一行。
• <tbody></tbody>用于定义表格的主体，主要用于放数据本体。

<table align="center" border="1" cellpadding="22" cellspacing="0" width="999" height="9">
        <thead>
        <tr>
            <th>姓名</th> 
            <th>分数</th>
            <th>相关链接</th>
        </tr><!--表头-->
        </thead>
        <tbody>
        <tbody>
            <td>草莓熊</td>
            <td>99</td>
            <td><a href="#">图片</a></td>
        <tr>
            <td>胡迪</td>
            <td>66</td>
            <td><a href="#">图片</a></td>
        </tr>
        <tr>
            <td>巴斯光年</td>
            <td>88</td>
            <td><a href="#">图片</a></td>
        </tr>
        </tbody>
    </table>

4. 合并单元格

• 跨行合并：rowspan=”合并单元格的个数“
• 跨行合并：colspan=”合并单元格的个数“
• 合并三步曲
  先确定是跨行还是跨列合并。
  找到目标单元格，写上合并方式=合并单元格数量。比如<td colspan="2"></td>
  删除多余的单元格。
  

<table align="center" border="1" cellpadding="22" cellspacing="0" width="999" height="9">
        <tr>
            <td></td>
            <td colspan="2"></td>
    
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>

2.列表标签

2.1无序列表

• <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表，而列表使用<li>标签定义。
• 基本语法结构

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

• 无序列表的各个列表项之间没有顺序级别之分，是并列的。
• <ul></ul>中只能嵌套<li></li>,直接在 <ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
• <li></li>之间相当于一个容器，可以容纳所有元素。

2.2有序列表

• <ol>标签用于定义有序列表，列表顺序以数字来显示，并且使用<li>
  标签来定义列表项。
• 基本语法结构

    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

• <ol></ol>中只能嵌套<li></li>,直接在 <ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
• <li></li>之间相当于一个容器，可以容纳所有元素。

2.3自定义列表

• 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
• <di>标签用于定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。
• 基本语法

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

• <di></di>里面只能包含<dt><dd>
• <dt><dd>个数没有限制，经常是一个<dt>对应多个<dd>

3.表单标签

1. 表单域

• 表单域是一个包含表单元素的区域，<form>用于定义表单域，以实现用户信息的收集，<form>会把它范围内的表单元素信息提交给服务器。
• 基本语法

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

• 常用属性
  

2.表单元素

2.1 input输入表单元素

1. type的属性值及其描述
   

• text 文本框，输入任何文字
• password 密码框，用户看不见输入的密码
• radio 单选按钮
• checkbox 复选框
• submit 提交按钮
• reset 重置按钮
• file 文本域，上传文件时使用
• 注意： 如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可

    <form action="" method="" name="">
        <!-- text文本框 用户可以在里面输入任何文字 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="9"><br />
        <!-- password 密码框 用户看不见输入的密码 -->
        密码：<input type="password" name="sex"><br />
        <!-- radio单选按钮 可以实现多选 -->
        <!-- name 是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一-->
        <!-- 单选按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮 -->
        性别：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女" checked="checked"><br />
        <!-- checkbox 复选框 可以实现多选 -->
        爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"><br />
        <!-- 点了提交按钮submit，可以把表单域form里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit">
        <input type="submit" value="免费领取草莓熊"><br />
        <!-- 重置按钮reset可以还原表单元素的初始默认状态 -->
        <input type="reset" value="重新填写"><br />
        <!-- 普通按钮button 后期搭配js使用-->
        <input type="button" value="获取验证码"><br />
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像：<input type="file" ><br />

• < label >标签用于绑定一个表单元素，当点击< label >标签内的文本时，浏览器就会自动选择对应的表单元素
• < label >标签的 for 属性应当与相应元素的 id 属性相同

<!-- label标签 -->
        <label for="text">用户名：</label><input type="text" id="text">
        <input type="radio" id="nan"><label for="nan">男</label>
        <input type="radio" id="nv"><label for="nv">女</label>

2. 除了type属性外， input标签还有其他很多属性
   

• name和value是每个表单元素都有的属性值主要给后台人员使用。
• name表单元素的名字，要求单选按钮和复选框要有相同的name值。
• checked属性值主要针对单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。
• maxlength是用户可以在表单元素输入的最大字符，一般很少使用。

3. 几个问题

• 如何区别不同的表单元素？
  name属性：当前input表单的名字，后台可以通过这个name属性找到表单。name属性后面的值是自定义的。radio（或者checkbox）如果是一组，我们必须给他们命名相同的名字

 性别：男<input type="radio" name="sex" value="男">
      女<input type="radio" name="sex" value="女" checked="checked">

• 如何让页面一打开就让某个单选按钮或者复选框是选中状态？
  checked属性：表示默认选中状态。用于单选按钮和复选框。

2.2select下拉表单元素

1. 在页面中，如果有多个选项让用户选择，并且想要节约空间时，我们可以使用select标签控件定义下拉列表。
2. 基本语法

<!-- 下拉表单元素 -->
        籍贯：
        <select>
            <option slected="selected">广西</option>
            <option>吉林</option>
            <option>北京</option>
        </select>

• select中至少包含一对<option></option>
• 在<option>中定义selected=”selected“时，当前选项为默认选中项。

2.3textarea文本域元素

1. textarea>标签用于定义多行文本输入，常用于留言板、评论。
2. 基本语法

<!-- 文本域元素 -->
        <textarea rows="99" cols="99">草莓熊请说话吧</textarea>

• cols=“每行中的字符数”,rows=“显示的行数”

总结：