网页设计三剑客(总结)

工欲善其事必先利其器，想从事网页设计（现在已延伸为前端工程师）那么精通它所需要的技术就是必然的。

网页设计的三剑客指的是：HTML、CSS、JavaScript，现在一一讲述如下：

1.HTML---网页的基本结构

如果把网页比作一个人的话，网页的基本结构就像是人所具有的身体一样，他有一些基本的构件，如：眼睛、鼻子、嘴巴、手、腿......。html就是用来创造网页"身体"的。

(1) html是hypertext markup language(超文本标记语言)的简写，严格来说，html不能算作一门语言。为了理解这门语言我们有必要了解它的历史。

标记语言最早应用于出版业，出版商印刷出版物时对印刷作品的排版是有严格要求的，而且出版物的作者、负责出版的编辑和印刷工之间需要沟通好字体的样式、大小，为了实现作者、编辑和印刷工之间对印刷物排版的沟通需要和提高工作效率，就在原稿的边缘加注一些符号来指示打印上的要求，这就是标记语言最早的应用。

通用标记语言(Generalized Markup Language,简称GML)是由IBM公司创建的。目的是将文件结构化为标准的格式，GML将这些描述标记为章节、重要小节和次重要小节（通过标题的级来区分）、段落、列表、表等。GML不必浪费精力在打印机字体规范、行距以及页面设计的要求上，从而为文档员提供了一些方便。可以看出通用标记语言是一种规范一种标准。(这和古代的八股文有异曲同工之妙，为了规范文章的结构,科举考试要求考生的文章必须按照固定的格式来写)。

超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示在网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果(W3C联盟就是解决web应用平台不兼容、标准化问题的组织)。

(2)html的特点：html文件是一个包含标记的文本文件；浏览器根据html的标记来显示页面；html文件必须具有htm或者html扩展名；可以使用文本编辑器来创建html文件。

(3)html文件主要由标签组成，标签又叫做html的元素。html的元素有很多，但是元素的组成却是一定的，就好像人的身体是由细胞构成的，细胞的种类有很多，但是每一种细胞都是由细胞膜、细胞质、细胞核组成的。

html元素主要由标记、元素名称、属性组成。标记有开始标记(也称“开放标签”)“<>”和结束标记(也称“闭合标签”)“</>”,用它们来界定网页中的各个单元；元素名称放在起始标记里面，不允许有空格；属性用来提高进一步的信息，由“属性名称="属性值" ”的格式给出。

具体的格式如下：<元素名称属性名1="属性值1" 属性名2="属性值2"......>元素体</元素名称>

注：有些元素没有结束标记，有些元素的结束标记可以省略。(关于标签是否需要闭合的讨论请待看笔者的另一篇博客)。

(4)html元素分为“块级元素(block level element)”、“行级元素( inline element，也称“内联元素”)”和“可变元素”。

块级元素的特点：从左到右撑满页面，触碰到页面边缘时会自动换行(即，块级元素在浏览器中显示时，通常以新的一行开始或者结束)。如<div>、<h1>、<p>、 <ul>、<li>、<table>、<dl>、<dt>标签。

行级元素（内联元素）的特点：能在同一行内显示，不会改变html的文档结构(即，行级元素在浏览器中显示时，通常不会以新的一行开始或者结束）。如：<span>、<b>、<td>、<a>、<img>、<strong>、<input>、<a>标签。

可变元素：根据上下文来确定是块级元素还是行级元素。如：<button>、<script>。

块级元素和行级元素的区别：行级元素的宽和高是由内容的多少来确定的，也就是行级元素设置width和height无效，但可以设置line-height；行级元素转换为块级元素：display:block，转换之后就可以设置行级元素的宽和高了；块级元素可以包含行级元素，但行级元素不可以包含行级元素。

注：块级元素、行级元素和可变元素的进一步详细分析请待看笔者的另一篇博客。

要学习更多标签元素及其属性见点击打开链接。

2.CSS---网页的外观

一个人如果只有身体显然是不够的，还必须穿不同的衣服，佩戴各色的装饰品。CSS就是用来创造网页外观的，即用来对html中的元素进行精雕细刻的修饰，如字体大小、文本的颜色和背景、元素之间的距离等等，CSS所体现的就是网页的“外在美”。

CSS是cascading style sheets(层叠样式表)的缩写，它是一种使网页表现和内容分离的标记性语言。使用CSS可以使网页更加美观，它控制的是网页的外观表现。

CSS的特点：CSS是一种标记语言，无需编译，直接由浏览器执行；CSS文件的后缀名必须是css；通过简单的更改CSS文件就可以改变网页的整体表现形式，从而减少工作量。

CSS的基本语法格式：选择器{属性1:属性值a 属性值b 属性值c;属性2:属性值;}

选择器的种类可以分为3种：标签名选择器、类选择器、id选择器。

标签选择器：每一种html标签都可以作为标签选择器，用来说明该标签的CSS样式。

类选择器：先自己定义一个类选择器，定义格式：.类名{属性:属性值}，然后在html文件中通过元素的class="类名"属性的方式来引用。类选择器适用于所有的html标签，一个类选择器可以在页面中多次被使用。

id选择器：先自己定义一个id选择器，定义格式：#id名{属性:属性值}，然后在html文件中通过元素的id="id名"的方式来引用。每个id在页面上只能使用一次，具有唯一性。

除了以上三种基本选择器以外，还有一些扩展选择器，如：通用选择器、多元素的组合选择器、属性选择器、伪元素和伪类选择器。由于种类比较多而且比较重要，所以单独详细写在另一篇博客中。

常用CSS属性列表：

取值	描述
color	设置文字或元素的颜色
background-color	设置背景颜色
bancground-image	设置背景图像
font-family	设置字体
font-size	设置文字大小
list	设置列表的样式
cursor	设置鼠标的样式
boeder	设置边框的样式
padding	设置元素的内边距
margin	设置元素的外边距

引用CSS样式的方法有：内联样式、嵌入样式、外部样式、导入样式。

内联样式表：通过style属性直接套进html中去，例如：

<h2 style="color:red">text</h1>

这会使指定的标题变成红色。

嵌入样式表：只应用于当前页面，将所有的样式集中定义在一起放在样式标签<style>中，<style>标签放在<head>中。

外部样式表：这种方式实现了html和css代码的完全分离。将所有的样式定义保存成css文件，网页要使用该文件时，必须在<head>标签中使用<link>标签，例如：

<html>
<head>
<title>外部样式表</title>
<link herf="style.css"  rel="stylesheet" type="text/css"/>
</head>
......

导入样式表：当浏览器不能很好的支持CSS时，使用导入样式表则浏览器会对CSS部分不做处理，这样html虽然不带任何样式，但是能正常显示内容。使用格式：

<html>
<head>
<title>导入样式表</title>
<style>
<!--
@import url(style.css)
-->
</style>
</head>
...

这四种样式表的优先级：就近原则（谁离标签近，谁的优先级就高）。

说到CSS就不得不提盒子模型，盒子模型是网页布局的基石。

这个盒子的属性由四部分组成：边框border、外边距margin、内边距padding、盒子中的内容content。

盒子有四个方向：上top、右right、下bottom、左left。

设置盒子属性值的方式有两种：分别设置和同时设置(分别设置比较简单，这里介绍一下同时设置)。

同时设置：当一个属性的属性值有四个值时，则四个值分别是：top-->right-->bottom-->left方向的值；当有三个属性值时，则三个值分别是：top-->left、right-->bottom方向的值（左右方向的值相同）；当有两个属性值时，则两个值分别是：top、bottom-->left、right方向的值（上下、左右方向的值分别相同）；当有一个属性值时，则四个方向的属性值是相同的。

盒子的3D模型，从上往下看盒子分为5层，上面的层盖住了下面的层，第一次~第五次分别是：border、content+padding、background-image(背景图像)、background-color(背景颜色)、margin。

CSS的定位机制有三种：标准文档流、浮动布局、绝对定位。其中浮动布局设计的初衷仅仅是实现文字环绕图片的效果。其中涉及到的浮动属性和清除浮动的方法将在另一篇博客中专门研究。

3.JavaScript---网页的特效

一个人如果只是穿戴好了精美的服饰，那他的身材和服饰起到作用仅仅是给人留下表面印象而已。他真正的灵魂应该是他的言谈举止、内涵、修养和思想，这些东西是别人通过接触和交互才会了解的，这也是真正吸引他人的魅力所在。JavaScript在网页中所起到的作用就是增加网页的“内在美”，提高交互体验。

JavaScript是一种由 Netscape的livescript技术发展而来的脚步语言，主要是为了解决服务器端处理速度慢而推出的语言。JavaScript可以被嵌入到html文件中显示特定的效果。JavaScript可以做到不使用第三方网络媒体而回应使用者的需求事件。

JavaScript的主要特定：使网页增加互动性；能够使有规律、重复的html文本简化，减少下载时间；能及时响应用户的操作，对提交的表达做及时的检查，无需浪费时间交由CGI验证。

JavaScript共有7类运算符：赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算符、位操作运算符、字符串运算符。

四类表达式：赋值表达式、算术表达式、布尔表达式、字符串表达式。

基本编程语句：赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语言、continue循环中断语句。

对象：例如要设置网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，document.bgcolor="blue"表示设置的背景颜色为蓝色。

事件：用户与网页交互时产生的操作称为事件。绝大部分的事件是由用户的动作所引发，；例如，用户用鼠标点击按钮，就产生onclick事件，若鼠标在连接上移动，就产生onmouseover事件等。在JavaScript中事件往往与事件处理程序配套使用。

关于JavaScript更加详细的研究学习请待见小编的另一篇博客。

网页设计三剑客(总结)相关推荐

中小企业信息化--网页设计模拟题1
一填空题 1.网页按其表现形式可分为和两种. 静态网页. 动态网页 2.简单地说, 就是一个网站的网址. URL 3.URL代表的是 .它的功能是提供一种在Internet上查找任何 ...
《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——1.3 常用网页设计软件...
本节书摘来自异步社区<Dreamweaver CS6完美网页制作--基础.实例与技巧从入门到精通>一书中的第1章,第1.3节,作者:何新起更多章节内容可以访问云栖社区"异步社区 ...
dw网页设计期末设计一个网页_制作网站与设计网页可以用什么软件？
网站制作确实是项技术活,要不然怎么一个前端设计师工资都可以到6-7K呢,早在读书时代稍有爱好网页设计时就听说过网页三剑客. 网页三剑客网页三剑客,是一套强大的网页编辑工具,最初是由Macromedi ...
php网页设计设计心得体会,网页设计心得体会范文
范文参考网最近发表了一篇名为<网页设计心得体会范文>的范文,好的范文应该跟大家分享,重新编辑了一下发到范文参考网. 一.网站规划本工作室主要用来做个人网站,主题是介绍自我,让更多的朋友认 ...
初学者学习网页设计用什么软件最好？
初学者学习网页设计用什么软件最好?想学网页设计,什么软件适合初学者,功能又挺全的.功能很全很重要的. 最基本的是Dreamweaver,fireworks,flash简称网页三剑客,还有图片处理大师P ...
好程序员web前端教程分享网页设计需要学那些东西？
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
【网页设计】第 1 课 - 了解网页设计
欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行.动静不失其时,其道光明. 目录 1.缘起 2.了解网页设计 2.1.网页设计 2.2.网站结构 2.3.网站 ...
网页设计用什么软件最好
初学者学习网页设计用什么软件最好?想学网页设计,什么软件适合初学者,功能又挺全的.功能很全很重要的. 最基本的是Dreamweaver,fireworks,flash简称网页三剑客,还有图片处理大师P ...
html语言的基本发展历程,网页设计与制作发展史
网页设计简史 HTML5学堂 - 刘国利 - 独行冰海:郑重声明,本文来源于优设,原文于2014年12月书写.之所以在HTML5中提到网页设计简史,其实在于网页设计与前端开发有着千丝万缕的联系(而今的 ...

网页设计三剑客(总结)

网页设计三剑客(总结)相关推荐

最新文章

热门文章