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属性的值.
网友评论