HTML

html介绍

html:超文本标记语言 ( HyperText Markup Language )

 

html其实主要是为了将文件(文档)的内容以一定的形式和含义表现出来,这就是html的设计思想:

1,  表形: 以一定的外形外观表现出来。

2,  表意: 规定一定的含义让人(和电脑)能够识别出来。

html的一般形式:

         html是由一个一个的标签所构成的,标签之间永远都是相互嵌套。

         一个标签的一般形式:

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

         说明:

1,  属性可以有若干个,每个标签的属性不太一样。当然属性也可以没有。

2,  属性实际上是用来给标签做进一步的设定用的。

3,  有少数标签没有内容部分,则此时标签的后半部分也不需要——被称为“单标签”。

4,  有少数属性没有值,可直接写属性名,但按照规范建议写上属性值,此时属性名即为属性值。

 

一个网页的基本结构性标签如下:

<html >

         <head>

                   <title >这是网页标题</title>

         </head>

         <body>

                   ……(网页的主要内容都在这里)

         </body>

</html>

 

字体元素

strong: 强调字体: <strong > 文字</strong>

b                粗体字体

i                 斜体字体

u                下划线字体

sub            下标字体

sup            上标字体

font  :  用于设定文字颜色,大小和具体字体的标签,其格式为:

             <font color=”某颜色” size=“某大小”face=”字体名字” > 内容文字 </font>

address:  设定地址信息文字

big    :让文字“大一号”——相对来说的,相当于当前版面中的文字大小。

small         :让文字“小一号”

 

要学会常常查手册《HTML4 参考手册.chm》

 

排版元素:

h1, h2, h3, h4, h5, h6: 这6个标签都表示“标题”,h1是最大的标题,h6最小。

hr:在网页上显示一条横线,其更多的属性使用如下:

         <hr  color=”颜色值”  width=”线长”  size=”线高(线宽)”  noshade=“noshade” >

         noshade:设定该线没有阴影(即如果没有该属性,就会有阴影)。

p: 段落标签,用来表示一个段落,其中的文字会连续出现,每个段落都有其自身的前后空隙(间隙)

br: 换行。——在html中,如果没有自身的换行特性,则需要使用br来换行。

pre: 预格式化文本文字,其中的换行符(不是br标签),空格,tab符等都能够原样输出。——通常用于在网页上显示程序内容

blockquote:引用标签,表示其中的内容是引用别的网站内容或别人的内容。

 

以下两个标签可以认为是最没用的标签,但以后会用的最多。

最没用:没有特定的外形,没有特定的含义,基本上,他们只表示一个原始含义:就是一个范围。

div:  表示一个“自成一行”的范围区域

span:表示一个简单的文字范围区域——通常只用于文字。

 

颜色介绍

color=”red”

color=”#FF0000”

color=”rgb(255,0,0)”

世界只有3种颜色,所有其他颜色都是由这3种颜色 以一定的比例关系混合而成 。

我们可以把以下3种基色,每种颜色的深浅程度分成256份,分别用0-255来表示。

红:red :

绿: green:

蓝:blue:

我们如果用100个红,150个绿,200个蓝,则其颜色为: rgb(100, 150, 200)

常见颜色:

红:rgb(255,0,0)

绿:rgb(0,255,0)

蓝:rgb(0,0.255)

黄:rgb(255,255,0)

黑:rgb(0,0,0)

白:rgb(255,255,255)

 

上述数字都是10进制来说的,如果将上述数字写成16进制,则他们分别是:00-FF(对应0-255),则可以写成另一种形式:

         color=”#红绿蓝”

 

列表标签(元素)

无序列表:由ul 和 li 共同构成,其基本格式为:

<ul type=”disc  //  square  //  circle”>

         <li>第1 项</li>

         <li>第 2 项</li>

         <li>第 3 项</li>

         <li>第 4 项</li>

</ul>

type=”disc  //  square  //  circle”: 分别表示该列表的前导符是原点,方块,圆圈。

 

有序列表:由ol 和 li 共同构成,其基本格式为:

<ol type=” 1  //  A  //  a  //  I   //   i  ”   start=”开始序号”>

         <li>第1 项</li>

         <li>第 2 项</li>

         <li>第 3 项</li>

         <li>第 4 项</li>

</ol>

type=” 1  //  A  //  a  //  I   //   i  ”: 分别表示该列表的前导符是数字,大写字母,小写字母, 大写罗马数字, 小写罗马数字。

start=”开始序号”:设定列表从哪个位置开始排(即起始位置)。不管用什么符号,这里都只用数字。

 

定义列表:由dl,dt,dd共同构成的用于表示类型“字典词条解释”那种界面效果,其基本格式为:

dl其实是 definition list   dt是 definition title    dd是 definition  description

<dl>

         <dt>词条或标题1</dt>

         <dd>对应解释/内容/描述</dd>

 

         <dt>词条或标题2</dt>

         <dd>对应解释/内容/描述</dd>

 

         <dt>词条或标题3</dt>

         <dd>对应解释/内容/描述</dd>

</dl>

 

常见快捷键:

ctrl + c :  复制

ctrl + v:粘贴

ctrl + s:保存

ctrl + z:撤销

ctrl + y:恢复

ctrl + x:剪切

ctrl + f: 查找

ctrl + h: 替换

双击一个单词可以选中该单词。

 

a标签

a就是链接标签,使用形式:

<a href=”链接地址” target=”在哪里打开” >文字内容</a>

target=”在哪里打开”:用于指定该链接会在哪个窗口里打开,通常,有以下几个值可用:

         _blank:  新建窗口

         _self: “本窗口”,即当前窗口自身,现在网页通常都是这样的,属于默认值。

         _top: 在“最上层窗口”——后面学。

         _parent: 在“父级窗口”——后面学。

         自定义窗口名:我们可以在某些标签或技术中自己定义窗口名字,并指定在其中打开。

 

链接地址:通常会使用url来称呼。

 

相对地址:相对于当前的网页文件所在的位置来说的,通过地址上的信息不能明确确定其文件位置的,通常就是相对地址。

         相对路径的几个特殊符号:

                   ./   :  代表“本地”(当前位置),可以省略。

                   ../   :  代表上一级路径(位置)

         举例:<a href=”abc.html” >xxx</a>

                   <a href=”./d1/abc.html” >xxx</a>——当前目录中的d1中的abc.html

                   <a href=”d1/abc.html” >xxx</a>——同上

                   <a href=”../ abc.html” >xxx</a>——上一级目录中的abc.html

                   <a href=”../../abc.html” >xxx</a>——上2级目录中的abc.html

                   <a href=”../ d2/d3/abc.html” >xxx</a>——上一级目录中的d2目录中的d3目录中的abc.html

绝对地址:

         互联网绝对地址: http://www.abc.comhttp://www.def.com/abc/page1.html

         本地绝对地址: file:///C:/itcast/class/php130707/day1/8列表案例.html  ——绝对不要用本地绝对路径

 

a标签的另一个应用:锚点应用

         锚点就是指一个网页内部的“链接”,其实就是在该网页的另一个位置而已——通常用于一个网页上的内容比较多(比较长)的的时候,在网页的顶部进行快速定位。

实现锚点功能,需要使用两个至少两个a标签相互配合,形式如下:

<a href=”#锚点名” >文字</a>——表示点击的文字

………………………………………(中间的很多其他内容)

<a name=”锚点名” ></a>——表示位置的标签

 

a标签的第三个应用:用于发送邮件

<a href=”mailto:ldh@itcast.cn” >没事给我mail</a>

 

a标签的第4个应用:用于下载:

<a href=” xx文件名” > 点击下载</a>

二进制介绍

10进制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

8进制

1

2

3

4

5

6

7

10

11

12

13

14

15

16

17

20

16进制

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

10

2进制

1

10

11

100

101

110

111

1000

1001

1010

1011

1100

1101

1110

1111

10000

 

20

21

 

22

 

 

 

23

 

 

 

 

 

 

 

24

 

1

2

 

4

 

 

 

8

 

 

 

 

 

 

 

16

 

10000(10) = 104

10000(2) = 24

字符编码介绍

在计算机中,本质上,任何东西其实都是用数字来表达的。我们的所有文字(包括中英文,各种符号,各种运算符)其实都是使用了一个数字来代表,比如:

A:65

B:66

a:97

中:5000(假设)

华:5500(假设)

........

这样的数字被称为“字符编号”,每个字符都有一个固定的编号,一般来说,每个国家都会对其国家的文字进行一个文字编码标准化。

问题就来了:

在日文字中,其编码如下:

田:5000(假设)

中:5001(假设)

.........

 

乱码的成因:一个人用某个编码写的字,在另一个人的电脑里,用另一个编码去识别并显示,就可能出现乱码。

对我们网页来说,需要注意两个编码方面的问题:

1,  一个文件中的代码使用什么编码,是由其所使用的编辑器来决定。

2,  一个网页文件,浏览器使用什么编码来显示,通常由html代码来设定:

a)         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

b)         这一行的意思是,程序员生成“我的网页是什么编码”

当我们浏览一个网页的时候,如果浏览器所使用的显示编码跟这个网页文件创建和编辑的时候所使用的编码不一致,就可能导致乱码。

 

我们中文编程中的常见编码:gb2312,  gbk,  utf-8

posted @ 2016-08-14 10:35  IT常乐  阅读(361)  评论(0编辑  收藏  举报