HTML超详细简介

HTML是什么

超文本标记语言（HyperText Mark-up Language ）
用来设计网页的标记语言
用该语言编写的文件，以 .html或 .htm为后缀
由浏览器解释执行
不区分大小写，建议小写

HTML标签

HTML用于描述功能的符号成为"标签"
标签都封装在一对尖括号"<...>"之中,如就是一个标签
封闭类型标记（也叫双标记），必须成对出现,如
非封闭类型标记，也叫作空标记，或者单标记，如

HTML 元素

指的是从开始标签（start tag）到结束标签（end tag）的所有代码

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

HTML属性与值

属性是用来修饰元素的
属性必须位于开始标签里
一个元素的属性可能不止一个，多个属性之间用空格隔开
多个属性之间不区分先后顺序
每个属性都有值
属性和属性的值之间用等号链接
属性的值包含在引号当中
属性总是以名称/值对的形式出现

注释

1.为代码添加适当的注释是一种良好的编程习惯

2.注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示

3.注释标签不支持任何属性

4.语法：

< !-- 注释的文本内容 -->

HTML的基本结构

< head lang="en">

lang是language的意思，lang="en"属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）

< meta charset="UTF-8">

META标签用来描述一个HTML网页文档的属性，此处的charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。

搜索引擎
根据一定算法搜集数据的平台，比如谷歌、百度。

爬虫

是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本程序。

爬虫指的是搜索引擎用于自动抓取网页的程序（或叫机器人）。这个就是从某一个网址为起点，去访问，然后把网页存回到数据库中，如此不断循环。只要有链接指向我们的网页，爬虫就会自动提取我们的网页。

什么是DTD文档模型，为什么写在HTML当中？

DTD文档模型也称DOCTYPE文档声明，它是Document Type Definition的英文缩写，意思是文档类型定义，在HTML文档中，用来指定页面所使用的HTML（或者XHTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
它不是HTML标签

我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。

DTD文档模型=DOCTYPE=DOCTYPE文档声明

DOCTYPE声明

HTML 5

html 复制代码

<!DOCTYPE html>

HTML 4.01 Strict 严格

html 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）

HTML 4.01 Transitional 过渡

html 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集

HTML 4.01 Frameset 框架

html 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

XHTML中的DTD文档模型

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

xhtml和html的区别
XHTML是HTML向XML的一个过渡语言，在最初W3C组织希望把HTML变成更为严谨的标记语言（比如XML），但HTML的已经应用的太为广泛，全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨，基本标签都还是沿用了HTML，但废除了"表现层"的标签，同时要求标签的严格嵌套，标签结束等等。

HTML文档

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

html 复制代码

<html>
<head>
	<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
</body>
</html>

< head>

标签用于定义文档的头部，它是所有头部元素的容器。< head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

html 复制代码

<title>、<meta>、<link>、<style>、 <script>

应该把 < head> 标签放在文档的开始处，紧跟在 < html> 后面，并处于 < body> 标签之前。

文档的头部经常会包含一些 < meta> 标签，用来告诉浏览器关于文档的附加信息。

< title>

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
< title> 标签是 < head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
title写和你网页相关的关键词有利于SEO优化

html 复制代码

<html>
<head>
	<title>我会显示在收藏栏里</title>
</head>
    <body>...</body>
</html>

< meta>

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有

Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

html 复制代码

<meta name="keywords" content="web前端,尚学堂培训">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

author作者标注网页的作者

html 复制代码

<meta name="author" content="root,root@xxxx.com">

更多meta标签介绍请参考 HTML meta标签用法详解

标签嵌套

标签之间可以相互嵌套，但要注意嵌套顺序

语义化标签

语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等

好处：

更容易被搜索引擎收录
更容易让屏幕阅读器读出网页内容

图片

使用< img>元素将图像添加到页面
空标记
必须属性：src（存储图像的位置）
常用属性：width，height，alt，title

html 复制代码

<img src="URL" width="300" alt="替换文本属性"/>

title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的

alt当图片未能正常显示时，用于给用户的提示信息

超链接

使用< a>< /a>元素创建一个超链接
语法：

html 复制代码

<a href=""  target=""  title="">文本</a>

href属性：链接URL

target属性：目标，可取值_blank,_parent,_self等

name属性：锚点名称

title属性：定义了鼠标经过时的提示文字