Web学习笔记day2--HTML表单和css

最新推荐文章于 2025-10-08 15:50:30 发布

原创最新推荐文章于 2025-10-08 15:50:30 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了HTML表单的构成及提交方式，包括不同类型的输入元素及其属性，以及如何使用CSS来美化网页，涵盖基本的选择器和样式设置。

前文:Web学习笔记,主要用作自我复习

一、表单

1.form元素

用于采集用户输入的数据的，用于和服务器进行交互。用于定义表单的。可以定义⼀个范围，范围代表采集用户数据的范围。表单标签在浏览器上没有任何显示。

属性

action属性：指定提交数据的URL
method属性：指定提交方式。常用的取值：GET、POST
- 分类:一共七中,常见有两种
- GET:默认为这个
1. 请求参数会在地址栏中显示。会封装到请求行中
2. 请求参数大小是有限制的
3. 不太安全。
4. 数据格式 k/v ，追加是使用 ? 连接，
  之后每⼀对数据使用 & 连接
- POST：
1. 请求参数不会再地址栏中显示。会封装在请求体中。
2. 请求参数的大小没有限制。
3. 较为安全。
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