- HTML 是谁发明的
- 1990年左右，Tim Berners-Lee(蒂姆·伯纳斯·李)发明了万维网(亦作“WWW”英文全称为“World Wide Web”)，同时发明了HTML、HTTP和URL。他写了第一个浏览器，写了第一个服务器，并且用自己的浏览器访问了自己的服务器。
- HTML(Hyper Text Markup Language)是超文本标记语言，是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
- HTML 起手写法
使用VScode，输入!+Tab会出现
<!DOCTYPE html>
<!-- 声明文档类型为html -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 声明文件的字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 禁用缩放兼容手机 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 告诉IE使用最新的内核 -->
<title>Document</title>
<!-- 标题为Document -->
</head>
<body>
</body>
</html>
- 常用的表章节的标签
- h1~h6 标题元素，呈现了六个不同的级别的标题，h1级别最高，而h6级别最低。
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
- section 章节元素，表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
<section>
<h1>介绍</h1>
<p>HTML(Hyper Text Markup Language)是超文本标记语言...</p>
</section>
- article 文章元素，表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<article>
<p>HTML是一种用于创建网页的标准标记语言...</p>
</article>
- p 段落元素，表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
<p>第一段</p>
<p>第二段</p>
- header 头部元素，用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<header>
<div>概述</div>
<div>项目</div>
<div>成果</div>
</header>
- footer 脚部元素，表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<footer>
<p>© 2019 MDN</p>
</footer>
- main 主要元素，呈现了文档的<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主、应用的主要功能部分的内容组成。
<main>
<p>HTML文档由嵌套的HTML元素构成。</p>
<p>它们用HTML标签表示，包含于尖括号中，如`<p>`</p>
</main>
- aside 旁支元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
<p>这是一段话，主要内容</p>
<aside>
<p>这不重要，参考注释</p>
</aside>
- div 文档分区元素，是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组。
<div>
<p>HTML是一种基础技术</p>
</div>
- 常用的全局属性
<div class="master piece"> </div>
- contentedditable 可以直接在网页中对于其内容进行修改，它几乎支持所有的HTML元素。
<div contenteditable> This text can be edited by the user. </div>
<div hidden> 内容隐藏. </div>
- id 定义了一个全文档唯一的标识符 (ID)。不到万不得以，不使用<id>标签。有时候不唯一时，也不报错。
<div id="1"> 全文档唯一</div>
<style>
.demo{
background:gray
}</style>
<title>完整内容</title>
小技巧：white-space:nowrap; //表示不换行
text-overflow:ellipsis; //溢出部分显示为省略号
overflow:hidden; //溢出部分隐藏
//内容太长的话经过上面三行代码，可以使多出部分显示为"...",
- tabindex 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航，通常使用Tab键。
eg: tabindex = 正值 表示该元素可以被选择，按照从小到大依次被选取。
tabindex = 0 表示该该元素最后被选取。
tabindex = 负值 表示该元素不会被选取，通常赋值‘-1’
- 常用的内容标签
- ol+li 正向的列表，有序列表,注意ol中只能包含li作为唯一的内容子集。
- ul+li 无序列表,注意ul中只能包含li作为唯一的内容子集。
- dl+dt+dd 描述性的列表，dt做为被修饰的元素，dd用于修饰他。
- a 超链接元素，加上target= ‘_blank’属性，链接在新窗口打开，不加则在当前窗口打开
- strong 表示内容本身的重要性
- em 表示语气上的强调
- code 插入代码，用code标签包起来，代码字体是的等宽的。
- pre 一般来说，HTML中内容无论有多少个空格，回车，tab都会被缩进成一个空格，加入pre可以保证所有空格保留。
- hr 水平分割线
- quote 内联引用
- blockquote 块级引用
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<dl>
<dt>描述元素</dt>
<dd>描述内容1</dd>
<dd>描述内容2</dd>
</dl>
<pre><code>a = 10; <br>console.log(a)</code></pre>
<hr />
<a href="" target="‘_blank’">超链接</a>
<em>期末</em>考试 <strong>重点</strong>内容
<quote>内联引用</quote>
<blockquote>块级引用</blockquote>
