文档章节

HTML(超文本标记语言)之【动态网页】

ayesd
 ayesd
发布于 2014/07/17 09:26
字数 1096
阅读 78
收藏 0

HTML前面已经介绍,所以CSS和JavaScript就是我们今天的主要内容。

    CSS全称是级联样式表(Cascading Style Sheets)。解决内容与表现分离的问题

    样式解决了一个普遍的问题
    HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
    由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
    为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。所有的主流浏览器均支持层叠样式表。
    层叠次序
    当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
    一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  •     浏览器缺省设置

  •     外部样式表

  •     内部样式表(位于 <head> 标签内部)

  •     内联样式(在 HTML 元素内部)

    因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

    另外一个关于CSS的重要内容就是它的盒模型。可以参考:http://www.chinaz.com/design/2010/1229/151993.shtml

    JavaScript是浏览器支持的脚本语言的一种,其他还有VBScript。也是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,是一种动态、弱类型、基于原型的语言,内置支持类。一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。因此,它可以操作DOM和BOM,提供人性化的交互页面功能。

    JavaScript可以放置在html中的<head>、<body>标签之中,执行顺序,放到浏览器一节中去介绍。

    单纯的HTML要想变得美观除非都是图片呈现,否则很难达到很好的效果,但是有CSS就可以创造出很多让人惊艳的特效!而JavaScript则使得交互更加人性化,极大的丰富了网页的呈现形式,具体的学习请参考《JavaScript权威指南》、《JavaScript语言精粹》、《CSS权威指南》、《CSS禅意花园》等

    CSS和JavaScript基本每个内容都可以写很厚很厚的一本书,但是,值得注意的是,浏览器的兼容性问题,而导致这一问题出现的主要原因是,浏览器对W3C标准的支持度不一致!

    关于兼容性的问题,基本的解决方法通常是查阅资料,最好使用各个浏览器都支持的CSS标准和JavaScript标准,或者采用比较流行的一些框架,框架的介绍可以问下度娘,基本都可以问出很多很多,所以此处不再详述。

    最后的问题就是关于网页特效的问题,不过这个问题主要归功于设计师,是由于他们的设计才使得交互的人性化,学习研究HTML、CSS和JavaScript仅仅是为了以简便高效的方式去实现设计师的需求,设计的问题,我也不是很懂,因此还是去问度娘吧,很多以此为主题的网站、论坛等资料。


© 著作权归作者所有

ayesd
粉丝 7
博文 19
码字总数 30025
作品 0
深圳
高级程序员
私信 提问
前端入门教程(二)Web前端与HTML简介

一 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。 例如一...

马一特
2018/06/10
0
0
网站开发流程以及HTML5简介(四)

三, 什么是HTML HTML语言又叫做超文本标记语言,是标准通用标记语言的升级提升版。超文本标记语言包括诸如音频,视频,文本等等数据,让在浏览器呈现出的网页内容更加丰富,形式更加多样。总...

博为峰教研组
2016/11/24
5
0
HTML--入门到精通实用最全

一:认识HTML: 网页一般又称HTML(Hyper Text Mark-up Language )文件,即超文本标记语言( 用于描述网页文档的一种标记语言。)。是一种在www上传输、能被浏览器认识和翻译成页面并显示出...

我是宁采臣
2016/12/07
0
0
在HTML代码中要如何插入空格?

超文本标记语言(HTML)会自动忽略空格。平常在编写代码的时候,用空格键、Tab键以及回车键产生的空格,都会被HTML自动忽略。那么我们该用什么方法来实现HTML的空格效果呢?有专门的空格代码...

inw3cschool
2017/05/03
0
0
JavaScript & DOM 学习笔记(一)

先解释几个名词: 超文本:是一种用户界面范式,用以显示文本及与文本相关的内容。现时超文本普遍以电子文档的方式存在,其中的文字包含有可以链接到其他字段或者文档的超文本链接,允许从当...

pradosoul
2015/12/08
25
0

没有更多内容

加载失败,请刷新页面

加载更多

360常用小工具分享 独立版 360驱动网卡版

有些朋友为了修复断网或者修复LSP,都会选择去下载360,用完再删除有些麻烦。所以自己收集了18个实用小工具独立版本方便坛友使用。只做分享,不喜勿喷。 360驱动网卡版:链接: https://pan.b...

xiaogg
刚刚
0
0
批量删除表中某字段

select * from information_schema.columns where table_schema='erp-zyjsgx-v2' and column_name='manageflag'; alter table jz_xiangmudj drop column manageflag;......

glen_xu
2分钟前
1
0
JavaScript面试题总结系列(八)

8. JavaScript - this对象 this对象 this总是指向函数的直接调用者(而非间接调用者) 如果有new关键字,this指向new出来的那个对象 在事件中,this指向触发这个事件的对象,特殊的是,IE中的...

张森ZS
5分钟前
0
0
Apache Camel Spring Boot

Camel应用初始化 Apache Camel 采用的是组件化的设计思想,通过Camel Component对接第三方的应用,Camel核心模块会扫描classpath 加载这些Camel Component。 Camel应用在启动的过程中,需要将...

WillemJiang
6分钟前
2
0
数据管理必看!Kendo UI for jQuery过滤器状态保持

Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue......

FILA6666
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部