当前位置：首页 -> 网页设计 -> HTML/CSS -> HTML 初学者指南(上)

HTML 初学者指南(上)

时间： 2021-07-31 作者：daque

正文是创造html文献的低级读物。html 是 www（world wide web )中运用的超文本标志谈话。本指南的手段是引见怎样运用html和创造 web 文献。正文中的链接指向少许附加的消息。你还不妨到你当地的书局察看一下，何处大概会有很多有价格的对于 web 和 html 的材料。媒介术语www world wide web web world wide web sgml standard generalized markup language--规范通用标志谈话，刻画标志谈话的一个规范 dtd document type definition--文本典型设置, 这是一个用sgml写成的标志谈话的正式证明 html hypertext markup language-- 超文本标志谈话, 它是一个sgml dtd html 是一套独力于平台的方法设置( 用标志证明 ) , 用来刻画world wide web 文书档案中的各个构成局部. html 是tim berners-lee 在 cern (在日内瓦的欧洲粒子物理试验室) 创造的. 正文不囊括的实质本指南假如读者群具备以次普通: 领会怎样运用 ncsa mosaic 大概其它的 web browser 对web 效劳器和存户 browsers 有普遍的领会不妨考察 web 效劳器 (大概你不过想用当地办法创造部分运用的html 文书档案) html 本子本指南参考最新的证明--html 2.0-- 加上少许仍旧在 browsers 中普遍实行的附加个性. 以及正在兴盛的少许新个性. html 文书档案什么是 html 文书档案html 文书档案是普遍文本 ( ascii) 文献, 它不妨用大肆编缉器(如unix 中的emacs 或 vi, macintosh 中的bbedit, windows中的notepad)天生. 你也不妨运用字处置软硬件, 然而要记取存文献时要存成“带回车的纯文本”。 html 编纂器此刻有少许 wysiwyg 编纂器 (如., 可用在多种平台的 hotmetal, 大概可用在 macintosh 机的 adobe pagemill ). 在你学了少许 html 标志的基础常识之后，你大概蓄意运用它们. 你会创造控制充满的 html 源代码常识对于确定一个 wysiwyg 编纂器能否实用是很有便宜的即使你还没有选定运用哪种软硬件, 不妨参考本站软硬件载入 html 编纂器的在线例表 (按运用平台分门别类) ，扶助你探求运用软硬件. 把文献寄存到效劳器上即使你在书院大概单元不妨考察 web 效劳器, 和你的 web 处置员webmaster (保护效劳器的人) 接洽，看看怎样把你的文献寄存到 web 上. 要不，即使在书院或单元不许考察, 不妨看看你的社区能否有免费搜集freenet, 一种供给免费 internet 考察效劳的鉴于社区的搜集. 即使也没有免费搜集, 你不妨本地的 internet 效劳供给者接洽，她们不妨把你的文书档案寄存到效劳器上，然而要收取用度. (你不妨在本地的白报纸上找到告白with your chamber of commerce for the names of companies.) 标志证明一个元素 element 是一个文书档案构造的基础构成局部. 元素的例子有头 heads, 表格tables, 段落 paragraphs, 列表 lists 等. 你不妨如许领会: 你用 html 标志为欣赏器标出文献的各个元素 . 元素中不妨包括普遍文本，其余元素，或二者都有. 在 html 文书档案中运用tags表白百般元素. html 标志由一个左尖括号 (<), 一个标志名, 和一个右尖括号 (>) 构成. 标志常常成对展示 (如, <h1> 和 </h1>) 以指出标志效率的范畴. 中断标志和开始标志一致，不过在括号中的标志名中以斜杠 (/) 领头. html 标志鄙人文中列出. 有些元素大概含有一个属性 attribute, 它是包括在开始标志中的附加消息证明. 比方, 经过在图象文献的 html 代码中包括符合的属性，你不妨指明一幅图象的场所 (尖端, 中央, 或底部) . 具备可选属性的标志如次. 提防: html 不辨别巨细写. <title> 等价于 <title> 或 <title>. 有几个不同的情景列鄙人文中的转义序列中. 并非一切的 world wide web 欣赏器都扶助一切的标志. 即使一个欣赏器不扶助某个标志, 它常常不过忽视之. 最小的 html 文书档案每个 html 文书档案该当包括少许规范 html 标志. 每个文书档案都包括头 head 和正文 body text 两局部. 头中含有题目 title, 正文中含有本质形成段落，列表和其余元素的文本. 欣赏器须要简直的消息是由于它们都是按照 html 和 sgml 证明编制程序的. 底下的源文书档案举例证明必需的元素: <html><head><title>a simple html example</title></head><body><h1>html is easy to learn</h1><p>welcome to the world of html. this is the first paragraph. while short it is still a paragraph!</p><p>and this is the second paragraph.</p></body></html> 必需的元素有 <html>, <head>, <title>, 和 <body> 标志 (和它们相映的中断标志). 因为在每个文献中你都要囊括那些标志, 你不妨创造一个含有那些标志的沙盘文献. ( 有些欣赏器会机动精确地规格化你的 html 文献，哪怕你没有包括那些标志. 然而有些欣赏器不会如许! 所以你要保证包括那些标志.)一个熏陶东西要看到你的欣赏器暂时窗口所表露消息的原始文献, 不妨采用欣赏器菜单中的 view source (大概等价操纵) 选项. 文献的实质和一切的 html 标志将表露在一个新窗口中. 这是进修运用 html 和控制本领和结构的一个特殊好的办法. 固然, 你看的 html 不确定在本领上是精确的. 当你熟习了 html 而且看了很多这上面的参考材料，你将不妨辨别 "好的" 和 "不好的" html. 记取你不妨生存 html 源代码的源文献，用做你的 web 页的沙盘，大概把它窜改之后用做其余用处. html 标志html该元素指明你的文献包括 html-源代码消息. 文献扩充名 .html 也指明该文献是一个 html 文书档案并且必需运用. (即使你的体例受 8.3 制文献名的控制 (如., leehome.htm）, 不妨用 .htm 做扩充名.) head头元素 head 是你的 html-源代码文书档案中包括题目 title 的第一局部. 题目是动作你的欣赏器窗口的一局部来表露的 (见下文). title题目 title 元素含有你的文书档案题目而且动作一种全部左右文辨别其实质. 题目常常表露在欣赏器窗口的某个场所 (常常在尖端), 而不是在文本区. 题目同声也用来热门列表 hotlist 或书签列表 bookmark list 中的表露, 所以题目的采用因当是刻画性的, 特殊的, 和对立简略的. 题目在 wais 效劳中还用来探求效劳器. 比方, 你大概在一章的实质中包括一个短小的书籍的题目: ncsa mosaic 指南 (windows): 安置. 这个题目说领会软硬件的称呼, 运用平台, 和本章实质, 它比大略地把该文书档案称为安置. 要好得多。普遍你的题目该当不胜过 64 个字符. bodyhtml 文书档案的第二局部，也是最大的局部是正文 body, 它含有你的文书档案的实质 (表露在你的欣赏器窗口文本区的局部). 底下引见的标志用在 html 文书档案的正文 body 内. 题目字体headingshtml 有六级题目字体, 从 1 到 6 编号, 1 号最小. 题目字体的表露比普遍文古字体大大概粗. 每个文书档案中的第一个题目字体该当标志为 <h1>. 题目字体元素的语法为: <hy>题目字体文本 </hy> 个中 y 是从 1 到 6 的数字，指明题目字体的等第. 在你的文书档案中不要腾跃运用题目字体等第. 比方, 不要用头等题目 (<h1>) 发端，而后伴随一个三级题目 (<h3>) . 段落paragraphs各别于普遍字处置器中的文书档案, html 文献中的换行是不要害的. 你不必担忧你的文本中国银行的长度 ( 固然最佳不要胜过 72 个字符). 在你的源文献中任何场合不妨运用换行, 多个空缺在你的欣赏器中被臃肿变成一个空缺. 在“最小的 html 文书档案”中给出的例子中第一段的源代码为 <p>welcome to the world of html. this is the first paragraph. while short it isstill a paragraph!</p> 源文献中各行之间有换行. web 欣赏器忽视那些换行，惟有遇到另一个 <p> 标志时才发端新段落 <p> 重心: 你必需用 <p> 元素指明段落. 欣赏器忽视源文献中的任何缩进或空行. 即使没有 <p> 元素, 文书档案将被看作一个大段落处置. (一个不同的情景是把文本标志为 "preformatted," 下文中将做引见.) 比方, 底下的实质的输入和第一个 html 例子实足沟通: <h1>level-one heading</h1> <p>welcome to the world of html. this is the first paragraph. while short it is still aparagraph! </p> <p>and this is the second paragraph.</p> 为了维持 html 文献的可读性, 题目字体该当独吞一条龙, 在发端一个新的局部之前加一到两行空行，段落之间也用空行隔绝( 除去用<p> 标志除外). 那些特殊的空缺在你编纂文献时将会有效 ( 然而你的欣赏器将忽视那些空缺由于它有本人的对于空缺的准则，不依附于你源文献中的空缺). 提防: 中断标志 </p> 不妨简略. 这是由于当欣赏器遇到一个 <p> 标志时, 它觉得前一个段落到此中断. 运用 <p> 和 </p> 动作段落标志使得你不妨经过在源文献中运用 align=alignment 属性使一个段落居中陈设. <p align=center>这是一个居中的段落. [见底下的输入情势]</p> 这是一个居中的段落. 列表listshtml 扶助不编号 unnumbered, 编号numbered, 和设置definition 三种列表. 你也不妨嵌套列表, 然而不要嵌套过多，要不会使读者群感触不明显。不编号列表unnumbered lists 创造一个不编号的，公布式列表, 用发端标志 <ul> ( unnumbered list 的简记) 发端输出 <li> (list item) 标志，反面跟独力的项; 不需运用 </li> 标志用 </ul> 标志中断所有列表底下是一个有三个项的列表: <ul><li> apples<li> bananas<li> grapefruit</ul> 输入情势为: apples bananas grapefruit <li> 项不妨含有多个段落. 用段落标志 <p> 指明. 编号列表numbered lists 编号列表 (也称为无序列表ordered list) 和不编号列表沟通, 不过用 <ol> 包办 <ul>. 各项同样用 <li> 标志. 底下的 html 代码: <ol><li> oranges<li> peaches<li> grapes</ol> 爆发的输入为: oranges peaches grapes 设置列表definition lists 设置列表 (源代码为 <dl>) 常常含有瓜代展示的设置术语definition term (源代码为 <dt>) 和设置刻画definition definition (源代码为 <dd>). web 欣赏器常常另起一条龙表露设置刻画. 底下是一个设置列表的例子: <dl><dt> ncsa<dd> ncsa, the national center for supercomputing applications,is located on the campus of the university of illinois at urbana-champaign. <dt> cornell theory center<dd> ctc is located on the campus of cornell university in ithaca,new york. </dl> 输入情势为: ncsa ncsa, the national center for supercomputing applications, is located on the campus of the university of illinois at urbana-champaign. cornell theory center ctc is located on the campus of cornell university in ithaca, new york. <dt> 和 <dd> 项不妨包括多个段落 (用 <p> 标志引导), 列表, 或其余的设置消息. compact 属性大概会被常常运用，即使你的设置术语很简略的话. 比方，即使你想表露少许计划机选项, 它们不妨和设置的发端居于同一条龙中. <dl compact><dt> -i<dd>invokes ncsa mosaic for microsoft windows using the initialization file defined in the path<dt> -k<dd>invokes ncsa mosaic for microsoft windows in kiosk mode</dl> 输入情势为: -i invokes ncsa mosaic for microsoft windows using the initialization file defined in the path. -k invokes ncsa mosaic for microsoft windows in kiosk mode. 嵌套列表nested lists 列表不妨嵌套. 在每个列表项中，你还不妨含有多个段落，每个段落含有嵌套列表. 这边是一个嵌套列表的例子: <ul><li> a few new england states:<ul><li> vermont<li> new hampshire<li> maine</ul><li> two midwestern states:<ul><li> michigan<li> indiana</ul></ul> 这个嵌套列表的表露： a few new england states: vermont new hampshire maine two midwestern states: michigan indiana 预排方法文本preformatted text用<pre> 标志 (表白 "preformatted") 不妨爆发恒定宽窄的字体. 该标志同声使空格，新行，和构图键 tabs 灵验 (多个空格表露为多个空格, 源文献中的换行也在欣赏器中爆发换行). 这对于步调清单和其余少许情景是很有效的. 比方, 底下的行: <pre>#!/bin/csh cd $scr cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </pre> 表露为: #!/bin/csh cd $scr cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * <pre> 标志不妨带一个宽窄属性 width ，指明一条龙中最多承诺的字符数. width 同声报告欣赏器采用一个符合的字体以及文本的缩排. 在 <pre> 效率的局部中也不妨加超链. 然而其余的 html 标志该当制止在 <pre> 的区间中运用. 提防，因为<, >, 和 & 在 html 文献中有特出含意, 在你输出那些字符的功夫必需运用它们的转义序列 (辨别为<, >, 和 &) . 精细实质拜见转义序列 . 大范畴援用extended quotations运用 <blockquote> 标志不妨在屏幕上用辨别的块表露大段的援用. 普遍欣赏器常常变换援用局部的页边境，以和范围的文本辨别开. 在底下的例子中: <blockquote><p>omit needless words.</p><p>vigorous writing is concise. a sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.</p>--william strunk, jr., 1918</blockquote> 表露截止为: omit needless words. vigorous writing is concise. a sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. --william strunk, jr., 1918地方addresses<address> 标志常常用来证明文书档案的作家, 与作家接洽的本领 (如, 一个电子邮件地方), 和一个订正日子. 它普遍是一个文献的结果局部. 比方, 本在线指南的结果一动作: <address>a beginner's guide to html / ncsa / pubs@ncsa.uiuc.edu / revised april 96</address> 截止为: a beginner's guide to html / ncsa / pubs@ncsa.uiuc.edu / revised april 96提防: <address> 不用来普遍邮政地方. 对于普遍邮政地方拜见下文的 "强迫换行" . 强迫换行forced line breaks/邮政地方postal addresses<br> 标志强迫爆发一个换行，行间没有间歇. 对于由较短的行构成的文本，如邮政地方， <p> 元素爆发的附加空行会使你感触不需要. 比方, 运用 <br>: national center for supercomputing applications<br>605 east springfield avenue<br>champaign, illinois 61820-5518<br> 输入为: national center for supercomputing applications605 east springfield avenuechampaign, illinois 61820-5518 程度线horizontal rules<hr> 标志爆发一个和欣赏器窗口等宽的程度线. 程度线对于你分隔文书档案中的各个局部很有效. 比方，很多人在她们的文本中断和 <address> 消息发端之前加一个程度线. 你不妨变换一条线的尺寸 (粗) 和宽窄 ( 程度线蔓延长度占窗口的百分比). 你不妨试着变换树立，直到对表露功效合意. 比方: <hr size=4 width="50%"> 表露为: -------------------------------------------------------------------------------- 字符方法html 有对准单个字符或句子的两种作风: 论理作风和物理作风logical and physical. 论理作风logical styles 按照文本的实质举行标志, 而物理作风 physical styles 指明一个局部的表露功效. 比方, 在前方的句子中, "logical styles" 这个单词标志为一个 "设置definition." 同样的功效 (斜体) 不妨经过其余的标志报告你的欣赏器 "把那些字形成斜体" 来实行。提防：有些欣赏器对 <dfn> 标志不做任何作风证明, 所以你大概没有创造前方段落中的单词表露成斜体。论理作风和物理作风logical versus physical styles即使物理作风和论理作风不妨爆发沟通的功效, 干什么反面而为一呢? 在理念的 sgml 观念中, 实质和它的表露是划分的. 所以 sgml 标志一个头等题目字体为头等题目字体, 然而并不指明头等题目字体该当表露多大, 比方, 24点粗体更加会合24-point bold times centered. 这种处置的长处（一致于很多字处置软硬件的 style sheets ) 是，即使你确定把头等标志字体制改革为 20-point left-justified helvetica, 你只须要变换你的欣赏器中头等题目字体的设置就不妨了. 即日真实有很多欣赏器承诺你按你的蓄意设置多种 html 标志在屏幕上的本质功效. 论理标签的另一个便宜在乎它们无助于于在你的文书档案中维持普遍性. 标志 <h1> 比 24-point bold times center 或其它刻画要好牢记多. 比方, 对 <strong> 标志. 普遍欣赏器用粗体证明. 然而, 某个读者群大概爱好把这局部表露为赤色. 论理作风供给了这种精巧性. 固然, 假如即使你想用斜体表露少许实质而不想受欣赏器的树立的感化, 你就须要运用物理作风 . 所以，物理作风供给一种另一种普遍性：在你的文书档案顶用那种办法表露的实质在其余场合也会以同样的办法表露. 你该当恒定地运用某一种作风. 即使你用物理作风标志, 则在一篇文书档案中全都运用物理作风. 即使你运用论理作风, 则在文书档案中维持运用论理作风. 记取，未来的 html 大概不复扶助物理作风, 这表示着欣赏器将迷惑释物理作风的源代码.

HTML 初学者指南(上)

相关推荐

推荐下载

热门阅览

最新排行