第三章html

day 03
知识回顾
1、css的引入方式有哪些?
三种：
行内样式(行间样式)
<div style=""></div>
内部样式(内联样式、内嵌式)
<style></sty1e>
外部样式(外链式)
<link rel="stylesheet" href="css文件地址">
2、css基础选择器有哪些?
• 通配符选择器
• 标签选择器
class选择器
id选择器
3、如何合并表格单元格?
rowspan="" 跨行合并
colspan="" 跨列合并
4、如何设置文字加粗?
font-weight:bold;
5、有一个宽度为200像素，高度为100像素的盒子，如何使文本在盒子内居中?.box {
width:200px；
height:100px；
background-color:red;
text-align:center;
1ine-height:100px;
6、如何去掉a标签自带的下划线?
text-decoration:none;
7、无序列表的语法
<u7>
<1i></7i>
<7i></7i>
<li></1i>
</u7>
IPDINRWord 国图片转文字时水印
一、复杂表格
复杂表格是为了让表格的结构更加清晰
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
thead用来定又表格的表头(页眉)
tbody用来定义表格的身体(主体)，可以有多个
tfoot用来定义表格的底部(页脚)
thead、tbody和tfoot在页面打开时并没有特 呈现
二、表单
表单的作用是用来搜集用户信息
1、表单域
form标签用来定义表单，form中的所有信息会被提交到服务器
<form></form>
注意：
一个页面中可以有多个form
多个form之间不能嵌套
2、表单元素(input控件)
<input type="">
input标签是单标签，空元素
type是用来设置input输入的类型
(1)单行文本输入框
<input type="text">
(2)密码框
<input type="password">
密码框带有掩码处理
(3)单选框
<input type="radio">
(4)复选框/多选框
<input type="checkbox">
(5)普通按钮
<input type="button">
(6)提交与重置按钮
普通按钮： <input type="button" value="普通按钮">
提交按钮： <input type="submit">
重置按钮： <input type="reset">
(7)button
<button>按钮</button>
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
button默认的type类型是submit
(8)图片提交按钮
<!-- 图片按钮 -->
<input type="image" src="login.jpg" alt="login按钮">
图片提交按钮一般都会配合src和alt属性来使用
(9)上传按钮
<input type="file">
使用上传按钮的form标签需要加enctype属性，属性值设置为multipart/form-dataenctype属性是用来设置表单在提交到服务器时是否需要对表单数据进行编码处理multipart/form-data代表不进行编码处理
(10)隐藏域
<input type="hidden">
在页面中用户是不可见的
3、下拉列表
<select>
<option>列表项1</option>
<option>列表项2</option>
<option>列表项3</option>
<option>列表项4</option>
</select>
注意：
一组select中至少需要有一对option
4、多行文本域
<textarea cols=""rows=""></textarea>
rows属性是用来定义输入的行数
cols属性是用来设置可见宽度
5、label标签
扩大选区
两种扩大选区的方式：
(1)直接嵌套
<label>
<input type="checkbox">敲代码
</label>
三、表单属性 市方转义子水即山合井拆分 Q搜
1、action属性
用来设置表单的提交地址
<form action="https://www.baidu.com/">
<div>
用户名：<input type="text">
</div>
<div>
<input type="submit">
</div>
</form
如果没有设置action属性时，表单默认是提交到当前页面的
2、method属性
用来设置表单提交时用到了什么http方法
GET(默认的一个提交方式) 不安全
https://www.baidu.com/?username=yonghuming&nicheng=1111
POST 安全
get方式提交和post方式提交的区别(了解 )
(1)get是从服务器上获得数据，而post是向服务器上传递数据。
( 2)get 将表单中数据的按照 variable=value 的形式，添加到 action 所指向的 URL后面，并且
两者使用?“连接，而各个变量之间使用“&”连接；post 是将表单中的数据放在 form 的数据体中
按照变量和值相对应的方式，传递到 action 所指向 URL.
(3)get 是不安全的，因为用户可以在浏览器上直接看到提交的数据，一些系统内部消息将会一
同显示在用户面前。post 的所有操作对用户来说都是不可见的。
(4)get 传输的数据量小，这主要是因为受 URL 长度限制；而 post 可以传输大量的数据，所以
< 5/13 >>1
上传文件只能使用 post。
(5)get是form的默认方法。
3、name属性
给表单起名字，用来区分不同的表单的
可以实现单选框只选一个的操作
性别： <input type="radio" name="sex">男
<input type="radio" name="sex">女
4.value属性
用来给表单元素设置初始值
用户名： <input type="text"name="username” value="请输入用户名”>提交按钮在不同浏览器中打开显示的文字不太一样，可以使用value属性进行统一提交查询内容
<input type="submit” value=“注册”>
5、 checked属性
设置单选框与多选框的默认选中
<div>
性别： <input type="radio" name="sex” checked>男
<input type="radio" name="sex">女
</div>
<div>
爱好： <input type="checkbd name="hobby” checked>敲代码
<input type="checkbox name="hobby">吃饭
<input type="checkbox" name="hobby">喝酒
</div>
checked="checked”等同于checked
6、 selected属性
用来设置下拉列表的默认选中项