html基础知识2

表格标签

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

<tr>表示的是一行，<td>表示的是每行里面的单元格

通常表的第一行是表头，例如：姓名，年龄等，此时，单元格变成<th>，里面的文字会加粗居中显示

表格结构标签

<thead>表格头部，<tbody>表格主体

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

合并单元格

• 跨行

rowspan="合并单元格个数"

• 跨列

colspan="合并单元格个数"

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

---

列表标签

无序列表

<ul>
<li>列表1</li>
...
</ul>

默认为小黑点

去掉小黑点：li { list-style : none; }

有序列表

<ol>
<li>列表1</li>
...
</ol>

自定义列表

对名词进行解释

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

---

表单

收集用户信息，姓名，电话等

<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
action:用于指定接收并处理数据的服务器程序的url地址
method：表单提交方式,post或者get
name:表单名称

input输入表单元素

type属性

 name属性：input元素的名字，用于区分不同的元素

value属性：input元素的值

checked属性：规定在加载时被选中

单选按钮，复选框每一组的name必须相同，每个表单元素都要有name和value主要是给后台人员使用的

<lable>标签用于绑定一个表单元素，当点击<lable>标签里的文本时，浏览器自动聚焦到对应的表单元素上，用于增加用户体验

方法一：
<lable for="text"> 用户名:</label>
<input type="text" id="text">

方法二：
<lable> 
    <input type="text">  
</lable>

---

select下拉表单元素

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

在option里设置selected="selected"，当前项即为默认选中项

---

textarea文本域表单元素

<textarea rows="3" cols="20"> <!--3行20列-->
文本内容 <!--默认显示的文本内容-->
</textarea>