热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

网编学堂:HTML入门教程

这是一篇关于编写超文本标记语言(HTML)的简短指引。什么是HTML?它是一种被浏览器使用来呈现文本和图形的特殊文本文档。
这是一篇关于编写超文本标记语言(HTML)的简短指引。 什么是HTML?它是一种被浏览器使用来呈现文本和图形的特殊文本文档。
文本包含像

一类的标记来修饰一个段落的开始,

则修饰一个段落的结束。 “HTML文档”通常也被称作“网页”。
浏览器从Web服务器请求网页,由于因特网,它能传播到世界各个角落。

  许多人仍然使用像Linux?平台上的Kate、Geany、VIM[1],Mac?平台上的TextEdit,Windows?平台上的NotePad工具来亲手编写HTML。这篇指南会手把手教您这些。
即使您不是打算直接编辑HTML,而是计划使用像Netscape Composer,或W3C的Amaya这样的HTML编辑器,
这份指南一样能帮助您充分明白更好地利用这些工具和如何制作能在更多种类浏览器上访问的HTML文档。
当您掌握HTML基础后,您可能会想学习如何使用CSS添加一个样式,与及从《HTML进阶》学习更多,体验更多HTML特性。


  值得一提的是,通过点击“查看”菜单,然后点击“页面源代码”,查看别人是如何编写他们的HTML页是一个很好的学习方式。
在一些浏览器上,您操作可能是点击“文件”,然后点击“查看”。尝试查看当前页源代码,了解我在下面解释的意图。


  [2]对于Linux?/类Unix?用户,如果在GNOME桌面环境,推荐使用Geany编辑器,如果在KDE,推荐使用Kate编辑器,
如果使用其它其它桌面环境或者窗口管理器可以尝试VIM或者Emacs。 它们都有非常人性化功能:


  语法着色


  自动补全


  显示行号


  代码块折叠


  对于Mac?用户,在保存一个为扩展名是“.html”的文件前,您需要确保您的文档已经格式化为纯文本。
对于TextEdit,您能通过“格式“菜单“制作纯文本”选项设定。


  对于Windows?用户,使用cpp是一个不错的选择[3]


  这个页面会教您如何:


  开始一个主题


  添加标题和段落


  为您的文本添加斜体字


  添加图像


  添加指向其它页面的链接


  使用多种列表


  如果您想学习更多其它知识,请查看《HTML进阶》


  开始一个主题


  每一个HTML文档都需要一个主题。您需要输入这些:


  


  可以更改“我的第一个HTML文档”来满足您自己的需要。
这个title文本被以为结束标记。 该主题应该写在您文档的开始部分。


  要试验它,可以在文本编辑器里面输入上面的代码并保存文件为“test.html”,然后在一个浏览器中查看这个文件。
如果该文件的扩展名是“.html”或者“.htm”,浏览器会把它当作HTML。大部分浏览器会在窗口标题栏显示该主题。
除了一个主题,浏览器将显示一个空白页。别着急,下一节将说明如何添加可显示的内容。


  添加标题和段落


  如果您使用过微软的Word,您会觉得很像为不同级别强制性标题设置样式。
在HTML中有六种级别的标题。H1表示最高强调,H2较前者略减,依次到强调性最弱的H6。


  下面是如何添加一个强调标题


  一个强调的标题


  这里是一个次于最高级别强调的标题:


  

一个次于最高级别强调的标题


  您编写的每一个段落都应该使用一个

标记开始,

是可选的,跟标题元素结束标记不一样[4]。例如:


  标记都是以的形式包含文本,本文内容按需求而定


  标记具体名称(中的“?”)不一样,但是大体结构上一样。却都有<和>,起始是,结束是

这是第一段。


  

这是第二段。


  添加一些斜体字


  您能使用标记斜体化一个或多个字。实例:


  这确实是一个 有趣的 话题!


  添加图象令您的页面更有趣


  使用图象不但能令您的网页有特色,还有助于理解您想表达的信息。添加图象的一个简单方法是使用标记。
我们假定您有一个名为“peter.jpg”图象文件与您的HTML文件在同一个文件夹/目录里。它200象素宽,150象素高。



  src属性为图象文件名。宽度和高度并不严格需要,但加上它有助于加快显示您的网页。有些仍是不可见的。
人们看不见图象时需要一个替代描述。您可以添加一个像下面的简短描述:


alt="我的朋友彼得">


  在这个“我的朋友彼得”例子里,alt属性被使用来添加一个简短的描述。对于复杂图象,您也许还需要提供一个详细描述。
假定已经把它写入“peter.html”文件,您可以像下面一样使用longdesc属性添加一个:


我的朋友彼得 lOngdesc="peter.html">


  您可以通过多种方式创建图象,比如从一部数码相机扫描一张,或者绘画或绘图程序创建。
大部分浏览器识别GIF和JPEG图象格式,比较新的浏览器可以识别PNG图象格式。通过网络下载图象时,您应该避免使用大图象文件以免慢长延时。


  一般来说,对于相片和其它需要平滑地改变的图象来说,JPEG是最好的选择,但对于色彩单调的区域,线条和文本等艺术图形,GIF和PNG也是一个不错的选择。
三种格式的支持选项不断地改进[4] !!!


  添加转到其它页面的链接


  网络如此有影响力是因为它能定义从一个页面到另一个页面的链接,链接是一个可点击的按钮。一个单一的点击能令您穿越世界!


  标记定义链接。让我们定义一个链接,在“peter.html”文件中定义一个链接到页面,与您正在编辑HTML文件在同一个文件夹/目录。


  这是一个链接到彼得的页面


  之间的文本为链接的标题。标题通常是带下划线蓝色文本


  如果您的链接指向的文件在一个父文件夹/目录,您需要在它前面加上“../”,例如:


  玛丽的页面


  如果您的链接指向的文件在一个子目录,您需要在它前面加上一个“/”。


  苏的页面


  使用相对路径允许您通过遍历目录树,链接到一个您需要的文件,例如:


  约翰的页面


  首先在父目录找到名为“大学”目录,然后在该目录的子目录中找到名为“朋友们”,最后在"firends"目录下找到一个名为“约翰.html”的文件。


  要链接到另一个网站的一个页面,您需要给出完整网站地址(通常被称为一个“统一资源定位器”,Unite Research Localizer),
例如链接到www.w3.org,您需要这样写:


  这个链接到W3C.


  您可以转换一幅图象为一个超文本链接,例如,允许您通过点击公司标识跳转到主页:


  主页


  这里使用“/”指向目录树的根目录,也就是主页所在位置。


  三种列表


  HTML支持三种列表。第一种是子弹开型列表,通常被称为无序列表。它使用

  • 标记,例如:


      


        

    • 第一个列表项

    •   

    • 第二个列表项

    •   

    • 第三个列表项

    •   


      注意您始终需要使用

结束标记来终止列表,但是可选的,它可以自动终止。
第二种列表是一种编号列表,通常被称为有序列表。它使用
  1. 标记,例如:


      


        

    1. 第一个列表项

    2.   

    3. 第二个列表项

    4.   

    5. 第三个列表项

    6.   


      跟子弹型列表一样,您始终需要使用

结束标记来终止列表,但是可选的,它可以自动终止。


  第三种也是最后一种是定义列表。它允许您列示项和项的解释。这种列表使用

标记开始,使用
结束,
每一个项使用
标记开始,第一个解释使用
开始,例如:


  


  

第一个项


  

它的解释


  

第二个项


  

它的解释


  

第三个项


  

它的解释


  


  结束标记和

是可选的,它可以自动终止。注意列表可以嵌套,一个被另一个包含,例如:


  


      

  1. 第一个列表项

  2.   


  3.   第二个列表项


      


        

    • 第一个嵌套项

    •   

    • 第二个嵌套项

    •   


      


  4.   

  5. 第三个列表项

  6.   


  对于更长的列表项,您还可以充分使用段落和标题等等。


  HTML有一个标头(head)和一个主体(body)


  如果您使用网络浏览器的查看源代码特性(留意“查看”或者“文件”菜单),您能看见HTML页面的结构。
该文档一般以一个使用哪个版本HTML的定义为开始,然后跟着的是标记,接着是,最后是。
l;……就像一个装载文档的容器。……包含标题、关于样式表和脚本信息,
……包含标记和可示内容。您可以把这里的一个模板复制粘贴到您的文本编辑器,然后创建您自己页面:


  

"http://www.w3.org/TR/html4/loose.dtd">  "http://www.w3.org/TR/html4/loose.dtd">


  


  


  


  


  


  替换为您的文档内容


  


  


  整理您的标记


  有一个很方便的方法自动修复标记错误,那就是使用HTML Tidy[5], 它能整理标记以便让它容易阅读和编写。
我推荐您定期地运行Tidy整理您正在编写的标记。Tidy对于清理有马虎习惯的人使用编辑工具创作代码非常有效。 TidyLib Sourceforge
site上Tidy在多种操作系统可用, 它已经被整合进众多HTML编辑工具。


  获取更多信息


  如果您想学习更多其它知识,我已经准备一些相关资料在《HTML进阶》和 《添加一个样式》


  W3C关于超文本标记语言 4.0的推荐是HTML的权威规范。 不想纠缠于枯燥的学术性信息,又想掌握HTML,您应该购买一些书,例如,《Raggett
on HTML 4》, 扩展超文本标语言 1.0(XHTML 1.0)目前是W3C一个推荐。




推荐阅读
  • mysql和php的关系理解(php技术和mysql怎么结合)
    本文目录一览:1、apachephpmysql他们是什么关系 ... [详细]
  • ANSI
    ANSI是什么编码?用Notepad创建一个文本文件text.txt,其默认编码格式为ANSI(乍看之下,还以为是ASCII ... [详细]
  • 本文主要说明了Linux是什么,Linux发展历史,以及同Linux系统有关的 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • PDF内容编辑的两种小方法,你知道怎么操作吗?
    本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 使用chrome编辑器实现网页截图功能的方法
    本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令,打开控制台并调用命令面板,用户可以方便地进行网页截图操作。 ... [详细]
  • Unity3D引擎的体系结构和功能详解
    本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具,用于创建交互式3D应用程序。它由游戏引擎和编辑器组成,支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费,适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]
  • BashShell作为Linux的指定合作伙伴我们已经再熟悉不过了,使用Bash可以快速编写简单的脚本方便我们的日常比如善用vim,awk和sed三剑客,也可以创建十分复杂的逻辑, ... [详细]
  •  像Slashdot这样的论坛上常常有人在攻击GNU,他们的观点在我看来完全是缺乏历史知识和不尊重历史。当GNU倡导称Linux为GNU/Linux时,这些人声称GNU企图从Linus ... [详细]
  • 经过前面的一系列工作后,GO的语言环境已经搭建完成。我们也初步体验了GO提供的大部分命令。但在正式进入开发之前,还有件工作要做,那就是选择一款适合自己的IDE。为什么使用IDE“程 ... [详细]
  • 图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 本文介绍了在Linux中执行.sh脚本时出现/bin/sh^M: bad interpreter: No such file or directory异常的原因分析,并提供了两种解决方法:在Windows下进行编码格式转换,或在Linux中修改文件格式和执行权限。具体操作步骤也在摘要中给出。 ... [详细]
author-avatar
清潇静凌
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有