一、HTML
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字 如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停 止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可 能会有不同的显示效果.
主要特点如下：
1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，
超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
基本组成：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<head>和</head>之间的内容，是元信息和网站的标题
元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。
也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。
他包含了之后的两个元素。<head>和</head>|<body>和</body>
2、html文档类型
DOCTYPE标签是单独出现的
说明：
文档类型，会使浏览器使用相应标准加载网页并显示
文档类型定义在HTML文档的第一行，在html标签之前
文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式，详见：浏览器模式
引用网址：http://www.dreamdu.com/xhtml/tag_doctype/
DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”
1.BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
2.CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老 实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
head部分
1、Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1、页面编码
<meta charset="UTF-8"> #指定编码类型为UTF-8
2、刷新和跳转
<meta http-equiv="refresh" content="5"> #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=" /> #指定1秒之后跳转页面至另一个网页3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<meta name="keywords" content="博客,Mr、心弦,帅哥,罗天帅">
4、描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
5、X-UA-Compatible
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个 参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
网页头部信息，如下图所示：
3、Link
网页头部的图标
<link rel="shortcut icon" href="favicon.ico">
效果图如下：
导入CSS类似python中导入模块类似
<link rel="stylesheet" href="css/css_model.css">
4、Style
1、在当前文件中写Css样式
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
5、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
body部分
基础知识
1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：
块级别标签&内联标签：
2、特殊符号特殊处理
举例来说<h1>是标题标签，如果我想输出<h1>这个字符串，而不是想获取<h1>的样式怎么办呢？
正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示，所以特殊的标签需要特殊处理
所以特殊符号有自己的定义更多请看连接：更多
常用标签：
1、<p></p>标签和<br/>标签
<p></p>标签：段落标签，每一对p标签为一段,代码如下
<p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
<br/>标签：换行标签；有一个<br/>为一个换行，看下面的代码
<p>帅哥帅帅哥帅帅哥帅<br/>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p> <p>帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅帅哥帅</p>
2、<a></a>标签
<a></a>标签用来跳转和锚
<a>标签之：跳转
默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，如下面代码
<a>帅哥博客</a>
指定跳转后，代码如下
<a href="">帅哥博客</a>
点击后将跳转到指定的连接地址~，在自身的页面打开的！
如果让他用一个新的标签中打开连接地址代码如下：
<a target="_blank" href="">帅哥博客</a><a>标签之：锚
锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置
<a href="#a2">
书签
</a>
<!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="a1" style="height:700px;">
mark_1
</div>
<div id="a2" style="height:700px;">
mark_2
</div>
上面的代码中，如果点击了书签之后，那么就会跳转到id=a2的书签的位置！
3、H标签
即标题标签,代码如下
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
h1最大可以自定义
4、Select标签
第一种select标签
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">广州</option>
<!--这里默认是广州因为selected="selected" 这里设置了默认的！-->
</select>
显示效果如下图：
第二种select标签
<select size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
显示效果如下图：
第三种select标签,可以进行多选
<select multiple="multiple" size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
第4中select标签，可以进行分组
<select>
<optgroup label="河北省">
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label="山西省">
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
效果图如下：
5、input系列标签
input:checkbox标签-复选框
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked，为默认选择"-->
效果如下图：
input:radio标签-单选框
<!--第一中情况不互斥 -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
效果图如下：
input:text & password 输入框
<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框（输入的内容是保密的）-->
<input type="password"/>
效果图如下：
input:button & submit 提交按钮
<input type="button" value="提交"/> <input type="submit" value="提交"/>
效果图如下：
file标签-用来提交文件时使用
<input type="file"/>
6、多行文本框
<textarea style="height: 100px;width: 100px;"></textarea>
效果图如下：
7、form表单
<form>
<p>用户名:<input type="text"/></p>
<p>密码:<input type="password"/></p>
<input type="submit" value="提交"/>
<input type="button" value="按钮"/>
<!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
<!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>
效果图如下：
<form action="www.baidu.com" method="get">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<p>
用户名:<input type="text" name="username"/>
<!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
</p>
<p>
密码:<input type="password" name="password"/>
<!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
</p>
<p>
部门:<select name="department">
<option value="1">CTO</option>
<option value="2">DBA</option>
<!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
</select>
</p>
<input type="submit" value="提交"/>
</form>
8、label标签
有一种情况，看下图，在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好：
代码如下：
<div>
<h1>Label标签</h1>
姓名:<input type="text"/>
婚否:<input type="checkbox"/>
</div>
使用label标签，代码如下：
<div>
<label for="name_1">
姓名:
<input id="name_1" type="text"/>
</label>
<label for="name_2">
婚否:<input id="name_2" type="checkbox"/>
</label>
</div>
显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转：
9、列表 ul/ol/dl
ul列表在前面自动加“点”，代码如下：
<ul> <li>line1</li> <li>line2</li> <li>line3</li> </ul>
效果如下：
ol列表在前面自动加“数字”，代码如下：
<ol> <li>line1</li> <li>line2</li> <li>line3</li> </ol>
dl列表自动分组，代码如下：
<dl> <dt>河北省</dt> <!--dt是标签，dd是标签里的内容--> <dd>石家庄</dd> <dd>衡水市</dd> <dt>山东省</dt> <!--dt是标签，dd是标签里的内容--> <dd>济南市</dd> <dd>烟台市</dd> </dl>
效果如下图：
10、表格
<table border="1">
<!--border这里是加上边框-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
效果如下：
合并单元格
<table border="1">
<!--border这里是加上边框-->
<tr>
<td colspan="3">1</td>
<!--这里colspan，就告诉html解析的时候占3个格-->
</tr>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
效果如下图：
以上的表格标签其实还不是很标准，正常标准的标签如下：
<table border="1">
<thead>
<!--表头-->
<tr>
<th>表1</th>
<th>表2</th>
<th>表3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
效果如下图：
11、fieldset标签
代码如下：
<fieldset>
<legend>协议</legend> 请仔细阅读协议内容： </fieldset>
效果如下：
css解释
css样式:
Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
元素内联、页面嵌入和外部引入
语法：style = 'key1:value1;key2:value2;'
在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式
引入外部css文件
优先级：标签>页面镶入>外部，这个仅限同样的样式冲突是才有用
元素内联：
直接在标签上应用：代码如下
<p style="">>
shuaige
</p>
页面嵌入
在头部写好css样式然后应用：代码如下
<head>
<meta charset="UTF-8"> <title>luotianshuai_study</title> <!--在头部指定好CSS样式然后，在标签里使用class="样式名应用"--> <style> .css_test{ background-color: darkorchid; } </style> </head> <body> <div> <p class="css_test"> <!--这里应用指定好的CSS样式名即可--> shuaige </p> </div> </body>
效果图如下：
外部引用
写一个独立的文件存储css样式代码如下： 建议（在样式文件里加上标注防止出现遗忘）
html代码如下：
<head>
<meta charset="UTF-8"> <title>luotianshuai_study</title> <!--这里通过link导入样式，有点类似与python导入模块中的import *--> <link rel="stylesheet" href="study_html_css.css"> </head> <body> <div> <p class=page_color> <!--这里直接应用指定好的CSS样式名即可--> shuaige </p> </div> </body>
效果图如下：
CSS样式应用中通过class应用CSS样式即可，还有两种知道即可代码如下：
id应用，"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> #name意思就是所有id为name的都会使用这个Css样式，代码如下：
<head>
<meta charset="UTF-8"> <title>luotianshuai_study</title> <style> #name{ background-color: red; } </style> </head> <body> <div> <p id="name"> <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式--> shuaige </p> <p id="name"> luotianshuai </p> </div> </body>
效果图如下：
标签应用，为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式，代码如下
<head>
<meta charset="UTF-8"> <title>luotianshuai_study</title> <style> p{ background-color: lightskyblue; width: 100px; height:100px; } </style> </head> <body> <div> <p> <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式--> shuaige </p> <p> luotianshuai </p> </div> </body>
效果图如下：
CSS常用属性
background 【背景】
background-color 背景颜色 代码如下：
<div style="">>
Hello,html
</div>
显示效果：
background-image 背景图片 代码如下：
<div style="background-image: url(favicon.ico);height: 80px;" >
</div> 显示效果如下：
首先确认，div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：
<div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
</div>
显示效果如下图：
border 【边框】
设置边框，效果图如下图：
代码如下：
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第一种：线的粗细为1像素，实线、红色--> <div style="border:1px solid red;height:10px" ></div> <!--第二种：线的粗细为1像素，点、蓝色--> <div style="border:1px dotted blue;height:10px" ></div> <!--第三种：线的粗细为1像素、虚线、紫色--> <div style="border:1px dashed purple;height:10px" ></div>
边框可以单独的设置一边的边框、上、下、左、右
<!--在左边设置边框，3px、实线、红色-->
<div style="border-left: 3px solid red">Luotianshuai</div>
效果图如下：
Display
代码如下：
<!--display 为none将隐藏标签-->
<div style="display: none;">Luotianshuai</div> <!--display 为inline会将块级别标签调为内联标签--> <div style="display:inline">Luotianshuai</div> <!--display 为block会将内联标签调为块级别标签--> <a style="display:block">Luotianshuai</a>
cursor 鼠标停放所显示的效果
代码如下（实际效果自己写看）：
<div style="cursor:pointer">停放在这里显示小手(pointer)</div> <div style="cursor:help">停放在这里显示问号(help)</div> <div style="cursor:wait">停放在这里显示问号(wait)</div> <div style="cursor:move">停放在这里显示移动(move)</div> <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>
浮动 float （用的比较多，用来布局使用）
效果图如下：
代码如下：
float
注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：
<div style="clear:both;"></div>
