您的位置：首页 > Web前端 > JavaScript

《web前端开发技术——html、css、javascript》笔记之二

2014-03-31 18:58 621 查看
CSS(Cascading Style Sheet，层叠样式表)是一种格式化网页的标准方式，是用于控制网页样式并允许样式信息与网页内容分离的一种技术。
基本选择器包括：html标记选择器、类选择器、ID选择器。
复合选择器包括：交集选择器（第一个选择器必须是标记选择器，第二个必须是类选择器或者ID选择器，之间不能有空格，如：div.a1{}）、并集选择器（如：h1,h2,div{}）、后代选择器（如：div p{}）
如果同时设置背景图片和背景颜色，背景颜色将会覆盖背景图片。
CSS应用方法：内联式、内嵌式、链接式、导入式（@import url(mystyle.css)）。
解决CSS冲突规则：
1. 内联式>内嵌式>外部样式
2. 在多个外部样式中，后出现的样式的优先级高于先出现的样式
3. 在样式中，选择器的优先级：ID样式>class样式>标记样式。

网页布局是把即将出现在网页中的所有元素进行定位，将页面首先在整体上使用<div>标记进行分块，然后对每个块进行CSS定位以及设置显示效果，最后再每个块中添加相应的内容。盒子模型，所有页面中的元素都被看成是一个个盒子，他们占据一定的页面空间，在其中放着特定的内容。当页面中的两个行内元素紧挨时，他们之间的距离就是第一个元素的margin-right加上第二个元素的margin-left；而垂直排列的块级元素之间的距离是第一个元素的margin-bottom和第二个元素的margin-top两者之中较大的，称为margin的“塌陷”现象。
div是区块容器标记，可以容纳段落、标题、表格、图像等各种HTML元素，div内的元素会自动换行； span是行间元素，在他前后不会自动换行，没有结构意义。
Javascript是适应动态网页制作的需要诞生的新的编程语言。特点包括：解释性、动态性、跨平台性、安全性、基于对象、节省CGI（Common Gateway Interface）的交互时间。javascript对于字母大小写是敏感的，若语句的结束处没有分号，javascript会自动将该行代码的结尾作为语句的结尾。
声明了变量没赋值时，其值默认为undefined。
所有的数字都是由浮点型表示的，数字格式允许精确地表示-900719925474092和900719925474092以及他们之间的所有整数。某些数字运算是对32位整数执行的，范围从-2147483648到2147483647.
在document.writeln（）；语句中使用转义字符时，只有将其放在格式化文本块中才会起作用，所以脚本必须在<pre>和</pre>的标签内。
undefined表示变量还没有赋值或者赋予了一个不存在的属性值。NaN表示非数字。null表示空值，用于定义空的或者不存在的引用。
==：等于，只根据表面值进行判断，不涉及数据类型。如“17”==17返回值为true；
===：绝对等于，根据表面值和数据类型同时进行判断，“17”==17返回值为false。
&&：若两个操作数都是逻辑值，则同时为true时结果为true；若两个操作数中有一个不是逻辑值，则当第一个操作数的值为false时，结果为false，否则返回第二个操作数的值。
||：若两个操作数都是逻辑值，则只要有一个为true，结果为true；若两个操作数中有一个不是逻辑值，则只要第一个操作数的值为true，字符串或数值，就返回第一个操作数的值，否则返回第二个操作数的值。
typeof的返回值为字符串形式的：number、string、boolean、object、function、undefined。
switch语句中表达式的值可以是任何数据类型，并且case后面的值也可以是常量、变量或者表达式。
do…while句尾的括号后面有一个分号。
continue语句只能应用在while、for、dowhile语句中。
with语句：一种对象运行语句，用于为一组程序建立默认对象。
javascript在框架页中出现必须在<frameset>标记之前被插入，否则不能运行。
navigator对象包含有关浏览器的信息，包含的属性描述了正在使用的浏览器。
window对象表示一个浏览器窗口或一个框架，是除navigator以外所有对象的顶层对象，window对象会在<body>或<frameset>每次出现时自动创建。是全局变量。setTimeout在某一特定时间只执行操作一次，setInterval可以使操作不断重复执行，直到窗口关闭或执行clearInterval()方法关闭Interval为止。location对象包含有关当前URL的信息，存储在window对象的location属性中，表示那个窗口中当前显示的文档的web地址。history对象唯一保持使用的功能只有back（）、forward（）和go（）方法。javascript运行引擎自动为每一个HTML文件建立一个document对象。

HTML5：
2004年成立了WHATWG(Web Hypertext ApplicationTechnology Working Group, Web超文本应用技术工作组)，出于“存在即是合理”的考虑，指定的一种“妥协式”规范。十分宽松，不要求开发人员必须遵循某种语义规范。HTML5的优势：解决浏览器兼容性问题、简化了HTML页面的开发、提供语义明确的文档结构、增强了web应用程序的功能。
html5的语法变化：
1. DOCTYPE的简化声明：规范要求不是必须的，可以用<!doctypehtml>
2. 字符集的简化声明<meta charset=”utf-8”>
3. 部分元素可省略结束标记
4. 标记和属性不区分大小写
5. 可省略具有布尔类型的属性值
6. 属性值可以省略引号

HTML5的文档结构：
head：表示页面中一个内容区域或整个页面的标题
article：表示页面中一块与上下文不相关的独立内容
section：对页面的某块内容进行分开，如将该块内容进一步分成章节的标题、内容和页脚等几部分
nav：定义页面上的各种导航条，一个页面中可以拥有多个nav元素，作为整个页面或不同部分的导航。
aside：定义当前页面或当前文章的辅助信息，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等内容，通常作为侧边栏的内容。
footer：用于为页面或谋篇文章定义脚注内容。一个页面可以包含多个footer元素。
表单新增属性：
form：定义表单元素和某个表单之间的隶属关系；
formaction：多个提交按钮是指定处理逻辑；
autofocus：页面加载完后该元素自动获得焦点；
pattern：属性值是个正则表达式，验证输入内容的有效性；
placeholder：在文本框或文本域中提供输入提示信息，当表单元素获得焦点时，提示信息自动消失；
required：验证某个表单元素的内容是否为空；
新增input元素类型：
tel：只能输入电话号码的文本框
email：email输入框，会自动检查，允许多个以逗号分隔的email
url：url地址输入框，必须包含访问协议的完整的url路径。会自动检测。
number：输入一个特定取值范围的数值的输入框，显示为一个微调控件，调节步长使用step属性，取值范围通过min、max属性设置
range：生成一个数字滑动条，使用可让用户输入特定范围的数值。min、max、step。
search：一个专门用于输入搜索关键字的文本框。
color：生成一个颜色选择器
date：生成一个日期选择器。
time：生成一个时间选择器。
datetime：生成一个utc日期和时间选择器
datetime-local：生成一个本地日期和时间选择器
week：生成星期选择器
month：生成月份选择器
新增表单元素：
datalist：辅助表单文本框的内容输入，用于生成一个隐藏的下拉菜单，包含的选项的生成方式使用<option>标记来产生，显示的文本是<option>的value属性值。需要跟文本框结合使用，通过将文本框的list属性值设置为datalist的id。
output：显示各种表单元素的内容或脚本执行结果，必须从属于某个表单。
新增客户端校验方式：
自动校验：required、pattern、min、max、step、input
显式检验：checkValidity
取消校验：为<form>元素设置novalidate和对提交按钮设置formnovalidate
自定义校验错误提示信息：setCustomValidity（String msg）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航