赞
踩
参考文献——《Web前端开发技术》 by 储久良
目录
1.3.1 HTML(Hypertext Markkup Language)
Tim Berners-Lee(蒂姆·伯纳斯·李)发明了世界上第一个网站
1、超文本起源于20世纪60年代的几个项目
2、Tim发明了一个全球网络资源唯一认证的系统:统一资源标识符(Uniform Resource Identifier,URI),这证明了超文本和因特网结合的可行性
3、为了让World Wide Web不被少数人所控制,Tim组织成立了World Wide Web Consortium,即W3C。HTML协议各个版本都出自W3C会议,且HTML规范是以“建议”的形式发布,并不强迫任何厂商或个人接受
1、易导航和图形化的界面
2、与平台无关性
3、分布式结构
4、动态性
5、交互性
HTTP(Hypertext Transfer Protocol):超文本传输协议
1、URL(Uniform Resource Locator):统一资源定位器或统一资源定位符,即网页地址
2、Web服务器
也称为网站,是由计算机软件和硬件组成的有机整体
3、超链接(Hyper Link)
从一个网页指向另一个目标的连接关系
新一代网站需要HTML、CSS、JavaScript、DOM、AJAX等组合技术,其中HTML、CSS、JavaScript三大技术称为“Web标准三剑客”
HTML是超文本标记语言,是Web页面的结构,使用标记来描述网页。
网页的内容包括标题、副标题、段落、无序列表、定义列表、表格、表单等
HTML是SGML(Standard Generalized Markup Language,标准通用标记语言)下的一个应用,也是一种标准规范
SGML是定义电子文档结构和描述其内容的国际标准语言,是所有电子文档标记语言的起源
<head>、<meta>、<title>、<link>等都是HTML的标记
2014年后为HTML5版本
1、CSS的作用
解决网页内容与表现分离的问题
2、CSS的发展历史
当前为CSS3版本
使用JavaScript可以开发交互式Web页面
1、JavaScript由来
JavaScript是基于对象和事件驱动并具有相对安全性的客户端脚本语言,常用来给HTML网页添加动态的功能
欧洲计算机制造商协会(European Computer Manufacturers Association,ECMA)以JavaScript为基础制定了ECMAScript标准
2、JavaScript的组成
(1)核心(ECMAScript)
(2)文档对象模型(Document Object Model,DOM)
(3)浏览器对象模型(Browser Object Model,BOM)
DOM是一种与浏览器、平台语言无关的接口,使得用户可以访问页面上其他的标准组件
DOM与JavaScript结合起来实现了Web网页的行为与结构的分离
1、DOM由来
为了定义访问和操作HTML文档的标准
2、HTML DOM Level
当前为DOM Level3版本
定义了JavaScript可以进行操作的浏览器的各个功能部件的接口,提供访问文档各个功能部件的途径以及操作方法
由于没有相关的BOM标准,每种浏览器都有自己的BOM实现的方法
AJAX(Asynchronous JavaScript and XML):也称为异步JavaScript和XML,它是多种技术的综合,打破了使用页面重载的惯例技术组合,可以部分更新网页内容
jQuery是一套跨浏览器的javaScript库,简化HTML与JavaScript之间的操作,是目前最受欢迎的JavaScript库
HTML文档由头部head和主体body两个部分组成。头部信息不显示在网页上,主体内容是网页要显示的信息
HTML文档以<html>标记开始,以</html>标记结束,每个HTML文档都应该有且只有一个html、head和body元素
<title>是开始标记,</title>是结束标记,两者之间的内容为显示在浏览器的标题栏上的信息
<body>是开始标记,</body>是结束标志。两者之间所包括的内容为网页上显示的信息
1、单标记
<标记名称>或<标记名称/>
2、双标记
第一个标记是开始标记(首标记),第二个标记是结束标记(尾标记)
<标记名称>内容</标记名称>
标记可以互相嵌套,但不能交叉
<标记名称 属性名1=”属性值1” 属性名2=”属性值2” … 属性名n=”属性值n”></标记名称>
<!--注释信息 -->
<comment>注释信息</comment>
1、在HTML代码书写时不区分大小写
2、回车符和空格在HTML页面显示时均不起作用。需要时可使用<br/>和 来实现换行和插入空格
(1)文档的拓展名为htm或html
(2)文档名称只能由英文字母、数字或下划线组成
(3)文档名称不能包含特殊符号
(4)文档名称区分大小写
(5)Web服务器主页一般命名为index.html或default.html
<body>向这里添加内容</body>
<br>或<br/>
内部链接:网站内部文件之间的链接。将URL设置为相对路径则为内部链接
外部链接:网站内的文件链接到站点内容外的文件。将URL设置为绝对路径则为外部链接
<a href=”url”>链接内容</a>
url指向要下载文件所在的相对路径或绝对路径
<img src=”URL” alt=”替代文本”>
如不设置图像的宽度和高度,图像的大小和原图一样
<img src=”URL” width=”value” height=”value”>
单位可以是像素也可以是百分比
<img src=”URL” border=”value” >
Value为边框的宽度,用数字表示,单位为像素
<marquee direction=”滚动方向” behavior=”滚动方式”>滚动内容</marquee>
1、HTML里面的CSS规则
(1)写在body中某个标记的属性部分
(2)写在head标记里面
2、写在单独的文件中,该文件称为CSS文件,文件名后缀为.css
1、标记选择器(元素选择器):直接使用HTML标记名称作为选择器
2、类选择器
3、id选择器
4、伪类选择器
5、CSS属性选择器
1、内联样式表(行内样式表)
2、内部样式表
3、外部样式表
1、CSS继承:子标记会继承父标记的所有样式风格,并且可以在父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式风格不会影响父标记。但并不是所有属性都会自动传给子元素
2、CSS层叠:即对同一内容设置了多个不同类型样式产生冲突时的处理,CSS规定如下优先级:行内样式>id样式>class样式>标记样式
DIV是分区或分节的意思
即图层在同一水平上有重叠的地方
即图层不在同一水平面上的“层叠”
首先要将position属性设置为absolute,然后利用z-index属性控制层叠关系
1、span标记的使用
2、div与span标记的区别
包括英寸、厘米、毫米、磅和pica(皮卡)
包括em、ex、px、%
1、背景颜色background-color属性
语法和上面的颜色color属性相同
2、背景图像background-image属性
3、背景图像重复background-repeat属性
4、背景附件background-attachment属性
fixed:表示在文字页面滚动时,背景附件固定不滚动
5、背景图像位置background-position属性
6、background复合属性
1、边框属性border-style属性
2、边框宽度border-width属性
3、边框颜色border-color属性
border-color:color
4、边框border复合属性
先将整个页面水平分为三个区域,再将中间区域分为两列或三列
·1、采用“表格+超链接”来设计
2、采用“无序列表+超链接”来设计
1、下拉导航菜单
2、横向二级导航菜单
1、语义特性
2、离线与存储特性
3、设备访问特性
4、多媒体特性
5、三维、图形与特效特性
6、性能与集成特性
7、连接特性
8、CSS3特性
1、摆脱对平台的依赖
2、实时更新
3、离线使用
4、代码更安全
5、跨平台
6、可以充分利用Native
对标题进行组合,可连续设置多个标题标记
1、常用的浏览器属性前缀
2、CSS3前缀解决方案
3、CSS样式重置方案
参考文献——《Web前端开发技术》 by 储久良
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。