HTML简介
1.HTML是谁发明的？
- 1990年左右，Tim Berners-Lee（蒂姆·伯纳斯·李）发明了万维网（亦作“WWW”英文全称为“World Wide Web”），同时发明了HTML、HTTP和URL。李爵士写了第一个浏览器，写了第一个服务器，并且用自己的浏览器访问了自己的服务器。
2.HTML是什么？
HTML 是用来描述网页的一种标记语言，是WWW的描述语言，通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上.它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础.
HTML 指的是超文本标记语言 (Hypertext Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML的起手写法
<!DOCTYPE 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>
<!-- 标题 -->
</head>
<body>
</body>
</html>
HTML中常用来表示章节的标签有哪些？
- <h1>~<h6> 标题(Heading)元素呈现了六个不同的级别的标题，<h1>级别最高，而<h6>级别最低。
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h3>标题三</h3>
<h4>标题四</h4>
- <section> "章节" 元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
<section>
<h1>介绍</h1>
<p>自有史以来，人们一直以捕鱼进行果脯...</p>
</section>
<section>
<h1>钓鱼</h1>
<p>钓鱼需要做的第一件事就是拥有钓鱼竿，然后钓各种鱼......</p>
</section>
- <article>“一篇文章”元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<article class="天气预报">
<h1>知乎天气预报</h1>
<article class="今天">
<h2>2019年8月17日</h2>
<p>有雨</p>
</article>
<article class="今天">
<h2>2019年8月18日</h2>
<p>中雨</p>
</article>
<article class="今天">
<h2>2019年8月19日</h2>
<p>倾盆大雨</p>
</article>
</article>
- <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
<p>这是第一个段落。这是第一个段落。
这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。
这是第二个段落。这是第二个段落。</p>
- <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<header class="页头">
<h1>小狗快递</h1>
</header>
<main>
<p>我非常喜欢中华田园犬！它们忠诚，勇敢，并且通人性！</p>
</main>
- <footer> 元素表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<article>
<h1>如何做饭</h1>
<ol>
<li>先买菜</li>
<li>再买锅</li>
<li>一定要有锅</li>
</ol>
<footer>
<p>© 2019 MDN</p>
</footer>
</article>
© => ©版权标识符
- <main> 元素呈现了文档的<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主、应用的主要功能部分的内容组成。
<header>壁虎</header>
<main role="main">
<p>壁虎是一群通常很小的，通常是夜行的蜥蜴。它们遍布澳大利亚以外的每个大陆。</p>
<p>许多种类的壁虎都有粘性脚垫，使它们可以爬墙甚至是窗户</p>
</main>
- <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
<p>这是一段话，主要内容</p>
<aside>
<p>这不重要，参考注释</p>
</aside>
<p>第二段话</p>
- <div> 元素(或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组.
<div class="内容">
<p>这里可以是任何内容</p>
</div>
拥有全局属性的标签有哪些？
<class> //给你的标签标记或者分类
<contenteditable> //使元素可编辑，它几乎支持所有的HTML元素。
<div contenteditable="true">
This text can be edited by the user.
</div>
<hidden> //可以使一个标签不被显示
<id> //定义了一个全文档唯一的标识符 (ID)。 [不到万不得以，不使用<id>标签。有时候不唯一时，也不报错。JS中可直接调用id属性， eg: "xxx. style. border = '1px solid green'";不建议使用。使用时注意，定义‘xxx’时不能与控制台‘window.’中的默认值冲突，否则不能使用。]
<style> //通常使用<style>访问CSS的属性列表。
<tabindex> //指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航，通常使用Tab键。
eg: tabindex = 正值 表示该元素可以被选择，按照从小到大依次被选取。
tabindex = 0 表示该该元素最后被选取。
tabindex = 负值 表示该元素不会被选取，通常赋值‘-1’.
- <title> //显示完整内容
使用时小技巧：white-space: //表示不换行
nowrap;text-overflow: //溢出部分显示为省略号
ellipsis;overflow; //溢出部分隐藏
//内容太长的话经过上面三行代码，可以使多出部分显示为"...",
title标签让鼠标浮上去显示完整内容。
常用的内容标签有哪些？
* <ol>+<li> //"ol"=>ordered list; "li"=>list;
* <ul>+<li> //"ol"=>unordered list; "li"=>list;
* <dl>+<dt>+<dd> //"dl"=>description list; "dt"=>描述的谁；"dd"=>描述的内容；
* <pre> //如果要保留”空格“”回车“”tab“，那么使用<pre>标签包起来；
* <hr> //分割线
* <br> //”中断、打断、回车“
* <a> //加上”target= ‘_blank’“,链接在新窗口打开，不加则在当前窗口打开
* <em> //表示语气上的强调
* <strong> //表示内容本身的重要性
* <code> //插入代码；”用code标签包起来，代码字体是的等宽的“
* <quote> //内敛引用
* <blockquote> //块级引用
代码练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style> style{display: block}/* 如果把style属性放入body里面，
这句话可以使style属性显示出来 */
.middle{
background: black; color: white;
}
.bordered{
border: 5px solid red;
}
[class=xxx]{
border:5px solid green;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a{
color: inherit;
text-decoration: none;
border-bottom: 1px solid;
}
</style>
<style>
table{
border-collapse: collapse; /* border合并起来 */
border-spacing: 0; /* 间隙为零 */
}
td{
border: 1px solid red;
}
</style>
</head>
<body>
<header class="xxx" title="完整的内容
（此处写多少内容就显示多少内容）">
顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告
顶部广告顶部广告顶部广告顶部广告
</header>
<a href="https://qq.com">点击这里</a>
<hr>
<div class="middle bordered" contenteditable>
<main>
<h1>文章标题</h1>
<p>一段话一段话一段话一段话一段话一段话</p>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<section>
<h2>1.1节</h2>
<pre>
<p>工作内容： 上课</p>
</pre>
</section>
<section>
<h2>1.2节</h2>
<p>这是一段话</p>
</section>
<p>每天要做的事</p>
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<p>每天要做的事</p>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<p>大美女</p>
<dl>
<dt>貂蝉</dt>
<dd>艳冠天下</dd>
</dl>
</main>
<aisde>
参考资料：
</aisde>
<p>我会用javascrpit</p>
<code>
var a = 1
console.log(a)
</code>
</div>
<footer>© 饥人谷版权所有</footer>
</body>
</html>
``
