您当前的位置:首页 > 前端开发

快速建站-系列入门教程(2)

时间:2012-10-01  来源:零基础编程入门教程网|快速学会网站建设【asp.net容易】  作者:Lynn  点击:

摘要:随着信息化的不断发展,网络成为了人们生活的一步分,网络营销、网络赚我已经在了21世纪主要的网络营销方式,90后怎么学会网络赚钱呢,首先得学会快速建站,对于零基础的入门者,我特意编写快速建站系统入门教程来帮助大家使用网站建站系统CMS-帝国CMS。

支持3lshow.com——asp.net入门教程,asp.net视频教程,asp.net实例教程【asp.net教程网】

    快速建站-系列入门教程——系列入门基础课程之二:HTML、Javascript与CSS

    一、快速建站入门教程名词解释

    1、HTML:说明白点主是我们浏览器能识别并有以文字、图片、锚(连接)、音频、视频形式呈现给我们看的前端代码。

    2、CSS:控制HTML在浏览器显示与布局的控制器(层叠样式表单)。

    3、Javascript:简单点说就是让浏览器里的网页对象产生动作的客户端脚本语言。

    二、今日重点:HTML常用标签一及其CSS属性

    1、DIV:<div> 可定义文档中的分区或节(division/section)。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。 看不懂没关系,关键要晓得它是怎么用的,简单点说,<div></div>标签就是HTML容器,就是在网页里用来放内容的东西。比发我们写一个简单的<div style="border:1px solid red;height:25px;width:150px;"></div>,把这段代码复制到一个新建的文本文档里面,保存之,完了将这个文本文档的后缀名改成.html。双击运行,我们可以看到如下效果:

    未命名.jpg

    网页中出现了一个红色边框为1像素,高25像素,宽150像素的块容器了。记得一定要动手输入,自己一人个字母的输入,只有这样才能体验到编程的快乐。如果你觉得简单,那你就错了,真正牛逼的前端开发人员就是用记事本,自己输入代码的,好吧,我们来一个我们在编程中常用到的方法,水平居中,我们怎么将上面的那个div在浏览器里居中呢?写到这里,我不得得先计一下THML文档的一般格式了,这很重要,一定要记住,对于一个学前端开发的人来讲,如果这一点不记住,怎么也成不了高级工程师,请看

    <!--注释-->看到这里东东,左边<!--,右边-->任何以这两个东西,开头结尾的块,就是HTML注释,就是用来告诉代码阅读者提示解释的,对浏览器是没有作用的,浏览遇到这样的块时,是不执行的。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>快速建站-系列入门教程(1)</title>
    <meta name="keywords" content="快速建站,快速网站建设,网赚建站系统CMS" />
    <meta name="description" content="快速建站-系列入门教程(1)" />
    <script></script>
    <link href="/skin/default/css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    </body>
    </html>

    第一行:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    这是申请HTML文本类型,告诉浏览器你的HTML指定了 HTML 文档遵循的文档类型定义(DTD)。这个很生重,如果不写这个,可能网页就会变形,记得每次网页的第一行为这个就行了,不要去死记,我们用dreamweaver创建一个新的网页地,会自动生成这个一般格式,第一行就是这东东。

    第二行和网页最后一行,就是一个标准的封闭的<html></html>标签,<html xmlns="http://www.w3.org/1999/xhtml">这个就是申明一个名称空间,不要去理会太多了。

    第三行和第十行,就是一个<head></head>封闭标签,<head> 标签用于定义网页文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。如:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />这是定义页面的编码为gb2312中文编码(编码有iso,gb2312,utf-8等)。<title>快速建站-系列入门教程(1)</title>定将网页的标题,也就是显示在浏览器最左上角的标题。<meta name="keywords" content="快速建站,快速网站建设,网赚建站系统CMS" />用来定义这个网页的关键字,一个页面可以定义多人关键字,他们用英文的,逗号分开。<meta name="description" content="快速建站-系列入门教程(1)" />用来描述这个网页的概述;<script></script>用来编写javascript脚本语言执行特殊的动作。<link href="/skin/default/css/style.css" rel="stylesheet" type="text/css" />用来引入相应的CSS文档,也可以用<style></style>的形式,将样式文件直接写在<style>标签内面。

    以上说明,只要记住一点:这只是一个标准的格式,用DW可以直接自动生成,它的每个节点是用来干什么的记住即可。可以根据实际应用去修改里面的值即可。

    我们接着来实现上面说的居中效果,看代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>快速建站-系列入门教程(1)</title>
    <meta name="keywords" content="快速建站,快速网站建设,网赚建站系统CMS" />
    <meta name="description" content="快速建站-系列入门教程(1)" />
    <meta name="baidu-site-verification" content="w94oSxWSQNdyp7Lc" />
    <link href="/skin/default/css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div style="border:1px solid red;height:25px;width:1004px;margin:50px auto;">fdsfdsf</div>
    </body>
    </html>

    运行上面的页面,即可得到效果:

    222.jpg

    红色块居中了,呵,就在原来的代码里面加了一个margin:50px auto;即可。margin是边距的意思,就是他相对于自己上面的标签的边距是多少,margin:上边距 右边距 下边距 左边距;如margin:5px 3px 5px 3px;就是说它的上面和下面空5个像素,左边和右边空3个像素。

    今天先讲到这里,明天我们接着讲下一个标签。

    三、特别注意:

    1、任何HTML标签,都要有开头与结尾,为了网页的快速与流畅和SEO效果,千万不要写不封闭的HTML标签,标签正确的书写方法

    a、<*> </*> ,其中*代表标签名称,这样的代表标签有<div></div> ,<p></p> ,<span></span>,<ul><li><li></ul>

    b、<* ^^^^="$$$" /> ,其中* 代表标签名,^^^^代表标签的属性,$$$代表标签属性值,这样的代表标签有 <img scr="..."  /> <br />等。

    快速建站-系列入门教程其它文章:

    快速建站-系列入门教程(1)

上一篇:快速建站-系列入门教程(1)    下一篇:javascript入门教程|JS入门教程【视频|手把手】