关于HTML的研究

HTML(Hypertext Markup Language)是一种用于创建网页的标记语言。它使用一系列标签来描述网页的结构和内容,标签通过尖括号进行标记,例如`<html>`表示文档的根元素。

HTML最初作为一种用于发布科学文档和文章的语言而开发,但随后逐渐发展成为构建整个互联网的主要技术之一。通过使用HTML,开发者可以定义纯文本、图像、链接、多媒体元素等的布局和呈现方式。

简介

由来

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即我们所见到的网页。 [2] 

自1990年以来,HTML就一直被用作万维网信息表示语言,使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将文字,图形、动画、声音、表格、链接、影像等内容显示出来。事实上,每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面,与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。 

万维网(world wide web,简称www)上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 

网页的本质就是超文本标记语言,通过结合使用其他的Web技术(如:脚本语言公共网关接口、组件等),可以创造出功能强大的网页。因而,超文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。 

定义

超文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。 

特点

超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下: 

  1. 简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。 

  2. 可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。 

  3. 平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。 

  4. 通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。 

整体结构

一个网页对应多个HTML文件,超文本标记语言文件以.htm或.html(外语缩写)为扩展名(其中.htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成TXT类型源文件文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:<br/> <img/>),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

部分标记也可以不成对出现,如<p>,但是一般并不赞同这样做。

标记符<html>,说明该文件是用超文本标记语言来描述的,它是文件的开头;而</html>,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

头部内容

标记符<html>:说明该文件是用超文本标记语言来描述的,它是文件的开头,而</html>则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

<head></head>:这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符,其中标题标记符用于定义网页的标题,它的内容显示在网页窗口的标题栏中,网页标题可被浏览器用做书签和收藏清单。

以下表格列出了 HTML head 元素:

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

主体内容

<body></body>;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。 [10] 

  • 标题:总共有6个等级,定义方法如下

<h1></h1>定义一级标题

<h2></h2>定义二级标题

<h3></h3>定义三级标题

<h4></h4>定义四级标题

<h5></h5>定义五级标题

<h6></h6>定义六级标题

以此类推

  • 文本

<p></p>定义文本

  • 换行符

<br/>换行符

实例:

<!DOCTYPE html>
<html lang="en">
<head>    
  <meta charset="UTF-8">    
  <title>Title</title>
</head>
 
<body>
  <h1>这是一级标题</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>
  <h4>这是四级标题</h4>
  <h5>这是五级标题</h5>
  <h6>这是六级标题</h6>
    
  <p>定义文本</p>
   
  <p>随便字符<br/>《-换行符</p>
</body>
</html>

以下是关于html的构造

1. 标签:HTML使用一系列预定义的标签来描述页面的不同部分和元素。例如,`<h1>`表示一个标题,`<p>`表示一个段落。标签通常成对出现,其中包括开始标签和结束标签,例如`<p>这是一个段落。</p>`。

2. 元素:标签及其包含的内容一起被称为元素。一个元素由开始标签、内容和结束标签组成。元素可以嵌套在其他元素中,形成树状结构,用于表示页面的层次结构。

3. 属性:标签可以包含属性,属性提供有关元素的额外信息。属性位于开始标签中,并具有名称和值的形式。例如,`<img src="image.jpg" alt="描述">`中的`src`和`alt`是`<img>`元素的属性。

4. 结构:HTML文档遵循特定的结构。它包含一个`<!DOCTYPE>`声明,用于指定HTML的版本,一个`<html>`元素作为根元素,一个`<head>`元素包含页面的元信息(例如标题、样式表等),以及一个`<body>`元素包含实际显示在浏览器中的内容。

5. 样式:HTML可以与CSS(层叠样式表)结合使用,以改变文本的样式、调整元素的布局和外观。CSS可以通过内联样式、内部样式表或外部样式表应用到HTML文档中的元素上。

6. 链接:HTML提供了创建链接的能力,用于在网页内部和外部导航。通过使用`<a>`标签和`href`属性,可以创建文本链接、图像链接和书签等。

html主打的就是一个标签一下是一些标签的实列代码

  1. 创建标题和段落元素:
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2.插入图像

<img src="image.jpg" alt="图片描述">

3.创建超链接

<a href="https://www.example.com">这是一个链接</a>

4.创建无序列表和有序列表:

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<ol>
  <li>有序列表项 1</li>
  <li>有序列表项 2</li>
  <li>有序列表项 3</li>
</ol>

5.创建表格:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

6.创建表格

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

6.插入视频和音频:

<video src="video.mp4" controls></video>

<audio src="audio.mp3" controls></audio>

7.创建表单元素:

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br>
  
  <input type="submit" value="提交">
</form>

以上使用了以下标签看起来还是很简单的

  • <h1> - <h6>:用于创建标题。
  • <p>:用于创建段落。
  • <img>:用于插入图像。
  • <a>:用于创建超链接。
  • <ul>:用于创建无序列表。
  • <ol>:用于创建有序列表。
  • <li>:用于定义列表项。
  • <table>:用于创建表格。
  • <tr>:用于定义表格的行。
  • <th>:用于定义表格的表头。
  • <td>:用于定义表格的单元格。
  • <video>:用于插入视频。
  • <audio>:用于插入音频。
  • <form>:用于创建表单。
  • <label>:用于定义表单元素的标签。
  • <input>:用于创建表单输入字段(如文本输入框、电子邮件输入框)。
  • <br>:用于创建换行

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 

  1. 文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件扩展名gifjpg。 

  2. 超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号(实体符)“&nbsp(注意此字母必须小写,方可空格)”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。 

  3. 标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“&nbsp(注意此字母必须小写,方可空格)”;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。 

  4. 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。 

  5. HTML注释由"<!--"号开始,由符号”-->“结束,例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入感叹号,即被标识为注释,不予显示。 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CS老邓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值