HTML与XHTML的区别-HTML和XHTML的区别

上一次 的文章,我们讲到了XHTML的发展历史和规范的一些要求,这一期,我们来讲讲他们具体有哪些差别!

一,XHTML中的标记名称必须小写

在HTML中,标记名称可以大写和小写,比如:
<BODY>
<p>这是一段话</p>
</BODY>

而在XHTML中,必须都小写,如下:
<body>
<p>这是一段话</p>
</body>

二,在XHTML中属性名称必须小写

和标记名称必须小写一样,属性名称也必须小写,比如下面这个代码,HTML中是正确的:
<IMG SRC=”123.jpg” WIDTH=”100″ HEIGHT=”100″ >

而在XHTML中这是错误的,必须写成:
<img src=”123.jpg” width=”100″ height=”100″ />

三,XHTML必须严格崁套

在下面的一个代码中,HTML是可以的,但是XHTML里面是错误的,比如:
<p><i>你好,SDT技术网</p></i>

在以前的html基础教程中我就提到过,这种写法是错误的,但是早期的HTML是可以这样写,希望跨入XHTML的时候大家不要犯这种错误,应该写成:
<p><i>你好,SDT技术网</i></p>

四,在XHTML中标记必须封闭

在之前,我就说过,大家要养成一个好习惯,写代码要封闭,这里的一段代码,html的确可以运行,但在XHTML里面就是错误了:
<p>这是一段话
<h1>这是一级标题

像上面两个代码,并没有封闭,这在XHTML中是严重错误的!
<p>这是一段话
<h1>这是一级标题 

五,XHTML中标记是空元素也必须封闭

在html中,下列代码是允许的,但是XHTML的严格要求来说,是错误的:
换行<br>
水平线<hr>
图像<img src=”1.jpg”>

而XHTML中应该写成:
换行<br />
水平线<hr />
图像<img src=”1.jpg” />

六,在XHTML中属性值必须用引号引起来

很多人写代码的时候,属性值就直接等于多少,而这在XHTML中是不允许的:
<a href=http://blog.xukhost.com>SDT技术网</a>

而这在XHTML中必须写成:
<a href=”http://blog.xukhost.com”>SDT技术网</a>

七:在XHTML中,属性值必须用完整形式

在html中一般用简写来设定属性值:
<input checked>

但是XHTML中必须写为:
<input checked=”checked” />

XHTML相对HTML来说,有以下几点区别:
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号””括起来
5.把所有<和&特殊符号用编码表示【比如<&lt;代替,>&gt;代替等】
6.给所有属性赋一个值
7.不要在注释内容中使“–”【 比如<!–这里是注释———这里是注释–>这里的中间的–不再有效,中间的–用=代替即可】
8.图片必须有说明文字 【每个图片标签都必须有ALT说明文字】

以上这些就是XHTML和HTML的区别,大家记下来,以后说到的CSS和这个有关

HTML与XHTML的区别-XHTML的历史和概述

HTML和XHTML是一种语言还是两种语言?他们有什么共同点与区别?前面我们学习了HTML的基础,这里我们来让大家了解,HTML与XHTML的区别和共同点…

HTML和XHTML是同一种语言的不同阶段,可以说HTML是一种基础的标记性语言,而XHTML是建立在规范之上的标记性语言!它比HTML更严格,更紧密!下面我们来看看HTML的演化历史:

HTML 2.0:1995年11月发布

HTML3.2:1996年1月14日发布

HTML7.0::1997年12月18日发布

HTML7.01:1999年12月24日发布

XHTML1.0:2000年1月发布

2002年8月1日重新发布修订版

XHTML1.1:2001年5月31日发布

XHTML2.0:貌似在开发中…至于几时开发完成我不清楚了,如果已经放出来了请告之我修改,谢谢

XHTML的1.0呢是参考自HTML 4.01 Strict改编的

好了,我们了解完了历史,再来看看究竟什么是XHTML吧!

XHTML 指扩展超文本标签语言(EXtensible HyperText Markup Language)。

XHTML 的目标是取代 HTML。

XHTML 与 HTML 4.01 几乎是相同的。

XHTML 是更严格更纯净的 HTML 版本。

XHTML 是作为一种 XML 应用被重新定义的 HTML。

XHTML 是一个 W3C 标准。

* XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.

* XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.

* XHTML是用来代替HTML的, 是2000年w3c公布发行的.

* XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.

* XHTML是基于XML的应用.

* XHTML更简洁更严谨.

* XHTML也可以说就是HTML一个升级版本.(w3c描述它为’HTML 4.01′)

* 除此之外XHTML和HTML基本相同.

* XHTML是大小写敏感的,XHTML与xhtml是不一样的.标准的XHTML标签应该使用小写.

HTML的现行规范

1. XHTML 1.0 Transitional – 过渡型,标识语法要求较宽松

<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.<CITE highlight=”true”> </CITE>/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

2. XHTML 1.0 Strict – 严格型,标识要求达到以上XHTML相比于HTML的所有改动

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www./TR/xhtml1/DTD/xhtml1-strict.dtd”>

要求严格的DTD,你不能使用任何表现层的标识和属性

3. XHTML 1.0 Frameset – 框架集定义

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.<CITE highlight=”true”></CITE>/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD

4. XHTML 1.1 – 模块化的XHTML

5. XHTML 2.0 – 完全模块化可定制化的XHTML,正在开发中,参考http://<CITE highlight=”true”></CITE>/

 

[注:部分内容转自百度百科]

html基础学习第十节-表格定义深入讲解第二讲

上两节课,我们说了表格的定义和深入的讲解,这一课,我们继续上一课未讲完的表格定义的其他部分以及一些用法

前面所有的表格,其实仅仅用了三个单词,table,td和tr,其他的都是以前学过的定义方法的套用,呵呵,下面我们来学学三个新的定义单词,分别是<thead>,<tbody>和<tfoot>,这三个分别对应定义标头,主题和脚注三个部分,另外还有<th>表示行头,下面我们来看一组代码

<table width=”400″ border=”1″ align=”center”>
<thead>
<tr>
<th colspan=”2″>产品</th>
<th colspan=”2″>描述信息</th>
</tr>
<tr align=”center”>
<td>公司</td>
<td>编号</td>
<td>用途</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan=”2″>A</th>
<td>A1</td>
<td>中端客户</td>
<td>100.00</td>
</tr>
<tr>
<td>A2</td>
<td>低端客户</td>
<td>50.00</td>
</tr>
<tr>
<th rowspan=”2″>B</th>
<td>B1</td>
<td>中端客户</td>
<td>100.00</td>
</tr>
<tr>
<td>B2</td>
<td>低端客户</td>
<td>80.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”4″>备注:该表统计于XX年XX月XX日</td>
</tr>
</tfoot>
</table>

这里大家看到没有,在某个行标记tr的两边,用<thead>,<tbody>和<tfoot>定义起来,这三个部分就是定义了标头,主体和脚注这三块,这个定义只需要记住这三个单词,然后套用即可,呵呵,这里需要大家灵活的去运用了哦,然后看看A和B这两个地方,分别用th标记定义起来,这里表示行头,明白了吧?效果如下,对比一下就明白了!

产品 描述信息
公司 编号 用途 价格
A A1 中端客户 100.00
A2 低端客户 50.00
B B1 中端客户 100.00
B2 低端客户 80.00
备注:该表统计于XX年XX月XX日

html基础学习第九节-表格定义的深入讲解

上一节课我们已经讲了表格的定义方法,这一节我们来深入的讲解这一块

这里,我们来认识如何设置表格的宽度和高度,用两个单词,分别是height和width,我们可以来看看下面的代码

<table border=”1″ height=”150″ width=”200″>
<tr>
<td>A1</td><td colspan=”2″ rowspan=”2″>A2A3<br />B2B3</td>
</tr>
<tr>
<td>B1</td>
</tr>
</table>

这里,定义了一个宽200,高150的格子,效果如下

A1 A2A3
B2B3
B1

怎样设置A2A3和B2B3这四个居中呢,和字体的定义一样,用一个align来定义就可以,比如

<table border=”1″ height=”150″ width=”200″>
<tr>
<td>A1</td><td align=”center” colspan=”2″ rowspan=”2″>A2A3<br />B2B3</td>
</tr>
<tr>
<td>B1</td>
</tr>
</table>

大家可以看到,在align属性这里,定义居中,就会产生如下的效果,align上次我们说了,可以定义center居中和left靠左还有right靠右这三个选项,具体复习下前面的章节,如果你已经忘了的话

A1 A2A3
B2B3
B1

这样一来,一个格子的向左向右和居中就搞定了,如果是一行呢?那样岂不是很累?每个都去加?大家要知道html是很灵活的相互崁套的代码,可以对tr标记进行定义,如下代码

html基础学习第八节-表格的定义基础

说在前面

html的教程已经很久没有更新了,真的很抱歉,最近一直忙于网站和其他事情而忽略了这个我一开始就写的教程

现在,我已经不适用之前的整列模式,因为现在开始忙了,没时间弄那么好的规划,虽然那样可以增加可读性,可是可读性带来的却是我排版的繁琐,说简单也简单,不过那样我就需要整理好了再写教程,这样花费时间不说,而且容易遗忘要怎么继续写,好了,废话说道这里,我们现在开始来讲讲表格的定义

我们为什么要学习表格,我们学网页设计又不是弄个word?

对,没错,我又不懂办公office,甚至我都懒得学office,但是表格只是office的一部分,表格不是office特有的,表格是网站布局的一种形式,也可以说是通用的形式,怎么说呢?你看看网站的一个个模块,这就是一个表格,你可以看看php程序源码,里面几乎遍布了一堆div,为什么,因为表格的定义起了很大的布局作用,当然还有CSS!

表格有什么好学,直接在可视化模式下新建不就得了?

说这句话的人,你可以直接关闭这个站点,因为你是不想学习的人,对,科技是让人更简单的处理事务,但是,不是让你真的去偷懒什么都不学的,而且,表格在某些情况下是不能直接通过编辑器的可视化去布局,因为有很多情况,需要我们去想象,去拼接的,要做好布局,就必须学会表格的定义,前面有的定义,你甚至可以去html手册里查询,但是,表格这块,是重点,我前面的你甚至可以不用去学,因为重点在后面这里

好了,以后我也会利用这种对答的方式去写教程,我觉得这种方式写教程有助于别人理解这一课的重要性,当然不是哪一个不重要,都是重要的,只是重要在哪个地方,不重要的我肯定不写【PS:吐血,废话了太多】

表格如何定义?

表格主要由三个主要单词去定义,我说主要,是说还有其他单词组合进来参与定义的,一个是table,这个定义下面的内容是一个表格,好比center定义下面的内容是居中处理一个意思,然后是tr是定义一行,也就是一行的表格,td是定义一列,也就是一列的表格,border这里定义表格的边框线粗细定义为一个像素,不定义的话应该看不见吧,我也没试过,大家试试看下面来看一组简单的表格代码

<table border=”1″>

<tr>

<td>A1</td><td>A2</td><td>A3</td>

</tr>

<tr>

<td>B1</td><td>B2</td><td>B3</td>

</tr>

</table>

结果显示如下的一个表格

A1 A2 A3
B1 B2 B3

这就是一个简单的表格,大家可以看到,html在这里继续继承他的崁套模式,也就是先定义一个大体的表格,然后表格里面定义一个大体的一行,一行里面又定义一列一列,这样的形式去定义一个表格,大家看懂了吗?如果不懂,反复的去看那段代码就是了,然后我们下面来说说高级一点的定义

先来用colspan来做左右两个表格合并,在word下是很简单的,html这里也很简单,只要一个定义就可以,看看代码

<table border=”1″>

<tr>

<td>A1</td><td colspan=”2″>A2A3</td>

</tr>

<tr>

<td>B1</td><td>B2</td><td>B3</td>

</tr>

</table>

结果如下【看上面红色部分的差异】

A1 A2A3
B1 B2 B3

这里大家可以看到代码这里,colspan等于2就定义了横向两个合并为一个单元格,也就是格子,只需要在td这里空一行然后加上等于几就可以定义几个格子合并

然后我们来看看下面的那个竖向的合并怎么定义,其实也很简单,用一个rowspan就可以定义到,看如下代码

html基础学习第七节-略讲网站布局

最近比较忙,没更新教程,今天,我们来说说网站大致的布局,会讲到下面三个内容,页面的分割,页面地图和表格这三大块!这三大块相对比较难,其实也很简单,只要大家清楚思路即可

网站的分割

大家都知道,网站是一个大框架,网站的分割是很重要的,比如分三大块,头部,中间和底部。这里所讲的只是一个基础的分割概念,当然一个漂亮的页面不是这种简单的分割引用出来的,我们先来了解下如何分割

<frameset cols=”10%,*”>

<frame>

<frame>

</frameset>

这是一个框架集,注意,frameset和body同一个等级,不能套用,而且也不需要,因为这个框架集其实是定义了两个html页面的,往下看

<frameset cols=”10%,*”>

<frame src=”1.html”>

<frame src=”2.html”>

</frameset>

这里,src=”1.html”定义了第一个分割出来的格子显示的html页面,大家可以尝试这样写一个代码,然后建立一个1.html和2.html并随意写上内容,你就会看到了效果,当然,这这是一个纵向分割,还有横向分割的,如下

<frameset rows=”10%,*”>

<frame>

<frame>

</frameset>

大家可以看到,这和上面的代码,只是修改了一个cols为rows而已,这两个分别定义纵向分割和横向分割,不明白的可以下载文章最下面的代码,好,我们看到了横向和纵向的定义,那么,怎么套用呢?其实也很简单,大家多练习就知道,我先示范给大家看

<frameset cols=”10%,*”>

<frame>

<frameset rows=”20%,*”>

<frame>

<frame>

</frameset>

</frameset>

可以看出,上面的代码,定义了一个纵向分割为两个窗口,而其中之一的窗口分割为两个横向分割的窗口,那么,如果是横向的分割两个窗口之后纵向的分割其中一个横向分割的窗口呢?看下面代码

<frameset rows=”10%,*”>

<frame>

<frameset cols=”20%,*”>

<frame>

<frame>

</frameset>

</frameset>

可见,套用的分割也很简单,具体需要大家实践才会明白!大家不妨自己编写代码保存为html文件然后用浏览器打开测试!

下面我们分析下这里面的语法定义,其中cols是定义纵向分割的,rows是定义横向分割的,10%和*都是定义分割的大小,其中*代表的是剩下的大小的意思,frameset是定义需要分割的,frame是定义分割时候对应的内容的,而src在这里不是定义图片,而是定义一个html文件或者一个页面地址,在这里可以用绝对地址或者相对地址,具体大家实践一下!

上面讲了分割窗口,只是其中一种,如果一个页面要漂亮的展示,需要引用图片或者CSS,CSS的以后讲解,如何引用图片呢?下面这里我们要讲到地图了!

html基础学习第六节-路径的认识【重点】

路径,也就是说绝对地址和相对地址,为什么重要?一个网站,不是单独一个网页文件完成的,他是多个网页文件完成的,所以,我们需要对路劲有相应的认识

绝对路径

绝对路径,说的就是地址形式的路径地址,比如https://blog.xukhost.com/image/1.jpg,这就是一个绝对的路径,就算文件从http://blog.xukhost.com/admin/移动到http://blog.xukhost.com/content/,这个文件指定的图片,依然可以显示,这就是绝对路径所说的绝对,但是,网站在开始编写的时候,并不会知道blog.xukhost.com这个域名,也就是绝对路径实际上是网站形成后上传内容后获得的,不过,php貌似有个代码可以表示blog.xukhost.com这个域名,由于我没深入研究,而且写教程的时候是学习没多久,好废话不多说,我们了解了绝对路径的概念,必定需要了解相对路径,因为写网站的时候,所有文件串联起来,还是用相对路径来写比较容易,玩下看!

相对路径

大家都知道,一个完整的地址路径是绝对路径,但是,写网站的时候,却都是用相对路径,那么相对路径如何表示呢?比如,一个index.htm文件,里面有一段代码,这段代码所引用的图片和index.htm放在一起,也就是同一个目录,那么,这个地址可以写<img src=”1.jpg” />,这里不需要多解释,在同一个目录,那么这样写就可以了

但是,如果图片文件放在一个jpg的文件夹下面,而index.htm和jpg文件夹是同一个目录的情况下呢?这个时候,直接上面方式表达是找不到图片文件的,这个时候,需要用这样的格式<img src=”jpg/2.jpg” />。这个,代表着这个文件,存在于同一目录下的jpg文件夹下面的1.jpg的文件,这个概念大家必须清楚,否则以后的学习,会大大的影响,因为写一个大型网站,都是需要引用很多文件夹,很多图片!

上面说了,图片如果在同文件下的文件夹里面的表达,如果,不是同一个文件夹呢?这个时候,我们就需要用文件夹返回的模式锁定目标文件了,比如,index.htm在网站根目录下的admin文件夹下,而图片在网站根目录下的jpg文件夹下,这样,index.htm是存在二级目录,而图片也是,但是。两个目录却不是同一个文件夹下的,这个时候,需要引用这条写法<img src=”../jpg/3.jpg” /> 这条的定义是怎样实现的呢?..代表返回,也就是上一级目录,admin的上一级目录就是网站根目录,而网站根目录下有个jpg的目录,指定上一级目录下的jpg的目录下的1.jpg的文件,现在大家明白了吧?

再举个例子,假如图片是在网站根目录的,那么就是<img src=”../4.jpg” />,也就是,..代表返回上一级目录,这样,一个明确的目录路径就出来了,以上这些就是相对路径,如果大家还是不明白的看看下面的关系图

通过上面的图例,大家明白了这个路径的定义了吧?绝对路径没什么,主要是相对路径大家需要明确如何定义,如果看了还是不懂,那你就桌面建立一个文件夹,里面建立三四个文件夹,分别放不同名字的图片,然后在其中一个文件夹下放一个html文件,在里面用<img src=”” />来定义图片,看看能不能准确的定义图片路径

[download id=”10″]

html基础学习第五节-回顾第一节到第四节

为什么回顾第一节到第四节?

因为第一节和第四节是我一开始很早之前学的,后期有一段时间忙网站,现在开始从新复习,发现有必要发一文说明一下前面的一些内容

基础的格式

大家还清楚第一节我的内容吗?第一节我就开始介绍了html的基础定义,我不喜欢像别人一样开场白废话一堆的,我这人就是一针见血,现在回顾一下代码

<html>

<head>

<title>网站标题</title>

<head>

<body>

网站内容

</body>

</html>

基本格式定义

好,我们看到了上面这个代码,我什么我不说源码?html算不上一种编程语言,只是一种标记语言罢了,所以,学html不能说难,只能说你愿不愿意学,我们看到上面一段代码了吧?这一段代码中<head>定义了头部文件,头部文件以后CSS用的时候大家会明白,头部文件不仅仅是定义<title>的标题标签,还有其他的样式定义这里我们先不做介绍,<body>定义的是网站主题内容,也就是我们看到的网页。那么,基础的一个网页就这么形成了,但是,网页需要有段落和换行,好比如下面

<p>段落</p>

换行<br />

换行并不能满足日常写文章需求u,比如我们文章不要靠近两边,进行两边空出一点位置,而且标题要居中,副标题靠左对齐,最下面靠右对齐,那么,如下:

<center>标题</center>

<blockquote>文章摘要<blockquote><!–这里注意,我引入了一个新标签,间距标签,大家可以自己测试–>

<p align=”left”>靠左对齐</p><!–这里说明下,p是定义标签,一个段落,align是属性标签,left是属性的值

<p align=”right”>靠右对齐</p>

<p align=”center”>居中对齐的另一种方法</p>

<align=”justify”>左右边缘对齐</p><!–和上面那个blockquote一样以前我没提到的标签–>

规范化的写法

好,我们上面了解了颜色对齐方式,但是我们要知道如何用粗体等啊,这里我不详细介绍,详见本站html学习分类下的html基础学习第三节!颜色的粗体斜体定义我们运用后还是觉得不够满足对吧,其实前面的四节课讲的都基本说了排版的,当然还有没有说完的这里我继续补充,所以为什么是回顾前面就是这一节的原因,我们来看看标签的套用

上面我们回顾了一些标签,可是有的人不会套用,或者没去尝试,下面我们列举几个代码

<p><b><i>加粗加斜</i></b></p>

<p><b><i>加粗倾斜</b></i></p>

上两个标签套用,虽然在html里面是可以的,但是记住,真正的规范中,那个是不规范的,我学东西喜欢规矩一点,因为单纯学html是没用的,我们要学的是CSS和其他的,就算是XHTML里面,这也是不行的,标签的套用,必须有个开头有个结尾,1开头了2开头了,那就2先结尾然后1结尾,不能乱来,所以上面的标签,如果你还看不出哪一组是对的,请把这句话重复看几遍,要不回帖问我,好,标签的套用我只是讲个例子,大家举一反三,还有下面也是错误的

<p>段落<!–没有结束标签–>

换行<br><!–标签没有封闭–>

<P>段落</P><!–标签定义必须小写–>

<h1><p>第一段</p></h1><!–这两个不可以套用–>

<img src=123.jpg /><!–属性的值没有用双引号括起来–>

以上这些都是错误的,暂时想到这么多,至于大家会犯错误到哪种程度我不好想象所以只是举例,错误的地方看<!—->中间的注释,为什么这里一开始我就讲那么严格?因为怕大家以后养成一个习惯,标签不封闭,套用顺序不对,没有双引号等等错误,大家要严格要求自己不写错误代码!当然html里面写错真的不影响,但是这种习惯带到以后的学习中或者生活中,甚至工作中都是不好的,所以我定义为错误的写法!而不叫普通的不规范写法!

链接和图片的使用方法若干

链接和图片样式看下面的代码,大家就明白了,其中,a标签的意思是可以点击的链接,href定义链接的属性是一个地址,img,src定义图片和图片地址

<a href=”http://www.baidu.com” target=”_blank”>百度,新窗口中打开</a>

<img src=”123.jpg” />

这里我说明下,上面的代码中的target定义了一个属性,就是链接以新窗口中打开,target除了定义blank这个值之外还有”_parent”,”_self”,”_top”,大家课后自己琢磨下,以后会讲到用途,然后这个123.jpg和链接地址可以是绝对地址和相对地址,下一节课我们一节课时间讲下这个绝对地址和相对地址,因为怕不明白,如果不明白以后的学习会很受影响,虽然很容易掌握,但也很容易混淆,图片带地址,方法如下

<a href=”http://www.baidu.com”><img src=”123.jpg” /></a>

好,回顾到此结束,写这些全部都是手工编写代码写出来的效果,为了美观,可视化编辑的不是那么好,所以大家尊重下劳动成果,留言支持下

html基础学习第四节:链接和图片以及一些布局定义

图片的定义

上几节课,我们熟悉了html的定义方式,以及了解了如何定义字体的样式大小等,这节课,我们来了解下图片和链接以及布局的部分定义方式,下面先来看看图片的定义

<img src=”1.jpg” />

上面img是定义标签,src是属性标签,1.jpg是图片地址,图片地址可以是绝对地址也可以是相对地址!这里必须先明白地址的概念,一个,绝对地址和相对地址,字面上很容易理解,其实说的就是链接地址或者路径地址,比如,你创建了一个html文本,图片在相同目录,那么编写的方式就是上面那样,1.jpg是图片的名字。如果是链接的就是http://…jpg的地址,再举例一个

<img src=”http://www.xxx.com/xxx.jpg” />

这里我来详细说明下关于为什么是<img src=”” />而不是<img src=””>,其实这两个写法在html里面都是正确的,可是xhtml里面是错误的,xhtml里面的所有标签都必须封闭,这是个规范!所以我希望大家以后都按照一定的规范的好习惯,避免以后学习xhtml的时候出现很多错误,养成好习惯是很重要的!和以前的课程一样讲过&ltbr />的用法是同理,封闭标签,好,图片的引用就到此为止

链接的定义

上面我们说了图片的引用再来说说链接的定义吧,下面看一组代码

<a href=”http://www.baidu.com”>百度</a>

上面看到了一组代码了吧,用<a href=””></a>来定义链接,其实这里链接也是可以分为绝对链接和相对链接,比如1.html里定义跳转到2.html,而且两个文件在同一个目录内,那么,可以这样写<a href=”2.html”>进入另一个网页</a>这里2.html就是另一个html的名字,如果是php,比如index.php,也可以改成这个,反正链接到相应的网页文件即可,这就是相对链接

图片链接的套用

大家都看过,有的图片一点击就是链接对吧,大家也知道链接定义都有个链接名对吧?如果有去玩过论坛的就知道,用UBB套用可以弄图片链接,那么,html也是一样的,下面来看一个代码

<a href=”www.baidu.com”<>img src=”logo.png” /></a>

大家看到了吧,这里,就是代码的套用,这种套用,需要讲究层级关系,这一点以后大家慢慢研究学习就知道了,这里先不多说,我们来看看这个代码,这里面,两个=后面都可以用绝对地址和相对地址,大家自己课后慢慢练习

<target>属性的定义

大家都经常上网,知道某些连接打开是新窗口打开,而有的是直接打开,普通的连接,如果不加入属性来定义的话是直接打开的,那么,怎么做到新窗口打开呢?下面来给大家看一段代码

<a href=”http://www.baidu.com” target=”_blank”>百度一下</a>

大家不难看出,上面target的属性定义了链接用新窗口打开,其实,只需要定义一个target属性就可以做到!那么target属性除了这个外还有哪些呢?这个以后再教你们

基础布局定义

上面我们说了一些网址的定义方法和图片的定义方法,这里我们来说说上一节课没有说完的关于排版的定义,上节课,我们只讲了布局定义里面的字体样式定义和颜色定义等,这一节我们来深入了解一下,看看下面代码

<center>居中</center>

这里,是表示居中,和<p align=”center”>的属性是一样的!好,由于时间有限,布局的下一节课细说,这里就讲到此为止

小结

这一节课没有太过于复杂,但是希望大家结合上一节课的内容一起练习一遍,下一节课准备深入讲解布局定义,有可能花两部分写

课后练习

这一节,让大家练习下连接和图片连接等等的引用,下一节说说图片的大小等定义以及布局定义方法

单词

这一节单词没有太多,主要了解a定义一种链接,而href定义连接的属性是网页链接,img定义图片,src定义的图片属性,center定义居中!target定义链接的打开属性,_blank定义连接以新窗口打开的属性

教程到此结束,有疑问回复评论

html基础学习第三节:格式定义以及颜色定义

字体格式的定义

大家都知道粗体斜体等字体样式吧?这一小节就来学习下这方面的定义,只要简单的字母就可以定义字体的样式!下面来看看代码演示

<b>加粗</b>

<i>倾斜</i>—-倾斜的标签的字被和谐了,只好不显示效果

<u>下划线</u>

<s>下划删除线</s>

<big>大字体</big>—-同上面倾斜标签理由

<small>小字体</small>

<em>强调的形式</em>

<strong>加强强调</strong>

好了,看了上面的应该明白了如何运用了吧?就是用这些简单的代码来定义字体形式的!大家可以试试!自己写各种定义的字体!

字体颜色定义

大家知道了如何定义字体的大小和粗斜之后肯定想知道如何定义字体颜色吧?好,接下来说说字体颜色的定义

<font color=”blue”>蓝色字体</font>

大家来看看上面这个代码,这个代码有两个组合,color是属性定义。<font color=”#”>#在这里代表颜色单词,可以是单词,也可以是颜色的十六进制!关于颜色的单词有black-黑色,red-红色,gray-深灰色,silver-浅灰色-green-绿色,purple-紫色,yellow-换,white-白…还有一些没列举出来,自己百度颜色单词就知道了!

这里举例一个十六进制颜色代码

<font color=”#0000FF”>蓝色</font>

关于颜色的十六进制,这里我不多说,大家可以百度一下颜色十六进制的信息!

背景颜色定义

上面说了字体颜色的定义,我们来说说背景颜色的定义吧!背景的定义,是直接在<body>属性标签定义的!下面来看一个完整的html代码

<html>
<head>标题定义在这里</head>
<body bgcolor=”black”>黑色背景</body>
</html>

大家看到了吧!bgcolor=”颜色”这个加在body这里就可以定义背景颜色了,在这里你也可以定义字体颜色,也就是这里定义好字体颜色和背景,如下代码

<html>
<head>标题定义在这里</head>
<body text=”blue” bgcolor=”black”>
黑色背景,蓝色字体
</body>
</html>

大家看到上面两组代码的差别没有,没错<body text=”字体颜色” bgcolor=”背景颜色”>这里大家明白了吧?不明白的自己测试或者跟帖!

一些排版定义

好了,字体的定义和颜色定义说好,接下来说说排版方面的,这里先简单介绍居中,靠左靠右的定义,下一节在继续讲排版定义,排版的定义基础的比较简单,这里这是让大家熟悉,真正排版,还是用CSS,先了解再说吧!看代码

<p align=”center”>居中</p>

<p align=”left”>靠左</p>

<p align=”reght”>靠右</p>

这里说明一下,上面的P靠右用hx来代替,比如:

<h3 align=”center”>三级标题居中</h3>

上面这个就是举一反三,我的教程讲究简易而且实际,大家以后要像上面一样,了解同级标签的互换!好了,为了大家靠右消化,暂时说到这里,排版还有很多没讲,下节课继续!

小结

这一节课的单词相对多一点,也是因为颜色单词比较多,如果大家觉得单词难记住,多练习几次就可以了,这里的教程一样是简单!不是我会写教程,而是html真的很简单!所以,只要多练习,一星期基础掌握html不是问题,如果你多练习的话,不像我那么懒…

课后练习

这一次有要求了,大家课后在桌面新建文本文档,然后打开,在里面练习代码,写好后保存,并且改后缀为htm或者html然后就可以打开看到效果了!或者使用编辑器,我将会抽时间把编辑器普通使用方法写出来,虽然我也不算很会用编辑器,不过普通的利用就够你学习一段时间了!

重要单词

这一节课,我们单词比较多,分别如下总结:

  • <b>定义加粗
  • <i>定义倾斜
  • <u>下划线
  • <s>删除线形式下划线
  • <big>大字体
  • <small>小字体
  • <em>强调
  • <strong>加强强调
  • <font color=””>定义字体颜色
  • 颜色单词上面有提及这里不说了
  • <body text=”” bgcolor=””>定义字体颜色和背景颜色
  • <align=””>字体格式定义
  • center-居中,right-靠右,left-靠左

————————

教程到此结束

html基础学习第三节代码