一、环境搭建
浏览器 --- 谷歌/火狐/IE/Safari（苹果系统浏览器） // 读
编辑器 --- HBuilder/Dw/记事本 //写
二、语言了解
HTML 超文本标记语言 【基本架构-堆雪人组成部分】
语言: 和浏览器沟通的
标记: <文本> <html>
双标签:<html> </html>
单标签：<br />
文本: 显示文本内容
超文本: 显示图片、显示视频、播放音乐....
CSS 层叠样式表 【化妆-定型】
比如一个雪人的描述:
高度:80cm
体重:10Kg
一个元素的描述: style="width: 100px; height: 100px; background: red;"
// 属性名: 属性值;
width:100px;// 宽度为100像素
height:100px;// 高度为100像素+
background: red;// 背景为红色————————————————————————————————————style="width: 100px; height: 100px; background: red;"
Javascript 脚本语言【干活-智能化】
// 点击之后要做的事情
onclick="this.style.width='800px';"this.style.width='800px';
// 自己(this) 的(.) 样式(style) 的(.) 宽度(width) = '800像素'!
[](http://upload-images.jianshu.io/upload_images/1801379-93337a73fba0e270.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
三、常用标签
注释方式
注释的目的：1，让代码更容易懂 2，方便阅读以及后续的维护
标题
<h#> 标题内容</h#> [其中#是1~6]
代码如下
效果如下
段落
<p>段落文本内容(段落与段落之间有间距) </p>
<p>床前明月光 疑是地上霜 举头望明月 低头思故乡</p>
文本节点
<span> 文本节点</span>
<span> 你知道我再等你吗 ？</span>
span标签可以放在p标签里,p标签不应该放在span标签里
换行
语法: <br />
备注: 换行是一个空标记，是强制换行<p>床前明月光 <br />疑是地上霜<b /> 举头望明月 <b />低头思故乡<br /> </p>
img图片
// src: 图片路径(网络图片url/本地图片path)
<img src="路径+图片" alt="你好" title="程序猿" heigh="100px" width="100px">
alt ：text类型 //规定图像的替代文本。
src：URL //规定显示图像的 URL。
height： //定义图片的高度 100 像素
width： //定义图片的宽带
文本输入框
// type: 文本类型 // placeholder: 提示文本 // value: 输入框中内容
<input type="text" placeholder="请输入账号" value="程序猿">
密码输入框
// type: 文本类型 // placeholder: 提示文本 // value: 输入框中内容
按钮
//type: 按钮类型
// value: 按钮名称
超链接
// href='链接地址'
文档区域(网页结构布局)
<div> </div>
四、样式表写法
内联样式表
内部样式表
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
html文件
css 文件内容
五、选择器
类型选择符(标签选择器)
语法: 标签名称 {属性:属性值;}
例如: div{width:30px;}
类选择符(class选择器) [可以同名]
语法: .class名{属性:属性值;} 例如: .top{width:300px; }
ID选择符(id选择器)
语法: #id名{属性：属性值;} 例如: #box{ height: 300px }注意: 整个文档中，id名必须是唯一标识
包含选择符(后代选择器)
语法: 选择符1 选择符2{属性：属性值;} 例如: .header .left{ background: red; }啦啦啦
通配符
语法: *{属性：属性值;}
说明: 通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；
伪类选择符
语法: 元素:hover{ 属性: 属性值; } 说明: 鼠标移入
六、CSS核心属性
width: 宽度
width: 100px;
height: 高度
height: 200px;
background
background-color: 背景颜色
background-color: purple;
background-image: 背景图片
background-image：url(背景图片的路径及全称);
background-repeat: 背景图片平铺
background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x/repeat-y
background-size: 背景图片大小
background-size: 宽度 高度;
例如: background-size: 100% 100%;
background-position: 背景位置
background-position:left/center/right/数值 top/center/bottom/数值;
background: 背景属性的缩写
background:url(背景图片的路径及全称) no-repeat center top;
color: 文本颜色
color: black;
font-size: 字体大小(默认是16px)
font-size: 13px;
text-align: 水平对齐方式
{text-align:left/right/center/justify;}justify: 实现两端对齐文本效果(可以使文本两端都对齐；在两端对齐文本中，文本行的左右两端都放在父元素的边界上，然后调整单词和字母间的间隔，使各行的长度恰好相等);
line-height: 行高
line-height: 30px;
备注: 单行文本等于容器高时，文本垂直居中;
text-decoration: 文本属性
text-decoration: none没有修饰符/underline添加下划线/overline添加上划线/line-through删除线
备注: a标签比较常用
border: 边框属性
简写: border: 线型(solid/dashed/dotted/double) 粗细(数值+单位) 颜色 例如: border:3px solid red; border-width 边框的粗细 border-style 边框的线型 border-color 边框的颜色 solid:实线，dashed:虚线，dotted:点状线，double:双线
margin:边距(一般用于调整盒子位置)
边界: margin，在元素外边的空白区域，被称之为边距; margin-left: 左边界 / margin-right: 右边界 margin-top: 上边界 / margin-bottom: 下边界 属性值的4种方式： 四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右 【margin:0auto; 即表示上下边距为0，左右边距为自动】 一个值：四个方向 margin:2px; 定义元素四边边界为2px
padding: 填充(一般用于调整盒子内容位置)
填充:padding，在设定页面中一个元素内容到元素的边缘(边框)之间的距离，也称之为补白； 用法: > 用来调整内容在容器中的位置关系; > 用来调整子元素在父元素中的位置关系; 注:padding属性需要添加在父元素上; >padding值是额外加载元素原有大小之上的，如果想要保证元素大小不变，即元素宽高上减去添加的padding属性值; 说明：可单独设置一方向填充，如：padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; 四个值：上 右 下 左 {padding:10px20px30px40px;} 注: 顺时针方向 三个值：上 左右 下 {padding:10px20px30px;} 二个值：上下 左右 {padding:10px20px;} 一个值：四个方向padding:2px; 定义元素四周填充为2px
float: 浮动属性
语法:float:none/left/right; 说明:float:定义网页中其它文本如何环绕该元素 left:元素活动浮动在文本左面 right:元素浮动在右面 none:默认值，不浮动。 备注: 浮动框可以向左或右边移动，直到它的边缘碰到包含边框或另外一个浮动框的边框为止； 浮动框是脱离了普通的文档流；
border-radius圆角
语法: border-radius: 圆角半径// 圆角半径为20pxborder-radius:20px;
box-shadow阴影
语法:
box-shadow: h-shadow v-shadow blur color;
h-shadow: 水平阴影的位置。允许负值。
v-shadow: 垂直阴影的位置。允许负值。
blur: 模糊距离。
color: 阴影的颜色。
box-shadow: 5px 5px 10px black;
音频
视频
内嵌网页
七、案例 --- 照片墙
transition: 过度效果
/* transition: 过度效果;
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
*/transition: all5s;// 所有属性，过渡效果持续时间5秒
transform: 形变
/* transform: 形变
该属性允许我们对元素进行旋转、缩放、移动；
translateX: 水平方向移动
translateY: 垂直方向移动
rotate: 旋转
scale: 缩放
*/transform: rotate(-5deg) scale(1.2);// 逆时针旋转5°，放大1.2倍
作者：EndEvent
链接：https://www.jianshu.com/p/70ede22f6e40
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
