【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 HTML标记语言基础知识
🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
什么是 HTML
HTML是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 严格的来说它不是一种编程语言，而是一种标记(标签)语言 (markup language)
标记语言是一套标记标签 (markup tag) 而HTML 使用标记标签来描述网页 !
HTML 标签是什么
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
一个HTML的基本结构
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
基本格式如下：
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
文件以.htm / .html 后缀
HTML 标签属性
html的标签基本上都有一些属性，这些属性我们不用去记忆,用到的时候直接去查文档就行了!
例如:
<标签名称 属性名="属性值">
<标签名称 属性名="属性值" 属性名="属性值" 属性名="属性值" ....>
HTML头部元素
头部元素包含关于文档的概要信息，也称为元信息（meta-information）
Meta 意为关于某方面的信息
可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息,听不懂没关系，我继续往下看!
头元素内的元素不会被浏览器显示出来。
根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的, 它们如下:
<base>, <link>, <meta>, <title>, <style> 和 <script>。
假如你将 <h1> 或者 <p> 之类的 HTML 元素像这样置于头元素之中，大多数浏览器都会显示它，即使这是非法的, 也会正常显示!
头部元素基本上包含如下标签：
<!DOCTYPE> 定义文档类型。此标签须位于 html 标签之前。
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面中所有链接的基准 URL。
<link> 定义资源引用。
<meta> 定义元信息。
<head>标签
定义和用法：
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分
<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
例如：
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
<base> 标签
<base> 标签为页面上的所有链接规定默认地址或默认目标。它的属性有： target 和 href
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
例如：
<head>
<base href="http://www.w3school.com.cn" />
<base target="_blank" />
</head>
<body>
<img src="图片路径" /> <a href="http://www.w3school.com.cn">W3School</a>
</body>
<link> 标签
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
例如：
链接一个外部样式表：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
link标签几个重要属性：
href:定义被链接文档的位置。
rel:定义当前文档与被链接文档之间的关系。
rev:定义被链接文档与当前文档之间的关系。
type:规定被链接文档的 MIME 类型。
<meta>标签
定义和用法
<meta> 元素可提供有关页面的元信息（meta-information）
比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
它必需的属性有如下:
content:定义与 http-equiv 或 name 属性相关的元信息
可选的属性
http-equiv把 content 属性关联到 HTTP 头部。
name把 content 属性关联到一个名称。
scheme定义用于翻译 content 属性值的格式。
注意
keywords是一个经常被用到的名称。它为文档定义了一组关键字
。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分
类, 类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有
指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对
自己和源文档的读者来说富有意义的名称
例如
<meta name="keywords" content="HTML,ASP,PHP,SQL">
http-equiv 属性
http-equiv 属性为名称/值对提供了名称,并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html
这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的<meta>标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。
例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
这是HTTP的相关知识，以后我会慢慢讲到，不懂的可以略过!
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
注意
content 属性始终要和 name 属性或 http-equiv 属性一起使用
<!DOCTYPE> 标签
<!DOCTYPE> 是用来声明位于文档中的最前面的位置，处于 <html> 标签之前。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范 也就是告诉浏览器使用什么标准!
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档
以下面这个<!DOCTYPE>标签为例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
这里就声明了一个DTD， 它包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素
比如 不允许框架集Framesets
所以这个标准就是必须以格式正确的形式来编写HTML标记。
常见的DTD还有两个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
选择合适的DTD
一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。
对于XHTML而言，可以选择三种不同的XHTML文档类型，请看下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!- - 说明：该段为指定文档类型为Transitional >
<html xmlns=“http://www.w3.org/1999/xhtml”> <!- - 说明：该句为确定名字空间,xml中用到 >
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” /> <!- - 说明：该句是声明编码语言为:简体中文 >
<title>无标题文档</title>
<link href=“css/style1.css” rel=“stylesheet” type=“text/css” /> <!- - 说明：该link标记将链接一个外部CSS文件 >
</head>
<body>…</body>
</html>
小结
Transitional类型：过度类型。浏览器对XHTML的解析将为宽松（建议使用）
Strict类型：严格类型。文档中不允许使用任何表现样式的标识和属性
Frameset类型：框架页类型。网页使用框架结构时，声明此类型
以上这些你都不需要去记的，用到的时候直接去w3c文档上复制就OK了, 别背了没意思 真的!
你也可以使用Dreamweaver来生成合适的DTD
如图
小知识: 向Web标准过度 / XHTML 基础
为什么要使用XHTML?
XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。
HTML:更多的被用于网页设计和表现
XHTML:它的初衷就不是为了表现，而是对网页内 容进行结构设计，严格的说它是面向文档
结构的语言，更符合未来的发展要求！
<body> 标签
<body> 标签是我们经常会使用到的一个标签，我们的网页所有的内容都在里面!
body 元素定义了网页文档的主体
body 元素包含文档的所有内容, 比如文本、超链接、图像、表格和列表 DIV(层)等等…
例如
一个简单的 HTML 文档，带有最基本的必需的元素：
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
最后
关于HTML的基本核心架构标签，也就是这些了，其实HTML标签还有很多，我们接下来会慢慢继续学习HTML标签的相关知识点，我会把常见和经常使用到的标签单独拿出来讲一下，HTML标签不是每个标签都会使用到的!
记住: 千万不要去死记硬背，没有任何意义, 要多去编辑器中敲一下代码,比你慢慢去写 去背效率高得多，当然你也可以不信这个邪,一定要去背，但自古:人教人教不会,事教人一次就会了 就是这个意思,亲身经历比听黑多这些乱七八糟的道理 来得实在!~ 嘿嘿嘿.............. 😈😈😈
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
