1. 网页的骨骼：HTML
编写 Web网页的基础三件套是HTML,CSS和JavaScript，这一节先了解HTML
1.1 基本结构
使用HTML编写的代码保存时，后缀名可以取成html，一般来说会包含以下基本结构。
<!DOCTYPE html>
<html> // html 标签
<head></head> //网页头部标签
<body></body> // 主体
</html>
第一行代码声明了以下使用HTML5语法
1.2常用标签
1.单标签和双标签
HTML 标签主要分为单标签和双标签两类。
单标签只有开始标签。
例1. 指定网页使用UTF-8字符集
<meta charset=”UTF-8”/>
双标签既有开始标签又有结束标签，所以可以在其中包裹一些标签的内容。
例2. 定义html网页的标题
<title>我爱HTML</title>
meta和title 标签需要放入head之中。
1. 内容标签
内容标签都需要放入body中
1.h1-h6 分别表示一级标题至六级标题，标题文字会依次减少
<h1>我是一号标题<h1>
<h2>我是二号标题<h2>
<h6>我是六号标题<h6>
2.p表示正文中的段落
<p>这里是段落内容 </p>
2. a表示超链接，提供Web网页之间的跳转，或者从网页的一部分跳转到另一部分。在a标签中需要指定href属性，即跳转的目标链接，target = “_blank”表示单击链接后在新标签页中打开目标链接，以下代码即生成一个跳转到百度的超链接。
<a href="http://www.baidu.com"> 百度</a>
Img用于生成图片，src属性指定图片源文件的地址，可以使用相对路径调用本地图片，或者使用互联网上能访问到的图片链接。Width和height属性分别指定图片的宽度和高度，单位是像素，如果仅提供其中一个的值，则保持图片原始比例并计算另一个的值。
<imgsrc="test.jpg"width="200">
1.3块即标签和内联标签
块级标签单独占据一行，其后面的标签会在下一行出现，而多个内联标签会显示在同一行中，直到总宽度超过了浏览器宽度才换行。
可以在HTML标签之间或者p等标签内容中添加br，用于添加空白行或者换行。
<p>这是一段<br>换行的段落</p>
div和span分别属于块级标签和内联标签，都可以用作其他HTML标签或页面文本的容器。它们本身没有具体的语义，仅作为其他内容的容器，从而将Web页面更加结构化地组织起来。我们在设计网页时，都会将页面划分为多个区域，如导航栏，侧边栏，第一部分，第二部分，第三部分，底栏等。
<div>
div里面可以包含其他HTML标签或者文本内容
<p>这个div是页面的第一块内容</p>
</div>
<div>
<p>这个div是页面的第二块内容</p>
<div>
<span> span是内联标签，后面的文本不换行</span>
<span>div里面还可以嵌套其他div<\span>
<p>div的使用可以让页面内容更加结构化，有层次</p>
</div>
</div>
table 属于块级标签，使用table标签可以定义表格，用tr表示表格中的每一行，用td表示每一行中的单元格，用th表示表头行中的单元格。
<table>
<tr>
<th>语言</th>
<th>难度</th>
<th>功能</th>
</tr>
<tr>
<td>Python</td>
<td>简单</td>
<td>强大</td>
</tr>
<tr>
<td>R</td>
<td>简单</td>
<td>强大</td>
</tr>
</table>
ul和ol属于块级标签，使用ul和ol定义列表，分别对应无序列表和有序列表，用于展示多个并列项，每一项用li定义
<ul>
无序列表
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
<ol>
有序列表
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ol>
1.4下拉控件
<select name=""id="">
<optionvalue="北京">北京</option>
<optionvalue="上海">上海</option>
<optionvalue="广州">广州</option>
<optionvalue="深圳">深圳</option>
</select>
1.5 标签的属性
很多HTML标签都有对应的属性，即写在标签开始部分中的属性名和属性值，如 a的 href，img的src等。
1.5.1 id
Id属性可以给标签取一个id，id值应当在整个页面中独一无二，使用id可以有针对性地操作某一个标签，如控制样式，绑定事件等。另外，如果将a的href设置为#加上某一个标签的id，则单击链接后，页面将跳转到对应标签所在位置。
1.5.2 class
Class 属性可以给标签取一个class，同一个class值可以应用于多个标签，从而使用class同时操作多个标签，如控制它们的样式，为它们绑定事件等。
1.5.3 name
那么属性和class类似，只是基于name控制相应的标签没有class那么方便，可以将id，class，name理解成一个人的身份证号，姓，名等
1.5.4 style
Style 属性可以为标签添加内联样式，即使用CSS的一种方法，等我们了解CSS之后再详细讨论，这里提供一个简单的示例
<p style =”color:red;”> 这是一段有颜值的内容</p>