您的位置：首页 > Web前端 > CSS

HTML+CSS

2016-06-26 17:14 260 查看

HTML

一、html文件基本结构

<html>

<head>...</head>

<body>...</body>

</html>

代码讲解：

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

二、head标签

<head>

<title>...</title>

<meta>

<link>

<style>...</style>

<script>...</script>

</head>

<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

三、代码注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：

四、基础标签

1、把文章的段落放到<p>标签中。

语法：

<p>段落文本</p>

2、标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法：

<hx>标题文本</hx> (x为1-6)

3、加粗：

4、倾斜：

5、<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

6、短文本引用

语法：<q>引用文本</q>

7、<blockquote>标签，长文本引用

语法:

<blockquote>引用文本</blockquote>

8、<br />换行不换段

9、分隔线：<hr>有属性

10、<address>标签，为网页加入地址信息，在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用
css 样式来修改它<address>标签的默认样式。

11、<code>标签

在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，可以使用<code>标签

语法：

<code>代码语言</code>

12、语法：

<pre>语言代码段</pre>

<pre> 标签的主要作用:预格式化的文本。被包围在
pre 元素中的文本通常会保留空格和换行符。

13、无序列表

语法：

<ul>

<li>信息</li>

<li>信息</li>

......

</ul>

14、有序列表

语法：

<ol>

<li>信息</li>

<li>信息</li>

......

</ol>

定义列表： <ul></ul>

<ol></ol>

<dl> <dt><dd></dd> </dt> </dl>

有属性：<br/>

15、单标记：无属性: <hr>

双标记：有属性:<body></body>

无属性:<title></title>

16、在XHTML中，所有标签属性都必须有属性值，如果没有则使用属性名.

如<hr noshade=”noshade” />

17、<img>标签，为网页插入图片

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

五、表格

1、表格

2、细线表格效果公式：

1)、将表格自身的border=0;

2）、给表格设置背景颜色----细线颜色

3）、给表格设置单元格之间的距离---细线粗细

3、<td></td>之间没有内容时，默认不显示边框，若想看到可以加

4、摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法：<table summary="表格简介文本">

5、表格标题：

用以描述表格内容，标题的显示位置：表格上方。

语法：

<table>

<caption align=””>标题文本</caption>

<tr>

<td>…</td>

<td>…</td>

…

</tr>

…

</table>

6、合并行列的属性：rowspan,colsapan;

控制凹凸效果:bordercolorlinght,bordercolordark;

使表格，不显示内边框只显示外边的大框用rules属性

显示部分边框用frame属性

表格颜色：bordercolor;

单元格颜色：bgcolor;

单元格与内容之间的距离为cellpadding

单元格与单元格之间的距离为cellspacing

11.表格的结构化：

重要说明：

FF、Chrome、Safari仅支持colgroup元素的span和width属性；

只有IE6、IE7、Opera支持align属性，IE8+不支持"

六、链接

1、使用<a>标签，链接到另一个页面

语法：

<a href="目标网址" title="鼠标滑过显示的文本" target=”打开链接窗口的形式”>链接显示的文本</a>

<a href="mailto:yy@immoc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">发送</a>

锚点链接：从一个页面链接到另一个页面的某一位置时用<a href=”另一页面的url#锚点名称”></a>

七、表单

18.表单:
<form action=”浏览者输入的数据被传送到的-页面” method=”post” ></form>

<input type=”text” name=”” value=”” size=”” maxlength=”” readonly=”readonly” disabled=”disabled” />

19.

20.

六、滚动字幕

21.

五、路径

12.路径：

css

结构层：

网页的结构：表现层：

行为层：

一、技巧

1.让文字在垂直方向上居中：行高=元素(标签)高度；但是文字宽度2.不能超过元素宽度，也就是不能换行。

3.让盒子水平居中：将对象的左右外边界设置为auto.

4.让盒子水平居中使用margin:0 auto;属性，还要给这个盒子设置宽度。

5.overflow : visible(默认) / auto / hidden / scroll ;

6.如果相让多个块显示在同一行中，可以把块设置为浮动并且浮动方向相同。（要为块设置宽度，默认为100%.）

7.IE6双倍边距的问题 ( div{margin-left:10px;float:left;} ) :

添加display:inline;属性解决。

8.边框设置：box-sizing: content-box|border-box|inherit;

9.块级盒子本身有宽高，设置padding时增加。

10.Logo一般作为背景图片插入，加h1标签，a标签。

11.ul不显示点——list-style:none outside none;

12.a 不显示下划线——text-decoration:none;

13.display: none 不显示;//元素会让出自己的位置，让其余的元素渲染

inline 内联元素前后没有换行符;

block显示为块级元素,前后会带有换行符

visibility:hidden;的元素，自己隐藏，不会让出自己的位置

14.overflow 属性可以确定是否显示滚动条等行为

15.bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移.注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果.

16、相对定位高度（相当于柱子）>绝对定位高度

17、已知一 div
高 35px，紧邻其后的
X 元素上外边距为
15px，为该
div 设置
fixed 定位后，div与浏览器可视窗口上边界相距15px。

顶部固定层：

#top -------position:fixed; top:0; left:0;

#mainbody--------margin-top:(#top高度+原有间距)px;

二、注释

在CSS中也有注释语句：

用/*注释语句*/来标明

三、css应用方式

四、优先权：

3、重要性:
有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用!important来解决。
p{color:red!important;}

注意：!important要写在分号的前面

五、选择符分类

标签选择符：h1{属性：值;}
6.css选择符： id选择符：#idname{属性：值;}
类选择符：.classname{属性：值;}
通配选择符：*{属性：值;}

派生选择符：body h1{属性：值;}/#idname li{属性：值;}

伪类选择符：a:hover{color:red;}

选择符分组：h1,ul,li{属性：值;}

六、字体

1.火狐、谷歌浏览器默认字体为16px

2. font:字体大小/行高加粗
“宋体”;

3. 版权、商标等特殊符号要专门声明字体，常用arial.

4.字体颜色color要单独声明;

5、Font-style:italic;//设置字体样式;
6、为文字设置为下划线样式:

7、span{ text-decoration:underline/line-through;}

8、缩进：p{text-indent:2em;}

注意：2em的意思就是文字的2倍大小。

9、行间距（行高）：p{line-height:1.5em;}

10、设置文字间隔或者字母间隔：

使用 letter-spacing 来实现， letter-spacing:50px;

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

11、单词间距设置：

设置英文单词之间的间距可以使用 word-spacing来实现。如下代码：

h1{ word-spacing:50px;}

12、块状元素中的文本、图片设置居中样式

h1{text-align:center;}

七、元素分类

1、常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>
、<form>

设置display:block就是将元素显示为块级元素。

2、常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块状元素也可以通过代码display:inline将元素设置为内联元素。

3、常用的内联块状元素有：

<img>、<input>

代码display:inline-block;

八、margin、border

1、平面图

Padding: 上右下左;

margin:1px 四边统一边距

margin:1px 1px 上下边距,左右边距

margin:1px 1px 1px 上,左右,下边距

margin:1px 1px 1px 1px 上,右,下,左边距

margin:5px auto; 上下为5,左右平均居中

margin-top: 20px; 上外边距

margin-right: 30px; 右外边距

margin-bottom: 30px;下外边距

margin-left: 20px; 左外边距

2、边框属性：

Border : border-width ||border-style ||border-color

3、盒子3D模型

五层：border、content+padding、background-image、background-color、margin。

九、元素分类、布局

11.Css的元素分类：块元素： display:block;

内联元素：display:inline;

12.css的布局方式：文档流（默认）

浮动方式：脱离当前的文档流

静态定位(position: static)

定位方式相对定位(position: relative)

绝对定位(position:absolute/ fixed固定定位)

定位机制：标准文档流，浮动方式，绝对定位方式。

在IE6中，子元素的高度超过父元素的高度，IE6默认会把父元素高度增加。

1、浮动方式

问题：当父元素没有指定高度，并且它的子元素有浮动时，父元素的高度不会自动增加。（浮动对父元素有影响）

解决方法：

清除浮动：clear: both / left / right

在主盒子里最下面加一个含有清除浮动类的空标签。

给父元素添加overflow:hidden;

2、定位方式

（1）使用绝对定位的两个必要条件:

1）.必须给父元素添加定位属性，一般推荐使用position:relative;

2）.给子元素加绝对定位position:absolute;同时加方向(top,right,bottom,left)属性。
（2）区别绝对定位与相对定位：

绝对定位：以父元素为基准点定位，脱离文档流。

相对定位：以自身为基准点定位，离开原位置但占据原空间。

（3）fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

3、fixed与absolute比较：

1）相同：

第一，完全脱离文档流

第二，未定义偏移量时，都定位在父元素的左上角。

2）不同：

设置偏移量时，偏移参照基准

Absolute

无已定位祖先元素，以<html>为基准偏移

有已定位祖先元素，以距其最近的、已定位的祖先元素为基准偏移。

Fixed

有、无已定位祖先元素都以浏览器可视窗口为基准偏移。

十、水平居中设置：

1、行内元素：

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

2、定宽块状元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

3、不定宽块状元素

（1）加入 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签
( 包括
<tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右
margin 居中”（这个和定宽块状元素的方法一样）。

（2）设置 display: inline 方法：

改变块级元素的 display 为
inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。

（3）设置 position:relative 和
left:50%：

通过给父元素设置float，然后给父元素设置 position:relative 和left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

十一、垂直居中设置

1、父元素高度确定的单行文本：

通过设置父元素的 height 和line-height 高度一致来实现的。

2、父元素高度确定的多行文本

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

（1）使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

td 标签默认情况下就默认设置了 vertical-align 为 middle

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

（2）在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

十二、隐性改变display类型

1. position : absolute

2. float : left 或 float:right

只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

只要html代码中出现以上两句之一，margin:0 auto;属性就不能实现。

十三、列表

8.列表属性：

语法：

List-style: list-style-image ||list-style-position ||list-style-type

列表样式：列表的图片列表符号位置列表的样式

List-style : none 不要列表的符号

十四、管制背景

10.css管制背景：

背景图片比盒子小的时候，默认情况下是进行水平与垂直方向上的平铺。
默认背景图片在元素的左上角显示。
背景图片的依附方式：background-attachment:scroll/fixed; (IE6中只有<body>、<html>这两个标签支持这个属性。)

十五、css模块常用命名

十六、中、英文，unicode编码转换

14.

十七、清除浮动

1、clear:both;

2、同时设置width:100%（或固定宽度）+overflow:hidden;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航