前端 初级篇(HTML)
HTML
概述：
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
HTML文档
基本代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
有，用什么？
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
问题产生：
当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。
为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。
然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。
因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时（译注：微软和网景之间的一段竞争）所产生的混乱
解决方案：
- 允许网站开发者能够选择他们所熟知的模式。
- 依然使用旧式规则显示陈旧的网站。
换句话说，所有的浏览器需要提供两种模式：怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。
选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE（译注：DTD（文档类型定义）是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明）用以告诉其他人 这个文档的类型风格
- 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。
- 相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。
- 任何新的或未知的DOCTYPE将触发严格模式。
- 一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表
Head Part
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.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页
3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">
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样式导入到当前文件中使用
< style type="text/css" > .bb{ background-color: red; } < /style>
5、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
引进文件 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > 写js代码 < script type="text/javascript" > ... </script >
Body part
1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：
块级别标签&内联标签：
<!--内联和块级--> <div style="background-color: red;">12</div> <span style="background-color: green;">12</span>
2、特殊符号特殊处理
举例来说<p>是段落标签，如果我想输出<p>这个字符串，而不是想获取<p>的样式怎么办呢？
<div> <p > </div>
所以特殊符号有自己的定义更多请看连接：更多
常用标签
标签一般分为两种：块级标签 和 行内标签
- a、span、select 等
- div、h1、p 等
1、<p></p>标签和<br/>标签
<p></p>标签：段落标签，每一对p标签为一段,代码如下
<p>dsfadfds<br />dasfasdfasf</p>
<p>dsfasfasdsfafafdasdfa</p>
<p>dafdsfdsf<br /></p>
# <br />为换行标签
显示效果如下：
2、<a></a>标签
<a></a>标签用来跳转和锚
<a>标签之：跳转
默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，如下面代码
<a>a标签</a>
指定跳转后，代码如下
<a href="http://www.baidu.com">跳转1</a>
如果让他用一个新的tab中打开连接地址代码如下：
<a href="http://www.baidu.com" target="_blank">跳转2</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>a</h1> <h2>a</h2> <h3>a</h3> <h4>a</h4> <h5>a</h5>
h标签可以自定义显示效果，如下代码
<h6 style="font-size: 65px;">a</h6>
显示效果如下：
4、Select标签
第一种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标签-复选框
<p>爱好(复选框): <br /> 男1<input type="checkbox" value="1"> <br /> 男2<input type="checkbox" value="2"> <br /> 男3<input type="checkbox" value="3"> <br /> 男4<input type="checkbox" value="4"> <br /> 男5<input type="checkbox" value="5"> </p>
input:radio标签-单选框
<p>性别(单选框): <br /> 男<input type="radio" name="gender" value="1"> <br /> 女<input type="radio" name="gender" value="0"> </p>
input:text & password 输入框
<p>用户名: <input type="text" value="user"/> </p> <p>密码: <input type="password" value="pwd"/> </p>
input:button & submit 提交按钮, reset重置按钮
<input type="submit" value="submit"/> <input type="button" value="button"/> <input type="reset" value="reset"/>
file标签-用来提交文件时使用
<p>文件: <input type="file"/></p>
多行文本框
<p>备注 :<textarea></textarea></p>
form表单
<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<div style="border: 1px solid red">
<p>用户名: <input type="text" name="user"/> </p>
<!--这里的name="user" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
<p>密码: <input type="password" name="pwd"/> </p>
<!--这里的name="pwd" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
<br /> 男<input type="radio" name="gender" value="1">
<br /> 女<input type="radio" name="gender" value="0">
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
</form>
8、label标签
有一种情况，看下图，在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好：
代码如下：
<!--使用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>
显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转：
以上效果如下：
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data"> <!--这里action是告诉html提交到那里--> <!--method是通过什么方法去action指定的地址--> <div style="border: 1px solid red"> <p>用户名: <input type="text" name="user"/> </p> <!--这里的name="user" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签--> <!--然后把这里的用户的输入复制给name为一个字典key:value模式--> <p>密码: <input type="password" name="pwd"/> </p> <!--这里的name="pwd" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签--> <!--然后把这里的用户的输入复制给name为一个字典key:value模式--> <p>邮箱: <input type="email"/> </p> <p>性别(单选框): <br /> 男<input type="radio" value="1"> <br /> 女<input type="radio" value="0"> <hr> <br /> 男<input type="radio" name="gender" value="1"> <br /> 女<input type="radio" name="gender" value="0"> </p> <p>爱好(复选框): <br /> 男1<input type="checkbox" value="1"> <br /> 男2<input type="checkbox" value="2"> <br /> 男3<input type="checkbox" value="3"> <br /> 男4<input type="checkbox" value="4"> <br /> 男5<input type="checkbox" value="5"> </p> <p>城市: <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台--> <!--<select multiple>--> <!--<option>北京</option>--> <!--<option>上海</option>--> <!--<option>广州</option>--> </select> <select> <optgroup label="AAA"> <option>上海</option> <option>北京</option> </optgroup> <optgroup label="BBB"> <option>广州</option> </optgroup> </select> </p> <p>文件: <input type="file"/></p> <p>备注 :<textarea></textarea></p> <!--使用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> <input type="submit" value="submit"/> <input type="button" value="button"/> <input type="reset" value="reset"/> </div> </form> </body> </html>
列表 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" > <thead> <tr> <th colspan="2">标题一</th>
<!--这里colspan，就告诉html解析的时候占2个格-->
<!--<th>标题二</th>--> <th>标题三</th> </tr>
<!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
</thead> <tbody> <tr> <td rowspan="2">内容一</td> <td>内容二</td> <td>内容三</td> </tr> <tr> <!--<td>内容一</td>--> <td>内容二</td> <td>内容三</td> </tr> <tr> <td>内容一</td> <td>内容二</td> <td>内容三</td> </tr> </tbody> </table> <hr color="green">
效果如下截图：
11、fieldset标签
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <fieldset> <legend>协议</legend> 请仔细阅读协议内容： </fieldset> </body> </html>
效果如下：
posted on 2016-08-11 16:31 Jason_wang_2016 阅读(683) 评论(0) 编辑 收藏 举报
