目录
一、form表单
1、form表单的介绍
2、form表单的数据
3、< input >标签
radio
4、< input > 的常用属性以及标签
checked
disabled
placeholder
value
< lable >
< select >
< textarea >
二、CSS
1、CSS的简单介绍
2、CSS的基本使用
3、选择器规则
4、css示例以及代码
功能：用于搜集不同类型的用户输入的内容
有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。
form表单是要提交数据的，那么数据要提交到服务器的哪里？
action="提交资源的路径，默认是当前资源"
method="本次提交采用的HTTP协议是什么方法，默认是get"
enctype="提交时，数据的编码类型 "
不需要闭合标签
类型不同，看到的样子就不同
text:普通的文本输入框
password：在浏览器默认是隐藏的文本输入框，用于输入密码
radio：单选框
checkbox：复选框
的name属性非常重要，没有name的的内容是不会提交到服务器的
会以 name=value 的形式将数据提交给服务器
真正实现单选效果，要求name是相同的，也就是相同name的radio才会互斥
radio/checkbox boolean类型的属性 ，分为填写或者不填写 不需要跟value值
这时页面的单选框就默认是选中状态
boolean类型的属性 不允许用户填写,不会提交
type="hidden" 是用户看不见的
readonly 不允许修改，可以提交
占位符 text/password
radio/checkbox 一般会使用 text/password 可以用，有内容就相当于默认值
对于单选框和复选框来说，如果没有,就必须点击前面的那个圈才可以选中，当有了后，包含的内容就是一个整体，点击后面的字也可以选中。在用户名和输入也是同理，就是包含的内容视为一个整体。
选择框
元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
层叠样式表
布局+样式：让HTML更加美观，写不出来很正常，需要HTML和CSS配合使用
外部链接： HTML文件和CSS文件是分开的，需要通过HTML的引入
这个标签一般写在
内部样式： 直接在HTML中写样式
内联样式： 直接指定在元素上
推荐使用外部链接，偶尔使用内联样式
标签会自动的让浏览器加载style.css资源
元素选择器
body{...} 选择所有的body元素 li{...} 选择所有的li元素
id 选择器
HTML中的所有元素都有一个共同的属性，id，表示唯一标识符(在整个HTML中id是不可以重复的)
class选择器
HTML中的所有元素都有一个共同的属性，叫做class，只表示一组类别，可以重复，可以多个
几种常见的复合选择器
selector1没有空格直接跟selector2 { ...}表示并且的关系
div.hello {...}是div元素并且class中包含 hello的元素
.hello.world { ...}, class中包含hello的并且class中包含world的元素
div#thello { ...} div元素并且id 是 hello的元素
selector1, selector2 { ... } 表示或的关系
div, .hello { ... } div元素或者class中有hello的元素都应用这套规则表示层级关系的
通配符选择器
*{...} 所有元素都会应用这套规则
伪类选择器
div.hover{...}
关于元素的位置
web1: web应用的简单使用和练习 - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static
路径是如果是相对路径就是相对于css的
小结
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。
盒模型的各个部分
CSS 中组成一个块级盒子需要：
如下图：
display：flex； 响应盒子的内部元素排布方式
相关属性： display：flex； align-items：垂直方向上的孩子元素的对齐方式
just-cpntent:水平方向孩子元素的布局方式
flex-direction
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
小练习1
html><html lang="en"><head> <meta charset="UTF-8"> <title>基础的布局1title> <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/demo1.css">head><body><div class="一篇文章"> <div class="标题部分"> <span class="标签">原力计划span> <span class="标题">基于Java+Spring+mybatis+vue+element实现酒店管理系统span> div> <div class="下半部分"> <div class="左边的图片"> <img src="header.png"> div> <div class="右边的文字"> <div class="上边的简介"> 酒店管理系统采用B/S结构、java开发语言、以及Mysql数据库等技术。系统主要分为管理员和用户二部分，管理员：首页、个人中心、用户管理、客房类型管理、客房信息管理、客房预订管理、入住登记管理、退房评价管理、系统管理，用户；首页、个人中心、客房预订管理、入住登记管理、点餐管理、退房评价管理、我的收藏管理，前台首页；首页、客房信息、酒店公告、个人中心、后台管理、在线咨询等功能，基本上实现了整个酒店管理系统信息管理的过程。本系统在一般酒店管理系统的基础上增加了最新信息的功能方便用户快速浏览，是一个高效的、动态的、相互友好的酒店管理系统。 div> <div class="下面的功能区"> <span class="点赞"> <i class="fa fa-thumbs-o-up" aria-hidden="true">i> 75赞 span> <span class="点踩"> <i class="fa fa-thumbs-down" aria-hidden="true">i> 踩 span> <span class="作者"> java张三 span> <span class="更多功能">...span> div> div> div>div>body>html>
* { magin: 0; padding: 0; box-sizing: border-box;} .一篇文章, .右边的文字 { display: flex; flex-direction: column;} .标题部分, .下半部分, .下面的功能区 { display: flex; flex-direction: row;} .左边的图片 img { width: 133px; height: 100%; object-fit:contain;} .一篇文章 { width: 800px; height: 136px; border-bottom: 1px solid #eee;} /* 当鼠标滑过这个元素时 */.一篇文章:hover { background-color: #eee;} .标题部分 { height: 30px; align-items: center;} .标签 { background-color: #fff1f0; color: #fc5531; border-radius: 2px; margin-left: 8px; margin-right: 8px; font-size: 12px; padding: 2px 4px;} .标题 { font-size: 18px; font-weight: 500;} .左边的图 { width: 133px; display: flex; align-item: center; height: calc(136px - 30px - 20px); background-color: #eee;} .右边的文字 { height: calc(136px - 30px); padding: 4px 12px; font-size: 14px; color: #555;} .上面的简介 { height: 70px;} .下面的功能区 span { margin: 0 8px;}
小练习2
html><html lang="zh-hans"><head> <meta charset="UTF-8"> <title>QQ 聊天框title> <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="/css/demo2.css">head><body><div class="QQ聊天框"> <div class="标题部分"> 2022Java火箭班 <div class="特殊功能区"> 举报 <i class="fa fa-angle-down" aria-hidden="true">i> <i class="fa fa-minus" aria-hidden="true">i> <i class="fa fa-square-o" aria-hidden="true">i> <i class="fa fa-times" aria-hidden="true">i> div> div> <div class="功能区部分"> <div class="左侧功能区部分"> <a href="/" class="active">聊天a> <a href="/">公告a> <a href="/">相册a> <a href="/">文件a> <a href="/">应用a> <a href="/">设置<i class="fa fa-angle-down" aria-hidden="true">i>a> div> <div class="右侧功能区部分"> <a href="/">语音a> <a href="/">视频a> <a href="/">课程a> <a href="/">更多a> div> div> <div class="主体部分"> <div class="左侧主体部分"> <div class="聊天内容展示区">div> <div class="聊天输入区">div> div> <div class="右侧主体部分"> <div class="群通知区域">div> <div class="群文件区域">div> <div class="群成员区域">div> div> div>div>body>html>
* { margin: 0; padding: 0; box-sizing: border-box;} body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;} .QQ聊天框 { width: 600px; height: 480px; background-color: #eee;} .标题部分 { height: 38px; background-image: linear-gradient(to right, #0D7FFA, #0BD2FA); /*渐变色*/ text-align: center; line-height: 38px; position: relative; /* 坐标系 */} .特殊功能区 { position: absolute; /* 采用绝对坐标进行布局 */ height: 38px; top: 0; right: 10px; width: 140px; display: flex; align-items: center; justify-content: space-between;} .功能区部分 { height: 44px; border-bottom: 1px solid #aaa;} .主体部分 { height: calc(100% - 38px - 44px); background-color: #999;} .功能区部分 { display: flex; align-items: center; justify-content: space-between; padding: 0 8px;} .左侧功能区部分 a { display: inline-block; height: 44px; line-height: 44px; text-decoration: none; color: #888;} .左侧功能区部分 a.active { border-bottom: 2px solid #000; color: #000;} .左侧功能区部分 a:hover { color: #000;} .主体部分 { display: flex; align-items: stretch;} .左侧主体部分 { width: 490px; display: flex; flex-direction: column; background-color: yellow;} .聊天内容展示区 { height: 300px; background-color: orange;} .聊天输入区 { height: calc(100% - 300px); background-color: blue;} .右侧主体部分 { width: calc(100% - 490px); background-color: pink;}
小练习3
html><html lang="zh-hans"><head> <meta charset="UTF-8"> <title>聊天记录title> <link rel="stylesheet" href="/css/demo3.css">head><body> <div class="聊天记录"> <div class="头像展示区"> <img src="https://pic2.zhimg.com/v2-c772f409a8c2c5603df84c841274d83d_r.jpg"> div> <div class="右侧部分"> <div class="昵称区域">小熊div> <div class="聊天记录主区域"> @全体成员，大家听懂没，下来一定要多练习，多写代码。 div> div> div>body>html>
* { margin: 0; padding: 0; box-sizing: border-box;} .头像展示区 { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;} img { width: 40px;} body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center;} .聊天记录 { width: 600px; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .7); display: flex; align-items: center; padding: 4px;} .右侧部分 { margin-left: 12px;} .昵称区域 { font-size: 12px; color: #aaa; margin-bottom: 4px;} .聊天记录主区域 { background-color: #eee; padding: 12px; border-radius: 4px;}
web1: web应用的简单使用和练习 - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static/fonttest
京公网安备 11010502049817号