目录
1.表格
「1. 表格」
现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。
「2. 创建表格」
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
table、tr、td，他们是创建表格的基本标签，缺一不可
-
table用于定义一个表格标签。
-
tr标签 用于定义表格中的行，必须嵌套在 table标签中。
-
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
-
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。
表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。你是风儿我是沙
<table>
<caption>我是表格标题</caption>
</table>
「3. 表格属性」
三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0
「4. 合并单元格」
合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。
-
跨行合并：rowspan="合并单元格的个数"
-
跨列合并：colspan="合并单元格的个数"
「5. 总结表格」
| 标签名 | 定义 | 说明 |
|---|---|---|
| <table></table> | 表格标签 | 就是一个四方的盒子 |
| <tr></tr> | 表格行标签（table row） | 行标签要再table标签内部才有意义 |
| <td></td> | 单元格标签(table data) | 单元格标签是个容器级元素，可以放任何东西 |
| <th></th> | 表头单元格标签（table head） | 它还是一个单元格，但是里面的文字会居中且加粗 |
| <caption></caption> | 表格标题标签 | 表格的标题，跟着表格一起走，和表格居中对齐 |
| clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
「6. 表格划分结构」
对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。
注意：
1.<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。
笔记
要深刻体会表格、行、单元格他们的构成。
在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释
1. table用于定义一个表格标签。
2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
3. td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
表格标签 先没有列的概念
表头单元格标签
一般表头单元格位于表格的第一行或第一列 表格单元格里的文本内容加粗居中显示
<th> 标签标识html 表格的表头部分（table head）
表格属性
一般不用 通过CSS来设置
记住这些英语单词 后面CSS会使用 直观感受表格的外观形态
可以实现对齐
align left center right 这些属性要写到表格标签table里面去 table align="center"
列表 标签
「1. 无序列表 ul」
-
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
-
<li>与</li>之间相当于一个容器，可以容纳所有元素。
<ul>
<li>列表项</li>
</ul>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<h4>你喜欢的食物有什么</h4>
<ul>
<li>草莓</li>
<li>芒果</li>
<li>樱桃</li>
</ul>页面显示如下：
「2. 有序列表 ol」
-
<ol></ol>
-
<li></li>
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华</li>
<li>刘若英</li>
<li>李宗盛</li>
</ol>
「3. 自定义列表 dl」
-
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
-
包含情况是自定义的
-
由三组标签组成dl/dt/dd
-
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
表单标签
表单目的是为了收集用户信息。
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）、和提示信息3个部分构成。
表单域：
包含表单元素的区域。它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
表单控件（表单元素）：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
form表单域
-
收集的用户信息怎么传递给服务器？
-
通过form表单域
-
-
目的：
-
在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
-
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>表单元素（表单控件）
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
1.input标签 ：输入表单元素
- 单标签
- ctrl＋/ 注释快捷键
- type属性可以让input表单元素设置不同的形态
- 单选按钮和复选框要起相同的name属性 比如性别是sex
- name、value是每个表单元素都有的属性值针对后台页面使用的，value可以使打开页面就可以显示几个文字
- checked属性主要针对单选按钮和复选框，打开页面就可以默认选择某个元素 checked="checked"
用户名: <input type="text" />
密 码：<input type="password" /><form>
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名：<input type="text" name="username" value="请输入用户名"> <br>
密码:<input type="password"> <br>
性别：男<input type="radio"> 女<input type="radio"> <br>
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br>
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
</form>
常用属性
2.label标签 （标注标签）
-
<label></label>
-
label 标签为 input 元素定义标注（标签）。
-
label标签的for属性应当与相关元素的id属性相同。
-
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
第一种用法就是用label标签直接包含input表单， 适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
第一种
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
第二种
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"><form>
<label for="text">用户名：</label><input type="text" id="text">
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>
</form>
3.select下拉表单元素
有道云笔记
-
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
-
在option 中定义selected =" selected "时，当前项即为默认选中项。
-
我们实际开发会用的比较少
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
4.textarea文本域元素
-
通过textarea控件可以轻松地创建多行文本输入框.
-
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
<textarea >
文本内容
</textarea>
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type="text" | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
