html表格，列表与表单

表格结构

基本语法：<table>

                            <tr><th>文字内容</th><th>文字内容</th><th>文字内容</th></tr>

                            <tr><td>文字内容</td><td>文字内容</td><td>文字内容</td></tr>

                  </table>

"th"用做表头，自动加粗且居中

表格标签部分属性因为实际开发不常用，后面用css来表现。

重点是以下属性名，属性值，作用：

align	left（左），center（居中），right（右）	规定周围元素的对齐方式
border	1 （有边框）   或者    " "（默认无边框）	规定表格周围是否有边框
cellpadding	像素值（默认1px）	规定单元边格与内容的空白
cellspacing	像素值（默认2px）	规定单元格之间的空白
width	像素值  或  百分比	规定表格宽度

可以用"thead"和"tbdoy"标签来进行代码的收纳，整理代码。

"thead"用于表头部分，“tbdoy”用于主体部分。

单元格

合并单元格的方式：

1.跨行合并  rowspan="合并单元格个数" （以最上面的单元格为目标单元格）

2.跨列合并  colspan="合并单元格个数"  （以最左边的单元格为目标单元格）

合并步骤：

1.确定跨行还是跨列

2.找到目标单元格写入合并代码

3.删掉被合并的单元格

列表

无序列表

基本语法

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

1.各项没有顺序级，都是并列的。

2.“li”之间是容器，可以容纳任何元素。

3."ul"之间输入任何其他标签和文字都是不合法的。

4.无序列表自己本身就带一定的样式，可以配合css来使用。

有序列表

基本语法

<ol>

    <li></li>

    <li></li>

    <li></li>

</ol>

1.“li”之间是容器，可以容纳任何元素。

2."ol"之间输入任何其他标签和文字都是不合法的。

3.无序列表自己本身就带一定的样式，可以配合css来使用。

自定义列表

通常用于对术语，名词做解释，列表前没有任何符号（通常用作各种电商网站，官网的页尾）。

<dl>

    <dt></dt>

    <dd></dd>

    <dd></dd>

</dl>

1."dl"里只能包含"dt"，"dd"。

2.“dt”，“dd”没有数量限制，多数情况下是一个“dt”带上一群“dd”。

表单

表单域

"form"用于定义表单域，并且会把范围内的表单元素提交给服务器。

语法 

<form action=" " method=" " name=" "></form>

action	url地址	用于指定接收表单信息的服务器程序url地址
method	get/post	用于设置表单的提交方式，取值为get或者post
name	名称	用于定义表单名称，来区分同页面中不同表单

表单控件

"input"输入表单元素

基本语法     <input type="属性值" />

"type"中的属性值: 

text	password	radio	checkbox	reset	submit	button	file
普通文框	密码框	单选框	复选框	重置	提交	按钮	文件上传

"radio"必须多个处于同一个"name"里，才能实现多选单

单选框和复选框都要有同样的“name”值

"button"定义出的按钮通常配合js来启动脚本

“input”的其他属性：

属性	属性值	作用
name	用户自定	定义名称
value	用户自定	规定元素的值
checked	checked	规定此input首次加载时应被选中
maxlength	正整数	规定输入字段的字符最大长度

"name"和“value”是每个表单都拥有的属性值，主要用于在后台使用。

"label"标签

1."label"可以用来绑定一个表单元素，当点击“label”内文本时，浏览器会自动把光标转到或选择到对应的表单元素上，来增强用户的体验。

2."label"用于来定义“input”元素。

语法：

<label for="a">xx</label>

<input type="" name="" id="a"/>    ("label"里的“for”属性，应当与“input“里的”id“属性相同)
 

“select”下拉表单元素

语法：

<select>

    <option>选项1</option>

    <option>选项2</option>

    <option>选项3</option>

</select>

1."select"中至少包含一个"option"。

2.在"option"中定义  "selected"="selected" 那么被定义的”option“会变成默认选项。

“textarea”文本域元素

语法:

<textarea rows="" cols="">

    文本内容

</textarea>

ps:  "cols"=每行中的字符数，”rows“=显示的行数，我们在实际开发中不会使用，都是用CSS来改变大小。

---