HTML&CSS的小总结

沙海
沙海
沙海
165
文章
2
评论
2017年11月15日17:54:45 评论 55 2521字阅读8分24秒

一 Html表单标签

用于将客户端浏览器的数据提交给后台服务器,一切需要提交数据的场景都会使用到表单

场景:注册 登录等

html的表单标签不是一个 而是有多个组成,所有的表单标签都需要放在<form></form>里面

必掌握的表单标签:

1 文本框   <input type=“text”/>

2 密码框   <input type=“password”/>

3 单选框   <input type=“radio”/>

4 复选框   <input type=“checkbox”/>

5 下拉框   <select><option>北京<option>…..</select>

6 文件框   <input type=“file”/>

7 文本域    <textarea></textarea>

8 提交按钮  <input type=“submit”/>

9 普通按钮  <input type=“button”/>  和javascript结合用

10 重置按钮  <input type=“reset”/>

11 隐藏框   <input type=“hidden”/>

Form表单必掌握的属性:

form标签的2个属性:action method

action:表单带着内容要提交到哪里的地址 只要submit按钮一点击就会触发

method:提交方式  get提交  post提交

get提交方式会将整个表单提交的内容都显示在地址栏上(默认不写就为get)

post提交方式不会将整个表单提交的内容显示在地址栏上

所有标签必掌握的核心属性:

name属性:表单提交数据是以key=value的形式进行提交的  key就是name属性名

所以表单数据要想提交 必须得有name属性

value属性:一般只给单选框 复选框 下拉框  其余标签会将用户填写的内容当成是value值

按钮的value属性主要是用来设置按钮名称的

单选框和复选框特有的属性:

checked="checked" 被选中

下拉框特有的属性:

selected="selected" 被选中

multiple=”multiple” 下拉框内容的全部显示

了解属性:

size: 设置表单框的大小

maxlength: 设置表单标签内容的长度

readonly:设置表单标签只能读不能写

disabled:设置表单标签不可用

了解的标签

日期:<input type=“date”/>

一般面试题:get提交和post提交的区别?

1 get提交所有内容都在地址栏后面显示(不安全) get提交的数据有着大小的限制

2 post提交所有内容都不在地址栏后面显示(安全) post提交的数据没有大小的限制

二 CSS知识点

CSS:Cascading Style Sheets —-层叠样式表  专门用于网页的美化

css的美化初体验:有三个font标签 需要设置字体大小为70 颜色为红色

结论:比HTML美化的功能更加强大,可以实现HTML不能实现的美化效果

如何使用CSS?

  • css的代码三种引入方式

内嵌方式(行内方式) 内部方式  外部方式

内嵌方式(行内方式)

需要在每个标签内部加上style属性

属性的值:key1:value1;key2:value2…

内部方式

需要在<head></head>之间定义标签<style>

标签名(选择器){

key1:value1;

key2:value2;

}

外部方式 条件:需要引入外部的文件

在外部创建一个css样式文件写样式

在需要的页面将css文件引入 <link rel=”stylesheet” href=”文件地址”>

外部方式可以用于多个页面

外部了解方式:<style type=”text/css”>

@import url(“css文件地址”); t

</style>

css的注释: /* 注释内容 */

  • css的三种引入方式的优先级

优先级:就近原则  谁离标签近谁的优先级高

  • css的选择器(掌握

作用:用来获取页面的标签的

条件:只能使用内部样式和外部样式来控制选择器

元素选择器:可以用来设置所有标签 根据标签名直接获取标签

类选择器:可以用来设置一组标签的 需要在标签上设定class属性根据class属性名获取标签

ID选择器:可以用来设置单个标签  需要在标签上设定ID属性根据id属性名获取标签

Jquery:这三种统称为基本选择器

基本选择器的优先级   ID选择器>类选择器>标签选择器-
  • 扩展选择器(掌握

并集(组合)选择器 多个选择器的集合              例如:选择器1,选择器2…{}

层级选择器 父元素下所有的子孙元素        例如:父选择器 子孙选择器{}

属性选择器 只要包含的有属性名就能被选中  例如:标签名[属性名=属性值]{}

伪类选择器 同一个元素在不同的操作状态下呈现不同的样式 例如超链接

a:link 正常状态

a:hover 鼠标悬停

a:active 正在激活

a:visited 访问过的

  • 常见的css属性

设定背景

background-color  设置元素的背景颜色

background-image  把图像设置为背景

background-repeat 设置背景图像是否重复及如何重复

设定文本

color 设置文本颜色

line-height  设置行高

text-align 对齐元素中的文本

text-indent 缩进元素中文本的首行

text-decoration 去除超链接的下划线

设定字体

font-size 设置字体的尺寸

font-family 设置字体属性(楷体)

font-style 设置字体风格(斜体)

font-weight 设置字体的粗细

  • 浮动(了解)

作用:让div在同一行

属性:float控制浮动  left:向左  right:向右

clear清除浮动

left:清除自身的左浮动

right:清除自身的右浮动

both:不管左浮动还是右浮动都清除自身

  • css控制元素的显示和隐藏属性

属性:display

取值:

none 设置元素不可见

inline 设置元素为内联元素

block 设置元素为块级元素

  • 盒子模型

css认为所有元素就是一个盒子

盒子组成:内容  边框  内边距  外边距

外边距 :margin  盒子和盒子或盒子和页面之间的距离

取值:left  right  top  bottom

内边距 : padding  盒子中的内容和盒子边框之间的距离

取值:left  right  top  bottom

继续阅读
weinxin
资源分享QQ群
本站是一个IT技术分享社区, 会经常分享资源和教程; 分享的时代, 请别再沉默!
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:HTML&CSS的小总结 - Java秀 ☜(ˆ▽ˆ)
专业承接各类企业网站的开发和维护
0011-基于Java的学生宿舍管理系统的设计与实现源码
0001-基于Java的在线考试系统设计与实现
0007-基于微信平台的消息推送系统的研发源码
匿名

发表评论

匿名网友 填写信息

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