前端基础HTML第二天

HTML第二天

一、表格

1.表格主要用于显示、展示数据。
2.表格不是用来布局页面的，而是用来展示数据的
3.表格的具体用法：

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

4.table 定义表格的标签
tr 定义表格中的行（table row）
td 定义表格中的单元格（table date）

5.表头单元格
（1）表头单元格标签 (table head)
表头单元格里面的文本内容加粗居中显示

6.表格属性
(1)align:left、center、right 表格相对周围元素的对齐方式
（2）border:1或‘’ 表格的边框，默认没有
（3）cellpadding 像素值 文字与边框的距离，默认1像素
（4）cellspacing 像素值 单元格之间的空白，默认2像素
代码：

  <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">

如果给标签设置宽高的值为百分比，参照父元素。

7.表格结构标签：
（1）因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分
（2）< thead>标签 表格的头部区域，定义表格的头部，< thead>内部有< tr>标签。一般位于第一行
< tbody>标签 表格的主体区域 ，定义表格的主体，用于放数据本体。
（3）放在< table>标签里

8.合并单元格
跨行合并：rowspan=“合并单元格的个数”；
跨列合并：colspan=“合并单元格的个数”；

9.合并单元格三步曲：
（1）先确定是跨行还是跨列合并
（2）找到目标单元格. 写上合并方式 = 合并的单元格数量
（3）删除多余的单元格，如果不删除，会多一个单元格。
本质：将目标单元格变大，并不是真正意义合并

10.表格总结
标签：table thead tbody th tr td
表格的相关属性：border cellspacing cellpadding width height
合并单元格：rowspan colspan

二、列表

1.表格用来显示数据的，列表是用来布局的
2.特点：整齐、整洁、有序
3.列表分为三类：无序列表、有序列表和自定义列表
（1）无序列表：各个列表无顺序级别之分，是并列的
ul:无序列表 unorder list
li:列表项，list item
无序列表的基本语法格式：

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

（2）有序列表(ol)：有排列顺序的列表，其各个列表项会按照一定的顺序排列定义,排序以数字来显示，使用< li>标签定义列表项
有序列表的基本语法格式如下：

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

（3）自定义列表：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
< dl>用于定义描述列表（定义列表）
< dt>用于定义项目/名字
< dd>描述每一个项目/名字
自定义列表的基本语法格式如下：

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

三、表单

1.表单的目的：收集用户信息，跟用户进行交互
2.表单的组成：表单域、表单控件（表单元素）和提示信息
（1）表单域：包含表单元素的区域
< form>标签用于定义表单域，以实现用户信息的收集和传递,会把它范围内的表单元素信息提交给服务器
（2）实现代码：

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

（3）表单域的常用属性：
action: url地址 指定接收并处理表单数据的服务器程序的url地址
method: get/post 设置表单数据的提交方式，值取get/post
name: 名称 指定表单的名称，以区分同一个页面中的多个表单域
表单域是form标签

3.表单控件
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
（1）input 输入表单元素
< input> 标签用于收集用户信息

  < input type="属性值" />

type属性的属性值：

除type属性外，< input>标签还有其他属性：

name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
id和name属性，可以给所有的标签添加，id的值是唯一的，name的值是可以重复的
name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.

checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

  <input type="submit" value="免费注册" id=""><br>
  <!-- submit 提交按钮 点击提交按钮之后，会将表单提交到action对应url,并且会拼接 带有name属性的表单控件  表单控件的name值 = 表单控件的value的值：<input type='text' name = 'username' value='egg' ....
        第一个参数以？拼接，第二个参数以&拼接
        注意：radio只会提交一个（被选中的），checkbox会提交多个（被选中的）
        如果checkbox没有添加value属性，默认的value值是on：value='on'
        -->

（2）input用法：
代码：

用户名: <input type="text" value="请输入用户名" />

name 的主要作用就是用于区别不同的表单（name属性后面的值，是自定义）：

用户名: <input type="text" value="请输入用户名" name="username" />  

radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

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

checked属性：表示默认选中状态。用于单选按钮和复选按钮

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

（3）如何让input表单元素展示不同的状态：

<input type="radio" name="sex" value="男" checked="checked" />男 
<input type="text" value=“请输入用户名”> 

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

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

5.select表单元素

  < select>下拉列表
   语法：
<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

（1）< select> 中至少包含一对< option>
（2）在< option> 中定义 selected =“ selected " 时，当前项即为默认选中项

6.textarea表单元素：文本框表单
< textarea> 标签是用于定义多行文本输入的控件,使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论
语法：

   <textarea rows="3" cols="20">

文本内容
< /textarea>
（1）cols=‘每行中的字符数’，rows=‘显示的行数’

7.表单元素： input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素
这三组表单元素都应该包含在form表单域里面,并且有 name 属性
代码：

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