初次使用HTML,浅谈部分HTML的理解与其使用方法

🔺什么是HTML

HTML称为超文本标记语言(英文:HyperText Markup Language,简称:HTML),是一种标识性的语言它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。超文本标记语言是一种用于创建网页的标准标记语言,而HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。用户可以运用html来创造一个站点,利用html运行在浏览器上。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

同时html还用作文件扩展名,打开后呈现网页形式。
(*以上内容摘自 百度百科

🔺网页所包含的元素

⚪HTML标签与HTML元素是什么

▲HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如
标签对中的第一个标签是开始标签第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
实例:<标签>内容</标签>

▲HTML元素

HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
实例: < p >这是一个段落。< /p >

⚪HTML网页结构

HTML需要依照固定的结构才可以正常运行,HTML的一个可视化结构如图所示:
HTML网页结构
提示

⚪声明

网络上的文件多数版本不同,因此需要正确的声明HTML的版本才能够在浏览器中正确的显示网页中的内容。

▲<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

doctype 声明不区分大小写,以下方式均可:
声明

▲通用声明

以下为同通用声明的形式:
通用声明
(*以上内容摘自菜鸟教程

▲利用声明输入中文

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
在这里插入图片描述

🔺实用的HTML网页编辑器

两款实用的HTML 编辑器推荐:VS CodeSublime Text

🔺HTML的常用编写方式及元素

⚪HTML的四个实例

▲标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的,以下为实例:
<h1>个标题01</h1>
<h2>个标题02</h2>
<h3>个标题03</h3>

▲段落

HTML 段落是通过标签 <p> 来定义的。以下为实例:
<p>段落01</p>
<p>段落02</p>

▲链接

HTML 链接是通过标签 <a> 来定义的。以下为实例:
<a href="www.baidu.com">链接01</a>

其中请在href后填入想要跳转的网页的网址。

▲图像

HTML 图像是通过标签 <img> 来定义的。以下为实例:
<img src="/images/logo.png" width="258" height="39" />

其中图像的名称和尺寸是以属性的形式提供的。

⚪HTML元素

由于HTML 文档由 HTML 元素定义,因此编写HTML需要依照相应的格式编写。

▲HTML的元素

HTML的基本元素分为开始标签(又称起始标签),元素内容和结束标签(又称闭合标签)。

▲HTML元素语法

HTML元素以开始标签作为起始,以结束标签作为终止,在开始标签和结束标签内填入内容。
某些 HTML 元素具有空内容,空元素在开始标签中进行关闭,即以开始标签的结束而结束。没有内容的 HTML 元素被称为空元素。

▲空元素

空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障
大多数 HTML 元素可拥有属性。

※ HTML实例

    *<p> 元素:
<p>这是第一个段落。</p>
    *这个 <p> 元素定义了 HTML 文档中的一个段落。
    *这个元素拥有一个开始标签  <p> 以及一个结束标签 </p>.
    *元素内容是: 这是第一个段落。
<body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
    *<body> 元素定义了 HTML 文档的主体。
    *这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
    *元素内容是另一个 HTML 元素(p 元素)。
<html> 元素:
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
    *<html> 元素定义了整个 HTML 文档。
    *这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.

元素内容是另一个 HTML 元素(body 元素)。

▲HTML的文本格式化标签

<b>:定义粗体文本
<em>:定义着重文字
<i>:定义斜体字
<small>:定义小号字
<strong>:定义加重语气
<sub>:定义下标字
<sup>:定义上标字
<ins>:定义插入字
<del>:定义删除字

▲HTML的“计算机输出”标签

<code>:定义计算机代码
<kbd>:定义键盘码
<samp>:定义计算机代码样本
<var>:定义变量
<pre>:定义预格式文本

▲HTML引文, 引用, 及标签定义

<abbr>:定义缩写
<address>:定义地址
<bdo>:定义文字方向
<blockquote>:定义长的引用
<q>:定义短的引用语
<cite>:定义引用、引证
<dfn>:定义一个定义项目。

(*本文内容摘自菜鸟教程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值