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

评论