HTML 初学复习笔记

作者 Haojen Ma 日期 2015-12-11
HTML 初学复习笔记

第一阶段复习: 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 下所代表的作用

  1. 对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
  2. 对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值
  3. 对于 "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 字体粗细

样式表的三种形式

  1. 内联
  2. 嵌入式
  3. 外部引入 需要注意的是样式的优先级按照就近原则,离元素最近的样式最优先应用

选择器分类大全

标签选择器

又称元素选择器

类选择器(" . ")

用". "标示的

ID选择器("#")

用"#"标示的

子选择器(">")

用于选择某元素后面的第一代子元素

后代选择器

用空格标示, 用于选择某元素下的所有后代元素

通用选择器(*)

选择所有元素

伪类选择器

选择 HTML 元素中不存在的标签

分组选择符

给多个元素设置同样的样式

权值 和 特殊性

标签的权值为1; 类选择器的权值为10; ID 选择器的权值为100; 需要注意的一点是: 继承也有权值, 史料记载其权值为0.1 当权重相同时, 按照层叠顺序应用样式, 而层叠顺序按照就近原则,权重解决的问题只是嵌套样式表和引入的样式表之间的冲突,如果内联样式中已有的声明,权重再高也是无法覆盖的

优先级的几种形式

  1. 按照权重的
  2. 按照内联>嵌入>引入
  3. 用户自行设置的样式>网页制作者的样式>浏览器的样式 可以用 !important 用来覆盖用户自行设置的样式,而且还能覆盖掉高权重和内联样式

块级元素和行内元素

块级元素有:

  1. div
  2. h1-6
  3. p
  4. header
  5. section
  6. footer
  7. nav
  8. aritcle
  9. slide
  10. form
  11. table
  12. ol
  13. ul
  14. dl
  15. address
  16. blockquote

行内元素有:

  1. span
  2. strong
  3. q
  4. br
  5. a
  6. code
  7. button
  8. li
  9. i
  10. em
  11. label
  12. cite

####内联块状元素有:

  1. img
  2. input

颜色类型:

  1. 英文字母, 如 blue black red orange pink green white yellow
  2. 十六进制, 如 #ffffff
  3. RGB, 如 rgb(xxx,xxx,xxx) 或者带有透明层的 argb(xxx,xxx,xxx,x)

度量单位:

  1. px 像素
  2. em 倍数
  3. %
  4. rem

不同的元素特性(块,内联,行内块)

  1. 块级元素: 可以设置元素的长宽属性,外部所有边距可以调整,具有前后换行的特征,且会继承父元素宽度块级元素要想实现水平居中,必须满足定宽条件
  2. 内联元素:不可以设置改动长宽属性, 可调行高和左右边距,不具有前后换行的特征
  3. 行内块:可以改动长宽,行高,和所有边距, 但不具有前后换行的特征

布局模型

  1. 流布局(flow):系统默认的布局
  2. 层布局(layer):定位布局
    1. 绝对定位
    2. 相对定位
    3. 固定定位
  3. 浮动布局(float)

简写形式

如 padding:10px 20px 15px 20px; 可简写为 padding 10px 20px 15px : 其中第一个上内部填充,第二个是左右填充,第三个是下内部填充

非定宽元素水平居中指南

  1. 设置 table 标签,然后使用 margin
  2. display:inline or inline-block
  3. relative : left 50% 真正的垂直居中属性只有 vertical-align ,但是该属性只在父元素为 td 和 th 时有效,因此我们需要 table 标签, 还有一种方式是设置 display 属性为 table-cell,用来激活 vertical-align 属性

第一阶段复习 : JavaSscript

新元素

select: 当选中文字的事后被触发 onbeforeunload = "return something" 关闭页面时提醒用户

操作符之间的优先级

由高到低分别是: 算术操作符(+ - * / 和() )>比较操作符(> < == === )>逻辑操作符(! || &&)>赋值符

内置对象

字符串对象方法

  1. length //返回字符串的长度
  2. charAt()//接收一个参数(索引值),返回该索引值的 value
  3. indexOf() // 接受两个参数(字符串,起始位置)
  4. substring() //接受两个参数(起始索引值,结束索引值,不允许负值,可选)
  5. substr() //接受两个参数(起始位置的索引值,和结束位置的索引值,允许负值,可选)
  6. split() // 接受两个参数,('切割标示',"允许最多不超过的切割量") 它会将字符串分割为字符串数组, 并返回此数组

Math 内置实体对象方法

  1. Math.ceil() //将数值进行向上取整
  2. Math.floor() // 将数值进行向下取整
  3. Math.round() // 将数值进行四舍五入
  4. Math.random()// 生成一个0~1 之间的随机数

Array 数组对象方法

  1. concat //合并多个数组,并返回一个新的数组
  2. join() // 将数组变成字符串, 可以在括号面输入一个自定义的分隔符,可选
  3. reverse() // 将数组里的元素倒转, 并不会返回一个新的数组,而是修改原有的数组
  4. slice() // 将数组里的元素进行切割,并生成一个新的数组, 接受两个参数, 第一个为起始,第二个为结尾(不包括该元素),允许负值, 如果第一个是负值,第二个也必须是负值-我说.
  5. sort() // 排序, 默认按照 Unicode 进行排序, 接收一个方法, 用来进行用户排序, 返回值 -1 or >-1&&<1 or >=1 , 根据这三个值进行对数组的升序或者降序处理

BOM

定时器

  1. setTimeout()
  2. clearTimeout()
  3. setInterval()
  4. clearInterval()

History

  1. window.back()
  2. window.forward() //向前
  3. window.go() //接受一个参数
    1. -1 // 后退一页 ,相当于 back()
    2. 1 //前进一页, 相当于 forward()
    3. 0 // 当前页
    4. 其他数字, 要访问的 URL 在 history 的 URL 列表的相对位置

navigator

  1. userAgent // 返回浏览器的具体信息,可以用来做判断浏览器品牌

2. DOM

  1. createTextNode() 创建一个包含给定文本的新文本节点;
  2. inserBefore() 在元素子节点的前面插入
  3. getElementsByName() 返回一个带有指定名字的元素数组 区别getElementByID,getElementsByName,getElementsByTagName 以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

节点

  1. 节点名称: nodeName
    1. 元素的 nodeName 是元素的名字
    2. 属性节点的 nodeName 是属性的名称
    3. 文本节点的 nodeName 永远是 #text
    4. 文档节点的 nodeName 永远是 # document
  2. 节点值: nodeValue
    1. 元素的 nodeValue 是 undefined 或 null
    2. 文本节点的 nodeValue 是文本自身
    3. 属性节点的 nodeValue 是属性值
  3. 节点类型: nodeType 返回一个节点的类型,用数字表示
    1. 元素 1
    2. 属性 2
    3. 文本 3
    4. 注释 8
    5. 文档 9
  4. 节点选择器
    1. parentNode 选择父节点
    2. childNode 返回一个子节点数组
    3. firstChild 返回第一个元素的子节点
    4. lastChild 返回最后一个元素的子节点
    5. nextsublimbing 在同级元素中的后面插入一个新的单词有错误
    6. previous 在同级元素中的前面插入单词有错误
  5. 创建与删除和替换各种子节点
    1. createTextNode() 创建文本节点
    2. removeChild() 移除节点
    3. replaceChild() 替换节点