HTML入门笔记1
- HTML是谁发明的？
- HTML起手式。
- 常用的表章节的标签有哪些，分别是什么意思。
- 全局属性。
- 常用的内容标签。
1. HTML是谁发明的？
- 英国人李爵士
2. HTML起手应该写什么？
<!DOCTUPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
</body>
</html>
3. 常用的表章节的标签有哪些，分别是什么意思。
3.1 标题<h1~h6>
HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。
<h1>：一级标题<h2>：二级标题<h3>：三级标题<h4>：四级标题<h5>：五级标题<h6>：六级标题
<h1>是最高级别的标题，<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>。
<body>
<h1>JavaScript 语言介绍</h1>
<h2>概述</h2>
<h2>基本概念</h2>
<h3>网页</h3>
<h3>链接</h3>
<h2>主要用法</h2>
</body>
上面代码，通过章节标题，清晰地表明了文章的主体结构。具体的内容，就可以写在章节标题的下面。
标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。
默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。
3.2 章节<section>
<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。
<article>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>...</p>
</section>
<section>
<h2>第二章</h2>
<p>...</p>
</section>
</article>
上面代码中，<article>包含了两个<section>，代表两章。
<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片。
一般来说，<section>都应该有标题，即包含<h1>~<h6>标签。多个<section>可以放置在同一个<article>里面，一个<section>里面也可能包含多个<article>，这取决于<section>和<article>在当前页面的含义。
3.3 文章 <article>
<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
一个网页可以包含一个或多个<article>，比如包含多篇文章。
3.4 段落<p>
<p>标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<p>元素。
<p>hello world</p>
上面代码就是一个简单的段落。
3.5 头部<header>
<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。
<header>
<h1>公司名称</h1>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。
<article>
<header>
<h2>文章标题</h2>
<p>张三，发表于2010年1月1日</p>
</header>
</article>
由于<header>可以用在多种场景，所以一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>。
3.6 脚部 <footer>
<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。
<body>
<footer>
<p>© 2018 xxx 公司</p>
</footer>
</body>
上面代码中，版权信息放在<footer>里面。
<footer>也可以放在文章里面。
<article>
<header>
<h1>文章标题</h1>
</header>
<footer>
<p>© 禁止转贴</p>
</footer>
</article>
<footer>不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。
3.7 主要内容 <main>
<main>标签表示页面的主体内容，一个页面只能有一个<main>。
<body>
<header>页眉</header>
<main>
<article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>
上面代码就是最典型的页面结构。
注意，<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。
另外，功能性区块（比如搜索栏）不适合放入<main>，除非当前页面就是搜索页面。
3.8 旁支内容 <aside>
<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释。
下面是网页级别的<aside>的例子。
<body>
<main>主体内容</main>
<aside>侧边栏</aside>
</body>
下面是文章评注的例子。
<p>第一段</p>
<aside>
<p>本段是文章的重点。</p>
</aside>
3.9 划分 <div>
<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。
它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<div>就很常见。
<div class="main">
<div class="article">
<div class="title">
<h1>文章标题</h1>
</div>
</div>
</div>
上面代码读起来很费力，因为不带有语义。后来，HTML 5 就提出了语义标签，改进了上面的代码。
<main>
<article>
<header>
<h1>文章标题</h1>
</header>
</article>
</main>
<div>是无语义的块级元素。下面的例子使用<div>，将图像和文字组合在一起，构成一个警告区块。
<div>
<img src="warning.jpg" alt="警告">
<p>小心</p>
</div>
只要样式上需要多个块级元素组合在一起，就可以使用<div>。但是，这应该是最后的措施，带有语义的块级标签（比如<article>、<section>、<aside>、<nav>等）始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用<div>。
4. 全局属性有哪些？
1.class 2.contenteditable 3.hidden 4.id 5.style 6.tabindex 7.title
5. 常用的内容标签有哪些，分别是什么意思。
5.1 ol+li (ordered list + list item)
5.2 ul+li (unordered list + list item)
<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。
<ul>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。
<li>表示列表项，用在<ol>或<ul>容器之中。
有序列表<ol>之中，<li>有一个value属性，定义当前列表项的编号，后面列表项会从这个值开始编号。
5.3 dl+dt+dd (description list + term + data)
<dl>标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。<dl>常用来定义词汇表。
<dt>和<dd>都是块级元素，<dd>默认会在<dt>下方缩进显示。上面代码的默认渲染结果如下。
5.4 pre (preview 的缩写)
<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。
5.5 hr
<hr>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。
5.6 br (break 的缩写)
<br>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。
5.7 a (anchor 的缩写)
链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。
5.8 em (emphasis 的缩写)
<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。
5.9 strong
<strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。
6.0 code
<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。
6.1 q (quote 的缩写)
<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。
6.2 blockquote
<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。
