HTMLday2

1表格标签

1.1表格的作用

表格作用是用来展示数据的，而不是布局

1.2基本语法

<table>
    <thead>
    <tr>
    <th>这里写表头单元格内容</th>
    <th>这里写表头单元格内容</th> 
    ...
    </tr>
    </thead>
    
    <tbody>
    <tr>
    <td>这里写单元格内容</td>
    <td>这里写单元格内容</td> 
    ...
    </tr>
    ...
    </toby>
    

</table>

1.<table></table>用来定义表格的标签，可看成表格的大框架
2.表格结构标签，分为表格的头部标签和表格的主体标签<thead></thead>用来定义表格头部，<tbody></tbody> 用来定义表格主体
3.<tr></tr>表格中的行，表格行标签
4.<th></th> table head 表头单元格标签，也是单元格，加粗居中突出重要
5.<td></td>table date行中的单元格，存储数据的/,表格单元格标签

1.3表格属性

属性名	属性值	说明
align	left、center、right	表格的对齐方式
border	1或""	默认为"",表示无边框
width	一个值	表格的宽度
height	一个值	表格的高度
cellpadding	一个值一般设为0	单元格中的内容与单元格边界之间的距离,默认值为1
cellspacing	一个值一般设为0	单元格与单元格之间的距离

1.4合并单元格

1.4.1分类
跨行（row）合并：rowspan="合并单元格的个数"
跨列（column）合并：colspan="合并单元格的个数"

1.4.2目标单元格（写合并代码的单元格）
跨行：把合并的代码写到最上侧的单元格，此单元格也称目标单元格
跨列：把合并的代码写到最左侧的单元格
1.4.3合并单元格三部曲
1）:先确定跨行还是跨列
2）:找到目标单元格，写合并的代码，例如<td colspan="2"></td>跨列
3）:删除掉不是目标的单元格
表格学习总结：
1.表格相关标签
2.表格的相关属性
3.合并单元格

2.列表标签

2.1列表的作用

列表就是用来布局的，特点就是整齐、有序

2.2列表分类

1）：无序
2）：有序
3）：自定义

2.2.1无序列表（重点）

<ul>
   <li>列表项1</li>
   <li>列表项1</li>
   ...
</ul>
1.所谓无序就是各个列表项之间没有顺序之分
2.<ul></ul>中只能嵌套<li></li>，其他标签或文字都不能放
3.但是可以放进<li></li>标签里面，它就相当于一个容器，放什么都可以
4.会有自带样式小黑点，通过css来改

2.2.2有序列表（理解）

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   ...
</ol>
1.有序就是带序号的列表
2.同样<ol></ol>标签只能嵌套<li></li> 只有一个儿子，放其他都不被允许
3.<li></li>标签可以嵌套任何东西，相当于一个容器

2.2.3自定义列表（重点）

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

1.<dl></dl>只能嵌套<dt></dt>和<dd></dd>
2.<dt></dt>和<dd></dd>里面可以嵌套任何东西

3.表单

3.1表单作用

最常见的就是用户注册收集信息

3.2表单的组成

一个完整的表单由表单域 表单控件或叫表单元素 提示信息3部分组成

3.2.1表单域

用<form></form>标签来定义，作用就是把处于表单域里面的表单元素信息提交给服务器

<form name="表单域的名称" method="提交的方式" action="url地址">
   
</form>

属性	属性值	说明
name	名称	表单名，用于区分同一页面中的多个表单域
method	GET/POST	表单提交方式
action	url地址	就是说将表单中的信息提交到后台，具体哪个页面就要写相应的url

3.2.2表单元素控件标签

1）：分为input输入表单元素标签，
2）：select下拉表单元素标签
3）：textarea文本域元素标签
3.2.2.1input之type属性
必选属性
<input type="属性值" />

属性值	说明
text	用户在一个框中输入信息，默认20个字符
password	密码专属的框
radio	单选按钮，实现多选一，注意name属性的名字要一样才能实现多选一
checkbox	多选框，实现多选，也可以单选例如进入王者会弹出一个让你同意的勾选框，注意name属性的名字要一样
file	提供文件上传的按钮
submit	定义一个提交按钮，将表单信息提交到后台
image	定义一个图片形式的提交按钮
button	定义一个按钮，它是不会提交信息只是做某件事情常和js搭配使用，例如获取验证码
reset	定义一个重置按钮
hidden	暂时不懂用途，定义隐藏的输入字段

3.2.2.1input之name属性

属性	属性值	说明
name	由用户自定义	定义input元素控件的名称，就是用来区别每一个的表单元素

要求单选按钮和复选框要有相同的name

3.2.2.2input之value属性

属性	属性值	说明
value	由用户自定义	当你想一打开表单就默认显示一些文字就可以用此属性，比如还可以修改submit提交按钮的名字，设置button按钮的名字

        <input type="text" name="name"  value="请输入真实姓名" maxlength="6"/><br>

name和value是每个表单元素控件都有的属性值，主要给后台人员使用

3.2.2.3input之checked属性

属性	属性值	说明
checked	checked	主要是针对单选按钮和复选框，当用户一打开页面就默认勾选这个按钮

3.2.2.3input之maxlength属性

属性	属性值	说明
maxlength	整数	限定用户输入的字符数

3.2.3label标签

<lable></lable>标签用于绑定一个表单控件元素，当用户点击此标签内的文字时，浏览器就会自动将光标转移到对应的表单控件元素上

<lable for="man">男</lable>
<input type="radio" name="sex" id="man"/>
核心：for属性和id属性要一致

3.2.4 select下拉表单元素标签

~~节约页面空间

<select>
   <option>选项1<option>
   <option>选项2<option>
   <option>选项3<option>
   ...
</select>
1.在<option selected="selected"></option>,就会默认选中项,加了ed过去式，被动

3.2.5 textarea文本域单元素标签

~用于用户留言、评论等多行输入内容

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

</textarea>
</form>
1.实际开发中都是用css来改变大小，不会用这个rows="3" cols="20"