一、什么是HTML?
1.HTML是超文本标记语言,不是编程语言,是用来告诉浏览器如何加载你所访问的页面结构的标志
2.HTML用标记可以解释展示在浏览器网页上的文本、图片和其他类容。HTML包含特殊的元素,例如<head><title><body><header><footer><article><section><p><div><span><img><aside><audio><canvas><datalist><details><embed><nav><output><progress><video>
3.HTML标签是不敏感的。标签可以写成大写、小写或者大小写混合。例如 <title> 标签可以写成<TITLE>或<Title>
二、HTML特点(https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
1.标签可嵌套
<p>My cat is <strong>very</strong> grumpy</p>
<strong>标签重点强调
2.空标签
<img src='images/icon.png' alt='test image'>
<img>标签不能用来包裹文本,它的作用是在HTML页面里应该显示图片的地方嵌入图片
3.剖析HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/icon.png" alt="my test image">
</body>
</html>
这里我们有:
<!DOCTYPE html>——文档类型。
<html></html>——包裹页面的所有文本的标签,有时候被看做根标签
<head></head>——包含关键字和页面描述以及css的引入链接
<meta charset="utf-8">——设置浏览器读取的字符集类型
<title></title>——设置页面的标题
<body></body>——包含你想展示给用户看的所有内容,可以是文本、图片、视频、游戏、播放音轨等
三、HTML元素参考(https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
1、主根
<html>
2、文档元数据
<link><meta><style><title>
3、分节跟
<body>
4、章节型内容
<address><article><aside><footer><header><h1><h2><h3><h4><h5><h6><hgroup><main><nav><section>
5、文本内容
<blockquote><dd><dir><div><dl><dt><figcaption><figure><hr><li><main><ol><p><pre><ul>
6、行内文本语义
<a><abbr><b><bdi><bdo><br><cite><code><data><dfn><em><i><kbd><mark><q><rb><rp><rt><rtc><ruby><s><samp><small><span><strong><sub><sup><time><tt><u><var><wbr>
7、图片和多媒体
<area><audio><img><map><track><video>
8、嵌套文本
<applet><embed><iframe><noembed><object><param><picture><source>
9、脚本
<canvas><noscript><script>
10、限定编辑
<del><ins>
11、表格文本
<caption><col><colgroup><table><tbody><td><tfoot><th><thead><tr>
12、表单
<button><datalist><fieldset><form><input><label><legend><meter><optgroup><option><output><progress><select><textarea>
13、交互元素
<details><dialog><menu><menuitem><summary>
14、web组件
<content><element><shadow><slot><template>
15、过时和废弃的元素
<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><shadow><spacer><strikle><tt><xmp>