我第一个接触的就是：html文档。
一.html
1.html文档格式：
<! doctype html>
<html>
<head>
<meta charset="utf-8"/> 这是编码格式哦，不写汉字就会乱码哦。
<title></title>
<link rel="stylesheet" type="text/css" href="css样式路径"> 引入css的样式。
</head>
<body>
我的第一个页面
</body>
</html>
可以用sublime text写写。
后来又学习了一些标签，他们都写在body里，写在可视区域。
2.div标签
html中：
<div> </div>
它是双标签，是块级标签，是一个区域。
像这种一头一尾都一样的，只是尾部的里面多了个/，它们叫双标签～～～
css样式中：
div{
width:500px;
height:600px;
background-color:pink;
}
在css样式中设置高600px，宽500px，背景色为粉红。那网页中就会出现一个高600px，宽500px，背景色为粉红的长方形区域。
3.列表标签
<ol>
<li>我是列表1</li>
<li>我是列表2</li>
</ol>
这是有序排列，页面中会显示：
1.我是列表1
2.我是列表2
<ul>
<li>我是列表1</li>
<li>我是列表2</li>
</ul>
这是无序排列，页面中会显示：
我是列表1
我是列表2
注意：不管是有序列表或者无序列表，ol和li之间，ul和li之间不能设置其他标签元素，只能在li里面设置。
4.span标签
<span></span>
它是双标签。 里面放置的文本内容无具体语意。
注意哦：它是行级标签
5.a标签
<a href="网址地址"></a>
它是一个锚点，就是常常在网页中看到的连接，
注意哦，它也是行级标签
它比较复杂，为啥呢，因为它有四种状态：
link：当前锚点没有访问过的样式，初始样式。
visited：访问过后的样式。
hover：鼠标悬浮在上面的样式。
active：鼠标点击没有松开的样式。
我在试过之后，就发现下划线太low，所以可以在css样式中写：
｛
text-decoration:none; 去除下划线
｝
6.img标签
<img src="路径" alt="内容替代属性" title="提示属性" width="" height="" />
特别注意：
它不仅是行级标签，他还是一个单标签！！！一般行级标签不可以设置宽高，but它可以，它可以！！！！！，太牛牛啦！
综上所述：4，5，6都是行级标签，现在就学了三个～
7.一些其他常用标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
字体样式从大到小依次变小，至于多大嘛，动动手操作一下喽。
<p>段落</p>
它代表的是一个段落。
<em>强调</em>
它的作用是强调，有斜体的作用。
<strong>强调</strong>
它的作用是强调，有加粗的作用。
以上的一些标签有的有块级，行级之分。可以在css样式中转换：
｛
display：block；转为块级，这样之后就可以设置宽高了。
｝
｛
display：inline；转为行级；
｝
以上就是一些html中常用的标签。
二.下面就是css样式喽！
1.宽高背景色
｛
width：100px;
height:200px;
background-color:red;
｝
这在网页中就会显示宽100像素，高200像素，背景色为红色的长方形。
其中background里面包含了很多属性：
1）background-color:red;背景色红色。
2）background-image:url(“图片路径”)；引入一张图片。
3）background-repeat:no-repeat 不平铺/repeat-x 图片沿X轴平铺/repeat-y 图片沿Y轴平铺; 是否平铺，怎样平铺图片。
4）background-position:X Y;图片定位。
注意注意:4）background-position图片定位又有点小难啦～～
｛
background-position：left/center/right(X) top/center/bottom(Y);
｝
X轴，Y轴对应不同的值.
｛
background-position：left;
｝
如果只设一个值的话，X轴认识，Y轴不认识，Y为中心（center）；Y轴认识，X轴不认识，X为中心（center）
但也可以设数字
｛
background-position：100px(X) 200px(Y);
｝
图片沿着X轴移动100像素，沿着Y轴移动200像素。
｛
background-position：100px;
｝
图片沿着X轴移动100像素，沿着Y轴移动100像素。
分开来写又麻烦，所以复合写法诞生：
｛
background:background-color background-image background-position background-repeat;
｝
例子：
｛
background:red url("图片路径") 100px 200px no-repeat;
｝
2.border边框
1）边框样式：border-style
{
border-style:solid实线/ dotted点状线 /dashed虚线；
}
2）边框颜色：border-color
{
border-color:#
}
- 它有默认的颜色，默认是字体颜色，字体的默认颜色为黑色。
3）边框宽度：border-width
{
border-width:#
}
- 它有默认的宽度3px，数值不能为负数。
分开来写又麻烦，所以复合写法诞生：
｛
border:width color style;
｝
例子：
｛
border:1px red solid;
｝
这就是一个宽度为1像素，颜色为红色，实线的边框。☺
3.padding内边距
{
padding-top:20px; 距离上边框20像素。
padding-bottom:30px; 距离下边框30像素。
padding-left:40px; 距离左边框40像素。
padding-right:50px; 距离右边框50像素。
}
它也有复合写法
例子1.
{
padding:20px;
}
- 距离上下左右边框都是20像素。
例子2.
{
padding:20px(上下) 30px（左右）;
}
- 距离上下边框20像素，左右边框30像素。
例子3.
{
padding:20px（上） 30px（左右） 40px（下）;
}
- 距离上边框20像素，左右边框30像素，;距离下边框40像素。
例子4.
{
padding:20px(上) 30px（右） 40px（下） 50px（左）;
}
- 距离上边框20像素，右边框30像素，下边框40像素，左边框50像素。 [TRBL法则！！！]
4.margin外边距
它的用法和padding相似，但两者又有差别。
padding和margin之差别
1）padding不可以为负数，但是margin可以。
2）假设有一个宽200像素，高200像素的粉红色正方形。另外一个宽100像素，高100像素的黑红色正方形，如何让黑色正方形在粉红色正方形的中间。
用margin做:
.box1{ width: 200px; height: 200px; background-color:pink; margin:50px 0px 0px 50px; overflow:hidden; } .box2{ width:100px; height: 100px; background-color: black; }用padding做:
.box1{ width:150px; height: 150px; background-color: pink; padding: 50px 0px 0px 50px; } .box2{ width: 100px; height: 100px; background-color: black; }
注意注意:box1是父级，box2是子级，如果用padding方法在box1里面设置的话，要减去padding的像素。
5.字体样式
1)设置字体大小:
{
font-size:12px;
}
2)设置字体加粗:
{
font-weight:blod;
font-weight:nomal;把加粗字体恢复正常
}
3)设置字体斜体:
{
font-style:italic;
font-style:nomal;把斜体字体恢复正常
}
font的复合写法:
{
font:font-weight或者font-style font-size/line-height(之间要用“/”划分) font-family
}
三.选择器来啦～
现在会写一些样式，但是如果写很多个div，会不知道如何命名，不方便设置各自的样式，所以选择器is coming
1)标签选择器:直接作用于选择的标签元素，是一个集合
div{
}
2)id选择器:直接作用于叫该名称的标签元素，名称是唯一的，标签也是唯一的，只对该名称标签有效
#star{
}
#dream{
}
3)父子选择器:按层级来，中间空格
body div
4)类选择器（class选择器）:可以重命名，id不可以
.star{
}
5)群组选择器:无顺序,同时选中
div,h1,.star
6)通配选择器:
*{
}