[HTML]短时间内学习!标签的基本知识<<主要标签列表>>

您好,我是A-SK。

这次,我写了一篇文章,即使您没有太多时间,也可以在短时间内获得有关HTML标记的基本知识。

我们将首先从HTML入手,并根据标签的基本知识和角色来说明标签的重要性。

[对于初学者]仔细解释如何编写CSS(样式表)

什么是HTML

超文本标记语言的缩写,是用于创建网页的最基本的标记语言之一。

如您所见,网页通常是用HTML创建的。

HTML有很多类型,但是目前“ HTML5”是主流。同样,这一次,我们将继续基于“ HTML5”的讨论。

让我们看看如何立即做到。

构成网页的基础

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトルを入力します</title>
</head>
<body>

</body>
</html>

网页基本上是用这种结构创建的。

<!DOCTYPE HTML>

DOCTYPE声明

DOCTYPE声明是“我从现在开始将在此文件中编写HTML语句”的声明。也可以通过更改此部分来更改HTML版本。

<html lang="ja">

指定整个页面的语言

用日语书写时,“ html lang =”ja”」と記述します。

使用它的另一种可能性是“ html lang =””en”似乎有许多创建英文网页的早期阶段。

指定此语言时要记住的一件事取决于网页的基本语言。 “郎=”ja”仅仅因为您说,并不意味着您不应该使用字母。

<html><head><body>

页面的基本元素
我将自己在这段代码之间编写代码。 “头部”和“身体”之间的区别在于,观看者在实际查看网页时是否可以看到。
编写代码以在“头部”中显示图像毫无意义。相反,即使在“正文”中描述了页面的“字符代码”,观看者也不必看到它。

确定以这种方式写什么。我们将介绍的HTML标记在“正文”中进行了描述。

<meta charset="UTF-8">

设置字符码
关键字“字符代码”较早出现,就是这样。
有时,浏览网页时,有些网页的字符会乱码。原因是此字符代码。
什么是字符代码?

在计算机内部将字符表示为二进制符号的约定。

字符码– IT用語辞典e-Words
有关详细信息,请参阅此链接。

<title>ページタイトル</title>

给页面命名
每个页面都有一个“标题”,是网站的标志。使用浏览器打开网页时,该页面将显示在选项卡上。那就是这个“ title”标签中的标题。

世界上最受欢迎的网站的名称是“无标题的网站”。这是因为通常情况下会创建,保存和上传没有标题的新文件。

用HTML创建网页时,请务必先命名并保存。

除此以外

<link rel="" href="">

显示与其他页面的关系
也有这样的标签。

标记“规则”和“角色”

标签的组成有规则。

about_tag_02_lite

将周围的单词放在“开始标签”和“结束标签”之间。
有些标签没有结束标签,有些则不必要。您还可以在标签中指定所谓的“属性”,以提供更详细的说明和角色。

<h1>囲む要素</h1>

其上方的行称为HTML元素。
这次

因为它被包围“ H个元素”叫做。

网页由多个嵌套的HTML元素组成。

我们将把这些很好地结合起来以创建一个网页。

语义的

HTML中有一个版本。
HTML5目前是主流。

以前的版本是4.0.1。在此更改中,添加/定义了一些与传统语义不同的标签。
语义是Web浏览器或计算机通过赋予文本特殊的意义或作用来正确识别文本和信息数据。

具有语义意识的意思是识别必要的文本,以便在搜索时将其正确显示在顶部。意识到语义也可能导致用户涌入网页和博客。

文字相关标签

h1,h2,h3,h4,h5,h6

此标记用于表示标题的文本。
如果文本是标题,请按重要性升序将其括起来。
基本上,每个网页通常使用一个“ h1”标签。
如果您的标题很多都非常重要,那么它在语义上就不好。

例)

<h1>ブログの記事の見出し</h1>

p

用于表示段落的文本。

包含句子的段落时,请务必使用它。

例)

<p>今日はいい天気です。</p>

b

当您希望用户注意该标签中包含的文本时,可以使用此标签。

我已经是这个博客的博客作者已有十年了专业博客是。

通过将其括在b标签中,可以使它变为粗体,如上所示。

EM

此标记用于应强调的文本和内容中必不可少的信息。
它在计算机上被视为“突出显示的句子”。

例)

<em>強調したい。さらに、強調したい。</em>

强大

此标签用于应特别强调的内容。从HTML5开始,添加了“重复使用更为重要”的含义。
通过分层使用它们,可以从计算机角度区分内容的相对重要性级别。

例)

<strong>強調したい、<strong>さらにもっと強調したい。</strong></strong>

列出相关标签

ul,ol,li

当要放置的列表没有数字等含义时,使用“ Ul”。
当您希望列表具有数字含义时,使用“ Ol”。
“ Li”表示列表中的项目。 “ Ul”和“ ol”必须始终包含这些“ li”标签中的至少一个。
这样,它将仅用作列表标签。

例)

<ul>
     <li>項目A</li>
     <li>項目B</li>
     <li>項目C</li>
</ul>

例)

<ol>
     <li>1つ目の項目</li>
     <li>2つ目の項目</li>
     <li>2つ目の項目</li>
</ol>

表相关标签

表,tr,th,td

当您要使文本成为表格时使用。
作为基本结构,用“ table”和“ tr”将整体括起来,并在其中创建每个带有“ th”和“ td”的项目。
“ Th”是所谓的标头单元。在大多数Web浏览器中,耗尽单元格内的文本居中。

例)

<table>
     <tr>
          <th>見出しセルA</th>
          <th>見出しセルB</th>
          <th>見出しセルC</th>
     </tr>
     <tr>
          <td>データセルAの1</td>
          <td>データセルBの1</td>
          <td>データセルCの1</td>
     </tr>
     <tr>
          <td>データセルAの2</td>
          <td>データセルBの2</td>
          <td>データセルCの2</td>
     </tr>
     <tr>
          <td>データセルAの3</td>
          <td>データセルBの3</td>
          <td>データセルCの3</td>
     </tr>
</table>

想要查询更多的信息,”[HTML]表格标签的基础!如何使用tr / th / td [可用样品]请参阅。

链接相关标签

a

当您要链接到网页或博客文章中的另一个网页时使用。
您可以使用“ a”标签指定超链接。

“ a”标签具有属性。
有所谓的href属性和target属性。
您可以使用href属性指定URL,并使用target属性指定是否在单独的窗口中打开链接的页面。

例)

<a href="//zheng-dao.com/" target="_blank">creive【クリーブ】|クリエイターのための情報メディア</a>

如果按上述方式编写,则表示广告素材网页已设置为在单独的窗口中打开。

其他目标属性包括“ _self”,“ _ parent”和“ _top”。
通常使用“ _Blank”。原因是您可以打开链接而无需关闭博客页面。结果,您更有可能返回博客。

有关链接,请参见“[使用HTML链接]说明如何使用定位标记(标记)!使用CSS进行设计变更请参阅。

图片相关标签

img

用于显示图像的标签。
当您要显示网页上的图像或在文章中显示图像时,将使用它。
请密切注意图片的版权。

例)

<img src="URLや画像のパスを入力します。" alt="画像代替文字が表示されます">

想要查询更多的信息”[HTML]解释img标签的使用方法和含义[如何在CSS中排列图像]请参阅。

世界上第一个发布的网页

如今,网页在设计和移动方面已经有了很大的发展。有视频和图像以大尺寸显示。
但是想象一下世界上第一个网页。可能很难想象。

当前,实际上是世界上第一个已发布的网页可供查看。
http://info.cern.ch/hypertext/WWW/TheProject.html

当您实际查看代码时,可以看到到目前为止已经发生的许多事情。

全球发布的网页代码
右键单击要查看代码的页面>查看页面源代码>在另一个页面中打开

dev_mode

这样,您就可以浏览。

当我实际查看代码时,它早先发布了

标签会出来。
尽管此处使用大写字母书写,但现在小写字母已成为主流。

first_html

这样,仅使用HTML标签就可以配置和发布网页。

最后

怎么样。

这次,我介绍了“ [HTML]短时间内学习!标签的基本知识”。

标签已成为学习HTML的基本部分。首先,您必须记住每个人,这可能是一项繁琐的任务。

对于这类人,我们建议使用“ HTML5 Carta”,它使您可以学习Carta中的HTML标签。
HTML5 Carta

另外,如果您想了解更详细的核心标签,请参阅HTML快速参考等。

我们还会定期使用此类网站,并通过HTML5 Carta获得新知识。

HTML快速参考

实际使用文本编辑器练习代码并实际创建网页非常重要。

也。浏览各种公共网页也很重要。您可以通过查看其中的代码并研究使用什么标记以及如何构造它们来更深入地学习。

刚开始时,您可能有一个并不觉得很酷的网站。那是第一步。一种方法是先采取这一步骤,然后逐步成为可以创建出色站点的前端工程师。

撰写本文的人

A-SK

一名年轻男子的目标是一名混合全栈工程师。 从四月份起,Tokoro将解决与在人力资源公司生活有关的问题。 Twitter:@EraskBone BLOG:问拼写的跨境故事