1.表格标签
控制表格
(1)表格中的标记
表格仅用于存放各种数据。3个与表格相关的标记是
<table><tr><td>
<table>:定义整个表格
<tr></tr>: 定义一行,必须嵌套在<table></table>标签中
<td></td>:定义一个单元格,必须嵌套在<tr></tr>标签中
<table>
<tr>
<td>单元格中的文字</td>
...
<tr>
...
<table>
(2)表头单元格
<th>标签表示HTML表格的表头部分
总结:表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。
(3)表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 规定表格相对周围元素对齐方式。 |
| border | 1或"" | 规定表格单元格是否拥有边框,默认为"",表示没有边框 |
| callpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认为1像素 |
| callspacing | 像素值 | 规定单元格之间的空白,默认为2像素。 |
| width | 像素值与百分比 | 规定表格宽度 |
(4)表格的结构标签
<thead>: 用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
<tbody>:用于定义表格的主体,主要用于放数据本体。
(5)合并单元格
(一)合并单元格方式
- 跨行合并:rawspan="合并单元格的个数"
- 跨列合并:colspan="合并单元格的个数"
(二)目标单元格
- 跨行:最上侧单元格为目标单元格,写合并代码。
- 跨行:最左侧单元格为目标单元格,写合并代码。
(三)合并单元格的步骤
1.先确定是跨行还是跨列合并。
2.找到目标单元格,写上合并方式=合并的单元格数量。比如:<td colspan="2"></td>
3.删除多余的单元格。
2.列表标签
列表是用来布局的!
列表可以分为三大类:无序列表,有序列表和自定义列表。
无序列表
(1).<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签来定义。
无序列表的基本语法如下:
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
<ul>
<li>周杰伦</li>
<li>胡歌</li>
<li>刘德华</li>
...
</ul>
(一)无序列表的各个列表项之间没有顺序级别之分,是并列的。
(二)<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的。
(三)<li>与</li>之间相当于一个容器,可以容纳所以元素.
(四)无序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。
有序列表(理解)
各个列表会按照一定的顺序排列定义。基本语法
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<ol>
(一)<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
(二)<li></li>之间相当于一个容器,可以容纳所以元素。
(三)有序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。
自定义列表(重点)
在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
(一)<dl></dl>里面只能包含<dt>和<dd>。
(二)<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。
列表总结
3.表单标签
使用表单目的就是收集用户信息。
表单的组成
在HTMl中,一个完整的表单通常由表单域,表单控件和提示 信息3个部分组成。
表单域
表单域是一个包含表单元素的区域。
<form>会把它范围当的表单元素信息提交给浏览器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 设置表单数据的提交方式,其取值为get、post |
| name | 名称 | 指定表单的名称,以区分同一个页面中的多个表单域 |
表单控件
<input>表单元素为单标签
type属性,根据不同的type属性值,输入字段拥有多种形式(文本框,复选框,掩码后的文本控件,单选按钮,按钮等)。
<input type="属性值" />
除了type属性外,<input>标签还有其他很多属性,其常用属性如下:
<label>标签
<label>标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加客户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心:<label>标签的for属性应当与相关元素的id相同
<select>标签
使用场景:在页面中,如果有多个选线让用户选择,为了节约空间是,我们可以使用<select>标签控件定义下拉列表。
<select>语法:
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
...
<select>
<textarea>表单元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
语法:
<form>
今日反馈:
<textarea cols="50" rows="">
这个框是textarea反馈留言
<textarea>
</textarea>