关于Jerry Low
WebHostingSecretRevealed.net (WHSR) 的创始人 - 他的托管评论文受到 100,000 用户的信任和使用。在网络托管、联盟营销和 SEO 方面拥有超过 15 年的经验。为 ProBlogger.net、Business.com、SocialMediaToday.com 等做出不少贡献。
HTML 是当今互联网的支柱。 数以百万计的网站共同组成了互联网。 HTML 是所有这些网站的构建块。 二十年前,即使你只是一个爱好博主,你也必须了解一些网络 编码 保护您自己或为您的网站添加一个简单的功能。 但是现在有如此多的编辑器和插件可用,甚至不再需要了解 HTML 的基础知识。
The problem with this is that if you don't know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem.这样做的问题是,如果您不了解一些基础知识,就很容易在博客中遇到真正的麻烦,而不得不雇用昂贵的开发人员来解决可能是一个小问题。 Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.不仅如此,而且要对博客进行更改(例如添加自定义文本小部件)需要一点知识。
如果您遇到内容布局看起来不正确,HTML知识可以让您回到正轨。
HTML是。的缩写 Hyper T分机 MArkupe Language。 它是标记Web浏览器内容的标准语言。
HTML由“元素”表示。 元素也称为“标签”。
Web浏览器只能在用支持的语言编写时呈现网站。 HTML是最常用的标记语言,对Web浏览器的接受程度最高。
这就是你需要HTML的原因。
HTML不区分大小写。 但最好的做法是用适当的案例编写HTML。
您可以使用计算机上的记事本创建基本HTML文件。 但是编写许多代码行会很痛苦。
你需要一个代码编辑器。 一个好的代码编辑器将使编写和组织大型代码变得更加容易。 我使用并推荐 记事本+ + (免费和开源)用于编写Web语言。 您可以使用其他编辑器 小组石灰文本, Atom 等等
这是你需要做的事情:
你准备好了!
将以下代码复制并粘贴到新的HTML文件中并保存。 现在在您的Web浏览器上运行它。
我的第一个网页你好世界!
恭喜! 您已经创建了第一个HTML文件。 此时您无需了解它。 我们将很快介绍它。
每个HTML文件都有一个共同的裸结构。 一切都在这里开始。 修剪后,每个大页面的代码都会进入这个结构。
因此,让我们尝试从“ Hello World!”中了解它。 码。 以下元素是每个HTML文件的必需部分。
HTML是数百种不同标签的协作。 你需要了解它们的工作原理。 您还必须确保他们以正确的方式使用它们。
HTML标记通常有一个开始标记和一个结束标记。 开头标签的关键字由小于号(<)和大于号(>)包围。 结束标记具有相同的内容,但在小于(<)符号后面加一个正斜杠(/)。
所有的头部标签之间和。 它们包含用于Web浏览器和搜索引擎的元信息。 他们基本上没有视觉输出。
标题标签定义在浏览器选项卡上可见的网页标题。 该信息由Web程序和搜索引擎使用。 每个HTML文件可以拥有最高的一个标题。
代码:
我的第一个网页
链接标记将您的HTML页面与外部资源链接在一起。 它的主要用途是将HTML页面与CSS样式表链接。 这是一个自动关闭的标签,不需要结尾。 rel表示与文件的关系,src表示源。
代码:
Meta是另一个自动关闭标记,它提供html文件的元信息。 搜索引擎和其他Web服务使用这些信息。 如果您想为搜索引擎优化页面,则必须使用元标记。
代码:
<meta name="description" content="This is the short description that search engines show"
script 标签用于包含一个 服务器端 脚本或链接到外部脚本文件。 它可以在开始标签中有两个属性。 一个是类型,另一个是源(src)。
代码:
在Web浏览器中禁用脚本时,Noscript标记有效。 它使页面与不允许在其Web浏览器中使用脚本的用户兼容。
代码:
唉! 脚本被禁用。
所有的身体标签之间和。 他们有视觉输出。 这是完成最多工作的地方。 您必须使用这些标签来构造主页内容。
这些是标题标签。 最重要的标题标记为最不重要的是。 您应该在正确的层次结构中使用它们。
代码:
这是H1标题这是H1标题这是H1标题这是H2标题这是H2标题这是H2标题
输出:
可以使用许多格式标签格式化html文件中的文本。 当您想要突出显示内容中的单词或行时,将是必要的。
代码:
您可以通过多种方式突出显示文本。 您可以加粗,下划线,斜体, 标记,下标,上标等等!
输出:
您可以使用comment标记将某些代码与rending区分开来。 代码将显示在源代码中,但不会呈现。 此标记的主要用途是创建html文件的文档以供将来参考。
例如:
您可以通过以这种方式将它们包围来注释掉任何代码-->
Anchor是一个无价的标签,几乎无处不在。 没有至少一个锚链接,您将不会在线看到任何网页。
结构相同。 它有一个开合部分。 您要定位的文字介于和之间。
有一些属性可以定义用户点击后的位置和方式。
代码:
点击此处转到Google。 它将在新选项卡中打开。 请点击这里。 它还会带您到Google,但会在当前标签中打开。
输出:
图像标记是另一个重要的标记,没有它,您无法想象许多基于图像的网站。
是一个自动关闭标签。 它不需要像。 在正确使用它之前,您需要了解一些属性。
这是2014年500月的Googleplex。 该图像的宽度为375像素,高度为0像素。
输出:
提示:是否要插入可点击的图片? 用标签包装图像代码。 看看情况如何。
列表标签用于创建项目列表。 代表有序列表(编号列表),并且代表无序列表(项目符号)。
里面的清单项目要么被标记为。 李代表名单。 你可以有很多如你所愿要么标签。
代码:
这是一个有序列表: 项目1 项目2 项目3 这是一个无序列表: 项目1 项目2 项目3
输出:
表标记用于创建数据表。 有一些内部级别标签定义表头,行和列。
是外部父代码。 在这个标签中代表表格行, 代表表格栏和代表表头。
代码:
名称年龄职业乔27 商人颂歌26 护士西蒙妮39 教授
输出:
注意:第一个中的值是标题。 所以,我们用将粗体文本效果应用于文本。
您可以使用表分组元素扩展表的功能。 有时您需要创建分成多个页面的大型表。
将表数据分组到页眉,正文和页脚中,您可以允许独立滚动。 标题和正文部分将打印到表格所跨越的每个页面。
表分组标签是:
请注意,使用分组不是强制性的。 您可以使用它来使更大的表更具可读性。 虽然一些特殊的开发人员明显使用这些标签作为CSS选择器。
这是我们如何将示例表分组为, 和:
代码:
名称年龄职业约翰27 商人颂歌26 护士西蒙妮39 教授总人数: 3
输出:
表单元素用于创建网页的交互式表单。 HTML表单包含几个连续的元素。 例如:, , 等等
表单中的action属性非常重要。 它指向用于处理信息的服务器端或第三方页面。 对于处理,您需要首先定义方法。
您可以使用两种方法之一,获取或发布。 获取发送邮件在邮件正文中发送信息的URL格式的所有信息。
表单的输入有很多类型。 最基本的输入类型是文本。 它写为。 类型也可以是单选,复选框,电子邮件等。 底部应有一个提交类型输入,用于创建一个提交按钮。
标签用于创建标签并将其与输入相关联。 将标签与输入相关联的规则是在标签的for =””属性和输入的id =””属性中具有相同的值。
代码:
名字: 姓: 简短的简历: 性别: 男女
输出:
注意:我已将操作指向null值,因为它未连接到任何服务器来处理信息。
属性是HTML标记的一种修饰符。 他们为HTML标记添加了新配置。
属性看起来像attributename =””,位于开头的HTML标记中。 该属性的值位于双引号之间。
id和class是HTML标记的标识符。 使用标识符将不同的名称指定给不同的HTML元素。 您可以为多个元素使用一个类标识符。 但是你不能为多个元素使用一个id标识符。
代码:
这是主标题
href代表超文本引用。 他们将用户指向参考链接。 锚标记使用href将用户发送到目标URL。
代码:
谷歌
src代表来源。 它定义了您在HTML文件中使用的媒体或资源的来源。 源可以是本地或第三方URL。
代码:
alt代表替代方案。 它是在无法加载HTML元素时使用的备份文本。
代码:
style属性通常用于HTML标记。 它在HTML标记中完成CSS的工作。 您的样式属性介于双引号之间。
代码:
这是另一个标题
有些元素总是从新行开始,并占据全部可用宽度。 这些是“块”元素。
例如: , , -- ,表格等。
有些元素仅占用所需的空间,而不是从新行开始。 这些是“内联”元素。
例如: 、、 , 等等
当您使用CSS样式时,您需要将块元素与内联区分开来。 在本HTML指南中,它不是非常必要的。
代码:
我的第一个网页这是H2标题。 它具有块显示。 这是另一个H2标题。 下划线标签具有内联显示。
输出:
这个问题非常明显。 你应该在HTML中使用什么? 单引号还是双引号? 人们似乎同时使用哪一个,但哪一个是正确的?
在HTML中,单引号和双引号是相同的。 它们对输出没有任何影响。
你可以使用你喜欢的任何人。 但是在一页代码中混合两者被认为是一种不好的做法。 你应该与他们中的任何一个保持一致。
语义HTML是HTML的最新版本,也称为HTML5。 它是非语义HTML和XHTML的开发版本。
为什么HTML5更好? 在以前的版本中,HTML元素由ID /类名称标识。 例如: 被视为文章。
在HTML5中, 标签将自己表示为商品,而无需任何id / class标识符。
为了HTML5,现在搜索引擎和其他Web应用程序可以更好地理解网页。 事实证明,语义网站对SEO做得更好。
一个简单的HTML5结构如下所示:
我的第一个网页菜单8 菜单1 这是文章的标题约翰·杜(John Doe)发表文章内容在这里版权所有2 John Doe
大多数网络专业人员在完成后验证他们的代码。 为什么在代码工作正常时验证代码是否必要?
验证代码有两种可能的原因:
W3C验证 是最受欢迎的代码验证服务。 他们有几种验证代码的方法。 您可以上传文件或直接在其验证引擎中输入代码。
HTML是一个不断学习的主题。 更新版本的HTML可能会更快到来。 所以你必须保持更新并继续练习。 实践是什么aces HTML。
以下是一些有用的资源: