页面的基本结构
1 .文档类型
<!DOCTYPE html>
1 .这里要使用HTML5文档.简短，容易记住而且向后兼容
2 .
2 .文件语言
<html lang='en-us'>
1 .使用元素lang上的属性设置文档语言
2 .可以有利于可访问性和搜索引擎，有助于本地化内容，并提醒人们使用最佳实践
3 .文档字符集
<meta charset="utf-8">
1 .页面使用urf-8编码
2 .一定要在html内尽早指定字符head集。可以防止ie的安全漏洞
4 .视口源标记
1 .则是为了兼容移动端的设备
编写小技巧
1 .虽然元素的标签和属性都是支持大小写的，但是最好是全部小写，这样看起来更加整洁
2 .尾随斜杠。不需要为空元素提供尾部斜杠，这样会减慢渲染速度。也会破坏旧浏览器
<input type='text'>
<hr>
//推荐
<hr />
3 .属性。将所有熟悉值放在双引号中，虽然省略引号很诱人，但是有标记更整洁，易于阅读理解.注意，还要使用双引号。
4 .类和id名称:使用连字符分隔多个单词，不要使用驼峰式
<p class="editorial-summary"></p>
//好的
<p class=="bigRedBox"></p>
html元素分类
1 .会列出全部元素，也会分类
根元素
1 .html:代表HTML文档的根，是顶级元素，所有其他元素都必须是该元素的后代
文档元数据
1 .元数据包括有关页面的信息。这包括帮助软件，浏览器，搜索引擎等使用和呈现页面的样式，脚本和数据的信息。
1 .base：html元素指定用于文档中所有相对url的基本url，文档只能有一个base元素
2 .head：包含有关文档的机器可读信息，例如标题，脚本，样式表
3 .link:元素执行当前文档和外部资源之间的关系。此元素最常用于链接到css，但也用于建立站点图表等等
4 .style:元素包含文档或文档的一部分样式信息。他包含css,应用于包含该元素的文档的内容
5 .title:定义了显示在浏览器标题栏或者页面选项卡中的文档标题.只包含文本。元素内的标签被忽略
6 .meta:表示无法由html表示的一些元数据。常见的有charset="utf-8"
切根
1 .body：HTML元素表示HTML文档的内容。文档中只能有一个元素body
内容分割
1 .内院分段元素允许你将文档内容组织成逻辑片段。使用分段元素为您的页面内容创建一个粗略的大纲，包括页眉和页脚导航，以及用于标识内容部分的标题元素
2 .address
3 .nav
4 .aside
5 .footer
6 .header
7 .h1-h6
8 .main
9 .article:表示文档、页面、应用程序或站点中的自包含组合，旨在独立分发或重复使用（例如，在联合中）。示例包括：论坛帖子、杂志或报纸文章、博客条目、产品卡片、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项目
1 .特殊的section标签，具有更加明确的语义，代表一个独立的，完成的相关内容块
2 .一般来说会有以下几部分，标题，内容，footer
3 .如果一个内容可以脱离上下文，作为完整的结构体独立存在一段内容，就可以使用article
4 .使用article的地方，也能使用section
10 .section:html元素表示文档的通用独立部分，他没有更具体的语义元素来表示它。章节应该总是有一个标题，只有极少数有例外
1 .比div有一点语义，一般会带有副标题。当一个标签只是为了样式化或者方便脚本使用的时候，应该用div
2 .文章的章节，标签对话框的标签页。
3 .https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning 可以看看这个网址的dom结构，就是符合这个的
文字内容-文本内容的标签基本都是块级元素
1 .使用HTML文本内容来组织放置在开始body和结束body标记之间的内容块或部分。对于可访问性和SEO来说非常重要，这些元素确定了该内容的目的或结构
2 .blockquote
3 .dd,dl,dt
4 .div
5 .figure
6 .figcaption
7 .hr
8 .li
9 .meun
10 .ol
11 .p
12 .pre
13 .ul
内联文本语义-这个才是大部分都是内联元素-看起来这个和seo没有关系啊
1 .a
2 .abbr
3 .b
4 .bdi
5 .bdo
6 .br
7 .cite
8 .code
9 .data
10 .dfn
11 .em
12 .i
13 .kbd
14 .mark
15 .q
16 .rp:用于为不支持使用该元素显示 ruby 注释的浏览器提供备用括号。一个元素应包含每个左括号和右括号，这些括号包裹包含注释文本的元素。<rp> ruby``<rp>``rt
17 .rt:指定了 ruby 注释的ruby 文本组件，用于为东亚排版提供发音、翻译或音译信息。元素必须始终包含在元素中
18 .ruby:示在基本文本上方、下方或旁边呈现的小注释，通常用于显示东亚字符的发音。它也可以用于注释其他类型的文本，但这种用法不太常见
19 .s:呈现带有删除线或者穿过他的线的文本。使用元素来表示不在相关或不在准确的事物
20 .samp:用于包含表示来自计算机程序的示例（或引用）输出的内联文本。它的内容通常使用浏览器的默认等宽字体（例如 Courier 或 Lucida Console）呈现
21 .small,big,strong
22 .span
23 .sub,sup
24 .time
25 .u:段内联文本，应该以表明它具有非文本注释的方式呈现。这默认呈现为简单的实线下划线，但可以使用 CSS 进行更改.但是这种好像没有必要了，因为还是老原因，仅仅是自己加了一个css样式。没有实际语义状况。我们看标签现在感觉都是通过class，不是通过标签了。他本来的标签是这个用处的。但是语义内联标签实际上没有seo的状况
26 .var:元素表示数学表达式或编程上下文中的变量名称。它通常使用当前字体的斜体版本呈现，尽管该行为取决于浏览器
27 .wbr:素代表一个分词机会——文本中浏览器可以选择换行的位置，尽管它的换行规则不会在该位置创建换行符
图像和多媒体
1 .embed:元素在文档中的指定点嵌入 外部内容，此内容由无额爱步应用程序或其他交互内容源提供，比如浏览器插件，目前还没见到过这个东西
2 .iframe
3 .object:表示一个外部资源，可以把他视为图像，嵌套浏览器上下文或由插件处理的资源.这个也从来都没用过
4 .param:定义元素的参数.这个也没用过
5 .picture:包含零个或者多个元素用于为不同的显示、设备场景提供图像的替代版本
6 .portal:允许另一个html页面顺畅的嵌入当前页面中，以便顺畅的导航到新页面。全都不支持，不看了。但是这个和iframe系施恩么关系呢
1 .他嵌入的网页内容是不能交互的。
7 .source:元素指定多个媒体资源。通常为多种文件格式提供相同的媒体资源，已提供和各种浏览器的兼容性。
SVG和MathML
1 .svg是一个定义新坐标系和视口的容器。被用作svg文档的最外层元素，但他可以用在SVG或html文档中嵌入SVG片段
2 .MathML 中的顶级元素是<math>. 每个有效的 MathML 实例都必须包含在<math>标签中。此外，您不能<math>在另一个元素中嵌套第二个元素，但您可以在其中包含任意数量的其他子元素。看起来是a2+b2=c2,应该是用来表示数学公式的吧，但是好像几乎所有的浏览器都不支持.
3 .
脚本
1 .为了创建动态内容和web应用程序，html支持使用脚本语言，最突出的是js
2 .canvas:这个竟然也算脚本。结合canvas脚本api和webGL api一起来绘制图形和动画
3 .noscript:这个也没用过。如果页面上的脚本类型不受支持或当前在浏览器中关闭脚本。则HTML元素定义要插入的HTML部分。
4 .script:元素用于嵌入可执行代码或数据。还可以和其他语言一起使用，比如GLSL着色编辑器
划分编辑
1 .这些元素可以让你指定文本的特定部分已被修改,比如todolist中已经做的事情一般都是这样
<del>123</del>
<ins>456</ins>
表格元素
1 .这个直接过滤，以后遇到表格的时候在看吧。
2 .目前想到的就是做一些合并单元格的时候需要。
表单元素
1 .button
2 .datalist
3 .fieldset
4 .form
5 .input
6 .label
7 .legend
8 .meter
9 .optgroup
10 .option
11 .output
12 .progress
13 .select
14 .textarea
互动元素
1 .html提供了一系列有助于创建交互式用户界面对象的元素
2 .detalist:一个显示小部件，其中的信息仅在小部件切换到打开状态时才可见。必须使用该元素提供摘要或标签
3 .summary:为元素的显示框指定摘要，标题或图例。单击元素可切换元素的打开和关闭状态
网页组件
1 .Web Components是一种与Html相关的技术，从本质上讲，他可以像普通html一样创建和使用自定义元素。这个额没有使用过
2 .slot
//可以看到，整个流程上，其实没有什么创新，和复制粘贴没啥本质区别，需要写的还是那么多代码，只是调用的时候方便一点，看起来语义化一点
过时和废弃的元素
1 .终于遇到了这些东西，可以从之前的那么多删掉一些了
2 .accronym:允许作者清除的指示组成单词首字母缩写词或缩写的字符序列
3 .applet:可以将java小程序镶嵌到文档里面，但是这个元素已经被弃用，取而代之是obejct
4 .basefont:继承父元素的其他元素设置默认字体，大小和颜色。有了这个设置，字体的大小就可以相对于使用元素的基本大小而改变
5 .bgsound:设置一个生硬文件在页面使用时在后台播放
6 .big
7 .blink:是一个非标准元素，会导致封闭的文本缓慢闪烁
8 .center:是块级元素，在其包含元素中水平居中显示其块级或内联内容
9 .content:在shadow DOM内部用作插入点，并不打算在普通html中使用，现在已经被元素替换，该元素在DOM中创建一个可以插入影子DOM的点
10 .dir:用作文件或文件夹目录的容器，可能带有用户应用的样式和图标。不要使用这个过时的元素，应该使用ul
11 .font:定义了其内容的字体大小，颜色和外观
12 .frame:定义一个可以显示另一个html文档的特性区域.现在应该使用frameset
13 .frameset
1 .<iframe>标签规定一个内联框架,一个内联框架被用来在当前 HTML 文档中嵌入另一个文档,通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe是一个内联框架，是在页面里生成内部框架
<iframe id="mainIframe" style="width:100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe>
2 .frameset定义一个框架集，包含多个子框架，每个框架都是独立的文档
3 .通常上来说都是把这个当成了布局空间
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm"></frame>
<frame src="frame_b.htm"></frame>
<frame src="frame_c.htm"></frame>
<noframes></noframes>
</frameset>
4 .原来是爹和儿子的关系
14 .hgroup:元素代表文档部分的多级标题，对一组元素进行分类
15 .image;也是很老的一个元素，不应该被使用。直接img
16 .keygen:提交表单的时候携带一个自己的密匙材料
17 .marquee:用于插入文本的滚动区域，可以使用属性控制文本到达内容边缘时发生的情况。这个还是走马灯啊？？？
18 .menuitem:用户能够通过弹出菜单调用的命令、
19 .nor：防止文本自动换行，这可能导致用户必须水平滚动才能看到文本的整个宽度
20 .noframes:提供不支持在浏览器中显示的内容。
21 .plaintext:元素将开始标记之后的所有内容呈现为原始文本，忽略任何后续HTML.没有结束标签，因为他之后的所有内容都被视为原始文本
22 .rb:用于分割注释的基本文本组件。即被注释的问呢
23 .rtc
24 .shadow:用作影子DOM插入点。在普通HTML中没有用
25 .spacer:允许在页面上行插入空格
26 .strike:允许在文本上防止一个删除线
27 .tt:创建用户代理默认等宽字体显示的内联文本。创建此元素是为了呈现文本，因为它将显示在固定宽度的显示器上，例如电传打字机，纯文本屏幕或行式打字机。还以为是表格的一个被标签样式。
28 .xmp:在开始和结束标记之间呈现文本，而无需解释中间的HTML并使用等宽字体。
