html知识总结

Html知识总结

html

1. 缩写词的具体含义

html:超文本标记语言

超文本（文字+图片+音视+链接…）

标记语言 (浏览器根据标记显示内容)

来自于SGML(标准通用标记语言)

http：超文本传输协议

XML：可扩展标记语言

2. 网页模式

B/S 浏览服务模式

C/S 客户服务模式（以安装客户端的形式显示)

静态形式

动态形式（发生信息交互）

W3C ：World Wide Web Consortium (官网：)

Xhtml：符合xml（可扩展标记语言）标准的html

dhtml 动态效果(dynamic)

3. Html文档整体结构

<html>

<head>

<title>

HTML的标题（将显示在浏览器标题栏上）

</title>

</head>

<body>

主题内容

</body>

</html

4. Html细节（标签的使用）

标签或元素的形式<元素名>内容</元素名>

A. 文字

? <font>文字</font>

? <font face=“” size=“” color=“”>文字</font>

? face定义字体（宋体）

? Color可以使用预定义的名字,也可以使用数字（#FFFFFF,black；#000000，white） ? 标题字体大小（h1，h2，h3，h4，h5，h6）h1最小，h6最大

B. 图片

? <img src=”1.jpg” height=”200” width=”100”/>

? Alt标签实现鼠标在图片上时提示的文字;当图片丢失，作为提示显示出来。 ? 相对路径："../../images/01.jpg"(父路径)

./（当前路径）

? 绝对路径：例如百度;(网络路径)

C:\Users\Administrator\Desktop（本地路径）

C. 链接

? <a href=””>百度</a>

? 定义<a name=”top”></a>

链接<a href=”#top”>回到顶部</a>

D. 表格

? <table>

< tr><td border=”1” colspan=”4” rowspan=”2” align=”center”>文字</td></tr> </table>

? 表格嵌套顺序

<table>

</table>

? 合并表格步骤：

1删除没用的表格（靠右，靠下的进行删除）

2合并（colspan rowspan）

td内无内容时需用 (空格)；

外间距cellspacing

内间距 cellpadding

<th>第一列格式相同,表头单元格</th>

Body里的内容居中用标签<center></center>

E. 表单(作用：手机用户信息；数据库查询)

? 表单基础<form>…</form>

Form的属性：action（Form中数据交给服务器端哪个程序进行处理） ? 表单的提交方式（method：指定表单数据的提交方式）

get方式（默认）：

file:///D:/班级资料/63/html2/success.html?xm=&xb=0&pwd=&wt=4&da=4&a=a&xy= --数据会展示在地址栏

--不安全

--对数据量有要求（255）

--速度快

post方式：

D:\班级资料\63\html2\success.html

--后台提交（数据不展示）

--安全

--对数据量没有要求

--速度慢

何时使用（post）：

--表单里有安全性数据

--表单里有大数据量

--表单里有文件提交

? 表单中的输入标签

文本框<input type=”text” name=”xm”/>

单选按钮(一组单选按钮的值必须一样；value的值提交给后台)

<input type=”radio” name=”xb” checked=”checked” value=”1”/>男 <input type=”radio” name=”xb” value=”0”/>女

下拉菜单/列表

密码形式的设置

复选框（name值一样）

<input type=”checkbox” name=”sp” value=”1”/>数码

<input type=”checkbox” name=”sp” value=”2”/>运动

<input type=”checkbox” name=”sp” value=”3”/>体育

<input type=”checkbox” name=”sp” value=”4”/>新闻

按钮

1<input type=”submit” value=”我要注册”/>

2<input type=”image” src=”img/submit.jpg”/>

3<input type=”reset” value=”重置”/>

4<input type=”button” value=”普通按钮”/>

文本区域(off 不换行；soft 软换行；hard换行)

</textarea>

隐藏域 <input type=”hidden” name=”a” value=”a”/> 文件上传<input type=”file” name=”file1”/>

? Target属性

– Frame name

– _blank 新窗口

– _self 本窗口

– _parent 父窗口（本窗口的上一级窗口）

– _top 浏览器窗口

F. 多窗口

</frameset>

G. 字符

换行<br>

段落标签<p></p>

加粗：

1. <b>文字</b>

2. <strong>文字</strong>

斜体:

<i></i>

下划线：

<u></u>

删除线：

<s></s>

特殊字符：

5. 跑马灯效果

</marquee>

Css

Cascade Style Sheet层叠样式表

(一) 三个选择符

1、标签选择符

<html >

<head>

p{color:#FF0000; font-size:16px}

a{color:#00FF00; font-size:24px}

</style>

</head>

<body>

<p>这段文字是用css控制的样式</p>

<a>这段文字也是用css控制的样式</a>

</body>

</html>

2、id选择符

<html >

<head>

#p1{color:#FF0000; font-size:16px}

#p2{color:#00FF00; font-size:24px}

</style>

</head>

<body>

<p id=“p1”>这段文字是用css控制的样式</p> onMouseOut="this.start()"

<p id=“p2”>这段文字也是用css控制的样式</p>

</body>

</html>

3、class类选择符

(二) css三种定义方式：

1、head里用style标签；

<head>

p{color:#FF0000; font-size:16px}

a{color:#00FF00; font-size:24px}

</style>

</head>

2、在body里用style属性；

<body>

<p class="c1">这段文字是用css控制的样式</p>

<p style="color:#0000FF; font-size:20px">这段文字也是用css控制的样式</p> <a href="#" class="c1">这是超链接</a>

</body>

3、引用外部的css样式文件，在head里用link标签。

a. css1.css文件中定义

.c1{color:#0000FF; font-size:16px}

b.在head中<link type=”text/css” rel=”stylesheet” href=”css1.css”> 实现了布局代码和样式代码的分离。

(三) Css组合

H1，H2，H3{ color:#0000FF;} H1，H2，H3并列用某一样式。

P ul li{} P标签里的A标签，嵌套使用。

(四) 超链接伪类设置

a) A:link 未访问时的状态

b) A:visited 访问过后的状态

c) A:active 鼠标点中不放时的状态

d) A:hover 鼠标划过时的状态

(五) Css注释

/*注释文字*/

(六) 框架：局部刷新

某一主页面的整体框架

<html>

<head>

</head>

</frameset>

<noframes><body>本客户端不支持框架</body></noframes>

</html>

左页面1的代码：

主页面的刷新区域的name属性与左页面1的target属性值需一样

去掉页面上的body标签（frameset级别跟body一样）

设计框架（rows/cols最后一个尽量用*）

在超链接里或表单里添加target属性（指定要跳转的页面在什么位置显示）

<html>

<head>

<title>左页面

</title>

</head>

<tr>

<table>

<tr><td border="0" cellspacing="0" cellpadding="0"><a href="right1.html"

target="main"><img src="help_1.JPG"></a></td></tr>

<tr><td border="0"><a href="right2.html" target="main"><img

src="help_2.JPG"></a></td></tr>

<tr><td border="0"><a href="right3.html" target="main"><img

src="help_3.JPG"></a></td></tr>

</table></td>

</tr>

</table>

</html>

子框架iframe在body里使用

补充：

(一) 插入flash用object标签

<boject classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="297" height="352">

<EMBED src="images/flash.swf" QUALITY="high"

PLUGINSPAGE="/go/getflashplayer"

TYPE="application/x-shockwave-flash" width="297" height="352">

</EMBED>

</object >

Clear：left的使用：当bottom的底部出现在右侧时，浮动产生混乱，进行清除处理。

.bottom{width:1050px; height:100px; clear:left; margin-top:20px; border-top:2px #666666 solid;}

margin-left:830px右边竖条靠右，边框单独显示

(二) 列表制作横向导航：

使用table+css进行布局(适当使用无序（有序）列表)

1--用无序列表

2--给ul li 添加float：left

3--去掉列表符号

4--让每个导航中间产生距离margin-right:10px;

5--导航中间产生竖线（border-right:1px #FF0000 solid;）

6--竖线居中（padding-right:10px）

7--去掉最后一个li的右边框

(三) Div三个注意要点：

1.设置div的宽度和高度

2.设置全局性的背景色

3.浮动（clear：left）去除文字环绕

(四) 盒装模型

padding对象本身距盒子的距离

margin盒子与盒子之间的距离

border盒子的粗细

(五) <span>行内标签，不能回车</span>

html知识总结

相关推荐

html知识总结

专栏推荐