初窥HTML

HTML简介

HTML(Hyper Text Mark-up Language超文本标记语言)的缩写,标记:就是用来描述网页内容的一些特定符号.HTML不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。

HTML 最基本的语法是<标记符>内容</标记符>，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠"/",当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。

文档结构

所有的网页文件，通常由四对标记来构成文档的结构：

<html>
    <head>
        <title>
            标题
        </title>
    </head>
    <body>
        正文
    </body>
</html>

<html>...</html>标识网页文件的开始与结束，所有的html元素都要放在这对标记中
<head>...</head>标识网页文件的头部信息，如标题、搜索引擎关键字等
<title>...</title>标识网页文件的标题
<body>...</body>标识网页文件的主题部分

常见的HTML标签

标题：h1、h2、h3、h4、h5...
段落：p
换行：br
容器：div、span
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a

CSS介绍

CSS语法结构

选择器{属性:值} 例：div {font-size:12px;}
参数说明：

选择器：指明这组样式所要针对的对象，可以是body，也可以是id或者class
属性：选择器的样式属性，例如颜色、大小、定位、浮动等方式
值：属性的值
一个选择器里面可以定义多个属性，每个属性之间用";"号隔开。

CSS长度单位

相对长度单位：

em：相对于当前对象内文本的字体尺寸
px：像素

CSS的三种书写方式

行内样式：直接在标签的style属性中书写。
内嵌样式：在本网页的style标签中书写。
外部样式：可以单独写在一个css文件中，然后在网页中用link标签引用，可以应用到多个html文件中。

它们的优先级为：行内样式 > 内嵌样式 > 外部样式
优先级遵循就近原则，作用范围越小，优先权越高。但是，可以通过使用!important语法来提升优先级（IE6不支持该语句）。

CSS选择器类型

标签选择器：就是针对HTML文档中的标签

p {font-size:12px;}
div {background:blue;}

类选择器:可以自己定义样式，应用于一个或多个网页内，类在网页中可以多次出现，用于定义重复的样式。

.example {color:red;}

id选择器：与类选择器基本相似，但是ID具有唯一性，在网页中只能出现一次，用于定义只出现一次的样式。

#example {color:red;}

群组选择器：将同样的样式定义用于多个选择器，选择器之间用逗号隔开。

p , div , .example { color : red; }

标签指定式选择器：既使用id或者class，又同时使用标签选择器。

h1.content { color : red; } //表示针对所有类选择器为content的h1标签

子标签选择器：作用于直接子标签

div > p { color : red; }

相邻选择器：作用于相邻的两个选择器

div + p { color : red; }

伪类：伪类用于向某些选择器添加特殊的效果

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定lang属性的元素添加样式。
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

CSS样式的特点

继承：
- 网页中子元素，将继承父元素的样式。（例如在body里面定义了文字的font-size，那么body里面p、a等标签的font-size都跟body的一样。）
层叠：
- 网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖父元素的样式。
- 后面定义的样式，会覆盖前面定义的样式。

CSS中的元素分类

HTML中有许多标签，根据显示类型，主要分为两大类：

块级元素：{display:block;}

一般是其他元素的容器，可容纳内联元素和其他块级元素，块级元素能设宽度和高度，独占一行
内联元素：{display:inline}

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但是不能设置宽髙。宽度和高度取决于内容的尺寸。
行内-块级元素

具有block的特性，又具有inline的特性，多个行内-块级元素可以显示在同一行，且能随时设置宽度和高度。

CSS布局

标准流布局：默认是标准流布局方式，即从上到下，从左到右。
浮动布局：通过设置float属性显示。
- 浮动（float）是CSS实现布局的一种方式，包括div在内的任何元素都可以使用浮动的方式进行显示。如果想让多个块级元素显示在同一行中，可以将它们都设置为浮动，并且浮动的方向相同。
- none:不浮动
- left:对象向左浮动，后面的内容流向对象的右侧
- right:对象向右浮动，后面的内容流向对象的左侧
- 清除浮动（clear）：当元素有浮动属性是，会对其父元素或后面的元素产生影响，会出现布局错乱现象，可以通过清除浮动的方法来解决浮动元素带来的影响。
- none:默认值，允许两边都可以有浮动对象
- left:不允许左边有浮动对象
- right:不允许右边有浮动对象
- both:左右两边都不允许有浮动对象
定位布局：通过设置position属性显示。

position属性:(子标签相对于父标签定位即子绝对定位,父相对定位)
- absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过"left","top","right"和"bottom"属性进行规定.
- fixed:生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过"left","top","right"和"bottom"属性进行规定.
- relative:生成绝对定位的元素,相对于正常位置进行定位.因此, "left:20"会向元素的left位置进行定位.
- static:默认值,没有定位,元素出现在正常流中(忽略"left","top","right"和"bottom"或者"z-index"声明)
- inherit:规定应该从父元素集成position属性的值.