HTML的基本骨架
HTML
- HTML基本结构
- 什么是DTD文档模型，为什么写在HTML当中？
- SEO是搜索引擎优化的英文缩写
- 语义化标签
- HTML 中常用的标签
- 图片
- 超链接
HTML基本结构
<head lang="en">
lang 是 language 的意思，lang=“en” 属性对每张页面中的主要语言进行声明，en 代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是 zh-CN，代表了中文（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是HTML规范，越规范，越容易被收录）
<meta charset="UTF-8">
meta标签用来描述一个HTML网页文档的属性，此处的charset="utf-8"是说当前使用的是utf-8编码格式，GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准，GBK编码专门来解决中文编码的，是双字节的，UTF-8编码是用以解决国际上字符的一种多字节编码。
<！DOCTYPE html>
什么是DTD文档模型，为什么写在HTML当中？
DTD文档模型也称DOCTYPE文档声明，它是Document TypeDefinition的英文缩写，意思是文档类型定义，在HTML文档中 ，用来指定页面所使用的HTML（或者XHTML）的版本 。要想制作符合标准的页面，一个必不可少的关键组成部分就 是DOCTYPE声明。只有确定了一个正确的DOCTYPE，HTML里的标识和CSS才能正常生效。它一般被定义在页面的第一行，html标签之前。
它不是HTML标签。
我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。
DTD文档模型=DOCTYPE=DOCTYPE文档声明
<head> </head>
用于定文档的头部，它是所有头部元素的容器。head 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<title>、<meta>、<link>、<style>、 <script>
应该把 标签放在文档的开始处，紧跟在 后面，并处于 标签之前。 文档的头部经常会包含一些 标签，用来告诉浏览器关于文档的附加信息。
<title></title>
1、可定义文档的标题
2、它显示在浏览器窗口的标题栏或状态栏上
3、当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称
4、title 标签是 head 标签中唯一必须要求包含的东西，就是说写 head 一定要有 title ，不是说其他的不加，而是 title 一定要加。
5、title 写和你网页相关的关键词有利于SEO优化。
SEO是搜索引擎优化的英文缩写
通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。 网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。
<meta>
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有
Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords" content="web前端">
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="HTML">
author作者 标注网页的作者
<meta name="author" content="root,[email protected]">
语义化标签
语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如：网页上文章的标题就可以用标题标签h1-h6，段落用p,地址用address等。
好处：
1、更容易被搜索引擎收录
2、更容易让屏幕阅读器读出网页内容
HTML 中常用的标签
图片
1、使用
2、空标记
3、必须属性：src（存储图像的位置）
4、常用属性：width、height、alt、title
<img src="URL" width="300" alt="替换文本属性”/>
title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的
alt当图片未能正常显示时，用于给用户的提示信息
超链接
<a href="" target="" title=””>文本</a>
href属性：链接URL
target属性：目标，可取值_blank,_self等
name属性：锚点名称
title属性：定义了鼠标经过时的提示文字