前文:Web学习笔记,主要用作自我复习
一、表单
1.form元素
用于采集用户输入的数据的,用于和服务器进行交互。用于定义表单的。可以定义⼀个范围,范围代表采集用户数据的范围。表单标签在浏览器上没有任何显示。
属性
- action属性:指定提交数据的URL
- method属性:指定提交方式。常用的取值:GET、POST
- 分类:一共七中,常见有两种
- GET:默认为这个
- 请求参数会在地址栏中显示。会封装到请求行中
- 请求参数大小是有限制的
- 不太安全。
- 数据格式 k/v ,追加是使用 ? 连接,
之后每⼀对数据使用 & 连接
- POST:
- 请求参数不会再地址栏中显示。会封装在请求体中。
- 请求参数的大小没有限制。
- 较为安全。
- enctype属性:规定在发送到服务器之前应该如何对表单数据进行编码
- application/x-www-form-urlencoded ->map格式
- multipart/form-data ->多部分表单数据,用于上传文件
- text/plain ->普通文本 json
格式:<form action="#" method="get" enctype="multipart/form-data">
2.常用表单元素
-
input: 输入框
属性:
type: text - 文本
password - 密码
checkbox - 多选框
radio - 单选按钮
file - 文件. 配合enctype使用
date - h5 时间, 提交格式 yyyy-mm-dd
submit - 提交按钮
reset - 重置按钮
button - 普通按钮, 配合js来使用
hidden - 隐藏域, 通常用来存储id
name: 数据提交给服务器的时候对应的key
value: 输入框对应的值
readonly: 只读, 不能修改
placeholder: h5, 输入框的提示信息
checked: 添加默认选项, 只对 checkbox 和 radio 有效 -
button: 按钮标签, 和input中的type=button作用一致
属性:
type [submit, reset, button] -
select: 下拉列表
属性:
name
选项就是子标签:<option>
属性:
value, 可以取代option标签体内容 -
textarea: 多行文本域
属性: name rows cols
示范:
<form action="#" method="get" enctype="multipart/form-data">
<input type="text" name="username" placeholder="QQ号码/手机/邮箱"/><br>
<input type="password" name="password" placeholder="密码"/> <br />
<label for="male">男</label>
<input type="radio" name="sex" id="male" value="male"/>
<label for="famale">女</label>
<input type="radio" name="sex" id="famale" value="famale" /><br>
<input type="date" name="birthday"/>出生日期<br />
<input type="file" name="photo" /><br />
<select name="address">
<option >北京</option>
<option value="sh">上海</option>
<option value="zj">浙江</option>
<option value="fj">福建</option>
</select><br />
个人简介:<textarea name="introductory" cols="20" rows="20">
</textarea><br />
<input type="checkbox" name="agree" />同意协议<br />
<input type="submit" /><br />
</form>
二、div和span
- div
是html⼀个普通标签,进行区域划分,自己独立占一行, 一定配合css使用 . - span
内容多大,占地多大 - 块元素: div hn li p
会自动换行的元素 - 行内元素: span a img
不会自动换行的元素
不支持所有的css样式
三.css
1.css概述
Cascading Style Sheets 层叠样式表,主要⽤于设置HTML页面中的⽂本内容(字体、大小、对齐方式
等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构。
1.功能强大
2.将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
2.引⼊CSS样式
- 行内样式:通过标签的style属性来设置元素的样式
<a style="color: #F00; font-size: 30px;">Hello</a>
- 内部样式:又称为内嵌式,是将CSS代码集中写在HTML⽂档的
<head>
头部标签体中,并且使用<style>
标签定义。
<style type="text/css">
div {
color: #ddd;
}
</style>
- 外部样式:又称为链入式,是将所有的样式放在⼀个或多个以 .css 为扩展名的外部样式表⽂件中,通过
<link>
标签将样式连接到HTML⽂档中
<link href="css/mystyle.css" rel="stylesheet" />
可以写作:
<style>
@import "css/style.css";
</style>
链⼊式最大的好处是同⼀个CSS样式表可以被不同的HTML页面链接使用,同时⼀个HTML页面也可以通过多个 标记链接多个CSS样式表。
3.CSS选择器
body内容:
<body>
<div id="div1" class="cls1">这是一个id为div1,类名为cls1的标签
<div>1-1</div>
<div>1-2</div>
</div>
<div class="cls2">这是一个类名为cls2的标签
<a href="http://www.bilibili.com">bilibili</a>
</div>
</body>
- 元素选择器:用HTML标签名称作为选择器
div{
border: 1px solid red;
}
- ID选择器:选择具体的id属性值的元素,#号开头.
#div1{
border: 1px solid red;
}
- 类选择器:类选择器使用.(英文点号)进行标识,后面紧跟类名
.cls1{
border: 1px solid red;
}
- 属性选择器:选择元素名称,属性名=属性值的元素
div[class='cls1']{
border:1px solid red;
}
- 后代选择器:两个标签之间使用空格,给指定父标签的后代标签设置样式
div a{
border:1px solid red;
}
4.CSS的样式
- border:设置边框的样式
格式:宽度 样式 颜色
width、height:用于设置标签的宽度、高度。 - 浮动float、clear
left:元素向左浮动
right:元素向右浮动
none:元素不浮动(默认值)
clear:清除浮动 - 字体:color、font-size
- 背景:background
- CSS的盒⼦模型
内边距:padding-top
padding-right
padding-bottom
padding-left
边框: border-top-style
border-right-style
border-bottom-style
border-left-style
外边距:margin-top
margin-right
margin-bottom
margin-left