第一阶段复习: HTML
重新认识到的 <hr/>
新元素
<address>这里可以添加地址,地址将呈现斜体字</address>
<a href="mailto:someName@xxmail.com?subject=回复主题& body=回复内容">可以添加邮件回复,系统会自动调用后台你的 Email 客户端</a>
//需要注意的: 关键字 " mailto : " 第一个选项后面要跟一个问号,之后可以换成 &
没有封闭标签的元素:
1. <br/> 换行标签
2. <hr/> 下划线标签
3. <input /> 表单元素
详解 table 元素
<table summary="这个属性是表格的概要,类似于 title 属性">
<caption>表格的标题</caption>
<tr>一个 tr 元素代表一行
<td>td元素代表一行元素里面的一列</td>
</tr>
</table>
form 表单详解
首先是 form的主体
<form method="这个属性是向浏览器提交的方式, GET 或者 POST" action="服务器的地址">
//文本输入框
<input type="text" name="和服务器有关的" id ="多数用来绑定 label"/>
//密码输入框
<input type="password" name ="同上" id="同上"/>
//单选框
<input type="radio" value="和服务器有关">
//多选
<input type="checkbox" checked name="如果出现多个多选框,他们的名字就得必须一样" value="和选择的值有关">
//下拉列表,checked 属性是一个布尔值, 如果存在就在初始状态时默认被选中
<select name="多选菜单的名字">
<option>1</option>
<option selected="selected">2</option>
//selected 属性:让该元素处于默认选中状态
</select>
<input type="submit" value="这是一个提交按钮"/>
<input type="reset" value="这是一个重置按钮"/>
<input type="button" value ="这是一个按钮"/>
</form >
input 下的 value 属性
介绍了 value 在不同的 input type 下所代表的作用
- 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
- 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值
- 对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL。
第一阶段复习: CSS
新认识
//用于给文字添加中划线
text-decoration:line-through
//用于段落前的缩进
text-indent:2em;
//给文字设置间隔
letter-spacing
//给英文单词设置间隔
word-spacing
//给块状元素中的文字和图片对齐
text-align
//font属性合集
1. font-family 字体类型
2. font-size 字体大小
3. line-height 行高
4. font-style 字体样式
5. font-variant 字体间距
6. font-width 字体粗细
样式表的三种形式
- 内联
- 嵌入式
- 外部引入 需要注意的是样式的优先级按照就近原则,离元素最近的样式最优先应用
选择器分类大全
标签选择器
又称元素选择器
类选择器(" . ")
用". "标示的
ID选择器("#")
用"#"标示的
子选择器(">")
用于选择某元素后面的第一代子元素
后代选择器
用空格标示, 用于选择某元素下的所有后代元素
通用选择器(*)
选择所有元素
伪类选择器
选择 HTML 元素中不存在的标签
分组选择符
给多个元素设置同样的样式
权值 和 特殊性
标签的权值为1; 类选择器的权值为10; ID 选择器的权值为100; 需要注意的一点是: 继承也有权值, 史料记载其权值为0.1 当权重相同时, 按照层叠顺序应用样式, 而层叠顺序按照就近原则,权重解决的问题只是嵌套样式表和引入的样式表之间的冲突,如果内联样式中已有的声明,权重再高也是无法覆盖的
优先级的几种形式
- 按照权重的
- 按照内联>嵌入>引入
- 用户自行设置的样式>网页制作者的样式>浏览器的样式 可以用 !important 用来覆盖用户自行设置的样式,而且还能覆盖掉高权重和内联样式
块级元素和行内元素
块级元素有:
- div
- h1-6
- p
- header
- section
- footer
- nav
- aritcle
- slide
- form
- table
- ol
- ul
- dl
- address
- blockquote
行内元素有:
- span
- strong
- q
- br
- a
- code
- button
- li
- i
- em
- label
- cite
####内联块状元素有:
- img
- input
颜色类型:
- 英文字母, 如 blue black red orange pink green white yellow
- 十六进制, 如 #ffffff
- RGB, 如 rgb(xxx,xxx,xxx) 或者带有透明层的 argb(xxx,xxx,xxx,x)
度量单位:
- px 像素
- em 倍数
- %
- rem
不同的元素特性(块,内联,行内块)
- 块级元素: 可以设置元素的长宽属性,外部所有边距可以调整,具有前后换行的特征,且会继承父元素宽度块级元素要想实现水平居中,必须满足定宽条件
- 内联元素:不可以设置改动长宽属性, 可调行高和左右边距,不具有前后换行的特征
- 行内块:可以改动长宽,行高,和所有边距, 但不具有前后换行的特征
布局模型
- 流布局(flow):系统默认的布局
- 层布局(layer):定位布局
- 绝对定位
- 相对定位
- 固定定位
- 浮动布局(float)
简写形式
如 padding:10px 20px 15px 20px; 可简写为 padding 10px 20px 15px : 其中第一个上内部填充,第二个是左右填充,第三个是下内部填充
非定宽元素水平居中指南
- 设置 table 标签,然后使用 margin
- display:inline or inline-block
- relative : left 50% 真正的垂直居中属性只有 vertical-align ,但是该属性只在父元素为 td 和 th 时有效,因此我们需要 table 标签, 还有一种方式是设置 display 属性为 table-cell,用来激活 vertical-align 属性
第一阶段复习 : JavaSscript
新元素
select: 当选中文字的事后被触发 onbeforeunload = "return something" 关闭页面时提醒用户
操作符之间的优先级
由高到低分别是: 算术操作符(+ - * / 和() )>比较操作符(> < == === )>逻辑操作符(! || &&)>赋值符
内置对象
字符串对象方法
- length //返回字符串的长度
- charAt()//接收一个参数(索引值),返回该索引值的 value
- indexOf() // 接受两个参数(字符串,起始位置)
- substring() //接受两个参数(起始索引值,结束索引值,不允许负值,可选)
- substr() //接受两个参数(起始位置的索引值,和结束位置的索引值,允许负值,可选)
- split() // 接受两个参数,('切割标示',"允许最多不超过的切割量") 它会将字符串分割为字符串数组, 并返回此数组
Math 内置实体对象方法
- Math.ceil() //将数值进行向上取整
- Math.floor() // 将数值进行向下取整
- Math.round() // 将数值进行四舍五入
- Math.random()// 生成一个0~1 之间的随机数
Array 数组对象方法
- concat //合并多个数组,并返回一个新的数组
- join() // 将数组变成字符串, 可以在括号面输入一个自定义的分隔符,可选
- reverse() // 将数组里的元素倒转, 并不会返回一个新的数组,而是修改原有的数组
- slice() // 将数组里的元素进行切割,并生成一个新的数组, 接受两个参数, 第一个为起始,第二个为结尾(不包括该元素),允许负值, 如果第一个是负值,第二个也必须是负值-我说.
- sort() // 排序, 默认按照 Unicode 进行排序, 接收一个方法, 用来进行用户排序, 返回值 -1 or >-1&&<1 or >=1 , 根据这三个值进行对数组的升序或者降序处理
BOM
定时器
- setTimeout()
- clearTimeout()
- setInterval()
- clearInterval()
History
- window.back()
- window.forward() //向前
- window.go() //接受一个参数
- -1 // 后退一页 ,相当于 back()
- 1 //前进一页, 相当于 forward()
- 0 // 当前页
- 其他数字, 要访问的 URL 在 history 的 URL 列表的相对位置
navigator
- userAgent // 返回浏览器的具体信息,可以用来做判断浏览器品牌
2. DOM
- createTextNode() 创建一个包含给定文本的新文本节点;
- inserBefore() 在元素子节点的前面插入
- getElementsByName() 返回一个带有指定名字的元素数组 区别getElementByID,getElementsByName,getElementsByTagName 以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。
节点
- 节点名称: nodeName
- 元素的 nodeName 是元素的名字
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 # document
- 节点值: nodeValue
- 元素的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性值
- 节点类型: nodeType
返回一个节点的类型,用数字表示
- 元素 1
- 属性 2
- 文本 3
- 注释 8
- 文档 9
- 节点选择器
- parentNode 选择父节点
- childNode 返回一个子节点数组
- firstChild 返回第一个元素的子节点
- lastChild 返回最后一个元素的子节点
- nextsublimbing 在同级元素中的后面插入一个新的单词有错误
- previous 在同级元素中的前面插入单词有错误
- 创建与删除和替换各种子节点
- createTextNode() 创建文本节点
- removeChild() 移除节点
- replaceChild() 替换节点