注:本笔记根据bilibili-黑马程序员pink老师前端入门教程编写
目录
1. 表格标签
1.1 表格的主要作用
表格主要用于显示、展示数据,可以让数据显示非常规整,可读性好。
表格不是来布局的,而是来展示数据的。
1.2 表格基本语法
<table>
<tr>
<td>姓名</td> <td>性别</td> <td>年龄</td>
<tr>
<tr>
<td>张三</td> <td>女</td> <td>77</td>
<tr>
</table>
- <table></table> 用于定义表格的标签。
- <tr></tr> 标签用于定义表格中的行,必须嵌套在 <table></table>中。
- <td></td> 用于定义表格中的单元格,必须嵌套在 <tr></tr> 中。
- 字母 td 指表格数据(table data),即单元格的内容。
1.3 表头单元格标签 th【表头文本内容加粗显示】
1.4 表格属性
后期可通过 CSS 来设置。 <table align=”center”></table>
属性名 | 属性值 | 描述 |
align | left、center、right | 表格元素对齐方式 |
border | 1 或"" | 规定是否有边框,默认为"",表示没边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间空白,默认1px |
cellspacing | 像素值 | 规定单元格之间的空白,默认为 2px |
width | 像素值或百分比 | 规定表格宽度 |
hight | 像素 | 表格高度 |
1.5 表格结构标签
<table>间加入<thead>和<tbody>
加强语义化:<thead>:头部区域
<tbody>:主体区域
注意:
- <thead></thead>:定义表格头部,且内部必须有<tr>标签。
- <tbody></tbody>:定义表格主体,存放数据。
- 以上标签都放在 <table></table> 里面。
1.6 合并单元格
合并单元格方式:
- 跨行合并:rowspan="合并单元格个数"
- 跨列合并:colspan="合并单元格个数"
<tr> <td></td> <td></td> <td></td> </tr> | → | <tr> <td></td> <td colspan="2"></td> </tr> |
2 列表标签
表格展示数据,列表则用来布局。 列表特点是整齐、整洁、有序,作为布局更方便自由。列表分为三大类:①无序列表 ②有序列表 ③自定义列表
2.1 无序列表(重要)
<ul>无序列表,没有顺序。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意:1)各个列表项之间无需,并列关系。
2)<ul></ul>中只能包含<li></li>,写入其他标签或文字是不允许的。
3)无序列表带有自己的属性,可用 CSS 修改样式属性。
2.2 有序列表(理解)
使用<ol>标签来定义有序列表,<li>来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
与无需列表类似,有自己的样式属性,通过 CSS 设置。
2.3 自定义列表(重点)
<dl> 定义描述列表,与 <dt> 和 <dd> 标签配合使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
</dl>
注意:dl 里面只能包含 dt 和 dd,可以多个dt和dd
3. 表单标签
表单:收集用户信息。 和用户进行交互,收集用户资料。
3.1 表单组成
①表单域 ②表单控件(元素) ③提示信息
3.2 表单域
表单域:一个包含表单元素的区域。
使用<form>标签用于定义表单域,收集和传递用户信息。
<form>标签会将它范围内的表单元素信息提交给服务器。
目前,暂时不需要用表单域提交数据,只需要写上<form>标签即可。
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
属性 | 属性值 | 作用 |
action | url 地址 | 指定接受并处理表单数据的服务器的 url 地址 |
method | get/post | 设置表单数据的提交方式 |
name | 名称 | 用于指定表单名称,区分同一个页面中的多个表单域 |
注意:
- 写表单元素之前需要有表单域将其包含。
- 表单域是 form 标签。
3.3 表单控件(表单元素)
在表单域中定义各种表单元素,允许用户在表单中输入或选择的内容控件。
3.3.1 <input> 表单元素
<input> 标签用于收集用户信息。此标签包含type属性,决定了输入字段的不同形式:文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
<input type="属性值" />:①<input>标签为单标签
②<type>属性设置不同属性值来指定不同控件类型
type 属性值 | 描述 |
button | 可点击按钮(通过JS启动脚本) |
file | 输入字段和“浏览”按钮,供文件上传 |
hidden | 隐藏的输入字段 |
image | 图像形式的提交按钮 |
password | 密码字段。字符被掩码。 |
radio | 多选一 【name值一样】 |
checkbox | 复选框,多选多 【name值一样】 |
reset | 重置按钮,清除表单所有数据。 |
submit | 提交按钮。提交数据到后台 |
text | 输入字段。用户可输入文本,默认宽度为 20 个字符。 |
input属性 | 属性值 | 描述 |
name | 自定义【后台看】 | input 元素名称 |
value | 自定义【后台看】 | input 元素的值 |
checked | checked | 默认被选中(单选框、复选框可以设置) |
maxlength | 正整数 | 规定输入字段字符的最大长度,使用少 |
<form>
用户名:<input type=”text” name=”username” value=”请输入用户名”> <br> 【输入】
密码:<input type=”password” name=”pwd”> <br> 【密码输入】
性别:男<input type=”radio” name=”sex” value=”男”>
女<input type=”radio” name=”sex” value=”女”>
【多选一,name值一样】
上传头像:<input type=”file”>
<input type=“button” value=”获取短信验证码”>【结合JS使用】
<input type=”submit” value=”免费注册”>
</form>
注意:
- 对于radio单选框,必须使<input>的name具有相同的属性值,才能实现多选一。同理,复选框也要有相同的name值。
- 单选框和复选框可以设置checked属性,页面打开默认选择按钮。
- 设置<type>的值为submit,点击按钮后可把表单域 form 里的表单元素里面的值提交给后台。
- 设置 type="button",普通按钮,后期结合 js 使用。
3.3.2 label 标签
<label>标签: input 元素定义标注。用于绑定一个表单源深路。
点击<label>标签内的文本时,浏览器自动将焦点转到或者选择对应的表单元素上。
<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />
核心:<lable>标签的for属性 = 相关元素的id属性。
3.3.3 select 下拉表单元素
select 标签设置多个选项让用户选择,节约页面空间。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
例子:
<body>
籍贯:
<select>
<option>陕西</option>
<option>山东</option>
<option>浙江</option>
</select>
</body>
注意:1. select 中至少包含一对 option。
2. 在 option 中定义属性selected=”selected”,当前项即为默认选项。
3.3.4 textarea 文本域表单元素
场景:输入内容较多时。文本域大小CSS实现。
<textarea rows="3" cols="20"> 文本内容 </textarea>
Tip:cols="每行字符数",rows="显示的行数"