浅析html+css+javascript之间的关系与作用三者间的关系

浅析html+css+javascript之间的关系与作用
三者间的关系

一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。

html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。

用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关；

html介绍

html是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言（标记标签），总的来说，html使用标记标签来描述网页，本文就用标签来代替标记标签进行说明。

标签是指<html></html>，<div></div>。

标签是有语义的：标题用<h1>，表格展示用<table>，链接用<a>，无序排列用<ul>等等。

标签里可带有各类属性，最基本的就是class和id。class属性的作用是引用css样式；id的作用是配合javascript使用，具有唯一性。下面举几个例子说明

l 图片标签<img>的主要属性有src，alt。src是引用图片的网络地址（必要）；alt是对这张图片的描述，如果图片加载不成功，则会显示alt的文字。

l 超链接<a>的主要属性有href，target。href是指链接要跳转的网址（必要）；target是告诉浏览器点击这个链接后要以哪种形式找开窗口，target=”_blank”是指打开一个新窗口

若想了解更多关于html的资料，请点击这里。

css介绍

css的官方名字叫层叠样式表，它的出现是为了解决内容和表现分离的问题，一般存放在.css文件里。

使用css。

可在html的头元素<head>里书写，或者书写在CSS文件并在html里引用该文件。

css优先权。

多个css样式可集中在单个html标签里，出现这种情况时，一般按优先权划分

浏览器默认设置（最低）
外部样式表
内部样式表（写在html的<head>标签内部）
内联样式（写在html的标签里，即style属性）（最高）
css的语法。

css由两个主要部分组成，选择器，一条或多条声明。

选择器是指css样式的名字“.seletor”，名字前面要带上一点“.”。声明是由属性和值组成，给个例子“margin: 0 auto”，冒号前面是属性，后面是值，该例子是定义元素居中显示。

具体的属性和值可点击这里。

javascript介绍

javascript是脚本语言，它是连接前台（html）和后台服务器的桥梁，它是操纵html的能手，本文用js代替javascript进行说明。

平时听到原生js，js库，js框架，js插件等等，下面简单说明一下。

l 原生js，是指最基础的js，没有封装过，但因为各浏览器对js的支持不同，就导致用基础的js编程需要为不同的浏览器写兼容代码。

l Js库，js框架，是指集成一系列dom操作，API封装，界面UI封装的的库类，常见的有jQuery，extjs等等，这方面的定义比较难区分，暂不误导大家

l Js插件，就是集成了帮助程序员轻松完成功能的程序。Js插件用得比较多，网页制作上随处可见。如图片轮换功能，导航制作，上传图片等等。

至于js语法介绍，则太过于琐碎，详情请点击这里

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 8.0">
<TITLE></TITLE>
<!-- Row Highlight Javascript -->
 window.onload=function(){
 var tfrow = document.getElementById('tfhover').rows.length;
 var tbRow=[];
 for (var i=1;i<tfrow;i++) {
 tbRow[i]=document.getElementById('tfhover').rows[i];
 tbRow[i].onmouseover = function(){
 this.style.backgroundColor = '#f3f8aa';
 };
 tbRow[i].onmouseout = function() {
 this.style.backgroundColor = '#ffffff';
 };
 }
};
</HEAD>
<BODY>
    当前登录用户名：<TMPL_VAR name="name" />
    <ul>
        <li><a href="MySqlTest1.cgi?mod=netdisk&action=list">网盘</a></li>
        <li><a href="MySqlTest1.cgi?mod=student&action=list">学生管理</a></li>
        <li><a href="MySqlTest1.cgi?mod=teacher&action=list">教师管理</a></li>
    </ul>
<table>
<tr><td>年</td><td>制造商</td><td>型号</td><td>说明</td><td>价值</td></tr>
<tr><td>1997</td><td>Ford</td><td>E350</td><td>"ac</td><td> abs</td><td> moon"</td><td>3000.00</td></tr>
<tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition"""</td><td>""</td><td>4900.00</td></tr>
<tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition</td><td> Very Large"""</td><td>""</td><td>5000.00</td></tr>
<tr><td>1996</td><td>Jeep</td><td>Grand Cherokee</td><td>"MUST SELL!</td></tr>
<tr><td>air</td><td> moon roof</td><td> loaded"</td><td>4799.00</td></tr>
</table>



<style type="text/css">
table.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
table.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
</style>

<table id="Table1" class="tftable" border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>

<p><small>Created with the <a href="http://www.textfixer.com/html/html-table-generator.php" target="_blank">HTML Table Generator</a></small></p>



<p><small>Created with the <a href="http://www.textfixer.com/html/html-table-generator.php" target="_blank">HTML Table Generator</a></small></p>
</BODY>
</HTML>

浅析html+css+javascript之间的关系与作用 三者间的关系

猜你喜欢

浅析html+css+javascript之间的关系与作用三者间的关系