前端小白奋斗史02

在B站跟着黑马程序员 pink老师学习，pink老师真的教的真好

常用标签

1. 表格标签

<table>
 <tr>
 <th>姓名</th>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

• 实现效果

... ...

姓名	性别	电话
小王	女	10086

• 表格属性

• 案例分析

• 表格结构标签

标签 表格的头部区域、标签 表格的主体区域.

<table>
<thead>
 <tr>
 <th>姓名</th>
  <th>性别</th>
   <th>电话</th>
</thead>
 </tr>
 <tbody>
<tr>
<td>小王</td>
<td>女</td>
<td>10086</td>
</tbody>
 ...
</table>

• 合并单元格方式：

• 跨行合并：rowspan=“合并单元格的个数”

• 跨列合并：colspan=“合并单元格的个数”

<table width="500" height="249" border="1" cellspacing="0">
        <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.列表标签

列表可以分为三大类：无序列表、有序列表和自定义列表。

• 无序列表

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

• 有序列表

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

```html
注意：
 - 无序列表的各个列表项之间没有顺序级别之分，是并列的。
 - <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
 - <ol></ol> 中只能嵌套 <li></li>，直接在 <ol></ol> 标签中输入其他标签或者文字的做法是不被允许的。
 - <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
 - 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

• 自定义列表

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

1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
3. （大佬带着弟弟）

**

3. 表单标签

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

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

- 表单控件(表单元素) 它们是表单元素，不是标签

1. input输入表单元素
2. select下拉表单元素
3. textarea 文本域元素

<input type="属性值" />

<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者
选择对应的表单元素上,用来增加用户体验.

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

• 下拉列表

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

• 多行输入框

<textarea rows="3" cols="20">
 文本内容
</textarea>

<form>
<input type=“text" name=“username”>
<select name=“jiguan”>
 <option>北京</option>
</select> 
<textarea name= "message"></textarea>
</form>