初学者的权威HTML指南

最新更新于15 May 2018

二十年前,即使你只是一个业余爱好博客,你也必须知道一些网络编码来保护自己或为你的网站添加一个简单的功能。 但现在有很多编辑器和插件可供使用,甚至不再需要了解HTML的基础知识 建立一个网站 or 经营一个博客.

这样做的问题是,如果您不了解一些基础知识,您可以轻松地在您的博客中遇到麻烦,并且必须聘请昂贵的开发人员来解决可能是一个小问题。 不仅如此,而且创建对博客的更改(例如添加自定义文本小部件)需要一些知识。

如果您遇到内容布局看起来不正确,HTML知识可以让您回到正轨。

以下是我们为博主和非技术在线企业主提供的HTML指南版本。

HTML是当今互联网的支柱。 数百万个网站共同构成了互联网。 HTML是所有这些网站的构建块。

初学者的问答

1-什么是HTML?

HTML是。的缩写 Hyper T分机 MArkupe Language。 它是标记Web浏览器内容的标准语言。

HTML由“Elements”表示。 元素也称为“标签”。

2-为什么需要HTML?

Web浏览器只能在用支持的语言编写时呈现网站。 HTML是最常用的标记语言,对Web浏览器的接受程度最高。

这就是你需要HTML的原因。

3- HTML是否区分大小写?

HTML不区分大小写。 但最好的做法是用适当的案例编写HTML。

创建第一个HTML文件的步骤

您可以使用计算机上的记事本创建基本HTML文件。 但是编写许多代码行会很痛苦。

你需要一个代码编辑器。 一个好的代码编辑器可以更容易地编写和组织大型代码。

我使用并推荐 记事本+ + (免费和开源)用于编写Web语言。 您可以使用其他编辑器 Sublime Text, Atom 等等

这是你需要做的事情:

  1. 安装代码编辑器
  2. 打开它
  3. 创建一个新文件
  4. 将其另存为.html文件

你准备好了!


GO TOP

1- Hello World!

将以下代码复制并粘贴到新的HTML文件中并保存。 现在在您的Web浏览器上运行它。

代码:

<!DOCTYPE html> <html> <head> <title>我的第一个网页</ title> </ head> <body> <p> Hello World!</ p> </ body> </ html>

输出:

恭喜! 您已经创建了第一个HTML文件。 此时您无需了解它。 我们将很快介绍它。

理解HTML结构

每个HTML文件都有一个共同的裸结构。 一切都在这里开始。 修剪后,每个大页面的代码都会进入这个结构。

所以让我们尝试从“Hello World!”代码中理解它。 以下元素是每个HTML文件的必需部分。

  • <!DOCTYPE html> =浏览器声明这是一个HTML文件。 您必须在<html>标记之前指定它。
  • <html> </ html> =这是HTML文件的根元素。 你写的所有东西都在<html>和</ html>之间。
  • <head> </ head> =这是浏览器的元信息部分。 此标记内的代码没有可视输出。
  • <body> </ body> =这是Web浏览器呈现的部分。 您在网站上看到的是在<body>和</ body>之间呈现代码。


GO TOP

2- HTML标签

HTML是数百种不同标签的协作。 你需要了解它们的工作原理。 您还必须确保他们以正确的方式使用它们。

HTML标记通常具有开始和结束标记。 开始标记的关键字由小于(<)和大于(>)的符号包围。 结束标记具有相同的一切,但在小于(<)符号后面有一个额外的正斜杠(/)。

(2a)头标签

所有头标签都在<head>和</ head>之间。 它们包含Web浏览器和搜索引擎的元信息。 他们基本上没有视觉输出。

<title> </ title>

标题标签定义在浏览器选项卡上可见的网页标题。 该信息由Web程序和搜索引擎使用。 每个HTML文件可以拥有最高的一个标题。

代码:

<title>我的第一个网页</ title>
标题标记显示在浏览器顶部。

<链路>

链接标记将您的HTML页面与外部资源相关联。 它的主要用途是将HTML页面与CSS样式表链接起来。 它是一个自动关闭标签,不需要结束</ link>。 这里rel表示与文件的关系,src表示源。

代码:

<link rel =“stylesheet”type =“text / css”src =“style.css”>

的<meta>

Meta是另一个自动关闭标记,它提供html文件的元信息。 搜索引擎和其他Web服务使用这些信息。 如果您想为搜索引擎优化页面,则必须使用元标记。

代码:

<meta name =“description”content =“这是搜索引擎显示的简短描述”

<script> </ script>

脚本标记用于包括服务器端脚本或链接到外部脚本文件。 它在开始标记中可以有两个属性。 一个是类型,另一个是源(src)。

代码:

<script type =“text / javascript”src =“scripts.js”> </ script>

<noscript> </ noscript>

在Web浏览器中禁用脚本时,Noscript标记有效。 它使页面与不允许在其Web浏览器中使用脚本的用户兼容。

代码:

<NOSCRIPT> <P>唉! 脚本被禁用。</ p> </ noscript>

(2b)正文标签

所有的body标签都在<body>和</ body>之间。 他们有视觉输出。 这是完成大部分工作的地方。 您必须使用这些标记来构建主页面内容。

<h1> </ h1>到<h6> </ h6>

这些是标题标签。 最重要的标题用<h1>标记,最不重要用<h6>标记。 您应该在正确的层次结构中使用它们。

代码:

<h1>这是一个h1标题</ h1> <h2>这是一个h2标题</ h2> <h3>这是一个h3标题</ h3> <h4>这是一个h4标题</ h4> <h5 >这是一个h5标题</ h5> <h6>这是一个h6标题</ h6>

输出:

格式化标签

可以使用许多格式标签格式化html文件中的文本。 当您想要突出显示内容中的单词或行时,将是必要的。

代码:

<p>您可以通过多种方式突出显示您的文字。</ p> <p>您可以<strong>加粗</ strong>,<u>加下划线</ u>,<em>斜体</ em>,<标记>标记</ mark>,<sub>下标</ sub>,<sup>上标</ sup>等等!</ p>

输出:

<! - - >

您可以使用comment标记将某些代码与rending区分开来。 代码将显示在源代码中,但不会呈现。 此标记的主要用途是创建html文件的文档以供将来参考。

例如:

<! -  <p>您可以通过以这种方式包围它们来注释掉任何代码</ p>  - >

(2c)其他重要的HTML标签

<a> </a>

Anchor是一个无价的标签,几乎无处不在。 没有至少一个锚链接,您将不会在线看到任何网页。

结构是一样的。 它有一个开口<a>和一个关闭部分</a>。 要锚定的文本介于<a>和</a>之间。

有一些属性可以定义用户点击后的位置和方式。

  • ahref =“” =它定义目标链接。 链接在双引号之间。
  • target =“” =它定义URL是在新浏览器选项卡中还是在同一选项卡中打开。 target =“_ blank”用于新选项卡,target =“_ self”用于在同一选项卡中打开。
  • rel =“” =它定义当前页面与链接页面的关系。 如果您不信任链接页面,则可以定义rel =“nofollow”。

代码:

<p> <a target="_blank" href="https://www.google.com/">点击此处</a>转到Google。 它将在新标签页中打开。</ p> <p> <a target="_self" href="https://www.google.com/">点击此处</a>。 它还会将您带到Google,但会在当前标签中打开。</ p>

输出:

<img />

图像标记是另一个重要的标记,没有它,您无法想象许多基于图像的网站。

<img />是一个自动关闭的标签。 它不需要传统的结束,如</ img>。 在正确使用它之前,您需要了解一些属性。

  • src =“” =这用于定义图像的源链接。 将链接放在双引号之间。
  • alt =“” =它代表替代文字。 当您的图像未加载时,此文本将为用户提供有关丢失图像的信息。
  • width =“” =它以像素为单位定义图像的宽度。
  • 高度=“” =它以像素为单位定义图像的高度。

例如:

<p>这是8月2014中的Googleplex。</ p> <p>此图片的宽度为500像素,高度为375像素。</ p> <img src =“https://upload.wikimedia。 org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG“alt =”Google总部八月2014“width =”500“height =”375“/>

输出:

提示:想要插入可点击的图片吗? 使用<a>标签包装图像代码。 看看它如何。

<ol> </ ol>或<ul> </ ul>

列表标记用于创建项目列表。 <ol>代表有序列表(编号列表),<ul>代表无序列表(项目符号点)。

<ol>或<ul>中的列表项标有<li> </ li>。 li代表清单。 您可以在父<ol>或<ul>标记内包含任意数量的<li>。

代码:

<p>这是一个有序列表:</ p> <ol> <li>项目1 </ li> <li>项目2 </ li> <li>项目3 </ li> </ ol> <p>这是一个无序列表:</ p> <ul> <li>项目1 </ li> <li>项目2 </ li> <li>项目3 </ li> </ ul>

输出:

<table> </ table>

表标记用于创建数据表。 有一些内部级别标签定义表头,行和列。

<table> </ table>是外部父代码。 在此标记中,<tr>代表表格行,<td>代表表格列,<th>代表表格标题。

代码:

<table> <tr> <th>名称</ th> <th>年龄</ th> <th>职业</ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td>商人</ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td>护士</ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td>教授</ td> </ tr> </ table>

输出:

注意:第一个<tr>中的值是标题。 因此,我们使用<th>将粗体文本效果应用于文本。

表分组

您可以使用表分组元素扩展表的功能。 有时您需要创建分成多个页面的大型表。

将表数据分组到页眉,正文和页脚中,您可以允许独立滚动。 标题和正文部分将打印到表格所跨越的每个页面。

表分组标签是:

  • <thead> </ thead> =用于包裹桌子的标题。 它打印到表的每个拆分页面。
  • <tbody> </ tbody> =用于包装表的主数据。 您可以根据需要拥有尽可能多的<tbody>。 <tbody>标记表示一组单独的数据。
  • <tfoot> </ tfoot> =用于包装表的页脚信息。 它打印到表的每个拆分页面。

请注意,使用分组不是强制性的。 您可以使用它来使更大的表更具可读性。 虽然一些特殊的开发人员明显使用这些标签作为CSS选择器。

以下是我们如何将示例表分组为<thead>,<tbody>和<tfoot>:

代码:

<table> <thead> <tr> <th>姓名</ th> <th>年龄</ th> <th>职业</ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td>商人</ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td>护士</ td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td>教授</ td> </ tr> </ tbody> <tfoot> <tr> <td>总人数:</ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

输出:

<form> </ form>

表单元素用于为网页创建交互式表单。 HTML表单包含多个连续元素。 例如:<label>,<input>,<textarea>等。

表单中的action属性非常重要。 它指向用于处理信息的服务器端或第三方页面。 对于处理,您需要首先定义方法。

您可以使用两种方法之一,获取或发布。 获取发送邮件在邮件正文中发送信息的URL格式的所有信息。

表单的输入有很多种类型。 最基本的输入类型是文本。 它写为<input type =“text”>。 类型也可能是广播,复选框,电子邮件等。 底部应该有一个提交类型输入,用于创建提交按钮。

<label>标签用于创建标签并将其与输入相关联。 将标签与输入相关联的规则是在for =“”label属性和id =“”输入属性中具有相同的值。

代码:

<form action =“#”> <label for =“firstname”>名字:</ label> <input type =“text”id =“firstname”> <br> <label for =“lastname”>姓氏: </ label> <input type =“text”id =“lastname”> <br> <label for =“bio”>简短生物:</ label> <textarea id =“bio”rows =“10”cols =“ 30“placeholder =”在此处输入您的简历...“> </ textarea> <br> <label>性别:</ label> <br> <label for =”male“>男性</ label> <输入类型= “radio”name =“gender”id =“male”> <br> <label for =“female”>女性</ label> <input type =“radio”name =“gender”id =“female”> <br > <input type =“submit”value =“Submit”> <form>

输出:

注意:我已将操作指向null值,因为它未连接到任何服务器来处理信息。


GO TOP

3- HTML属性

属性是HTML标记的一种修饰符。 他们为HTML标记添加了新配置。

属性看起来像attributename =“”并且位于开始的HTML标记中。 属性的值介于双引号之间。

id =“”和class =“”

id和class是HTML标记的标识符。 使用标识符将不同的名称指定给不同的HTML元素。 您可以为多个元素使用一个类标识符。 但是你不能为多个元素使用一个id标识符。

代码:

<h1 class =“heading”>这是主标题</ h1>

HREF =””

href代表超文本参考。 他们指向用户引用链接。 锚标记<a>使用href将用户发送到目标URL。

代码:

<a href="https://www.google.com/"> Google </a>

SRC =””

src代表来源。 它定义了您在HTML文件中使用的媒体或资源的来源。 源可以是本地或第三方URL。

代码:

<img src =“https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG”/>

ALT =””

alt代表替代方案。 它是在无法加载HTML元素时使用的备份文本。

代码:

<img src =“https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"alt =”Google总部“/>

风格=””

style属性通常用于HTML标记。 它在HTML标记中完成CSS的工作。 您的样式属性介于双引号之间。

代码:

<h2 style =“color:red”>这是另一个标题</ h2>


GO TOP

4-代码显示:阻止与内联

有些元素总是从一个新行开始,并采用完整的可用宽度。 这些是“块”元素。

例如:<div>,<p>,<h1> - <h6>,表格等。

某些元素仅占用所需空间,不会在新行上启动。 这些是“内联”元素。

例如:<a>,<span>,<br>,<strong>,<img>等

当您使用CSS样式时,您需要将块元素与内联区分开来。 在本HTML指南中,它不是非常必要的。

代码:

<!DOCTYPE html> <html> <head> <title>我的第一个网页</ title> </ head> <body> <h2>这是一个H2标题。 它有块显示。</ h2> <h2>这是<u>另一个</ u> H2标题。 这里的下划线标签有内联显示。</ h2> </ body> </ html>

输出:


GO TOP

5-双引号与HTML中的单引号

这个问题非常明显。 你应该在HTML中使用什么? 单引号还是双引号? 人们似乎同时使用哪一个,但哪一个是正确的?

在HTML中,单引号和双引号是相同的。 它们对输出没有任何影响。

你可以使用你喜欢的任何人。 但是在一页代码中混合两者被认为是一种不好的做法。 你应该与他们中的任何一个保持一致。


GO TOP

6-语义HTML与非语义HTML

语义HTML是HTML的最新版本,也称为HTML5。 它是非语义HTML和XHTML的开发版本。

为什么HTML5更好? 在以前的版本中,HTML元素由id / class名称标识。 例如:<div id =“article”> </ div>被认为是一篇文章。

在HTML5中,<article> </ article>标记将自身表示为文章而不需要任何id / class标识符。

为了HTML5,现在搜索引擎和其他Web应用程序可以更好地理解网页。 事实证明,语义网站对SEO做得更好。

以下是一些流行的HTML5标记列表:

  • <main> </ main> =这是用于包装要向观看者显示的主要内容。
  • <header> </ header> =这用于标记内容的标题部分,例如title或author meta。
  • <article> </ article> =它为您的观众指定用户定义或独立的内容。
  • <section> </ section> =它可以对任何代码进行分组,例如页眉,页脚或侧边栏。 你可以说,它是div的语义形式。
  • <footer> </ footer> =这是您的页脚内容,免责声明或版权文本所属的地方。
  • <audio> </ audio> =它使您可以插入音频文件,而不会有任何插件问题。
  • <video> </ video> =与<audio>一样,您可以使用此标记插入视频而不会出现插件问题。

一个简单的HTML5结构如下所示:

<!DOCTYPE html> <html> <head> <meta charset =“utf-8”/> <title>我的第一个网页</ title> </ head> <body> <header> <nav> <ul> < li>菜单1 </ li> <li>菜单2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2>这是文章的标题</ h2> <p> John Doe发表</ p> </ header> <p>文章内容在这里</ p> </ article> </ main> <footer> <p>版权所有2017 John Doe </ p> </ footer> </ body> </ html>


GO TOP

7- HTML验证

大多数网络专业人员在完成后验证他们的代码。 为什么在代码工作正常时验证代码是否必要?

验证代码有两种可能的原因:

  1. 它将帮助您使代码跨浏览器和跨平台兼容。 代码可能不会在您当前的浏览器中显示任何错误,但可能在另一个浏览器中显示。 代码验证将修复它。
  2. 如果您的页面有错误,搜索引擎和其他网络程序可能会停止抓取您的网页。 您可以通过验证确认您没有任何重大错误。

W3C验证 是最受欢迎的代码验证服务。 他们有几种验证代码的方法。 您可以上传文件或直接在其验证引擎中输入代码。


GO TOP

8-其他有用的资源

HTML是一个不断学习的主题。 更新版本的HTML可能会更快到来。 所以你必须保持更新并继续练习。 实践是什么aces HTML。

以下是一些有用的资源: