Html的表单标签
应用场景
登录 注册等等文章源自JAVA秀-https://www.javaxiu.com/488.html
作用
只要需要将页面用户填写的数据传递给后台，都需要使用表单标签文章源自JAVA秀-https://www.javaxiu.com/488.html
使用
标签格式：表单标签不是由一个组成，而是有多个组成文章源自JAVA秀-https://www.javaxiu.com/488.html
<form> 1 文本框 <input type="text" /> 2 密码框 <input type="password" /> 3 单选框 <input type="radio" /> 4 复选框 <input type="checkbox" /> 5 日期框 <input type="date" /> 6 隐藏框 <input type="hidden" /> 7 文件框 <input type="file" /> 8 下拉框 <select><option>内容</option></select> 9 文本域 <textarea></textarea> 10 提交按钮 <input type="submit" /> 11 普通按钮 <input type="button"/> 12 重置按钮 <input type="reset" /> <form> 细节：所有的表单标签都要写在<form></form>里面
form标签的属性文章源自JAVA秀-https://www.javaxiu.com/488.html
form标签的2个属性：action method action:指定表单提交到哪里的地址 method：提交方式 get提交 post提交 细节：get提交和post提交的区别 get提交方式会将整个表单提交的内容都显示在地址栏上(默认不写就为get) post提交方式不会将整个表单提交的内容显示在地址栏上
所有标签的核心属性文章源自JAVA秀-https://www.javaxiu.com/488.html
name属性：表单提交数据是以key=value的形式进行提交的 name属性就是用来设置key名的 细节：表单数据要想提交 必须得有name属性 value属性：用来设置value值的 一般只给单选框 复选框设置 其余标签会将用户填写的内容当成是value属性值 细节：按钮的value属性是用来设置按钮名称的
单选框/复选框特有的属性文章源自JAVA秀-https://www.javaxiu.com/488.html
checked="checked" 被选中
下拉框特有的属性文章源自JAVA秀-https://www.javaxiu.com/488.html
selected="selected" 被选中
CSS样式
概述
CSS：Cascading Style Sheets —-层叠样式表 专门用于网页的美化文章源自JAVA秀-https://www.javaxiu.com/488.html
css的美化初体验:有三个font标签 需要设置字体大小为70 颜色为红色文章源自JAVA秀-https://www.javaxiu.com/488.html
结论：比HTML美化的功能更加强大，可以实现HTML不能实现的美化效果文章源自JAVA秀-https://www.javaxiu.com/488.html
CSS使用
1.css的代码三种引入方式文章源自JAVA秀-https://www.javaxiu.com/488.html
1、内嵌方式（行内方式） 内部方式 外部方式 2、内嵌方式（行内方式） 需要在每个标签内部加上style属性 属性的值：key1:value1;key2:value2... 3、内部方式 需要在<head></head>之间定义标签<style> 标签名{ key1:value1; key2:value2; } 细节：css的注释: /* 注释内容 */ 4、外部方式 条件：需要引入外部的文件 在外部创建一个css样式文件写样式 在需要的页面将css文件引入 <link rel="stylesheet" href="文件地址"> 外部方式可以用于多个页面 外部了解方式：<style type="text/css"> @import url("css文件地址"); </style>
细节：三种引入方式的优先级：就近原则 谁离标签近谁的优先级高文章源自JAVA秀-https://www.javaxiu.com/488.html
CSS的选择器
作用：用来获取页面的标签的文章源自JAVA秀-https://www.javaxiu.com/488.html
条件：只能使用内部样式和外部样式来控制选择器文章源自JAVA秀-https://www.javaxiu.com/488.html
1 基本选择器文章源自JAVA秀-https://www.javaxiu.com/488.html
元素选择器:可以用来设置所有标签 根据标签名直接获取标签 类选择器:可以用来设置一组标签的 需要在标签上设定class属性根据class属性名获取标签 ID选择器:可以用来设置单个标签 需要在标签上设定ID属性根据id属性名获取标签 细节：ID选择器>类选择器>标签选择器
2 扩展选择器文章源自JAVA秀-https://www.javaxiu.com/488.html
并集(组合)选择器 多个选择器的集合 选择器1，选择器2，选择器3{属性} 层级选择器 父元素下所有的子孙元素 元素1>元素2 元素1 元素2（包含子子孙孙） <div> <div> <div></div> <div> <div><div> <div><div> <div> 属性选择器 只要包含的有属性名就能被选中 伪类选择器 同一个元素在不同的操作状态下呈现不同的样式 例如超链接 元素:link 正常状态 元素:hover 鼠标悬停 元素:active 正在激活 元素:visited 访问过的
CSS属性介绍
设定背景 background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-repeat 设置背景图像是否重复及如何重复 设定文本 color 设置文本颜色 text-align 对齐元素中的文本 text-indent 缩进元素中文本的首行 text-decoration 去除超链接的下划线 line-height 设置行高 设定字体 font-size 设置字体的尺寸 font-family 设置字体属性（楷体） font-style 设置字体风格（斜体） font-weight 设置字体的粗细 元素的显示和隐藏属性 display 取值： none 设置元素不可见 inline 设置元素为内联元素 block 设置元素为块级元素
CSS的浮动
作用：可以让div在一行文章源自JAVA秀-https://www.javaxiu.com/488.html
属性：float 取值：left right文章源自JAVA秀-https://www.javaxiu.com/488.html
clear清除浮动文章源自JAVA秀-https://www.javaxiu.com/488.html
left:清除自身的左浮动文章源自JAVA秀-https://www.javaxiu.com/488.html
right:清除自身的右浮动文章源自JAVA秀-https://www.javaxiu.com/488.html
both:不管左浮动还是右浮动都清除自身文章源自JAVA秀-https://www.javaxiu.com/488.html
盒子模型
css认为所有元素就是一个盒子文章源自JAVA秀-https://www.javaxiu.com/488.html
盒子组成：内容 边框 内边距 外边距文章源自JAVA秀-https://www.javaxiu.com/488.html
外边距 ：margin 盒子和盒子或盒子和页面之间的距离文章源自JAVA秀-https://www.javaxiu.com/488.html
取值：left right top bottom文章源自JAVA秀-https://www.javaxiu.com/488.html
内边距 : padding 盒子中的内容和盒子边框之间的距离文章源自JAVA秀-https://www.javaxiu.com/488.html
取值：left right top bottom文章源自JAVA秀-https://www.javaxiu.com/488.html
标准盒子(默认)：内容不变，盒子变化文章源自JAVA秀-https://www.javaxiu.com/488.html
属性控制（默认）：box-sizing:content-box
怪异盒子：盒子不变 内容变化文章源自JAVA秀-https://www.javaxiu.com/488.html
属性控制：box-sizing:border-box文章源自JAVA秀-https://www.javaxiu.com/488.html
评论