前端开发之HTML+CSS
HTML(Hyper Text Mark-up Language):
中文名称为，超文本标记语言。
#超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
网页的组成：
一个网页一般由两部分组成即：
- HTML（Hypertext Markup Language）
- 和CSS（Cascade Style Sheets）。
HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。
HTML之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=http://www.baidu.com" /> #指定1秒之后跳转页面至另一个网页
3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬网站的时候，如果有关键字，那么别人就会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，通过搜索关键字就能找到具有该关键字的网站。
<meta name="keywords" content="虾米猜电台 在线试听 电台 在线试听">#在浏览器搜索框中输入该关键字，这样就能找到虾米音乐网了！
4、描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
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导入到当前文件中使用
HTML之Body:
基础知识
1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小。
2、特殊符号特殊处理
这里记住常用的表示空格的特殊字符为：  更多特殊字符
常用标签：
1、<p></p>标签和<br/>标签
<p></p>标签：段落标签，每一对p标签为一段,代码如下：
<p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p> <p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p><p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p>
在浏览器中显示为：
<br/>标签：换行标签；有一个<br/>为一个换行，看下面的代码
2、<a></a>标签
<a></a>标签用来跳转和锚
<a>标签之：跳转
默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，如下面代码
<a>eric</a><a>eric</a>
显示：
指定跳转后，代码如下
<a href="http://www.baidu.com">帅哥博客</a>
效果如下：
如果让他用一个新的标签中打开连接地址代码如下：
<a target="_blank" href="http://www.baidu.com">百度</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>
显示效果如下：
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标签的时候，我们只能点进框体里去，否则就不能输入或选择，用了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>111</li>
<li>222</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>
如下图：
