web前端技术一直是自己的薄弱环节，经常为了调节一个简单的样式花费大量的时间。最近趁着在做前端部分的开发，果断把这部分知识成体系的恶补一下。内容相对都比较简单，很类似工具手册的学习，但目标是熟练掌握。
html(hypertext markup language超文本标记语言):1990由tim berners-lee爵士设计，成为了internet上标准的文本传输形式，可以这么说，对于在互联网行业工作的我们来说，这就是我们饭碗的基础啊，嘿嘿。
基本文档格式，请见如下示例：
1 2 3 4 5 cheer up, xionger 6 7 8 first course
9
10 hello11 12 world13 14
常见html标签
标签元素 诠释
.. 封闭整个html文档
.. 封闭html文档的头部，在标签内使用
.. 指定文档的页面标题，在标签内使用
.. 封闭html文档的主体，在标签内使用
..
段落，在段落之间跳过一行
和 换行符和水平标号
.... 1,2级标题
.. 页面或区域的顶部
.. 页面或区域的脚注
.. 页面或者整个站点的导航链接
.. 内容的主题组
.. 一段独立的内容，比如新闻故事
.. 与包含它内容相关的辅助内容
tip：验证web内容，http://validator.w3.org/
平时，有空可以通过view source来查看常见网站的源代码，看看有什么值得借鉴的地方。
css（cascading style sheet）：层叠样式表是一种定义样式构造的语言，比如字体、颜色和定位，它描述了如何在web页面上格式化和现实信息。其包含的样式规则是一种格式化指令，可以应用于web页面的元素，比如文本段落或链接。
基本的外部样式表，一个简单的示例如下所示：
1 first02.css 2 body{ 3 font-size: 10pt; 4 font-family: verdana, geneva, arial, helvetica,sans-serif; 5 color:black; 6 line-height: 14pt; 7 padding-left: 5pt; 8 padding-right: 5pt; 9 padding-top: 5pt;10 }11 12 h1{13 font:14pt verdana, geneva, arial, helvetica,sans-serif;14 font-weight: bold;15 line-height: 20pt;16 }17 18 p.subheader{19 font-weight: bold;20 color: #593d87;21 }22 23 img{24 padding:3pt;25 float:right;26 }27 28 a{29 text-decoration:none;30 }31 32 a:link, a:visited{33 color:#8094d6;34 }35 36 a:hover,a:active{37 color: #ff9933;38 }39 40 footer{41 font-size: 9pt;42 font-style: italic;43 line-height: 12pt;44 text-align: center;45 padding-top: 30pt;46 }47 48 first01.html49 50 51 52 53 about xionger54 55 56 57 58 59 about xionger60 61 62 伐木工光头强在森林中伐木赚钱。为了保卫丛林，熊兄弟一起反抗，无数次打败了光头强。上演了搞笑的丛林保卫战。 后来光头强变成猎人，由于对外面世界的好奇，熊大和熊二翻山越岭，走出丛林，来到城镇动物马戏团，光头强仍不屈不挠地与他们作对。后来又因臭豆腐阴差阳错返回丛林。由于怜悯光头强，经历一次次困难后，送光头强回家过年。 熊二[1] 是比较懒惰，贪吃的狗熊，但不失可爱。他很懒，比较笨，一般是熊大想出来的决策，虽然他的体型很胖胜于熊大，但力气超大，熊大无法抵挡。他还非常善良，心很软，也会为光头强感到可怜（在熊出没之过年中，正是他带头帮助了光头强，如果不是他，那等到猴年马月光头强都回不了家了）。63
64 xionger history
65 熊二一般情况下呆呆傻傻，憨态可掬，但是非常善良，特别是那婉转的腔调。他非常可爱，力大无穷，但是太过肥胖，每当去光头强家被光头强发现后，熊大和蹦蹦都会很轻松地从窗户逃出，而熊二的屁股肯定都会卡在那里。 熊二是一头憨厚可爱、力大无穷、有勇无谋的雄性狗熊，但又十分鲁莽，有时熊大不在，小动物们落难，熊二都会挺身而出，运用力量打败光头强。熊二喜欢母熊翠花，常常为了讨好翠花与熊大大打出手；在讨好翠花这一方面，熊二略逊于熊大。熊二老实又听话，但是笨笨的，也非常可爱，贪吃。可是由于熊二有时太过鲁莽，或者熊二做出些蠢事，总被他那聪明的老哥熊大责备甚至教训，熊二对此也只能老实地听着挨着。动物们几乎都是依靠熊大的计谋、熊二的力量才打败光头强的。而且在光头强家中搞恶作剧，偷吃光头强的水果，捣毁光头强的家。防止光头强砍树，捍卫了东北丛林。66
67 [continue reading]
68 69 70 copyright ©2016-2016(www.xionger.com). all rights reserved.use with permission.71 72 73
基本布局属性(display属性)
标签元素 诠释
block 在新行上显示元素，比如在一个新段落中
list-item 在新行上显示元素，并在其旁边带有一个列表项标记
inline 利用当前段落内联显示元素
none 不显示元素，它是隐藏的
diplay属性依赖于相对定位(relative positioning)的概念，它以为着元素将相对于页面上的其他元素进行定位，之后还会介绍绝对定位(absolute positioning)的概念。
tip:常见的表示长度和宽度的单位有：in，英寸；cm厘米，mm毫米，%百分比，px像素，pt磅。
基本格式化属性
属性 诠释
border 边框的各边
border-width 边框边缘的宽度
border-color 边框边缘颜色
border-style 边框边缘样式：solid单线边框，double双线边框，dashed短划虚线边框，dotted点线边框，groove具有沟槽外观的边框，none无边框，hidden等价无边框
border-left/right/top/bottom 边框左、右、上、下
background-color 元素的内部区域颜色
text-align 内容对齐方式，包括左边、右边、中间，justify两端对齐
text-indent 内容缩进方式
font-family 字体系列，按顺序选择
font-size/weight 字体大小和粗细(normal,lighter,bold,bolder)
font-style 字体的样式,normal,italic
line-height 行距，用于设置每个文本行的高度
padding 给元素左边、右边、上边、下边添加填充
使用样式类和id
使用样式类p.subheader{font-weight: bold;color: #593d87;}使用样式idp#title{font:24pt verdana,geneva, arial}引用样式
tip:验证样式表，http://jigsaw.w3.org/css-validator/
经典的html5页面结构如下图所示
参考资料：
梅洛尼 . html与css入门经典(第9版) [m]. 北京:人民邮电出版社, 2014.