html 入门介绍

分类 html

HTML 入门介绍


一、网页介绍

现今主要的编程的技术框架:

1.前端:htmlcssjavascript

2.后台:phpjava,c#(.net)

3.后端(数据库):mysql,mssql,oracle

上面上个方向的配合,就构成了今年的web开发。


二、网页的运行原理

网页访问基于浏览器,目前市面上主流浏览器包括 IE,火狐(firefox),谷歌浏览器(Chrome),360浏览器,qq浏览器等。

目前很多网站都声明不在支持IE6 IE7,所以在学习HTML的时候最好还是选择火狐或者谷歌浏览器。


网页基本结构

一个网页都是由若干个“标签”构成,标签页通常被称为元素。

对于一个网页,有以下几个基本标签作为整体的网页框架结构:

<html>
    <head>
    这个head范围是网页的一些附属信息设置部分,或其他非可视的代码部分。很少的几个固定的内容。
    <title>这里可以写网页标题文字</title>
    </head>
<body>
    这里就是网页中的主要“可见内容”。
</body>
</html>


注意上面的两个细节:

    1.html解释:这其实就是所谓的“超文本标记语言”(HyperText Markup Language),其后缀是html或htm

    2.在html文件中,有效代码都是由标签构成,其中有些代码是“无效”的,被成为“注释”,注释不被认为是有效的该语言的内容,但其目的主要是给人看的。html的注释格式如下:

      <!-- 这里是可以任意写的注释内容,主要给人看,浏览器不会解析里面的内容 -->

      良好的解释是在编码中一个很好的习惯。


四.标签的基本构成

一个标签通常有如下结构:

<标签名 属性名1=”值1” 属性名2=”值2” …. > 内容部分

说明:

  1, 标签名都是一个“单词”;

  2, html语言中有大约几十个标签,我们只学到其中的常用的一部分。

  3, 每个标签(元素)通常有其自身的属性,也可以有多个;有些标签是没有属性的。

  4, 有少数几个属性是没有值的,则其写法是直接写属性名;

  5, 有少数几个标签没有“内容部分”,此时也就是没有标签的结束部分(),这种标签通常称为“单标签”,

  6, 内容部分还可以是其他标签或纯文字等。


五.常用的字体元素

strong :用于表示其中的文字是“重要内容”(强调部分),其外观表现其实跟b标签一样(粗体)。

b :使其中的文字表现为粗体。

i :使其中的文字表现为斜体。

u :使其中的文字表现为具有下划线。

sub :使其中的文字表现为“下标”形式,比如:CO2

sup :使其中的文字表现为“上标形式”,92=81

font :用于设置其中的文字的大小,颜色和字体,其中大小有7个层级,1-7,1最小,7最大。

            属性:color(颜色), size(大小,1-7),face(字体,如:宋体,黑体,隶书,仿宋等等)。

address :用于标识其中的文字是一个“地址信息”。

big :使其中的文字“更大一号”。

small:使其中的文字“更小一号”。


六.Html设计思想

html是用于将我们要展示的内容以一定的形式在网页上表现出来并让“他人”理解的一种标记语言。则其设计思想可以归纳为以下两条:

   表形:指通常一个标签在网页上具有一定的外观表现——这就是其表形功能。

   表意:指通常一个标签在其代码结构中具有一定的含义——这就是表意功能。


七.颜色介绍

常用颜色格式:

单词名:red,blue,yellow,green,white,black,…..

  16进制数字:#000000, #FF0000, #00FF00,

  10进制数字:rgb(2, 25, 200), rgb(0,0, 255), rgb(255, 0, 100)

  科学家发现:只有3种基色:红,绿,蓝,其他各种颜色都是这3种颜色的某种比例的搭配而成。

  红色成分:将红色分成256个等级(0-255),表示不同的程度的红,最红255,最不红就是0(无红成分)

  绿色成分:将绿色分成256个等级(0-255),表示不同的程度的绿,最绿255,最不绿就是0(无绿成分)

  蓝色成分:将蓝色分成256个等级(0-255),表示不同的程度的蓝,最蓝255,最不蓝就是0(无蓝成分)

  则纯红色为:255个红+0个绿+0个蓝,写出数字就是:rgb(255,0,0);

  纯绿色:rgb(0,255,0)

  纯蓝色:rgb(0,0, 255)

  黄色:rgb(255,255,0)

  将上述10进制数字化的rgb格式的颜色表示成为16进制,就是这个格式:

  纯红色为:#FF0000,

  纯绿色:#00FF00

  纯蓝色:#0000FF

  黄色:#FFFF00


八.排版元素介绍

p :用于将一些文字作为一个段落表现(呈现)出来。

    属性:align(设置段落文字的水平对其方式:left,center,right)

 h1~h6 :其实是6个标签,从h1到h6,分别代表6种不同大小的“标题文字”,h1最大,h6最小

    属性:align,同p标签。

br :使内容在此处换行表现

hr :表现为一根横线,这是一个单标签。

    属性:color:设置线条颜色,color=”red”

                      size:设置线条粗细: size=”3”,单位是像素(px),以后大多数“长度单位”基本都是像素。

                     width:设置线条宽度: width=”500”,单位px。默认的宽度是全宽(100%)

                     noshade:这是一个没有值的属性

        举例:

<hr  color=”red” size=”3”  width=”500”  noshade >


pre :预定义标签——该标签内部本来无效的一些字符会变得有效,就类似所谓的“所见即所得”。大体上就是,本来,Html会忽略代码中的换行符,空格,和tab符,但如果在pre标签中,则会“原封不动”显示出来。pre标签通常用于显示“编程代码”的内容。

blockquote:用于表示“引用”性质的内容,即如果一个文章(网页)中,需要引用别人的话或别处的资料文字,则可以使用此标签来显示。

以下两个标签最没有用处但用的最多:

            div :此标签只是用于表明是一个“区域范围”,其中的内容会“独立成行”,也就是html常说的合资模型。

            span :此标签也只是用于表明是一个“区域范围”,但其中的内容会连续行内显示。


九.列表元素

无序列表:使用ul 和 li两个标签配合以达到无序列表的表现和含义。形式如下:

<ul>
    <li>第 1 项内容</li>
    <li>第 2 项内容</li>
    <li>第 3 项内容</li>
    。。。。。。。
</ul>

注意:

        1,ul这个标签的“内容部分”只能是li。li里才放置作为列表的每一项的内容;

        2,ul的属性有: type=”disc  ||  circle  ||  square”,其中disc是默认值,用于设定列表项的前导符号,分别是:小圆点,小圆圈,矩形块


有序列表:ol li :使用ol 和 li两个标签配合以达到有序列表的表现和含义。形式如下:

<ol>
    <li>第 1 项内容</li>
    <li>第 2 项内容</li>
    <li>第 3 项内容</li>
    。。。。。。。
</ol>

注意:

        1,ol这个标签的“内容部分”只能是li。li里才放置作为列表的每一项的内容;

        2,ol的属性有: 

                a)type=”1  ||  A  ||  a  ||  I   ||  i ”,其中1是默认值,用于设定列表项的前导序号,分别是:阿拉伯数字,大写英文字母,小写英文字母,大写罗马数字,小写罗马数字

                b)start = “一个数字”,表示序号从哪个开始,不管是哪个符号,这里都是数字。


定义列表:使用dl dt dd来共同表现若干项“名词解释”这类的网页内容。

dl是外层容器,用于表示这是个定义列表(类似ol和ul)

dt:用于表表示一个“词条”

dd用于表示对应词条的一个解释内容——这里所谓对应其实并没有决定的界限,无非是一个dt一个dd挨着写。

举例:

<dl>
    <dt>人</dt>
    <dd>人是一种无法精确定义的高等生物</dd>
        <dt>男人</dt>
    <dd>男人是高等生物</dd>
        <dt>女人</dt>
    <dd>女人无法精确定义</dd>
        <dt>人</dt>
    <dd>该词条根据相关法律法规,不予显示。。。</dd>
</dl>


十.字符编码原理介绍

所有的符号(字符,字母,中文,等等),其实本质上在计算机内部都只是是“数字代号”——我们看到的是这个数字代号多代表的“图形”。

我们计算机最初的时候,只规定了127个符号——ascii字符——ASCII编码,后来,计算机传播到别的国家,各个国家都想用自己国家的文字来操作计算机,于是对自己国家的文字进行同样原理的“字符编号”,比如:

  中——5000

  国——5001

中国的编码通常有:gb2312,gbk。日本国家也做了一个他们国家文字的编号,比如:

  松——5000

  下——5001

每个国家/地区都有自己的字符编码标准(系统),他们之间相互并不“认识”,这就是为什么会产生乱码的原因:

  1.一个文件用什么编码系统保存其中写入的文字(字符,符号),是由该编辑器保存的时候决定的。

  2.一个网页用什么编码来显示,是由网页中的一个写在head中的meta标签来决定的——

       3.上述代码表示让浏览器使用utf-8这种编码来显示网页,如果我们文件的实际保存编码和我们代码中的声明编码不一致,就很可能产生乱码。

总结:我们大陆环境下编程通常应用的几种编码情形:

  1.文件为ANSI编码,则meta可以声明为gb2312或gbk。

  2.文件为utf-8编码,则meta应该声明为utf-8。

  3.ansi其实是一个代表“本机操作系统所使用的本地编码”的含义。