什么是HTML?
HTML是网页本身。您现在正在查看的文章也是用HTML编写的。如果您选择一个项目,如“查看源代码”从通过右键单击浏览器窗口出来的菜单,你可以看到如下图所示的图正在浏览的网页的HTML源代码。每个网页都包含这样的HTML源代码。
(左)此浏览器中的实际外观/(右)此网页的HTML源代码
我该如何编写这样的HTML源代码?在这篇文章中,对于那些谁被认为在未来的HTML写的,叫什么标签,什么元素,如东西...... CSS(样式表)之间的关系,可以对HTML消除问题我会解释一下。
什么是HTML标记
使用HTML标记添加含义
您可能已经看过“HTML标签”这个表达式。HTML是一种数据格式(语言),它使用称为“标记”的描述方法为字母和句子添加含义和角色。如果您知道如何编写此“标记”,则可以轻松编辑HTML。例如,在以下HTML源代码中,它表示“all about”一词是标题。
All About title>此外,在以下HTML源代码中,它意味着强调“重要”一词。
这尤其是重要 strong>。
如
和 中所述,“”符号之间的描述称为“tag”。在这种情况下,由于它们包含英文单词“title”和“strong”,因此它们也分别称为“标题标签”和“强标签”。在类似的表达中,有一个短语“title element”或“strong element”,但含义略有不同。标签和元素之间的区别将在下一页介绍。■ 备注:HTML代表“超文本标记语言”HTML的缩写
首先,HTML代表“超文本标记语言”。超文本(Hypertext)是可以从一个文档链接到另一个文档的数据。标记(Markup)用于标记文档。换句话说,HTML是“用于连接多个文档的标记语言”。“标记”也称为“标记”。该标准已逐步扩展,现在已成为可以制作各种表达的规范。
■ 注:它是由PHP或CGI生成,最终成为HTML形式或网页,或在PHP已经作出,并利用编程语言如Perl和C语言中的CGI由我也这样做。然而,这两种也可在端部是HTML箱子的形式输出时,浏览器将不被显示在屏幕上读出的HTML源代码。
如何编写HTML源代码(如何编辑)
有很多软件可以创建HTML
HTML可以自己描述源,也可以使用创建软件生成。由于HTML文件是文本格式,可以说可以使用可以编辑文本数据的软件创建任何内容。但是,如果没有任何先验知识或技能,很难从1开始编写。由于有许多方便的软件支持HTML的描述,因此首先使用它们进行编写是很容易和可取的。它也在以下文章中介绍。■ 显示结果和软件是方便,而比较写的HTML源通过创建软件对于初学者来说,不必编辑任何HTML源代码您还可以创建网页。但是,为了自由地创建网页,能够在某种程度上直接编写HTML源是有利的。最初,使用可以在将HTML源与实际显示进行比较时编辑的软件,将会特别容易理解。下图显示了一个名为Microsoft Expression Web 4的创建软件的示例,该软件是免费分发的。
您可以编写HTML源代码,可以编辑显示结果侧,相互反映编辑结果的软件示例
■ 如果是文本编辑器,让我们使用可以着色HTML标签并处理UTF-8的软件
如果HTML源是彩色编码的文本编辑器,则易于编辑
HTML源代码也可以使用文本编辑器编写。如果您稍微修改现有HTML源代码,则文本编辑器非常方便。具有着色HTML标记功能的编辑器更易于阅读,更容易防止编辑错误。日语中有多种字符代码选择。有许多由SHIFT-JIS代码编写的网站已经使用了很长时间,但如果你打算这样做,最好用UTF-8代码编写。UTF-8是推荐用于HTML 5的字符代码(稍后描述),并且诸如象形图之类的特殊符号可以原样包含在HTML源中。
HTML和CSS之间的关系是什么(样式表)
您可以使用HTML创建网页,但是您需要一起使用CSS(样式表)来创建布局并装饰它们。如下图所示,HTML主要描述句子结构,并通过CSS向CSS添加色彩和布局等装饰信息。
用CSS(样式表)=网页描述HTML +装饰中的文本结构
■ 所有的装修是写在CSS(样式表)在旧的HTML标准,您可以指定在HTML本身的文字颜色和背景颜色,却能或创建布局,比如左,右拉和居中。但是现在用CSS而不是HTML编写这样的装饰是标准的。如果您想要将“文档结构完全分离为HTML·装饰为CSS”,则更容易管理,这样可以更轻松地将设计与多个页面统一起来。有关详细信息,请参阅CSS评论。
什么是HTML5?什么是XHTML?
您经常会看到带有数字后跟HTML的“HTML 5”表达式。此外,您可能已经看到了名称“XHTML”。我将简要介绍它们。■ HTML有版本
HTML版本的过渡(W3C推荐的年份)
HTML规范(语法)中有一个版本,它在“HTML”之后用数字值表示,如HTML 5.1,HTML 5,HTML 4.1等。HTML规范分阶段发布,从第一个“草案”到最终决定“推荐”有几个步骤。此表是推荐每个HTML版本的年份(=规范最终确定的年份)。撰写本文时推荐的最新版本是HTML 5.1。如果你现在说“HTML 5”,你可以认为它是5.0和5.1的组合。当HTML达到5.0时,规范发生了显着变化。使用创建软件时,最好注意是否可以使用HTML 5生成。■ 什么是XHTML?
虽然XHTML的配方在HTML 4.01之后有所提升,但它在2009年停止使用,最终HTML 5成为标准
从HTML4.01在1999年建议,也一直空缺15年HTML5.0在2014年建议。实际上,在这段时间里,有一个名为XHTML的标准。即使是现在,也有许多用XHTML编写的网页。XHTML是基于标准称为XML语言,在一段时间内还当我被告知“网络的未来是写在代替HTML XHTML”。但是,后来的XHTML配方被中止,HTML 5被标准化了。如果你现在做网页,你可能想在HTML5编写,而不必担心的是,XHTML的。
好了,现在你有HTML的概述,接下来的页面和HTML,差的“元素”,如写的属性和特殊符号的“标签”的基本结构将解释。
HTML的基本结构是什么
首先,我们简要介绍一下HTML源代码的基本结构。没有必要认真思考。正如上页解释了一下,只是去周围的字符通过使用标签。在任何情况下,整个HTML源被封闭在。在这里面,有大约两个区域分为和。
HTML源大致具有头部区域和身体区域
■ 描述页面的信息的网络到接近HTML源的中,顶部写诸如文件被读取的页的标题和分开,所述网页的显示写相关的信息。■ 描述文本在下面的中,描述网页的主体。在浏览器的绘图区域内绘制的内容主要是本主题中描述的内容。
HTML“tag”和“element”之间的区别
在HTML的解释中,使用两种术语“标签”和“元素”。人们普遍认为两者具有相同的含义,但其含义完全不同,如下所示。
HTML标记和元素之间的区别(元素由开始标记内容结束标记组成)
■ 什么是标签?标签是夹在“”之间的一条信息。有代表开头的开始标记,例如和,以及代表结尾的结束标记,例如和。■ 什么是元素?元素是以“开始标记”开头并以“结束标记”结尾的整体。它还包括开始和结束标记之间的内容。但是,根据元素的类型,还有没有结束标记的“空元素”(稍后描述)。例如,“使用强元素强调”和“强调,用标签和标签括起来”的解释具有相同的含义。■什么是没有结束标记的“空元素”
有些元素没有结束标记
某些元素只有一个开始标记而没有结束标记。这些元素被称为“空元素”。最常用的空元素可能是一个br元素,这意味着换行。由于这只是表示换行位置的元素,因此没有结束标记,因为没有内容(=开始标记和结束标记之间的内容字符串)。这样一个空元素将在HTML中以HTML格式编写开始标记,但在XHTML中,它使用特殊方式以“/>”结尾,如。任何一种写作方式都可以在HTML 5的规范中使用,但额外的描述是浪费容量,所以只需将其写为“”。
HTML的各种元素以及如何编写它
现在我们知道标签和元素之间的区别,我将简要解释这些元素。■ 元素逐个具有角色(含义)
每个元素都有意义(作用)
HTML元素各有角色和含义。例如,p元素表示段落,a元素表示链接,strong元素表示强调。此外,虽然没有像div元素和span元素这样的特殊含义,但是有一些元素用于“分组特定范围”。
■ Element采用嵌套(嵌套)结构
描述元素中的元素
HTML的元素可以用嵌套结构(元素包含在元素中的结构)来描述。例如,在图中,p元素内部有一个span元素,它有一个三元结构,span元素内部还有一个元素。这样,在HTML中,我们根据需要将元素描述为嵌套多次。在以下来源中,表示“标题”的h1元素包括表示“强调”的强元素。
主页创建简介
请注意不要写如下。
主页使用入门
在上面,标记写在标记之前,它没有正确的嵌套结构。这种嵌套结构经常在HTML源中使用。要使源尽可能易于阅读,您需要使用缩进方法,例如制表符和空格。另外,为了掌握现有页面的结构,使用可以很好地格式化和显示HTML源的工具是很方便的。■ 有时“写入位置”在每个元素中受到限制HTML元素不能随意写在任何地方,而是写作良好的立场是用语法规定的。例如,不可能在表示段落的p元素内包含其他p元素。即使它违反了语法,许多浏览器也会适当地解释并显示页面。然而,由于与语法相反的解释因浏览器而异,如果它不遵循语法,则取决于浏览器,它将成为不同的外观因素。
可以通过输入URL或上传HTML文件来检查语法的服务
已经制定HTML语法的W3C组织有一个服务“ W3C标记验证服务 ”,可以检查HTML源的语法。让我们使用这样的语法检查器将其描述为正确的语法。
什么是属性?
可以将属性和属性值添加到HTML的开始标记中,具有以下感觉。
到
在编写HTML源代码时,您可以单独编写开始标记,但在许多情况下,您还可以使用属性进行编写。除非您编写属性,否则某些元素没有意义。■ 示例1 /创建链接元素属性:创建链接元素具有指示链接目标的herf属性。
href="http://allabout.co.jp/"> All About
■ 示例2 /显示图像的img元素的属性:img元素显示图像:指示图像位置的src属性,指示图像宽度的width属性,指示高度的height属性,替换字符alt属性等。
src =“photo.jpg” width = “300” height = “120” alt = “Sea photo”>
■编写指定为属性值的文件路径如上例所述,在指定图像文件或链接页时,需要描述目标文件的位置(=文件路径)。要指定此类外部文件,请使用以下描述方法。
只写文件名(例如href =“target.html”)用相对路径描述(例如href =“../ orange / target.html”)用绝对路径描述(例如href =“/ fruits / orange / target.html”)在URL中描述(例如href =“https://www.example.com/fruits/orange/”)有关如何编写每个文档的详细信息,请参阅文章“ 如何在HTML / CSS中描述文件路径 ”。■ 不仅特定元素的属性,全局属性也将被施加到任何元件href属性,用于指定链接目的地,和一个元件创建链接,在有限的元件,例如作为表示一个特定的文件之间的关联的链接元件只使用它。相比之下,每个HTML元素都添加了一个通用的“全局属性”。例如,global属性是应用CSS时使用的class属性,用于添加唯一名称的id属性,以此类推。
class =“surprise”>主页
在上面的源代码中,我们将class属性添加到strong元素,并将“surprise”指定为属性值。class属性通常用于使用CSS添加装饰。
字符实体引用·可以编写特殊符号的数字字符引用
如果在HTML源代码中使用特殊描述方法,则可以发布各种象形图
在网络上,您可以使用许多符号,如“”或“”或许多象形图,如“”。如果他们采用UTF-8等Unicode作为字符代码,则可以直接在HTML源代码中编写。但是,如果您使用SHIFT-JIS代码等,则可能无法直接在HTML源代码中编写特殊符号。对于这种情况,有一些特殊的编写方式,称为字符实体引用或数字字符引用。
版权所有
©2017,All About Inc ..
如果您在HTML源代码中编写“©”,如上所述,“”符号将显示在浏览器中。在HTML中,标签是使用“”符号创建的,因此您无法在HTML源代码中自行编写“”符号。在这种情况下,您还可以使用字符实体引用通过写“”来显示它。有关详细信息,请参阅以下文章。
最小的HTML模板
最后,我将介绍一个模板,用于从我自己的1中描述HTML源代码。您可以根据需要在body元素中写入主体元素,但head元素中的内容描述了网页上的各种信息,例如“请写下此内容”。
title title> head>标题 h1>
文本 p>
以下是上述来源中描述的每条线的含义的简要说明。1. DOCTYPE声明<!DOCTYPE html> 在HTML源的第一行写下DOCTYPE声明。在HTML 5之前,有一个角色显示“使用HTML描述的是什么类型的HTML”,但在HTML 5中,没有具体指定版本号。如果您按照上述说明编写它,则可以表明它是用标准规范HTML编写的。2. html元素(lang属性) 在HTML源代码中,将html元素描述为最外层元素。对于该开始标记,您可以使用lang属性指定语言类型。在日语的情况下,写“ja”。3. head element
head>在这个head元素中,描述网页上的各种信息。例如,写下4中列出的内容。4.元元素(字符代码规范) 指定HTML源代码的字符代码。如果使用SHIFT-JIS而不是UTF-8编写“charset =”shift-jis“ 我写了。字符代码名称不区分大小写,因此您可以用大写字母书写它们。即使省略了这种描述,也会显示,但也要避免出现乱码的可能性。由于元元素是空元素,因此没有结束标记。5.元元素(摘要声明的规范) 用句子描述这个网页的大纲。它不会影响网页的实际显示,但可以作为摘要句使用,以显示在搜索网站的搜索结果中。写110个字符通常很好。如果要在SNS而不是搜索站点上显示摘要,请参阅下面的相关文章。如何描述OGP在引用SNS时输出所需的信息和图像6.使用元元素(指定视口) 使用此说明可以使您的网站更易于在移动设备上查看。有关详细信息,请参阅以下相关文章。
使用Mobile First进行设计时如何编写CSS如何使智能手机兼容网站和6点记住防止自动减少智能手机的页面
7. title元素
title title> 描述网页的标题。它显示在浏览器的标题区域(选项卡和窗口标题)以及搜索站点的搜索结果中。8. link element(加载CSS) 如果单独准备CSS(样式表),请在此处加载。有关详细信息,请参阅以下相关文章。什么是CSS?样本表编写方法的介绍甚至初学者都能理解如何通过媒体查询按屏幕大小切换CSS创建一个允许查看者切换样式表的功能9. link元素(favicon的名称) 如果你有一个图标,请在此处指定。有关详细信息,请参阅以下相关文章。
如何在选项卡和书签上显示自己的图标轻松制作图标和安装方法10. body元素
body> 在这里写文字。由于您可以在文本中编写任何内容,因此无需显示任何模板。在这个例子中,我们只编写构成标题的h1元素和创建段落的p元素作为示例。11. script element