无序列表ul:属性type:circle(空心圆) disc(默认,实心圆) square(黑色方块)
有序列表ol:属性type:1、A、a、I、i(数字、字母、罗马数字)
定义列表dl:
dt:定义标题
dd:定义描述
a链接中target属性的使用:
target的属性值:top和parent
target=_parent,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象self参数一样。
target=_top,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架 不写的话就是表示默认值,默认值一般跟浏览器有关。
表示为行
表示为列(单元格)
表示表头
表格的属性
border:边框像素为单位
width:宽度
height:高度
行的属性:
align:控制表格的对齐方式:center right left
valign:控制表格的垂直对齐(都是对表格的内容的控制)
跨列和跨行:
colspan=""占几列
rowspan=""占几行
定义粗体
定义大号字体
着重文字(斜体)
斜体字
下标字,数学上的log下标
上标字,数学上的平方
删除字,在文字上打上一条横线
表单标签
form标签
常用属性: action 表示动作,值为服务器端的地址,把表单的数据提交到该地址上进行处理
method:请求方式:get和post
enctype:表示表单提交的类型
默认值:application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
text/plain普通文本
get和set的区别:
get:数据储存在地址栏中,请求参数都在地址后拼接,不安全、效率高,大小有限制,一般用于查询数据
post:地址没有数据,请求参数单独处理,安全可靠、效率低,大小理论上没有限制,一般用于插入删除操作
input标签
type:可能要取得值:
text 文本框 输入内容
password 密码,密文或者掩码
radio 单选按钮,name必须要一致;value:提交给服务器的数据,表示同一组只能选中一个
checkbox 表示多选,name必须一致,返回值是数组,可以选多个
file 表示选择上传文件
以上具有输入性质的必须要有name属性,初始开始写value表示要有默认值(以后获取输入框的内容要根据name来获取)
一下按钮不具有输入性质,不需要name属性,但是按钮上的文字提示使用的是value属性
submit 提交
reset 重置
image 图片提交按钮
button 普通按钮
hidden 表示隐藏域,该框的内容服务器需要,但是不想让用户知道(不想清楚地显示在界面上)
email 表示邮箱格式的数据
name属性:表单元素的名字,只有name属性才能提交给服务器
value属性:提交给服务器的数据
placeholder:提示信息
高级属性:
disabled:禁用
readonly:只读
select元素(下拉列表)
selected表示选中该项,默认是选择第一项
textarea元素(文本区)
框架标签
frameset框架结构标签,把body删除掉,使用frameset代替body
基本的注意事项
1.不能将标签与标签同时使用
2.假如一个框架有可见边框,用户可以拖动边框来改变他的大小。可以使用标签中加入:noresize="noresize"
3.freamset 的属性freamborder="1|0|yes|no"表示是否有边框,border="1"表示边框的粗细 bordercolor表示边框的颜色
其他标签
html4.01
html5
特殊符号
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
CSS(层叠样式表)
语法规则:选择器{属性:值;属性:值}
使用方式:
-
内联方式
把css样式嵌入到HTML标签中
This is my HTML page.
-
内部样式
使用style标签引用css
好处是:能够控制页面中的多个元素样式,缺点:只能一个页面使用
-
外部样式
将css样式抽成一个单独文件,谁用谁就引用,好处:多个页面可以同时使用
方式1:链接式:
rel:代表当前页面与href所指定文档的关系
type:文件类型,告诉浏览器使用css解析器去解析
href:css文件地址
方式2:导入式:
备注:link和@import区别:
link所有浏览器都支持,@import某些版本低的IE不支持
@import是等待HTML加载完才加载,link解析到这个语句,就加载
@import不支持js动态修改
优先级:内联样式>内部样式>外部样式,就近原则
CSS选择器
基本选择器:
- 标签选择器 span{ }
- id选择器 #xx{ }
- class选择器 .xx{ }
- 优先级从高到低:id>class>标签
属性选择器:
格式为:html标签[属性='属性值']{css属性:css属性值;}
或者html标签[属性]{css属性:css属性值;}具体示例:
input[type='text'] {
background-color: pink
}
font[size] {
color: green
}
伪元素选择器:主要是针对a标签
a:link 静止状态
a:hover 悬浮状态
a:active 触发状态
a:visited 完成状态
层级选择器:
空格 表示后代选择器
大于号 子代选择器
加号 相邻的兄弟
~ 通用兄弟
其他选择器:
全局选择器 *{ }
群组选择器 h1,h2{ }
CSS属性
文本和文字属性
文字属性:font:italic bold 30px “幼圆”;/style weight size family swsf/
文本属性:text-indent:缩进,单位是em或者百分比
text-decoration:文字修饰
word-spacing:字符之间的间隔
letter-spacing:字母或单词之间的间隔
line-height:设置行高
背景属性:background-repeat: repeat-y:垂直方向平铺、repeat-x:水平方向平铺、repeat:水平垂直方向平铺、no-repeat:任何方向都不平铺
列表属性:
list-style-type:decimal;改变列表的标志类型
list-style-image: url(“images/dog.gif”);用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
简写
list-style: decimal url(img/001.png) inside;
去掉样式:
list-style:none;
list-style-type:none;
尺寸显示轮廓属性:
display:none 不显示 block 块级显示 inline:行级显示 inline-block:行级块
block块元素 有宽度和高度
inline 是默认的行元素,没有高度和宽度
inline-block行块标签,既有行又有块
overflow:溢出,当内容超出了盒子的大小,如何处理
H5之后添加了弹性盒子,用于设置垂直对齐
display:flex
align-items:center;垂直居中
justify-content:center;水平居中
clear属性:规定元素的哪一侧不允许其他浮动元素
值
描述
left
在左侧不允许浮动元素。
right
在右侧不允许浮动元素。
both
在左右两侧均不允许浮动元素。
none
默认值。允许浮动元素出现在两侧。
inherit
规定应该从父元素继承 clear 属性的值。
定位属性
position:static|relative|absolute|fixed
静态定位(默认定位方式)static
相对定位(relative)相对于原来位置偏移某个距离。元素仍保持其未定位前的形状,他原本所占的空间仍保留
绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭,就好像原来不存在一样。元素定位后会生成一个块级框,而不论原来它在正常流中生成何种类型的框
固定定位(fixed)元素框的表现类似于将position设置为absolute,不过其位置相对于视窗本身。
盒子模型
border margin padding
CSS3扩展属性
border-radius 圆角属性 示例:border-radius:20px;
box-shadow 向方框添加阴影 示例:box-shadow:10px 10px 5px #333333;
background-size属性设置背景图片的大小
background-url(img/1.png);
background-size:200px 300px;
background-repeat:no-repeat;
background-image 为指定元素使用多个背景图像,多个URL用逗号隔开
text-shadow 文本阴影
javaScript
完整的javaScript实现包含了三个部分:ECMAScript,文档对象模型(DOM Document Object Model),浏览器对象模型(BOM Brower Object Model)
数据类型:
-
基本类型(原始类型)undefined null number string boolean
-
引用类型(对象类型)Object(Person) Array String Number Boolean RegExp
数组的声明:var a=[1,1,1,2];
三种使用方式:
- 在>
- 放在标签中的事件中,常见事件onclick()
关系运算符:
==:比较的是两个值,会自动转换类型
===:比较的是引用,首先比较类型,如果类型不同,直接返回false
if语句:
if(变量):如果变量值是undefined,null表示false,其他是true,如果变量没有定义会出现异常。
zhangsan.name:是给zhangsan添加name的属性,没有赋值
增强for的写法:
for(var i in arr){ }i指的是下标
function中的参数不用写数据类型,返回值也不用写,如果有返回值就直接return
自行执行的匿名函数:
(function(){ document.write("")})();
闭包:
闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。
闭包三个条件:
1 闭包是一个内部函数
2 闭包能够读取其他(外部)函数的局部变量
3 闭包和局部变量在同一个作用域。
使用形式:1 闭包作为函数的返回值;2闭包作为函数的参数。
案例:
闭包 closure