html+css入门汇总

最新推荐文章于 2024-04-26 18:56:42 发布

平凡的小武

最新推荐文章于 2024-04-26 18:56:42 发布

阅读量1.2k

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/u013561722/article/details/23593861

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

hml笔记

（一）html xhtml html5 的区别

Html 与 xhtml 的区别：

（1） xhtml标签必须被正确的嵌套；

（2） xhtml标签必须被关闭；

（3）标签名必须用小写字母；

（4）属性名必须为小写，必有值，值必须加“”引号（重要）；

Xhtml 与 html5的区别：

将符合xhtml1.0 标准的

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

改为符合 html5 标准的

<!DOCTYPE html>

就可以将 xhtml网页转换为 html5文件。

此外还有

HTML5 中的一些有趣的新特性：

· 用于绘画的 canvas 元素

· 用于媒介回放的 video 和 audio 元素

· 对本地离线存储的更好的支持

· 新的特殊内容元素，比如 article、footer、header、nav、section

· 新的表单控件，比如 calendar、date、time、email、url、search

（二）class 与 id 的命名规则

（1）不能以数字开头；

（2）命名有大小写英文字母，下划线及其数字；

（3）其他的都可以放在第一位，作为命名，推荐使用大小写英文字母。对大小写敏感！

（三）对 html的一些简单介绍

（1）黑客方法：举例说明，去掉<title>我是美女</title> ，将</title>删掉就可以了！网页加载完毕，但是浏览区页面不显示内容！

（2）html不是编程语言，而是一种描述性的标记语言。

（3）<font size="7"></font>(1-7从小到大) ------font标签不被赞成使用！

（四）html 标记的语法（书写规则）

（1）<标记符>内容</标记符> 举例：<div>我很好</div>

（五）html 标记分为两种：单标记与双标记

（1）单标记：标记符没有结束的标记，单一型标记。

单标记分为两种：有属性与无属性。

单一型，有属性值 <hr width=”80%”/> 横线

单一型，无属性值 <br /> 换行

（2）双标记：有开始也有结束的标记。

双标记分为两种：有属性与无属性。

有始有终型，有属性值 <div class=”one”>我很好</div> 容器

有始有终型，无属性值 <title>网页制作</title> 标题

（3）对于标记，有的属性是可有可无的，但是有的是必须有的！

例如上面的 class属性可有可无

但是

<input>标签中有许多属性，但是对每个元素来说，只有type属性和name属性

是必须的（提交或重置按钮只有type属性）。

（六）xhtml html 标签一律采用小写，所有的标记都要小写。

（七）页面四部分(源代码中的效果，并不是浏览器的最终效果)

<html>

<head>

</head>

<body>

</body>

</html>

（八）meta标记

（1）meta 标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置在<head></head>之间。

（2）

设置关键字：

设置描述：

设置作者：

设置字符集：

<metahttp-equiv="content-type" content="text/html;charset=gb2312"/>

设置页面定时跳转：

（3）编码方式

gb2312 中文的编码方式，占2个字节

utf-8 国际标准占内存多，占3个字节

（九）注释

（1）html注释

（2）css注释 /*css注释内容*/

（3）js注释

a) //注释行

//注释内容

b) /*使用斜杠星注释代码块(多行) */

/*

注释内容

*/

<script type="text/javascript">

<!--

function displayMsg()

alert("Hello World!")

//-->

</script>

注释：注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。

（十）初步杂谈

（1）<body>主体属性：手册 html xhtml Brower（浏览器） Script Javascript

（2）将来我们听到这此东西，其实都是一个：html元素 html标签 html标记

（3）html代码的本质为：xhtml+css

（4）有某些，html元素，有默认的值。

（5）推理法：---逻辑思维

左上都有边距，如果右边有边距，那边下边也有距离

（6）背景属性有一个层次关系从高级到低级：

背景图片 -- 背景颜色

（7）默认情况下，网页内容与浏览器边框之间是有距离的。左右上下都有边距。

若想没有边距（以下四个设置是与浏览器的边距）:

leftmargin

topmargin

rightmargin

bottommargin

（8）body 属性（但是以下方式都不推荐使用，应该使用样式替代它）

（9）font 标记（不推荐使用，应该使用样式替代它）

（10）使用百度搜索的小技巧：-----很长的关键字，找不到时，找个短一些的

（十一）文件都有文件名，我们网页的文件名 html文件，可不可以使用中文？

解答：在本地电脑，没什么问题，将来网页文件都是保存在服务器上的额，建议都使用英文。

（十二）html语义说明：SEO网络优化，需要多使用语气词

<b></b>加粗

<i></i>倾斜

<u></u> 下划线

<s></s> 删除线

<sup></sup> 上标

<sub></sub> 下标

重点：

<strong></strong> 加粗（语气词）

<em></em> 倾斜（加粗）

用适合的html标记，去描述，我们的网页内容--网站优化技巧

（十三）写代码的流程

（1）先写我们的控制内容的标记，例如这内容比较重要，可以在语义上加权 <strong>关键字</strong>如果这部分内容是，这个文章网页的主题--推荐使用<h1>文章标题</h1>

（2）网页段落文字内容---- <p>段落内容</p>

（a）标题标记<h1>最好不要放在 p 标记里面，结构不好。

（b）a标签里面不能套a标签。

（十四）段落

（1）段落标记

<palign="center"></p>

属性 align 的值为 left center right

（2）段落标题

<h1> 定义最大的标题

<h6> 定义最小的标题

（3）<br /> 与 <hr />

<br /> 换行（换行不换段）

<hr /> 属性有 width size noshade align ，都不推荐使用，最好采用样式控制

<hr width="2000"/> 这里的2000为宽度为2000像素，横线不会折行，会出现水平滚动轴，一直向右将整个显示完全。

width 宽度

size 厚度

（4）在xhtml中，所有的标签都必须要用属性值，如果没有，使用属性名

例如 <hr noshade="noshade" /> ------xhtml

<hr noshade> -------html

属性 noshade

属性值为 noshade

当设置为 true时，水平线呈现纯色（2d效果）

当设置为 false时，水平线显示为双色凹槽（3d效果）

（十五）特殊标记

（1）blockquote 块引用，首行缩进

a）<blockquote>与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

属性值描述

cite URL 规定引用的来源。

b）<blockquotecite="http://www.baidu.com">

标签嵌套使用：

</blockquote>

（2）pre 预格式化，格式保存，通常用来表示源代码

举例

<pre>

*******

*****

***

* *

</pre>

（3）特殊符号

空格  

空格：在一段开始的第一个字不管空格多少，都没有效果。在字与字中间有不管多少空格都只显示一个空格的效果。源代码中换行，体现的是只显示一个空格的效果。

版权符号 ©

注册商标 ®

" "

& &

< < (left的意思)

> > (right的意思)

（十六）列表：无序列表有序列表定义列表三种。

（1）无序列表<ul></ul>

<ultype="项目符号类型">

<li type="项目符号类型">Coffee</li>

</ul>

（2）有序列表<ol></ol>

（a）<ol>

</ol>

（b）

<olstart="50">

</ol>

（3）定义列表<dl></dl>

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

定义列表效果展示：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

（十七）图片

（1）图片展示格式

Gif 支持透明与动画，但是只支持 256种颜色

jpg 不支持透明与动画，但支持1670万种颜色

png 推荐使用，支持透明，不支持动画，但支持1670万种颜色，但是在IE6上的显示效果不好

（2）图片路径：

绝对路径

相对路径 ../向上一级../

根相对路径以根目录开头 /

（3）img 属性

img的属性

src alt title width height border

align 值有以下几个，控制的是图片及其图片周围的文字之间的关系，并不是控制图片的位置显示

left 图片靠左，文字靠右，习惯用 left

right 图片靠右，文字靠左

top 文字垂直居上靠

middle 文字垂直居中

bottom 文字垂直居下（默认）

vspace 像素定义图像顶部和底部的空白（垂直边距）-----不推荐使用

hspace 像素定义图像左侧和右侧的空白（水平边距）-----不推荐使用

（十八）table

（1）传统的网页布局方式 ----使用 table 表格

其实table表格，原来是用于，保存数据的，保存这种有格式清晰的数据

（2）布局-table ----改用div

布局思想 --- 排版

1、从大向小排版

2、从左向右排版，从上向下 --按人眼视觉习惯

（3）表格标记

<table></table> --定义表格

<tr></tr> --定义表行

<td></td> --定义表列（单元格）

<th></th> --定义标题栏（文字加粗）

（4）cellpadding 与 cellspacing

cellpadding 内填充默认值为1

cellspacing 单元格与单元格之间的距离，外边距。默认值为2

cellpadding属性规定单元边沿与其内容之间的空白。

注释：请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。

从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。

（5）属性

（A）table属性

<tablebgcolor="" background="" border="" cellpadding="单元格边框与内容之间的距离" cellspacing="单元格之间的举例"bordercolor="" align="" width="绝对值像素值或者百分比" bordercolorlight="设置边框亮部分的颜色（当border的值大于等于1时才有用）"bordercolordark="边框暗部分的颜色（当border的值大于等于1时才有用）">bordercolorlight="设置边框亮部分的颜色（当border的值大于等于1时才有用）" bordercolordark="边框暗部分的颜色（当border的值大于等于1时才有用）---只有ie支持，最好用css代替

（B）td属性

<tdwidth="200" height="20" bgcolor="blue"background="单元格背景图片" align="单元格水平对其方式" valign="单元格垂直对齐方式" rowspan="设置行合并数目" colspan="设置列合并数目" nowarp="nowrap" >

nowrap 设置在单元格中不换行

td 的属性中没有 border

valign: top middle bottom baseline(默认为与基线对齐) baseline与bottom效果类似，但是baseline 比 bottom 更好看

<tdwidth="200" height="16" bgcolor="blue" align="center"valign="middle" rowspan="3" colspan="2">

（C）合并单元格，其实就是删除多余的 td

（D）<th></th> 自动加粗居中代替td 标题表格

（6）总结

推出一个合并删除td的公式

***** 删除的个数 = 合并的个数 -1

***** 细线表格效果公式

1)将表格自身的 border="0"

2)表格设置背景颜色 = 细线颜色

3）设置单元格之间的距离 === 细线的间隔

（7）其他

1）当<td></td>之间没有内容时，默认是不显示边框。如果想看到边框，就加上 &nbsp；

2）内边框线与外边框线

边框没有中间的边框的设置（table标签下的属性 frame 与 rules）

table下的

frame属性（外侧边框的线）

属性值为：

void 不要显示表格的边线

above 只要显示表格的上边线

below 只要显示表格的下边线

hsides 只显示表格的上下边线

vsides 只显示表格的左右边线

lhs 只显示表格的左边线

rhs 只显示表格的右边线

box 会显示表格的所有边线

border 会显示表格的所有边线

规定外侧边框的哪个部分是可见的。

rules属性（内侧边框的边框线）

属性值有：

none 不显示任何边框线

groups 表示列组合水平部分

rows 只显示横行的边框线

cols 只显示直行的边框线

all 显示全部格框线

规定内侧边框的哪个部分是可见的。

（8）表格的标题

标签caption

<table>

</table>

<caption>下的属性值有：

属性名称属性值

align top 标题在表格上方

bottom 标题在表格下方

left

right

（9）表格结构化()

<table>

<thead></thead> 表头区

<tbody></tbody> 表主题

<tfoot></tfoot> 表底部

</table>

（10）直列化格式

<colgroupbgcolor="red" span="2"></colgroup> 前两列变红

span 直列化数目默认控制第一列

<colspanspan="3"></colspan>

<colspanbgcolor="red"></colspan> 那么第四列变红

（十九）超级链接---就像人体的血液---是互联网的血液

（1）<a href="链接目标" title="注释" target="打开链接窗口的形式">显示内容</a>

_blank 在新窗口中打开

_self 在自身窗口中打开（默认值）

_parent 在上一级窗口中打开，框架会经常使用

_top 在浏览器的整个窗口中打开，忽略任何框架

framename 在指定的框架中打开

（2）链接分类

1）内部链接：同一站点内的页面，当前文档与目标文档在同一站点内

<ahref=目标文档位置及其全称>

2）外部链接：当前文档与目标文档不在同一站点内

<ahref=URL（网址）>

3）E-mail链接：

并允许访问者向指定的地址发送邮件

<ahref="mailto:电子邮件地址">

4）锚点链接 ---可以跳转到，某个页面的某个位置（可以是本页面也可以是其他页面的指定位置）

创建锚点

<aname="锚点名称">显示内容</a>

链接锚点

<ahref="#锚点名称">显示内容</a>

例如：返回顶部，在顶部定一个name

若是其他页面的一个锚点链接

<ahref="锚点链接.html#n3">这是锚点链接页面的一个锚点</a>

5）设置空链接:就是目标端点的链接

<ahref="#">显示内容</a>：相当于刷新页面

例如：设为首页

<ahref="#" onClick="-----">设为首页</a>

添加收藏

<ahref="#" onClick="-----">加入收藏夹</a>

-----为省略内容

6）脚本链接：是一种特殊的链接，当单击设置

脚本链接的文本或图像时，可以运行相应的js语句

例如

<ahref="javascript:window.open ('http://www.163.com')">新浪</a>

关闭窗口：输入 javascript:window.close()

打开窗口：输入 javascript:window.open（'文件名')

（3）链接重要的使用原则：必须是回路，有去有回。--优化，相关链接

（二十）表单基础

表单作用：传递信息

（1）标签：form标记

form标记用于创建一个表单，定义表单的开始与结束，他是一个容器，用于包含其他表单元素，例如文本框、单选框等。

表单元素必须入在form 标记内才有作用。

表单元素

</form>

POST方法可以传递大量信息（一般采用 post）

GET 方法将值附加到请求页面的URL中。适合传递少量信息（默认方式）

（2）标签：<label>标注内容</label>

<label>标注内容</label> 标签为 input 元素定义标注（标记）。

<label>标签的for属性应当与相关元素的 id属性相同

例如：

<label for="man">男</label> 标签包字

（3）input的差异

HTML 与 XHTML 之间的差异

在 HTML 中，<input> 标签没有结束标签。

在 XHTML 中，<input> 标签必须被正确地关闭。

（4）表单元素：input select textarea

表单元素（包在表单里面的元素），以input为例，但除了input之外，还有别的表单元素。其中两个比较重要一点。select(下拉框) 与 textarea(多行文本框)

（5）input标签

readonly 只读的，只能与type="text" 合用

1）单行文本框

举例：

用户名：<input type="text" name="Pname" value="请输入用户名"/>

2)密码框

3)单选框

name 不一样，浏览器会认为是两个不同的按钮

<input type="radio"name="man" value="男" checked="checked" />男 

<input type="radio"name="woman" value="女"/>女

name 一样，浏览器会认为是一组按钮，出现的效果是只有一个可以被选中

<input type="radio"name="sex" value="男" checked="checked" />男 

<input type="radio"name="sex" value="女"/>女

4）复选框

同一组 name 必须一样

5）浏览框

6）按钮

按钮

7）图片按钮

8）隐藏域

隐藏域（例如用户IP传递，隐藏域，位置随便摆放，原因是用户看不到，但要放在form内，）

9）重置与提交

提交与重置不需要 name 属性不是必须的，其他的必须含有type 与name属性

提交表单<input type="submit" />

重置表单<input type="reset" />

（6）select 标签：下拉框

a)菜单式

......

</select>

分组 <optgroup label="分组名称"></optgroup>

举例说明：

<select name="country">

<option value="中国" selected="selected">中国</option>

<option value="美国">美国</option>

</select>

<select name="city">

<optgroup label="-省份-">

<option>-省份-</option>

<option value="北京">北京</option>

<option value="上海">上海</option>

</optgroup>

</select>

b)列表式

......

</select>

（7）多行文本域：textarea

初始内容

</textarea>

（8）表单外框

<fieldset>...</fieldset> 定义围绕表单中元素的边框

<legend>...</legend>legend元素为fieldset元素定义标题

（9）表单元素杂谈

1）有的表单元素，都必须放置在表单标签中<form></form>

2）有的表单元素，以input为例，<input>标签中有许多属性，但是对每个元素来说，type属性和name属性

是必须的（提交或重置按钮只有type属性）

3）些表单元素的属性是相似的

（二十一）html小知识点

1）在适合的html标记中，加入页面的内容（信息）---信息载体-文字、图片以及放置视频和音频多媒体元素。

2）某些html标记，都有默认值。1-h6 ,默认文字加粗显示

3）一个网页设计水平，代码精简程度

4）做测试时，先大一点的值，后小一点的值

5）使用网页特效---但是也考虑用户体验

（二十二）flash动画插入：

使用<embed>...</embed>标记插入flash动画

属性值说明

src url flash路径

width 像素/百分比 flash宽度

height 像素/百分比 flash高度

wmode transparent 是flash背景部分透明

（1）视频flash大小尺寸一般为：360*300（px）

（2）<embed>...</embed>标记插入flash动画，存在浏览器兼容性问题

（3）在网页中插入flash方法（两个方法）：

方法1：<embed></embed>

方法2、通过dreamweaver自动生成代码<object>

flash本身的播放，是需要一个插件（播放器）

有播放器，但看不了视频，需要安装插件，可能是你的浏览器安全设置

（4）企业视频推广思想方法：

1）上传的视频网站

2）拿到分享链接

（二十三）滚动字幕<marquee>滚动文字与图片</marquee>

属性

1）direction=“滚动方向” left right up down

2）behavior="滚动方式" scroll(一圈一圈绕着走)slide(只走一次) alternate(来回的走)

3）loop="滚动的循环次数" 若未指定则循环不止

loop="infinite"

4）bgcolor="背底颜色"

5）width="宽度"

6）height="高度"

7）onMouseOver="this.stop()"

8）nMouseOut="this.start()"

9）crollamount="速度"数值越大速度越快，一般值为2或者3最好

10）crolldelay="延时" （走一步，停一停）scrollamount与scrolldelay用一个就好

（二十四）框架

写框架时不需要body标记

</frameset>

（1）框架的链接的操作，链接是加在，被包含文件中的。

框架制作流程：

1、先做主框架文件 126.html

2、再分别制作，被包含的文件 left.html 与 right.html

3、通过框架技术，将left与right包含在126中

4、如果好需要，框架中，操作其他文件，还必须要去制作其他文件

例如：

<framesetcols="240,*" border="100" bordercolor="blue">

<frame src="left.html"name="left" />

<frame src="right.html" name="right"/>

</frameset>

（2）<a>标签默认在本窗口打开 target属性，给这个左侧区域起名left，右侧区域取名right,在126框架里面起名字。

如果链接指向的目标，是一个框架中的区域，必须要给这个区域，起个名称。

_blank 在新窗口中打开

_self 在自身窗口中打开（默认值）

_parent 在上一级窗口中打开，框架会经常使用

_top 在浏览器的整个窗口中打开，忽略任何框架

framename 在指定的框架中打开

例如：

<td><ahref="liframe.html" target="right">写信</a></td>

（二十五）内嵌框架---iframe

在网页之中，嵌入网页-----内嵌框架---iframe

（二十六）从 html到 xhtml 到 html5 的历史

DOCTYPE是document type(文档类型)的简写，主要用来说明你用的XHTML或者html是什么版本。浏览器根据你DOCTYPE定义的DTD（文档类型定义）来解释页面代码，并展现出来。所以，要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。

（1）

<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

（2）HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!DOCTYPE html>

（3）xhtml1.0 提供了三种 DTD声明可供选择：

1）XHTML 1.0 Transitional ----推荐使用

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML来编写标记。

过渡的：要求非常宽松的DTD，它允许您继续使用html4.01的标记（但是要符合xhtml的写法）

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2）XHTML 1.0 Strict ----要求严格的DTD

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）

。不允许框架集（Framesets）。必须以格式正确的 XML 来编写。

不能使用任何表现层的标记和属性，例如<br>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3）XHTML 1.0 Frameset ---含有框架

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

专门针对框架页面设计使用的DTD，如果你的页面中含有框架，需要采用这种DTD

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

（二十七）html文件分为：内容（信息）结构（xhtml）表现(css) 行为(javascript)

web标准是一系列标准，就是一系列技术标准

在使用时，是组合应用

1）结构化内容 xhtml

2）表现化内容 css

3）行为化内容 js

（二十八）匿名函数

匿名函数是一个“内联”语句或表达式。匿名函数只具备函数体没有函数名称。

因为它只在此处使用并且不需要在其他地方调用它，那么名称也就没有意义。

即使不会写匿名函数你写普通函数也可以实现相同的功能。

（二十九）xmlns 属性

对于 xmlns 属性：可供选择的命名空间，必须要加，并且值为固定值。

HTML 与 XHTML 之间的差异

xmlns 属性在 XHTML 中是必需的，但在 HTML中不是。不过，即使 XHTML 文档中的<html> 没有使用此属性，W3C 的验证器也不会报错。这是因为"xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。

（三十）常识汇总

1）浏览器兼容

火狐版本：firefox setup3.6.18 最佳搭配的firebug 为 firebug-1.7.3-fx

2）xp系统不能用 ie9

3）需要兼容的浏览器： ie6/7/8/9 火狐谷歌苹果浏览器等

4）网页是否有css样式，测试测试方法----在浏览器，改变文字大小

5）长度单位:常用 em 与 px

6）为了将来的css代码优化，所有的属性值后面，都要带上“;”

7）css使用的字体，最好使用大家都有的字体。特殊字体---整成图片

8）分中英文字体，设置字体的顺序。将英文字体设置在前，中文在后。都可以用""引起来，中间","隔开。

举例子Object.style.fontFamily=font1,font2,....

Value Description

font1, font2,.... 字体族名称或类组名称的列表，由逗号分割。

提示和注释

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

将英文字体设置在前，中文在后

*****注释：如果字体族名称中含有空格，请为其加上引号。

注意：默认采用双引号，但是在双引号里面的字体名称（内容）用单引号引起来用于区分。

例如：

内联式

style="font-family:'Arial Black',Gadget, sans-serif;"

//有空格的需要用引号引起来 //在双引号里面的采用单引号用于区分//不同字体采用逗号隔开

嵌入式样式表

9）line-hieght:150%;line-height:1.5em；想让文字在垂直方向上居中，将行高设置为元素的高度，行高=元素高度

*****文字的内容不能超过元素的宽度，也就是不能换行

10）font-weight:normal bold

css可以重新设置，xhtml标签的样式。例如<h1style="font-weight:normal"></h1>

（三十一）css方式

网页中加css方式有四种

1）内联样式表：直接写在现有的标记中

<p style="color:red">这里文字是红色的</p>

2)嵌入式样式表

3)采用外部样式表，整一个 style.css文件。要使用的网页，只需要调用即可。这才是xhtml+css的核心：结构与样式分离----推荐使用

4)导入样式表：也是将样式写到一个文件中，再导入到网页中。不推荐使用导入式样式表与链接式样式表的功能基本相同，只是语法和动作方式上略有不同，同样也将导入样式代码写在<head>标记内

@importurl("basic.css");

</style>

导入样式表缺点（不推荐使用）：

1、会占用html文件空间

2、有些浏览器，解析会有问题。浏览器会最后读取@import中内容。

3、会将多个导入样式表写在一个css文件中，最后在网页link链接一下

（三十二）css选择器

（1）选择器的选择

1)标签选择器例如 p{}

2)class类选择器 .top{}

3)类选择器 #top{}

（2）css特性：

1）继承：子集继承父集的某些属性，子集也会拥有自己默认的属性（例如父亲的老婆子集不能继承）

2）层叠：子元素如果定义与父集相同的样式，会覆盖掉父元素的样式。

****后面的样式会覆盖前面的样式

3）css优先：

A）内联式【行内样式】 >内嵌式>链接式>导入式@import

css优先权：就近原则。作用范围越小，优先权越高。离要修饰目标越近的样式优先权越高

B)选择器优先权

内联式【p style="color:red;"】>id>类class>标签选择器

我们可以采用 !important 来提升重要性(优先权)

特殊情况，我们可以提升某个属性的权限

background-color:#ffcccc !important; // ie6不支持该语句

background-color:#66cccc; }

（3）css控制文字

1）text-style:normal(默认正常) italic（斜体）

<i></i> 效果：斜体

<em>我本斜体</em> 效果：加粗斜体

2)text-decoration:blink ie不支持，火狐支持

3)字符间距（每个字符直接的间距）letter-spacing:normal(默认) length(长度单位) 中英文都有效果

4）单词间距 word-spacing:normal(默认) length(长度单位) 实际上是空格的间距，英文有作用，中文需要加上空格，一个空格的作用，多个空格也显示为一个空格的作用。

5）文本首行缩进text-indent:2em 也可以为负值

6）文本水平对齐方式：text-align:left right center

7)对象中空白处理：

white-space:normal [自动换行] pre[换行和空白受保护]nowrap[强制在同一行显示]

8）文本大小写控制

text-transfom:normal capitalize[每个单词的第一个字母转换为大写] uppercase[转换成大写] lowercase[转换成小写]

9）元素的垂直对齐方式

vertical-align:sub【设置文字为下标】super[设置文字为上标] top[把元素的顶端与行中最高元素的顶端对齐] text-bottom[把元素的底端与父元素的底端对齐]

设置周围文字的垂直对齐方式，本身的对齐方式通过line-height进行设置

（4）css伪类。css控制元素的某种状态：伪类

1）元素名称：伪类名称｛属性：值｝

例如超链接的鼠标经过状态

未访问的链接 a:link{color:#ff0000;}

已访问的链接 a:visited{color:#00ff00;}

鼠标经过时的链接 a:hover{color:#ff00ff;}

鼠标移动到链接上 a:active{color:#0000ff;}

伪类顺序：

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类顺序

L-V-H-A(原理为后面的覆盖前面的)

2）自定义链接的css类

a.类名称：状态

例如 a.web{color:red;}

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

语法：

选择器：伪类名称｛属性：值｝

例如：

h1:hover{color:#ff00ff;]

:focus设置对象在成为输入焦点-鼠标点在哪里（该对象的onfocus事件发生）时的样式（IE6/7不支持）

3）a）css选择符的详细使用;b)css常用属性、css控制边框、背景灯c)css盒子模型，块状元素与内联元素

（三十三）css选择符命名，规范（语意化）

驼峰命名法：#headerBlock

帕斯卡命名法：#HeaderBlock

匈牙利命名法：#head_navigation

（三十四）css选择符：

作用：指定css样式所作用对象（范围）

1标签选择符

2id选择符：唯一性

3类选择符：多次出现，或者某个元素应用多个类

4通配符 * （最好不要用，慎用，小网站会用，大网站不用）

5选择符的嵌套使用 --包含选择符。代码精简-高手过招。父元素子元素{}--优化代码。

h1 strong{}

pstrong{}

6）选择符分组：选择符用逗号隔开

p,h1,h2,h3{font-weight:normal;}

7)标签指定时选择符：h1#content{}表示针对id为content的标签h1

h1.p1{}表示针对class为p1的标签h1

8）组合选择符：综合以上所有

h1.p1,#contenth1{}

（三十五）选择符的解释

控制所有元素---使用通配符---- 就是* -- 就是作用于所有html元素

（有的时候body控制不了的，可以用 *，虽然*作用范围很广，但是，他的效率最低，慎用）

*｛margin:0;padding:0;｝ ----小网站会用，门户网站绝对不会用

例如新浪代码

body,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,big,cite,code,del,dfn,em,font,img,ins,kbd,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,th,td{margin:0;padding:0}

若使用*，给浏览器的压力很大，浏览器需要将全部标签全部读取一遍。具体标出来标签的话，这样提高效率，所以大的门户网站都是这样做的。

（三十六）css盒子模型

手机盒子模型

margin-与其他盒子的举例-盒子与盒子的距离（外补丁）

border-手机盒子的厚度-盒子的边框

padding-填充泡沫的厚度-盒子的边框与内容之间的距离padding（内补丁）

content-内容-盒子中的内容

整个盒模型在页面中所占的宽度是由：

左边界+左边框+左填充+内容+右填充+右边框+右边界组成

（1）内容属性：内容本身的宽与高（width height）

（2）内填充属性：内容与边框之间的距离 padding：上右下左

padding

四个值：上右下左

三个值：上左右下（如果没有值，就去他的对面找）

两个值：第一个值：上下值；第二个值：左右值（如果没有值，就去他的对面找）

一个值：上下左右都为这个值

margin与此类似，也可以设置成这四种状态。

（3）*****在定义盒子的宽度时，要考虑到，内填充、边界、外边距的存在。如果，增加了内填充，整个盒子宽度值，需要减去你增加的内填充值。

（4）杂谈

margin外边距与padding类似

***** margin不出来margin-top不出来时加border：1px solid blue;

***** 将来在使用外边距，要注意浏览器的兼容性问题。

**** 上下用padding，左右用 margin

***** 除了值为0的，其他的值后面都要加单位（px 或者 em 等）

**** 由于各个浏览器存在着，内外边距的，默认值，还不相同。我们需要将所有浏览器的默认内外边距，都从0开始计算

在实际工作中，不要用这个 *｛margin:0;padding:0;｝,但是效率最低

用哪些元素，那些加padding:0;margin:0;

与浏览器的边框 body,ul,ol，li｛padding:0;margin:0;｝

（5）css继承性：

利用继承特点，将颜色、大小等属性，加给body，子元素就会继承。

但是有的标签 h1 会听自己的，不改变字体大小。

css的属性，虽然有继承的特点，但不是，所有的属性都有继承。

父亲的妻子不能继承

文字、颜色有继承性。宽高 margin padding无继承性。

border:线宽线型颜色；例如 border:1px solid #ff0000;

border-top-width:2px;

border-top-style:solid(实线) dashed（虚线,存在兼容性问题）;

border-top-color:blue;

（6）列表属性：最常用 list-style:none;

ul,ol{list-style:none;} 不要列表的符号

（7）小技巧

1）html上来第一步，将内外边距归零。body,h1,p,div,ul,li{margin:0;padding:0;}

2）盒子水平居中：左右计算机自己算，自动，水平居中（将对象的左右外边距设为居中）margin：0 auto;

3）让盒子的内容垂直居中：line-height=盒子高度，但是注意不能换行

4）调试时，可以适当加背景颜色。

5）其实图片与文字是一样的，都是作为父级的元素

A)图片水平居中，相当于让文字居中显示

举例：

<p class="center"><imgsrc="../images/001.jpg"/></p>

设置css

.center{text-align:center;}

就可以让图片居中了，跟设置文字水平居中一样。

B)图片img的 align属性，设置的是图片与周围文字的摆放方式

C) 元素的垂直对齐方式

vertical-align:sub【设置文字为下标】 super[设置文字为上标] top[把元素的顶端与行中最高元素的顶端对齐] text-bottom[把元素的底端与父元素的底端对齐] 设置

周围文字的垂直对齐方式，本身的对齐方式通过line-height进行设置。

6）ul 与ol等等

body,h1,p,div,ul,li{margiadding:0;}

ul,ol{list-style:none;}

（三十七）html标签分为两种：块状元素（如div和 p）和内联元素（例如a span标签）

（1）块状元素：{display:block;} 块状元素很霸道，能设置宽和高，独占一行。如：div p body h1-h6等

块状元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)和高度（height）起作用。

（2）内联元素：内联元素很温柔，不能设置宽和高。不影响换行，可以设置背景颜色。内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度（width）和高度（height）不起作用。常见内联元素为 a em span

（3）属性display的属性值的用法：

display:block;

block:块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。

none:隐藏对象.与visibility属性的hidden值不通，其不为被隐藏的空间保留其物理空间。

inline:内联对象的默认值，将对象强制作为内联对象呈现，从对象中删除行

inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联元素会被呈递在同一行内。

（三十八）背景

background:颜色图片平铺方式固定方式位置

背景颜色:background-color:#ccc;

背景图片:background-img:url() 默认是水平与垂直方向的平铺默认不平铺在左上角显示

背景平铺方式:background-repeat:[repeat no-repeat repeat-x repeat-y]

背景位置:background-position:top[left center right] center[left center right] bottom[left center right],x坐标 y坐标【第一个值为水平位置，第二个值为垂直位置】左上角是0 0.单位是像素（0px 0px）

背景图像的依附方式:background-attachment:[scroll(背景图像随对象滚动的) fixed（固定的）]

背景图片的依附方式：固定的含义是，将图片固定在，屏幕的某个位置，而不是元素的位置。

兼容性：

IE6只有html与body两个元素支持这个固定属性，其他的不支持fixed

（三十九）翻转技术

方法1）鼠标经过，大小相同，图片不一样

方法2）两张图片合成一张图片（css精灵技术，主要是为了，减少http请求）

运用伪类，表示一种状态

:link

:hover

优点显示页面：浏览器-服务器（交流）相当于超市购物-结账时候

缺点：定位不好

（四十）杂谈

（1）手指的效果：默认a 的效果为手指效果

cursor：pointer

（2）有的浏览器认为 ul li为内边距，有的认为为外边距。开始

就margin:0;padding:0;list-style:none;

（3）布局三种方式

1、默认文档流方式：以默认的html元素的结构顺序显示

2、浮动布局方式：通过设置html元素的float属性显示

3、定位布局方式：通过设置html元素的position属性显示

Float:none left(对象向左浮动，而后面的内容流向对象的右侧 // IE6、IE7存在浏览器兼容的) right

（4）清除浮动：就是可以去掉前面对象浮动，对后面对象的影响。Clear:none left right both

（5）为什么原来在同一行的两个块，会因为浏览器的大小，而改变原来的位置。

解决：在块外面加一个父元素的宽度。

（6）当父元素没有指定高度时，并且子元素有浮动时候，对父元素有影响，这个父元素的高度不会自动增加。

解决方法1：

额外标签法：加一个空盒子，其标签为clear：both //缺陷：增加代码量

<div>

<div class="clear"></div> //增加一个空标签

</div>

解决方法2：

给父元素增加 overflow:hidden 的方法

overflow：visible(默认) auto滚动条（根据需要给父亲加） hiddden（多余部分裁剪）

//缺陷：但是子元素出现定位布局，就会很难实现

（7）当我们要想使用绝对定位时候，必须要有两个条件：

1）必须给父元素加定位属性，一般建议使用position：relative;

2）给子元素加绝对定位position:absolute;同时要加方向属性top left

（8）ie6双倍边距：

浮动方向相同，margin方向一样，双倍边距。解决办法：display:inline

双倍间距三个条件：

1浮动

2margin

3方向一致

解决办法：display:inline

（9）字体

有时候中文字体会变为乱码：

写汉字效果不明显。

这边直接将中文名称写为英文。

解决办法：最好采用 unicode 编码

（10）CSS Hack

IE都能识别*;标准浏览器(如FF)不能识别*

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

IE6支持下划线，IE7和firefox均不支持下划线。

例如：

div{

background:orange;

*background:green;

_background:blue;

}

2014.04.11

平凡的小武

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css入门汇总

hml笔记（一）html xhtml html5 的区别Html 与 xhtml 的区别：（1） xhtml标签必须被正确的嵌套；（2） xhtml标签必须被关闭；（3）标签名必须用小写字母；（4）属性名必须为小写，必有值，值必须加“”引号（重要）；Xhtml 与 html5的区别：将符合xhtml1.0 标准的
复制链接

扫一扫