一、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表示列合并，结果就是这样：
二、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进行装饰，第三种，在以后的博客中会体现。
上面说的是引入css样式，是直接在<style>标签中写选择器就能够实现，第三种方式是把样式写到一个.css的文件中，然后使用<link>标签引用实现；比如样式文件名是test.css,那么link引入的时候就可以这样写<link href="test.css"rel="stylesheet">;就是这么简单就可以完成了。
下面看看我在写一个简单的页面的时候，用到的一些样式，以及实现的方法：
1、margin:外边距 padding：内边距
2、固定窗口：直接在css样式里面加上position: fixed;就可以固定窗口了，这里固定是相对于窗口而言的；还有两个是relative、absolute，它俩是结合使用的，相对的是浏览器。
3、z-index优先级(这个只有在多层样式重叠的时候，设置优先级，优先级越高就是在最前面显示)；opacity透明度：做样式时，给背景色，或者图片设置透明度（透明度值：0-1）
4、hover伪类，这样说估计谁也不知道啥意思，下面看一个小例子：
当鼠标放在每个元素上的时候，背景色显示为浅绿色，那么就得使用hover，上面在一行中显示为这样，使用的<ul><li>;那么这样写就可以实现上面的效果：
1 ul li{ 2 list-style-type: none; 3 float: left; 4 padding: 0px 10px 0px 10px; 5 line-height: 30px; 6 cursor: pointer; 7 } 8 ul li:hover{ 9 display: block; 10 background: palegreen; 11 }
一行到七行做的是让每个元素前面的黑点去掉，都往左飘移，还有最后一个是让鼠标放在上面的时候显示为小手。八行到十一行做的是当鼠标放在上面的时候，背景色改为浅绿色。
5、overflow;它的作用是针对一个文本框加上拉取，它有几个参数，auto，表示当内容超出了框的大小的时候才会出现，scroll,是不管框里内容大小，都会显示。