HTML&CSS的小总结

沙海
沙海
沙海
3185
文章
2
评论
2017年11月15日17:54:45HTML5 JavaWeb评论150字数 2521阅读8分24秒阅读模式

一 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

继续阅读
历史上的今天
11月
15
速蛙云 - 极致体验，强烈推荐！！！购买套餐就免费送各大视频网站会员！快速稳定、独家福利社、流媒体稳定解锁！速度快，全球上网、视频、游戏加速、独立IP均支持！基础套餐性价比很高！这里不多说，我一直正在使用，推荐购买：https://www.javaxiu.com/59919.html
weinxin
资源分享QQ群
本站是JAVA秀团队的技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默！
沙海
  • 版权声明：本站是JAVA秀团队的技术分享社区，我们会经常分享资源和教程。
  • 转载请注明：HTML&CSS的小总结 - JAVA秀 ☜(ˆ▽ˆ)
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定