- HTML 的核心功能就是“标记”内容，进而给出结构，是为内容添加语义结构的一种手段；
- HTML 一般以标签 < 开头，以标签 > 结尾；
- 标签一般成对出现，一个开始标签和一个结束标签就在文档中创建了一个元素；
- 结束标签一般用一个斜杠表示元素的关闭或结束，如</p>；
- 有些元素是可以嵌套的，子元素不能超出父元素的范围；
常用元素：
- <!DOCTYPE html> 这是标准的文档类型声明，必须放在文档的第一行；
- html 包含文档中的所有 HTML 内容；
- head 文档的头部，包含所有文档的元数据，如标题和对外部样式表、脚本的引用；
- title 文章的标题，浏览器会把这个元素的内容显示在窗口标题栏中，并在收藏网页时使用这个标题；
- body 所有不包含在 head 中的元素都包含在 body 中，这里的内容是网页中看到的；
- h1、h2、h3、h4、h5、h6 用于标记不同级别的标题，分别表示顶级标题、二级标题……
- p 段落；
- ul、ol、li ul 用于标记无序列表，ol 标记有序列表，li 用于标记列表事项；
- em 表示强调，一般显示为斜体；
- strong 表示额外强调，一般显示为粗体；
- a 链接。一般显示为带下划线的蓝色文本，可另行设置；
- span 任意文本，一般都包含在 p 这样的大容量元素中；
- div 任意文本块，用于分组相关元素。
- table 列表，table 内的表头标签为 thread，表头层标签为 tr，表头内容标签为 th；
table 内表身标签为 tbody，表身层标签为 tr，表身内容标签为 td；
- form 填表，可用于填写信息。
- img 插入图像，可从网页插入，也可从本地插入。
<!DOCTYPE html> <!-- 标准的文档类型声明 --> <html> <!-- HTML 开始标签--> <head> <!-- head 开始标签 --> <title>this is a page title</title> <!-- title 标签，将显示在浏览器的窗口标题栏中--> </head> <!-- head 结束标签 --> <!-- paragraphe --> <!-- 以下内容将出现在网页上被我们看见 --> <body> <!-- body 开始标签 --> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> <!-- h1 ~ h6 级标签，不同级的标签有不同的显示效果 --> <p><a href="http://baidu.com" target="_blank">This is a page</a></p> <!-- p 元素内包含 a 元素，即一个链接，链接为“百度”，在网页上显示为 “This is a page" --> <!-- target="_blank" 表示在新开的窗口打开网页--> <p>This is a page</p> <!-- 新开一行，内容为“This is a page” --> <p>Lorem <strong><em>dolor</em> sit</strong> amet consectetur adipisicing elit. Nobis, accusamus ab at delectus veritatis aperiam fugiat placeat accusantium doloribus incidunt sint libero dolorum, architecto qui! Assumenda quod ex earum velit.</p> <!-- 自动填充的一段文字，其中 dolor 显示为斜体和加粗 --> <!-- 无序列表 --> <ul> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> </ul> <!-- 有序列表 --> <ol> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> </ol> <!-- 表格 --> <table> <thead> <!-- 表格头 --> <tr> <!-- 第一行表格头 --> <th>First Name</th> <th>Last Name</th> <th>age</th> <th>email</th> <!-- 分别有四种内容，其名字为 First Name、Last Name、age、email --> </tr> </thead> <tbody> <!-- 表格尾 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>qwewqe@qwewd.com</td> </tr> <!-- 第一行的四个值 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>qwewqe@qwewd.com</td> </tr> <!-- 第二行的四个值 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>qwewqe@qwewd.com</td> </tr> <!-- 第三行的四个值 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>qwewqe@qwewd.com</td> </tr> <!-- 第四行的四个值 --> </tbody> </table> <!-- 填表 --> <form> <div> <label>First Name</label> <!-- 要填的内容是 First Name --> <input type="text" name="firstname" placeholder="Enter First Name"> <!-- 输入并记录填入的值，在框内提示 Enter First Name --> </div> <input type="submit" name="submit" value="Submit"> <!-- 设置提交按钮 --> </form> <img width="1000vw" src="flower.jpg"> <!-- 导入图片 flower.jpg 宽度为 1000vw （一种自适应宽度表达方式) --> </body> </html>
- 属性：可为任意的 HTML 元素指定一些属性，形式： <标签名 属性 ='值'></标签名>，如 <a herf ="http://d3js.org/"> The D3 website</a>；
- class 和 id 是最有用的两种属性，可以通过他们找到某些指定的内容，而且 CSS 和 JavaScript 也以来他们定位，如：
<p>Brilliant paragraph</p>
<p>Insightful paragraph</p>
<p class="awesome">Awe-inspiring paragraph</p>
第三个通过被添加了 class="Awesome" 的属性，被归到了 “Awesome”的一类；
- 可以一个元素指定多个类，也可以一个类包含多个元素，如：
<p class="uplighting">Brilliant paragraph</p>
<p class="uplighting">Insightful paragraph</p>
<p class="awesome uplighting"> Awe-inspiring paragraph</p>
- ID 的使用方法类似，但每个元素只能有一个 ID，而且这个 ID 在整个页面中也只能出现一次，如：
<div id="content">
<div id="visualization"></div>
<div id="button"></div>
</div>
- 在某个元素较为特殊的情况下，使用 ID 比较合适；
- 一般来说，如果页面中只有这么一个元素，那可以给他指定 id 属性，否则使用 class 属性；
- 类和 ID 不能以数字开头，只能以字母开头。