1. ​​<!DOCTYPE html>​​doc->document[文档]

type->type[类型]

​​<!DOCTYPE>​​​ 声明必须是 HTML 文档的第一行,位于​​<html>​​标签之前。

​​<!DOCTYPE>​​声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，​​<!DOCTYPE>​​ 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

  1. 标签的格式 标签里的“！”和“/”表示什么？

在html里标签里的!表示声明，“/”表示结束

注释标签，添加对代码的解释，不会被浏览器解析

  1. html标签

html元素告诉浏览器自身是一个HTML文档。

  1. 单标签和双标签

单标签只有一个，双标签是一对：有‘/’的是结束标签，没有’/'的是开始标签。

在HTML中单标签加与不加’/'都是可以正常解析的，但在HTML中不需要加，只有在XHTML中才必须加。

  1. head标签

head标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本(js知识)，指示浏览器在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

  1. title标签

定义文档的标题，浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的

标题中不要设置相同的内容。

  1. meta标签 charset ，name，content

meta 元素可提供有关页面的元信息，比如网页的描述和关键词。在 HTML 中， 标签没有结束标签。

  • name属性：把content属性关联到一个名称。
  • content属性：定义与name属性相关的元信息。
  • content属性始终要和name属性一起使用。

name为keywords时是网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

  1. body标签

body元素表示文档的内容。

  1. body里的常用标签介绍

div标签

div元素也叫分区元素，在语意上不代表任何特定类型的内容。它可以被用来对其他元素进行分组，或者对具有相同特性的一组元素进行分组。它应该在没有其他语义元素可用时才使用。

h系列标签

h1-h6标题(heading)元素呈现了六个不同级别的标题，h1级别最高，而h6级别最低。

正文标题h1标签，h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用h2标签， 而其它地方不应该随便乱用 h 标题标签。

ul标签

无序列表元素，表示一个内可含多个元素的无序列表或项目符号列表。

ol标签

有序列表元素，表示多个有序列表项，通常渲染带编号的列表。

dl标签

定义了定义列表。

dl标签常用于结合dt标签(定义列表中的项目)和dd标签(描述列表中的项目)。

p标签

段落元素，表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本。

blockquote标签

引用元素(块级)，代表其中的文字是引用内容。

q标签

q标签的作用和blockquote标签的作用一致，不同的是q标签用于一个段落内的简短引用。

pre标签

pre元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

span标签

span标签没有特殊语义，是短语内容的通用行内容器。

strong标签

strong标签表示文本十分重要，一般用粗体显示。

em标签

着重元素，标记出需要用户着重阅读的内容。

i标签

用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

b标签

给文字加粗,用于吸引读者的注意到该元素的内容上,尽管如此，你不应将 ​​<b>​​ 元素用于显示粗体文字，而是用css来控制。

关于strong、em、i、b标签

strong、em标签:需要强调时使用。strong标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em标签强调效果仅次于strong标签。

a标签

a标签定义超链接，用于从一张页面链接到另一张页面。

a 标签最重要的属性是 href 属性，它指示链接的目标。

target属性：_blank在新窗口打开；__self在当前窗口打开。

img标签

代表文档中的一个图像。

src： 当前目录 -> ./ ; 上一级目录 …/

video 视频

视频标签，在文档中嵌入媒体播放器。支持的格式有Ogg、MP4、WebM。

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

width：播放器宽度。单位只能为px，可以只写数值。

height：播放器高度。单位只能是px，可以只写数值。

src：资源地址。支持相对路径和绝对路径。

controls：显示播放控件。如播放，暂停，音量，全屏等。默认不开启，开启：controls=“controls”/controls。

autoplay：是否自动播放。默认不播放，开启：autoplay=“autoplay”/autoplay

loop：是否循环播放。默认不循环播放，开启：loop=“loop”/loop

poster：规定视频下载时和点击播放前显示的图像。

preload：页面加载完成后是否载入整个视频。auto：载入，none：不载入，metadata:当页面加载完成后只载入元数据(如视频的大小，视频的长度等)。如果设置了autoplay属性则忽略preload属性。

audio标签

音频标签，在文档中嵌入音频内容。

src：资源地址。可以是绝对路径也可以是相对路径。

controls：显示控件。如播放，暂停，音量，全屏等。默认不开启，开启：controls=“controls”/controls

autoplay：是否自动播放。默认不播放，开启：autoplay=“autoplay”/autoplay

loop：是否循环播放。默认不循环播放，开启：loop=“loop”/loop

muted：是否静音。默认关闭，开启：muted=“muted”/muted

preload：页面加载完毕后是否载入整个音频。auto：载入，none：不载入，metadata:当页面加载完成后只载入元数据(如视频的大小，视频的长度等)。如果设置了autoplay属性则忽略preload属性。

embed标签

引入外部视频或音频都可以，embed可以用来插入多种多媒体，例如：Midi、Wav、AU、MP3等。除此之外还可以加载其他的插件。

为什么要合理使用标签？

为了网站SEO。

什么是SEO？

SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。

为什么搜索引擎带来了SEO？

在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。一个关键词对应多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。

SEO的分类：

SEO分为白帽SEO和黑帽SEO。

白帽SEO：白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。

黑帽SEO：黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。

白帽SEO是做什么的？
  • 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
  • 网站内容优化：内容与关键字的对应，增加关键字的密度；
  • 在网站上合理设置Robot.txt文件；
  • 生成针对搜索引擎友好的网站地图；
  • 增加外部链接，到各个网站上宣传。
为什么要做SEO？

提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。

在使用标签的时候如何注意？
  • ​​<title></title>​​标签：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。
  • ​​<meta keywords>​​标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
  • ​​<meta description>​​标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
  • ​​<a>​​标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 rel=“nofollow” 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
  • 正文标题要用​​<h1>​​标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用

标签, 而其它地方不应该随便乱用 h 标题标签。

  • ​​<img>​​应使用 “alt” 属性加以说明。
  • 表格应该使用​​<caption>​​表格标题标签，caption 元素定义表格标题。caption 标签必须紧随 table 标签之后，您只能对每个表格定义一标题。
  • ​​<br>​​标签：只用于文本内容的换行。
  • ​​<strong>​​​、​​<em>​​​标签 ：需要强调时使用。​​<strong>​​​标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，​​<em>​​​标签强调效果仅次于​​<strong>​​标签。
  • ​​<b>​​​、​​<i>​​标签：只是用于显示效果时使用，在SEO中不会起任何效果。
  • 尽量少使用​​<iframe>​​框架,因为“蜘蛛”一般不会读取其中的内容。