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

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值