一、HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！
首先看下当你在pycharm中默认创建一个html文件时给的标签：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Title</title>
6 </head>
7 <body>
8
9 </body>
10 </html>
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，每个标签都有一个开始和结束的标志，比如：<html></html>,<head></head>等，那个<meta />这种形式的是自闭和的标签；在这里meta的主要作用是告诉浏览器要使用的语言编码，meta的其它作用是：提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词，常用的是前三个功能：
1.页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
<meta charset="UTF-8">
2.刷新和跳转(第一个是实现3秒刷新一次，第二个是5秒跳转到百度)
< meta http-equiv=“Refresh” Content=“3″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.baidu.com“ />
3.关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
<title></title>;是网页头部的信息；这个没啥特别要说的。下面我们主要看在<body></body>里面常用的标签：
1、标签一般分为两种：块级标签 和 行内标签
a、span、select等，是属于行内标签
div、h1、p等，是属于块级标签
标签：
<a href="http://www.baidu.com”>百度</a>;这样点击‘百度’的时候会在原页面打开百度页面，在里面再加个target=‘_black‘，就会以新的界面打开百度页面；
<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>；这些标签里面的内容大小事逐渐减小的。
<select><option></option></select>;选择标签，<option>里面放所有的选择项。
<input type="text/password/radio/checkbox/file/button/textarea" />;type类型分别表示输入文本、密码、单选框、复选框、上传文件、按钮、多行文本。
<label for="male">用户名：</label>
<input type="text" id="male"/> <br /> 用户名：<input type="text" /> ;这四行是label标签，它并不会直接呈现给用户任何效果，而是做input标签的标注，在这个例子中有label标签的，点击用户名也会进入文本框中，没有label标签的就会有这种效果 注意：如果你想把上面的标签内容提交到后台，那么你需要把这些标签放到<form action="URL地址"></form>标签中。
1 <table border="1"> 2 <tr><td>标题一</td><td>标题二</td></tr> 3 <tr><td rowspan="2">1</td><td>2</td></tr> 4 <tr><td>4</td></tr> 5 <tr><td colspan="2">3</td></tr> 6 </table>
<table>是表格的标签，<tr>表示一行，它中有多少<td>表示有多少列，<td>中的两个参数rowspan表示行合并，colspan表示列合并，结果就是这样：
2、CSS样式：
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = ‘key1:value1;key2:value2;‘
- 在标签中使用 style=‘xx:xxx;‘
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
1 <head>
2 <meta charset="UTF-8" />
3 <!--<meta http-equiv="refresh" CONTENT="5;Url=‘http://www.baidu.com‘"/>-->
4 <title>Title</title>
5 <style>
6 /*标签选择器*/
7 div{
8 font-size: 100px;
9 }
10 /*class选择器*/
11 .c2{
12 color: red;
13 }
14 /*层级选择器*/
15 .c3 div a{
16 background-color: aqua;
17 color: blue;
18 }
19 /*组合选择器*/
20 .c5,.c6{
21 height: 150px;
22 background-color: aquamarine;
23 }
24 </style>
25 </head>
26 <body>
27 <div>标签选择器</div>
28 <a class="c2">class选择器</a>
29 <div class="c3">
30 <div>
31 <a class="c4">
32 层级选择器
33 </a>
34 </div>
35 </div>
36 <a class="c5">组合选择器1</a>
37 <a class="c6">组合选择器2</a>
这段代码说的是选择器的使用以及装饰，也是对应了上面说的第二种方式在页面中嵌入 < style type="text/css"> </style > 块来实现，第一种特别简单，是直接在div或者a标签中使用style进行装饰，第三种，在以后的博客中会体现。