热门关键字:
jquery > jquery教程 > jquery教程 > HTML基础教程

HTML基础教程

349
作者:管理员
发布时间:2021/3/3 11:49:13
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4070
  第一章 HTML基础知识


  Web页是由HTML(Hypertext Markup Language,超文本标记语言)组织起来的,由浏览器解释显示的一种文件。


  最初的HTML语言功能极其有限,仅能够实现静态文本的显示,人们远远不满足于死板的类似于文本文件的Web页。后来增强的HTML语言扩展了对图片、声音、视频影像的支持。 通过浏览器访问到的Web页面,通常是基于HTML的基础上所形成的。


  一、HTML的概述


  HTML的英语意思是:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档HTTP的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台,自1990年来HTML就一直被用作WWW(是World Wide Web的缩写,也可简写WEB、中文叫做万维网) 的信息表示语言,使用HTML语言描述的文件,需要通过WEB浏览器显示出效果。


  所谓超文本,是它可以加入图片、声音、动画、影视等内容,HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用就是带来了超文本的技术通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面与世界各地主机的文件链接。如下所示:


  通过HTML可以表现出丰富多彩的设计风格:


  图片调用:<IMG SRC="文件名">  文字格式: <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>


  通过HTML可以实现页面之间的跳转:


  页面跳转:〈A HREF="文件路径/文件名"></A>


  通过HTML可以展现多媒体的效果:


  声频:<EMBED SRC="音乐地址" AUTOSTART=true>    视频:<EMBED SRC="视频地址" AUTOSTART=true>


  从上面HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释,显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。


  HTML只是一个纯文本文件。创建一个HTML文档,只需要两个工具,一个是HTML编辑器,一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件,提供给我们查看WEB资源的客户端程序。


  二、HTML的基本结构:


  一个HTML文档是由一系列的元素和标签组成。元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置, HTML超文本文档分文档头和文档体两部分,在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档信息。 下面是一个最基本的html文档的代码:


  <HTML></HTML>在文档的最外层, 文档中的所有文本和html标签都包含在其中,它表示该文档是以超文本标识语言(HTML)编写的。事实上,现在常用的Web浏览器都可以自动识别HTML文档,并不要求有 <html>标签,也不对该标签进行任何操作,但是为了使HTML文档能够适应不断变化的Web浏览器,还是应该养成不省略这对标签的良好习惯。


  <HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中,头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略   此标记,良好的习惯是不省略。


  <title>和</title>是嵌套在<HEAD>头部标签中的,标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。


  <BODY> </BODY>标记一般不省略,标签之间的文本是正文,是在浏览器要显示的页面内容。


  三、 HTML的标签与属性


  对于刚刚接触超文本,最大的障碍就是一些用“<”和 “>”括起来的句子,我们称它为标签,是用来分割和标签文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项,HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名> 和尾标签</标签名>组成的,成对标签的作用域只作用于这对标签中 的文档。单独标签的格式<标签名>,单独标签在相应的位置插入元素就可以了,大多数标签都有自己的一些属性, 属性要写在始标签内,属性用于进一步改变显示的效果, 各属性之间无先后次序,属性是可选的,属性也可以省略而采用默认值;其格式如下:


  <标签名字 属性1 属性2 属性3 … >内容</标签名字>


  作为一般的原则,大多数属性值不用加双引号。但是包括空格、%号,#号等特殊字符的属性值必须加入双引号,对属性值加双引号。如:


  <font color="#ff00ff" face="宋体" size="30">字体设置</font>


  注意事项:输入始标签时,一定不要在“<”与标签名之间输入多余的空格,也不能在中文输入法状态下输入这些标签及属性,否则浏览器将不能正确的识别括号中的标志命令,从而无法正确的显示你的信息。


  第二章 HTML标签格式


  一、基本标记


  基本标记是用来定义页面属性的一些标记语言。通常一份HTML网页文件包含3个部分:标头区<HEAD></HEAD>、内容区<BODY></BODY>和网页区<HTML></HTML>。


  <!DOCTYPE>


  作用:声明是文档中的第一成分,位于标签之前。


  1.<html></html>


  作用:此元素可告知浏览器其自身是一个HTML文档。


  属性:manifest:值(url)为脱机使用定义缓存信息。


  <html>标志用于HTML文档的最前边,用来标识HTML文档的开始。而</html>标志恰恰相反,它放在HTML文档的最后边,用来标识HTML文档的结束,两个标志必须一块使用。


  2.<head></head>


  作用:标签用于定义文档的头部,它是所有头部元素的容器。


  属性:profile:值(URL)一个有空格分隔的URL列表,这些URL包含着有关页面的元数据信息。


  <head>和</head>构成HTML文档的开头部分,在此标志对之间可以使用<title></title>、<script></script>等标志对。这些标志对都是用来描述HTML文档相关信息的,<head>和</head>标志对之间的内容是不会在浏览器的框内显示出来的,两个标志必须一块使用。


  3.<body></body>


  作用:元素定义文档的主体。


  属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用,请使用样式取代它。规定文档中活动链接(active link)的颜色。


  background:值(URL)不赞成使用。请使用样式取代它。规定文档的背景图像。


  bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中的背景颜色。


  link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中未访问链接的默认颜色。


  text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中所以文本的颜色。


  vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中已被访问链接的颜色。


  <body>和</body>是HTML文档的主体部分,在此标志对之间可包含<p></p>、<h1></h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。


  引号内的rrggbb用6个十六进制数表示的RGB(即红、绿、蓝3色的组合)颜色,如#ff0000对应为红色。


  4.<title></title>


  作用:元素可定义文档的标题。


  属性:dir:值(rtl,ltr)规定元素中内容的文本方向。


  lang:值(language_code)规定元素中内容的语言代码。


  xml:lang:值(language_code)规定XHTML文档中元素内容的语言代码。


  使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单,只要在<title></title>标志对之间加入需要显示的文本即可。 下面是一个简单的网页实例。通过该实例,读者便可以了解以上各个标志对在一个HTML文档中的布局或所使用的位置。


  <html>


  <head>


  <title>显示在浏览器窗口最顶端中的文本</title>


  </head>


  <body bgcolor="red" text="blue">


  <p>红色背景、蓝色文本</p>


  </body>


  </html> ?


  注意:<title></title>标志对只能放在<head></head>标志对之间。


  二、格式标记


  这里所介绍的格式标记都是用于<body></body>标志对之间的。


  1.<p></p>


  作用:标签定义段落。


  属性:align:值(left,center,right,justify)不推荐使用。请使用样式取代它。规定标题中文本的排列方式。


  <p></p>标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。<p>标志还可以使用align属性,它用来说明对齐方式,语法如下所示。


  <p align="参数"></p>


  Align的参数可以是Left(左对齐)、Center(居中)和Right(右对齐)3个值中的任何一个。


  例如<p align="center"></p>表示标志对中的文本使用居中的对齐方式。


  2.<br>


  作用:可插入一个简单的换行符。


  属性:没有可选属性。


  <br>是一个很简单的单标记指令,它没有结束标志,因为它用来创建一个回车换行,即标记文本换行。 ?注意:如果把<br>加在<p></p>标志对的外边,将创建一个大的回车换行,即<br>前边和后边的文本的行与行之间的距离比较大。若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小。


  3.<blockquote></blockquote>


  在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。


  4.<dl></dl>、<dt></dt>、<dd></dd>


  <dl></dl>用来创建一个普通的列表;


  作用:标签定义了定义列表。标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。


  属性:没有可选属性。


  <dt></dt>用来创建列表中的上层项目;


  作用:标签定义了定义列表中的项目。


  属性:没有可选属性。


  <dd></dd>用来创建列表中最下层项目。


  作用:在定义列表中定义条目的定义部分。


  属性:没有可选属性。


  <dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。通过下面的实例


  <html>


  <head>


  <title>一个普通列表</title>


  </head>


  <body text="blue">


  <dl> <dt>中国城市</dt>


  <dd>北京 </dd>


  <dd>上海 </dd>


  <dd>广州 </dd>


  <dt>美国城市</dt>


  <dd>华盛顿 </dd>


  <dd>芝加哥 </dd>


  <dd>纽约 </dd>


  </dl>


  </body>


  </html>


  5.<ol></ol>、<ul></ul>、<li></li>


  <ol></ol>标志对用来创建一个标有数字的列表。


  作用:标签定义有序列表。


  属性:compact:值(compact)HTML5 中不支持。HTML4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。 reversed:值(reversed)规定列表顺序为降序。(9,8,7…) ;start:值(number)规定有序列表的起始值。


  type:值(1,A,a,I,i)规定在列表中使用的标记类型。


  <ul></ul>标志对用来创建一个标有圆点的列表。


  作用:标签定义无序列表。


  属性:compact:值(compact)不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。 type:值(disc,square,circle)不赞成使用。请使用样式取代它。规定列表的项目符号的类型。


  作用:标签定义列表项目。<li>标签可使用在有序列表(<ol>)和无序列表(<ul>)中。


  属性:type:值(A,a,I,i,1,disc,square,circle)不赞成使用。请使用样式代替它。规定使用哪种项目符号。value:值(number)不赞成使用。请使用样式代替它。规定列表项目的数字。


  <li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用,此标志对用来创建一个列表项,若<li></li>放在<ol></ol>之间,则每个列表项加上一个数字;若放在<ul></ul>之间,则每个列表项加上一个圆点。示例如下所示:


  <html>


  <head>


  <title></title>


  </head>


  <body text="blue"


  <ol>


  <p>中国城市</p>


  <li>北京 </li>


  <li>上海 </li>


  <li>广州 </li>


  </ol>


  <ul>


  <p>美国城市 </p>


  <li>华盛顿 </li>


  <li>芝加哥 </li>


  <li>纽约 </li>


  </ul>


  </body>


  </html>


  6.<div></div>


  <div></div>标志对用来排版大块HTML段落,也用于格式化表,此标志对的用法与<p></p>标志对非常相似,同样有align对齐方式属性。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐