HTML 入门介绍
一、网页介绍
现今主要的编程的技术框架:
1.前端:html,css,javascript
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其实是一个代表“本机操作系统所使用的本地编码”的含义。