您的位置:首页 > Web前端 > HTML

html 学习总览

2015-07-20 10:50 525 查看
web客户端技术:

HTML,css,JavaScript

xml,reflect,thread

web服务器端技术:

servlet,jsp

ajax,Jquery

===HTML====

1.html

(hypetext markup language):超文本的标记语言

是一种开发网页的技术,浏览器来解析.

html的文件以.html或.htm为后缀.

html是由W3C组织制定规则.
学习网站:www.w3school.com


2.html的基本格式

<!--根标签-->
<html>
<!--文件本身相关信息-->
<head></head>
<!--描述显示数据的信息-->
<body></body>
</html>


3.head中的标签

3.1 title标签

显示页面标题

3.2
<meta>
标签

<meta http-equiv="Content-Type" content="text/html;charset=GBK">


3.3 style,link,script


4.body中的标签

4.1 链接
<a>


1)基本使用

<a href="" target="" title="">
显示内容
</a>


href属性:指定跳转路径

target属性:

_self:在当前页面做跳转

_blank:在新窗口中做跳转

title属性:鼠标放到链接上的描述信息

2)使用图片作为链接

<a href=""><img src="图片地址"/></a>


3)使用锚点
指定同一个页面跳转


<a name="top">top</a>
<a href="#top">回到顶部</a>
4)热点(了解)
<img src="./images/hot.png" usemap="#m2">
<map name="m2">
<area shape="rect" coords="407,20,560,77" href="qiye.html"></area>
<area shape="rect" coords="580,22,734,77" href="geren.html"></area>
</map>


4.2 列表
1)无序列表


<ul>
<li></li>
<li></li>
...
</ul>


2)有序列表


<ol>
<li></li>
<li></li>
...
</ol>


3)列表嵌套
...
4.3 表格
1)不规则的表格


<table align="" width="" border="" cellpadding="" cellspacing="">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>


width属性:指定表格宽度
border属性:边框
cellspacing属性:单元格之间的距离
cellpadding属性:单元格边框与里面的内容之间的距离
align属性:表格在水平方向的方式 left/center/right
colspan属性:跨列合并
rowspan属性:跨行合并

valign属性:垂直摆放位置

2) 完整写法


<table align="" width="" border="" cellpadding="" cellspacing="">
<caption></caption>
<thead><tr><td></td></tr></thead>
<tfoot><tr><td></td></tr></tfoot>
<tbody><tr><td></td></tr></tbody>
</table>


caption:标题       0或者1
thead:表头         0或者1
tfoot:表脚       0或者1
tbody:表体         1或以上
3)表格嵌套

4.4 表单
收集用户数据,如登录,注册
<form></form>

4.4.1 input标签
<input type="" name="" value=""/>
type属性:
hidden 隐藏
text   文本输入框
password 密码输入框
radio    单选
checkbox 多选
submit   提交
reset    重置
button   按钮
file     文件

name属性:用于往服务器发数据时生成请求参数
value属性:默认值

4.4.2 非input标签
下拉框:
<select name=""  multiple="multiple">
<option value="">显示内容</option>
</select>

多行文本框:
<textarea cols="" rows=""></textarea>
cols属性:占多少列
rows属性:占多少行


5.框架

5.1 frameset和frame

<frameset rows="20%,*">
<frame name="topFrame" src="top.html"/>
<frameset cols="30%,*">
<frame name="leftFrame" src="left.html"/>
<frame name="mainFrame" src="main.html"/>
</frameset>
</frameset>


rows属性:窗口以行划分
cols属性:窗口以列划分
src属性:指定的加载URL
name属性:窗口名称
注意:
frameset不和body同时使用

5.2 iframe
能和body同时使用
<iframe src="" width="" border="" height=""/>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  网页 开发 技术 标记