HTML前瞻

Tim Berners-Lee：图灵奖获得者，于1990年发明了WWW（URL、HTML、HTTP）。
WWW的作用
- 输入网址跳转网页→URL
- 显示一个网页→HTML
- 让这个过程更加完善→HTTP
HTML标准制定者：W3C
推荐的查询网站：MDN

HTML的基本模板

!+Enter，快速生成HTML基本模板。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

lang="en"：界面语言，一般会改为lang="zh-CN"。
<!DOCTYPE html>：文档类型。
charset="UTF-8"：表示文件的字符编码为UTF-8，一般不改。
name="viewport"：禁止页面缩放。
content="IE=edge"：把浏览器的IE引擎设置为最新版。
<title>Document</title>：网页标题。
注意
- 以上除了lang="en"和<title>标签，其他都不要改。
- VS Code修改html默认模板代码(Win10)
- <head>内的标签除了加载CSS和JS时，其他情况下标签先后顺序无影响，但一般会先声明charset="UTF-8"。

章节标签

用于表示文章/书的层级

<header>顶部广告</header>
<div>
  <main>
	<h1>达·芬奇</h1>
	<section>
	  <h2>人物生平</h2>
	  <section>
		<h3>1.1出生与童年</h3>
		<p>
		  儒略历1452年的4月15日，达·芬奇出生于佛罗伦萨共和国和比萨共和国之间的芬奇镇上一个殷实的中产阶级家庭中。
		</p>
	  </section>
	  <section>
		<h3>1.2六年学徒时期</h3>
		<p>
		  达·芬奇的童年已成历史疑案。但可以知道，他从小就勤奋好学，善于思考。达·芬奇爱好绘画和玩弄粘土，时常到街上去写生，邻居们都称赞他是小画家。
		</p>
	  </section>
	</section>
	<section>
	  <h2>主要影响</h2>
	  <p>
		说达·芬奇是一名伟大的画家并不准确，他是一个博学者，在绘画、音乐、建筑、数学、几何学等领域都有显著的成就。
	  </p>
	</section>
  </main>
  <aside>参考资料</aside>
</div>
<footer>&copy; 版权声明</footer>

标题<h1>~<h6>：标记主标题、副标题、章标题、节标题、段标题等。
章节<section>：标记一个章节，里面包括章节标题和内容。
文章<article>：表示文档、页面、应用或网站中的独立结构，如论坛帖子、新闻文章、用户评论等。
段落<p>：标记文章段落。
头部<header>：标记网页顶部。
脚部<footer>：标记网页底部，用于版权声明。
- 版权标志：©
主要内容<main>：标记主要内容，以区别<header>和<footer>。
旁支内容<aside>：标记导航，非网页主要内容的旁支内容。
划分<div>：用于简单划分各个整体。

内容标签

<ol>+<li>：ordered list和list item。有序列表，<ol>表示列表本身，<li>表示列表子项。
<ul>+<li>：unordered list和list item。无序列表，<ul>表示列表本身，<li>表示列表子项。
<dl>+<dt>+<dd>：description list、term和data。表格，<dl>表示表格本身，<dt>表示表格行，<dd>表示单元格。
<pre>：preview。HTML中源代码中的连续多个空格和回车，会缩成一个空格。<pre>标签包裹的内容可以保留HTML源代码中的空格和回车。
<hr>：分割线。
<br>：break。换行符。
<a>：anchor。超链接，<a href="目标地址"></a>。
- 如果href="#"，则<a>标签会跳转到页面顶部。
- <a>标签默认是在当前窗口打开页面，如果需要在新窗口打开页面需要设置属性。target="_blank"。一般中国的开发者喜欢设置，但外国的开发者不喜欢设置。
<em>：emphasis。给包裹内容设置斜体，表示语气上的强调。
<strong>：给包裹内容设置加粗，表示内容本身的重要性。
<code>：插入代码块。
- <code>里面的字体是等宽的，但不会遵循源代码中的内容分行。
- 常于<pre>标签配合，在页面中插入代码块。
<q>：quote。表示引用，内联元素。
<blockquote>：表示引用，块级元素。

全局属性

所有标签都有的属性
class：用于划分标签的类或者用于标记类，让它有别于其他标签。
- 一个标签可以有多个class，class不能有空格。
- CSS中class的两种形式：[class="类名"]、.类名，推荐后者。
contenteditable：允许浏览者对标签内容进行编辑，可以用来自制编辑器。
hidden：让标签无法被看到（并且不占用位置），可以用display : block调回显示状态。
id：用于给标签一个唯一的id名。
- id的重复是不会报错的，不要轻易使用id，优先使用class。
- CSS中class的两种形式：[id="id名"]、#id名，推荐后者。
- id的用处
  1. 给标签添加CSS样式。
  2. 通过id，JS可以直接调用到对应元素。但不要轻易使用这种调用方法，因为自定义id可能会与windows内置的全局属性的id冲突。
style：CSS的行内式，一般配合JS使用。
- 可以通过JS来设置元素的style属性，JS控制会覆盖原有的style属性。
- 优先级：JS控制>style属性＞CSS。
tabindex：使元素能够被键盘Tab键选中，并设置访问顺序。tabindex="访问顺序"，用于应对没有鼠标的情况。tabindex的值不必是连续的数。
- tabindex="0"：最后一个访问。
- tabindex="-1"：不会被Tab键访问。
title：在鼠标移动上时显示提示信息，title="提示信息"。

默认样式

HTML标签自己本身有的样式
为什么会有默认样式？
- 因为HTML发明的时候，CSS还没出现。
- 默认样式有时候会不符合CSS语法。
- 默认样式会被开发者设置的CSS样式覆盖掉。
如何查看默认样式？
- Chrome开发者工具，Elements→Styles→user agent stylesheet
- user agent指的就是浏览器。
CSS reset
- 很多时候默认样式会不符合实际需求，因此会重新设置样式，通过link一个reset.css来清除默认样式，但不要在reset.css里实现需求。
- 常见CSS reset获取方法
  1. 在github上收藏代码，如reset.css和taobao_index_reset.css
  2. 进入大厂首页，cv大厂的reset代码
- 为什么有的网站，如淘宝，的reset写一大串标签来进行默认margin和padding的去除？
  - 网传*性能很差，没有确切依据。

拓展

显示style标签

<style>也是标签，可以被浏览者看到，实现步骤如下
1. 将<style>标签插入到body标签内部
2. 设置属性style{display:block}
结合style显示以及contenteditable，可以实现浏览者对页面CSS实时改变，这个技巧可以用于调试网页。
```
<body>
	<style contenteditable>
		style {
			display: block;
		}
	</style>
</body>
```

单行文字，过长的部分用省略号表示

在目标元素的CSS样式中添加以下属性

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space: nowrap;：禁止换行。
overflow: hidden;：溢出的部分省略。
text-overflow: ellipsis;：省略的部分用“…”来表示。

【HTML全解】HTML基础

HTML前瞻

HTML的基本模板

章节标签

内容标签

全局属性

默认样式

拓展

显示style标签

单行文字，过长的部分用省略号表示