HTML（一）html基本知识

待我称王封你为后i 2022-05-17 02:28 311阅读 0赞

# 一、HTML的简介 #

## 1、HTML的发展 ##

HTML是一种标记语言，起源于SGML（Standard Generalized Markup Language）标准的通用标记语言。HTML由Tim Berners-Lee和同事Naniel W.Connolly在瑞士日内瓦的欧洲粒子实验室发明，伴随着WEB一起诞生。目前最新版本是HTML 5。

## 2、HTTP协议的特点 ##

HTTP是基于客户/服务器模式且是面向连接的，HTTP能够传送任意类型数据对象。HTTP连接是一种一次性连接，每次连接只处理一个请求，HTTP是一种无状态协议，即服务器不保留与客户交易时的任何状态，HTTP的默认TCP端口是80。

## 3、Web工作原理 ##

Web的基本组织形式：Web是一个超文本文件的集合，把若干网页放在一起就构成了 web，超文本文件是Web的基本组成单元，也称为网页或HTML文档、Web页等，通常是以.html或.htm为后缀的文件，Web页之间通过超文本中的超级链接组织在一起。

什么是超文本：是多种格式和存储位置均不同的文件，通过某种方式组织在一起共同来表述一件事情的组织形式，超级链接是超文本用来串连信息的“绳索“，又叫做URL和URI。

URL--网络资源的地址，HTML语言使用a元素中的属性herf来指明超级链接的URL，超级链接的作用是告诉浏览器使用HTTP协议来激活一个URL，当鼠标点击在超级链接上时，该超级链接的URL就被提交给浏览器用于访问网络。

URL(Uniform Resource Locator) 统一资源定位器，用来标识网络中的任何资源（文本、图片、音视频文件，段落，或其他超文本）。URL的组成如下面这个：

http://www.booleanlab.com.cn/admin/index.jsp

协议：指明请求的服务类，一般为HTTP://

主机名：对应对方主机的IP地址（通过DNS转换得到）

www.booleanlab.com.cn

路径名：资源在主机上路径admin

文件名：要请求的资源的文件名（包括文件中的锚点）

# 二、HTML文件的基本结构 #

<HTML>…</HTML>标签标记 HTML 文档的开始和结束

HEAD部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内

BODY部分包含文本、图像和链接。它包括在 <BODY>…</BODY> 标签内

## 2、<META>标签 ##

meta可以说明网页的一些基本信息。如下面代码：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--&nbsp;网页描述信息等等，导入的文件&nbsp;--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;head&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--&nbsp;标题&nbsp;--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;title&gt;网页标题&lt;/title&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;meta http-equiv="pragma" content="no-cache"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;meta http-equiv="cache-control" content="no-cache"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;meta http-equiv="expires" content="0"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--&nbsp;网页描述 &nbsp;--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;meta http-equiv="description" content="This is my page"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;!--&nbsp;网页编码&nbsp;--&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&nbsp;&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;/head&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

## 3、页面背景色或背景图像 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;body bgcolor="#ffff"&gt;</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&nbsp;&nbsp;Hello World!</span></p> <p style="margin-left:0pt;"><span style="color:#000000;">&lt;/body&gt;</span></p> </td> 
  </tr> 
 </tbody> 
</table>

## 4、文本相关标签 ##

效果如下：

![70][]

## 5、特殊符号 ##

因为大于符号和小于符号还有其他一些特殊符号在html都有一定的意思，所有当你需要输出这些符号是就需要使用以下特殊的替代符号了。如下表：

## 6、字体、段落和换行符 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0pt;">&lt;font size="16" color="#dd4466" face="隶书"&gt;字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> 体&lt;/font&gt;<br> &lt;!--&nbsp;换行符&nbsp;--&gt;<br> &lt;br/&gt;<br> &lt;font&gt;adsadfasdf&lt;/font&gt;&nbsp;<br> &lt;p align="center"&gt;段落1&lt;/p&gt;<br> &lt;p&gt;段落1&lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

效果如下：

![70 1][]

## 7、图像标签 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&lt;img alt="卡通" src="卡通.jpeg" align="middle" height="200"&gt; adfasd</td> 
  </tr> 
 </tbody> 
</table>

效果如下：

![70 2][]

[70]: /images/20220517/a275df007c0e447db3d63cb2f0cce95e.png
[70 1]: /images/20220517/a5dad77b6f0749be84c453cae700e612.png
[70 2]: /images/20220517/c978b287ada44073a5f906d9d5f97b6b.png