前端入门视频笔记 HTML5（二） P32-60

02-表格标签

为了展示数据。

<table> 定义表格的标签；

<tr>  (table row)  定义表格中的行；

<td>  (table data)  定义单元格。

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

 

03-表头单元格标签

<th>  (table head)  定义表格的第一行或第一列，使表头的文字加粗并居中显示。

用法与<td>了类似。

 

04-表格标签相关属性（了解）

<table>标签的属性：

属性	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	空值或者数值1、...	规定表格有误边框和边框的宽度，默认为""，没有边框。
cellpadding	像素值	规定文字与单元格边的距离，默认为1像素。
cellspacing	像素值	规定单元格之间的距离，默认为2像素，一般设为0。
width / height	像素值或百分比	规定表格的宽度或高度。

 

06-表格结构标签

<thead> 表格头部标签；

<tbody> 表格主体标签。

 

07-合并单元格

跨行合并：rowspan 最上侧的单元格作为目标单元格，写入如 <td rowspan="合并单元的数量">；

跨列合并：colspan 最左侧的单元格作为目标单元格，写入如 <td colspan="合并单元的数量">；

相当于将目标单元扩大，被合并的单元格的代码就删去不写。

 

09~12 列表标签

09-无序列表

列表标签：用来布局，是使页面整齐、有序；

分为无序列表、有序列表、自定义列表。

 

标签 <ul> 定义HTML页面中的无序列表；

<li> 定义列表项，每一项前面用小黑点来排列，项之间是并列关系，没有顺序级别之分。

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

 

10-有序列表

标签 <ol> 定义有序列表；

<li> 定义列表项，每一项前面用数字序号来排列，项是按顺序排列的。

 

11-自定义列表

自定义列表用来对名词进行解释和描述，用标签 <dl> 定义；

<dt> 定义项目，<dd> 定义项目的解释描述，<dt>与<dd>是并列关系；

项前面没有任何符号。

<dl>
    <dt> 名词1 </dt>

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

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

 

13/14-表单标签

HTML中的表单用于与用户进行交互，收集用户信息；

由表单域、表单控件（元素）、提示信息三部分组成。

 

表单域：

<form> 定义表单域，将范围内的表单元素信息提交给服务器。

常用属性：

属性	属性值	作用
action	url地址	指定接收和处理表单数据的服务器程序的url地址。
method	get、post	设置表单数据的提交方式。
name	表单名称	指定表单（域）的名称。

 

15~21-表单元素标签input

input输入表单元素，单标签；

<input> 包含属性type，用来设置输入字段的形式。

<input  type = "属性值" >

属性值	描述
text	定义单行的输入文本字段，默认宽度20个字符。
password	定义密码字段，输入字符会被掩码。
radio	定义单选按钮。
checkbox	定义多选框。
...	...
submit	定义提交按钮，将表单元素数据发送给后台服务器。
reset	定义重置按钮，清除表单域中的所有数据，还原初始默认状态。
botton	定义可点击按钮，常结合JavaScript实现功能。
file	定义“浏览”按钮，供文件上传。

 

<input> 还包含一些其他属性：

属性	属性值	描述
name	自定义	定义input元素的名称。
value	自定义	定义input元素的值。
checked	checked	规定此input元素首次加载时就默认被选中。
maxlength	正整数	规定输入字段的最大长度。

name和value是每个表单元素都应有的属性值，主要为了让后台人员取值；

单选按钮radio和复选框checkbox的一组选项要设置相同的name值，可以实现radio的多选一；

单选按钮radio和复选框checkbox可以设置checked 属性，当页面打开的时候就可以默认选中这个按钮（表单元素）。

 

22-label标签

<label> 为input元素定义标注，双标签；

用于绑定一个表单元素，当光标点击label标注的选项文本时，对应的表单元素就会被选择，可以在选择时增大光标点击范围。

<label  for = "id名"> 选项文本 </label>
<input  type = "..."  name = "..."  id = "id名" >

 

23-表单元素标签select

select下拉表单元素，双标签；

将很多个选项集中到一个下拉框中，节省页面空间。

<select>
    <optin selected="selected"> 选项1 </optin>
    <optin> 选项2 </optin>
    ...
</select>

若在<optin>中定义属性 selected="selected"，则设置当前选项为默认项。

 

24-表单元素标签textarea

textarea文本域元素，双标签；

用于定义多行文本的输入。

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

<textarea> 标签有两个属性，rows="每行中的字符数"，cols="显示的行数"；

但在实际中是使用CSS来改变文本域的大小。

 

8.27/28