我的html+css之路（初级篇）

HTML（HyperText Markup Language）：超文本标记语言，用于创建网页的标准标记语言；html结构包括 “头”部分（head）、和“主体”部分（body），head提供网页信息，body展示网页具体内容。
CSS（Cascading Style Sheets）：层叠样式表，用来表现html或xhtml的一种计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化（简单说就是静态修饰html里做出的各项内容，使之更加美观）。

网上有关HTML和CSS的教程很多，这里推荐一个网站，和一个学习APP。
网站：http://www.w3school.com.cn/
手机APP：网易云课堂

下面是我自己在近期学习HTML和CSS过程中总结的一些基础内容。

在这里推荐大家使用Sublime Text编辑器，这个编辑器支持多种语言，有各种插件，满足你的需求，当然大家也可以使用例如：Notepad，PSPad，TextEdit等等。

HTML：

1.基本结构：

这里说明：所有的标签都必须放在尖括号里面，标签大部分是一对，第二个需要反斜杠

2.基础标签（在这里给大家列出最常用的一些标签）：
h标签：定义文档的标题，有6个，h1，h2，h3，h4，h5，h6，字号逐渐减小。
p标签：定义文档的段落，网页有很多段落，就是利用p标签写的。
span标签：用来组合文档中的行内元素。
a标签：超链接标签。
div标签：给文档分区域，分块，可以将文档分为独立的、不同的部分。
img标签：在文档中嵌入一个图片，此处注意图片的地址，建议大家使用相对路径（图片可以是网上来源，也可以是本地图片，但一定要注意路径，不然一不小心别人打开网页就会看不到图片）
br标签：换行标签。
strong标签：强调文本，加粗文本。
em标签：使文本倾斜。
li标签：定义列表项目。
ul标签：定义无序列表，配合li标签使用。
ol标签：定义有序列表，配合li标签使用。
link标签：链接一个外部层叠样式表，写在head标签里面。
button标签：定义一个按钮。
hr标签：在页面中创建水平线。

表单标签：

form标签：创建 HTML 表单。
fieldset标签：除了外面先套一个form标签外，大家再写一个fieldset标签，这是将表单内的相关元素分组。
legend标签：表单的标题。
input标签：用于搜集用户信息。其有不同的输入字段，可以定义输入框和按钮。``

<input type= "password>  创建单行密码文本框；
<input type="submmit">   创建提交按钮；```
<input type="reset"> 创建重置按钮；
<input type="radio"> 创建单选框，每次只能选择一个；
<input type= "checkbox"> 创建复选框，每次可以多选；

label 标签：为 input 元素定义标注（标记）；
option标签：定义下拉列表中的一个选项；
seclect标签：创建选项列表；
textarea标签：定义多行文本的输入；

表格标签
table标签：定义 HTML 表格。
caption标签：
th标签：定义表头单元格 -，包含表头信息
td标签：定义 表格中的标准单元格。
tr标签：标签定义表格中的行。

header标签：定义文档的页眉。
footer 标签：定义文档或节的页脚。
ins标签：定义插入到文档中的文本，文本将以下划线方式显示。
del标签：定义文档中已被删除的文本。
nav标签：定义导航链接的部分。
audio标签：定义声音，比如音乐。
video标签：定义视频，比如微电影。

CSS

对于写css来说，在开始我们最好先设置一下样式，因为其默认有margin或是padding，我们可以手动清除掉，然后按照自己想要的进行编写
例如：

*{
margin：0px；
padding：0px；
}
body{
width：90%；
}

使用css到html有三种方式
一是使用外部链接link
二是在html中的head中写，所有的css样式写在style标签里面；
三是在html标签尖括号里面使用style=“”；
在这里推荐大家使用第一种方式。

CSS选择器：
（1）id选择器：例如#red {color:red;}
（2）类选择器：例如.text {text-align: center}
（3）属性选择器：例如[title=www.baidu.com]{border:5px solid blue;}
（4）派生选择器：例如ul li {font-style: italic; font-weight: normal; }
（5）元素选择器：例如div{border：1px solid red}
（6）伪类选择器：例如a:hover{color:red;} a:link{color:red;} a:active{color:red;} div:after{} div：before{}等等。

这里选择器中的名称最好选用相应的英语单词，简单易懂，不然再过一段时间你都不知道自己写的什么。

CSS框模型：
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。

CSS定位（和框模型一起设置页面布局）

相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。有right、left、top、bottom。
绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。absolute。
浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。left、right。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1.字体属性：(font)
　　大小：font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，可以使用数值，单位：px，也可以直接使用百分数（以网页自定义字体大小为标准）。
　　 样式 ：font-style: oblique(偏斜体）; italic;(斜体) normal;(正常)。
　　 行高 ：line-height: normal; 单位：px。
　　 粗细 ：font-weight: bolder，bold;(粗体) lighter;(细体) normal;还可以使用数值：100-900，其中600对应bold。
　　 变体 ：font-variant: small-caps;(小型大写字母) normal;(正常)
　　 大小写 ：text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
　　 颜色：color，方式有三种，和上文一样。
　　 修饰 ：text-decoration: underline（下划线）、 overline（上划线）、 line-through(删除线)、 blink(闪烁)、none（没有样式）。
　　字体：font-family：常用"Courier New", Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana。
　　
2.背景属性：(background)
　　 色彩：background-color: #f12eed、rgb（0，0，0）、red/white（三种表示方法）;
　　 图片：background-image: url()。（url()中写图片路径）
　　 重复：background-repeat: repeat、no-repeat。repea-x。repeat-y。
　　 滚动：background-attachment: fixed（固定) 、scroll(滚动)。
　　 位置：background-position: left(水平) top(垂直)、center、right、bottom、还可以是百分数。
　　 简写方法：background:#000 url(…) repeat fixed left top;
　　
3.区块属性： (Block)
　　 字间距：letter-spacing: normal; 数值
　　 对齐：text-align: justify(两端对齐)、 left、right、center。
　　 缩进：text-indent: 数值px。
　　 垂直对齐：vertical-align: baseline(基线) 、sub(下标) 、super(下标) 、top、 text-top; middle; bottom; text-bottom;
　　 词间距：word-spacing: normal; 数值
　　 空格：white-space: pre;(保留) nowrap;(不换行)
　　 显示：display:block(块)、 inline(内嵌)、 list-item(列表项) 、run-in(追加部分)、 compact(紧凑) 、marker(标记)、table、 inline-table、 table-raw-group、 table-header-group、 table-footer-group、 table-raw、 table-column-group、 table-column、table-cell、 table-caption(表格标题)。
　　
4.方框属性：(Box)
　　width:宽度，单位px， 或是使用百分数，但是要注意这是相对于最近的父级元素。
　　 height：高度，单位px， 或是使用百分数，但是要注意这是相对于最近的父级元素。
　　 float:浮动，left，right，top，bottom。
　　 clear:right、left、both（一般都是用both）。
　　 margin:外边距（ 顺序：上右下左）。
　　 padding:内边距（ 顺序：上右下左）。

5.边框属性： (Border)
　　border-style: dotted(点线); dashed(虚线); solid(实线); double(双线); groove(槽线); ridge;(脊状) inset;(凹陷) outset。
　　 border-width:边框宽度。
　　 border-color:方式三种，同上文。
　　 简写方法border：width style color。
　　
6.列表属性： (List-style)
　　 类型：list-style-type: disc(圆点)、 circle(圆圈)、 square(方块) 、decimal(数字)、 lower-roman(小罗码数字、) upper-roman、 lower-alpha、 upper-alpha。
　　 位置：ist-style-position: outside(外)、 inside。
　　 图像：ist-style-image: url(…)。
　　
7. 定位属性： (Position)
　　 Position: absolute、 relative、 static;
　　 visibility: inherit、 visible、hidden;
　　 overflow: visible、hidden、 scroll、 auto;
8.CSS链接属性：
　　a :所有的超链接。
　　a:link ：超链接文字格式。
　　a:visited ：浏览过的链接文字格式。
　　a:active ：按下链接的格式。
　　a:hover ：鼠标悬停到链接上的格式。
　　
　** 前说完说不如实实在在的练习，实战是最有用的，通过自己练习才能掌握实实在在的东西，期待自己可以写出淘宝网站的那一天！
　　另外，还是请大家多多关注，以上有不当的地方多多指正！！**