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为后缀.
2.html的基本格式
3.head中的标签
3.1 title标签
显示页面标题
3.2
4.body中的标签
4.1 链接
1)基本使用
href属性:指定跳转路径
target属性:
_self:在当前页面做跳转
_blank:在新窗口中做跳转
title属性:鼠标放到链接上的描述信息
2)使用图片作为链接
5.框架
5.1 frameset和frame
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=""/>