@hotlp
2017-10-31T08:29:51.000000Z
字数 1260
阅读 669
切图
培训文档
开篇之前先给大家推荐一个网站w3school，在这个网站里大家可以学习包括但不限于HTML的很多知识。
HTML
通俗的说，html是由标签组成的，使用标记标签来描述整个页面。
但是单纯的罗列标签一点都不美观，于是有了css来控制样式，让简单的标签变得千变万化~
先附上一个标签列表
常用布局标签
<html></html> 定义 HTML 文档
<head></head> 关于文档的信息
<body></body> 文档的主体
<link></link> 引入外部资源，如css
<script></script> 引入js
<div></div> 划分区块最常用标签
<h1></h1> 标题，h1~h6
<a ></a> 链接
<img> 图片
<ul></ul> <li></li> 无序列表
<dl></dl> <dt></dt> <dd></dd> 定义列表
<table></table> <tr></tr> <td></td> 表格
<input > 各种输入框，根据type控制
<button></button> 按钮
<p></p> 段落
<span></span> 组合文档中的行内元素
<select></select> <option></option> 下拉列表
附上一个例子。。。
布局
从上面的列子可以看出来，HTML的布局很简单，从上到下，从左到右，
块级元素独占一行，从上到下排列
行级元素从左到右排列
行级元素和块级元素之间有一些差别，也可以相互转换，具体可以看这里
在应用了样式后，页面的布局可以被打乱，按照需求来排布
CSS
更为详细的css基础教程可以点这里
css的组成很简单：
selector {property: value}选择器 {属性：属性值}
选择器
常用的选择有ID选择器 类选择器，标签选择器。
优先级 ID>class>tag
意思就是相同的层级，用到ID选择器上的样式优先级是最高的，会覆盖类选择器，以此类推。
定义css的位置也会影响优先级，顺序如下：
内联样式（在 HTML 元素内部）> 内部样式表（位于 <head> 标签内部）> 外部样式表 > 浏览器缺省设置
举几个例子:
p{color:#f00;background-color:#ff0;}#id1{color:black;}#id1 p{color:#00f;}.class1,.class2{color:#0ff;}
其他的选择器以及样式属性可以查看上面的文档，补充一下~
盒模型
定位与浮动
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
默认的就是普通流。
css的position属性可以元素的绝对定位属性，position有4个值。
float属性可以设置元素的浮动，元素浮动起来后会向左或右移动，直到元素的边缘碰到框的边缘或其他浮动元素
层级
元素定位与浮动后，就从原来的文档流中脱离了出来，因此元素之间就有了层级关系，用火狐的调试工具可以看出来元素的层级关系，z-index属性可以设置层级的高低。
其他
HTML和CSS比较简单,容易上手，但要记忆的东西比较多，多切几个图熟练下会有很大的提升。
标签 常用标签，简单布局
布局 css相关
