HTML基础知识(一)

来源：互联网发布：财务总监知乎编辑：程序博客网时间：2024/05/02 02:57

万事万物都有其规律,对于WEB前端HTML也是一样的，那我就先讲一下HTML文件的结构:一个HTML文件是有自己固定的结构的。它的结构如下：

<span style="font-family:FangSong_GB2312;font-size:18px;"><html></span>

<span style="font-family:FangSong_GB2312;font-size:18px;">    <head>...</head>    <body>...</body></html></span>

<span style="font-family:FangSong_GB2312;font-size:18px;">代码讲解：1. <html></html>称为根标签，所有的网页标签都在<html></html>中。2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</span>

可能你会觉得和我们制作网页的时候看到的不一样，其实他们的结构是一样的。

在网页中我们经常看到的结构如下：

<span style="font-family:FangSong_GB2312;font-size:18px;"><!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title></title>    </head>    <body>            </body></html></span>

那么<!DOCTYPE HTML>在网页中有什么有呢？为什么网页里都含有它呢？那我们就来讲一讲DOCTYPE 在网页中的作用吧。首页DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。从这句话我们不难看出DOCTYPE的作用就是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。在超文本标记语言(标准通用标记语言的一个应用)里头，就是用来说明编写网页的HTML/XHTML的标签用的是什么版本。其实我个人认为DOCTYPE就是声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。那document.compatMode有哪些？

document.compatMode：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

那么DOCTYPE常用集合有哪些？具体请点击打开链接。

我们知道了HTML的文件的结构，那么现在我讲一下HTML的标签语法：

1. 标签由英文尖括号<和>括起来，如<html>就是一个标签。
2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

如：

<p></p>

<div></div>   <span></span>

3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。如下图所示。

4. HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

前面讲了HTML的结构、语法，现在讲一下HTML的头部标签，<head>标签的作用：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<head>标签可以包含的标签有：

<head>

 <title>...</title>    <meta>    <link>    <style>...</style>    <script>...</script></head>

<span style="line-height: 17.4545px; font-family: FangSong_GB2312;">其中</span><span style="line-height: 17.4545px; font-family: FangSong_GB2312; background-color: rgb(237, 241, 242);"><code class="marker" style="margin: 0px 5px; padding: 0px 6px; display: inline; border: 1px solid rgb(204, 204, 204); border-radius: 2px; background: rgb(238, 238, 238);"><title></code>标签</span><span style="line-height: 17.4545px; font-family: FangSong_GB2312; background-color: rgb(237, 241, 242);">：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。</span>

0 0