Html是什么意思？详解Html的特点、结构、标签及编辑工具

2023-09-03 07:36:04

Html是什么意思

一、Html是什么意思

Html是Hyper Text Markup Language英文首字母的缩写，中文翻译为超文本标记语言, 是一种标记语言。HTML是一种基础技术，常与CSS、Javascript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

二、Html的特点

Html包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等，其主要特点如下：

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

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

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

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

三、Html的结构

标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

1、标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头；而</html>,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

2、头部内容

<head> </head>这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。

3、主体内容

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

下面是一个典型的网页源码的结构划分：

<html> // Html 开始标示

<head> // Html 头标示

<title>Hello</title> // 设置网页标题

</head> // 头结束标示

<body> // 主体开始标示

<p>Hello world!!!</p> // 放置Hello word！！！文本

</body> // 主体结束标示

</html> // Html结束标示

注意：写完代码记得将格式保存为.html（推荐）、.htm、.xhtml。

四、Html标签及作用

标记	类型	译名或意义	作用	备注
文件标记
<html>	●	文件声明	让浏览器知道这是 HTML 文件
<head>	●	开头	提供文件整体资讯
<title>	●	标题	定义文件标题，将显示于浏览顶
<body>	●	本文	设计文件格式及内文所在
排版标记
<!--注解-->	○	说明标记	为文件加上说明，但不被显示
<p>	○	段落标记	为字、画、表格等之间留一空白行
<br>	○	换行标记	令字、画、表格等显示于下一行
<hr>	○	水平线	插入一条水平线
<center>	●	居中	令字、画、表格等显示于中间	反对
<pre>	●	预设格式	令文件按照原始码的排列方式显示
<div>	●	区隔标记	设定字、画、表格等的摆放位置
<nobr>	●	不折行	令文字不因太长而绕行
<wbr>	●	建议折行	预设折行部位
字体标记
<strong>	●	加重语气	产生字体加粗,bold的效果
<b>	●	粗体标记	产生字体加粗的效果
<em>	●	强调标记	字体出现斜体效果
<i>	●	斜体标记	字体出现斜体效果
<tt>	●	打字字体	courier字体，字母宽度相同
<u>	●	加上底线	加上底线	反对
<h1>	●	一级标题标记	变粗变大加宽，程度与级数反比
<h2>	●	二级标题标记	将字体变粗变大加宽
<h3>	●	三级标题标记	将字体变粗变大加宽
<h4>	●	四级标题标记	将字体变粗变大加宽
<h5>	●	五级标题标记	将字体变粗变大加宽
<h6>	●	六级标题标记	将字体变粗变大加宽
<font>	●	字形标记	设定字形、大小、颜色	反对
<basefont>	○	基准字形标记	设定所有字形、大小、颜色	反对
<big>	●	字体加大	令字体稍为加大
<small>	●	字体缩细	令字体稍为缩细
<strike>	●	画线删除	为字体加一删除线	反对
<code>	●	程式码	字体稍为加宽如<tt>
<kbd>	●	键盘字	字体稍为加宽，单一空白
<samp>	●	范例	字体稍为加宽如<tt>
<var>	●	变数	斜体效果
<cite>	●	传记引述	斜体效果
<blockquote>	●	引述文字区块	缩排字体
<dfn>	●	述语定义	斜体效果
<address>	●	地址标记	斜体效果
<sub>	●	下标字	下标字
<sup>	●	上标字	指数（平方、立方等）
清单标记
<ol>	●	顺序清单	清单项目将以数字、字母顺序排列
<ul>	●	无序清单	清单项目将以圆点排列
<li>	○	清单项目	每一标记标示一项清单项目
<menu>	●	选单清单	清单项目将以圆点排列，如<ul>	反对
<dir>	●	目录清单	清单项目将以圆点排列，如<ul>	反对
<dl>	●	定义清单	清单分两层出现
<dt>	○	定义条目	标示该项定义的标题
<dd>	○	定义内容	标示定义内容
表格标记
<table>	●	表格标记	设定该表格的各项参数
<caption>	●	表格标题	做成一打通列以填入表格标题
<tr>	●	表格列	设定该表格的列
<td>	●	表格栏	设定该表格的栏
<th>	●	表格标头	相等于<td>，但其内之字体会变粗
表单标记
<form>	●	表单标记	决定单一表单的运作模式
<textarea>	●	文字区块	提供文字方盒以输入较大量文字
<input>	○	输入标记	决定输入形式
<select>	●	选择标记	建立pop-up卷动清单
<option>	○	选项	每一标记标示一个选项
图形标记
<img>	○	图形标记	用以插入图形及设定图形属性
连结标记
<a>	●	连结标记	加入连结
<base>	○	基准标记	可将相对url转绝对及指定连结目标
框架标记
<frameset>	●	框架设定	设定框架

五、Html的编辑工具

HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：

1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS或Word来编写也可以，不过保存时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。