23@HTML_day01
web开发背景知识(了解即可)
一、软件架构方式
1、主机、终端
2、client/server c/s
3、browser/server b/s
二、html基础
1、什么是html?
hypertext markup language(超文本标记语言),它是由w3c定义的一套标记，用于设计网页，浏览器会解析标记及标记之内的内容，以合适的方式展现出来。
2、html文件的基本结构
1),html文件以.html或者.htm为后缀(为兼容早期的windows)保存。
2)文件的内容主要分成两大部分
a,头
<head>
<title>标题</title>
<!-- meta 元标记 http-equiv: 模拟消息头 content:设置消息头的值 -->
<meta http-equiv="content-type" content="text/html;charset=gbk">
<meta http-equiv="refresh" content="3">
<!--引入样式文件-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--引入外部的javascript文件或者编写javascript脚本-->
<script src="my.js"></script>
<!--添加样式-->
<style>
</style>
</head>
b,体
<body>
<!--链接-->
<a>
<!--表格-->
<table>
<!--表单-->
<form>
<!--列表-->
<ul>,<ol>
<!--子窗口-->
<iframe>
</body>
三、五个标签
1、链接
1)基本使用
<a href="地址" target="指定打开的窗口" title="">链接的描述</a>
href属性: 链接资源对应的地址
target属性值: 指定资源打开的窗口
_blank:在新窗口中打开
_self:(缺省值)，在当前窗口中打开
title属性：链接的提示。
2)使用图片作为链接：
比如：<a href="hello.html"><img src="a.jpg"/></a>
3)发送邮件:
比如:<a href="mailto:eric@126.com?subject=hello">给我发邮件</a>
4)锚点:
在同一个页面内部跳转
<a name="top">小龙女是......</a>
<a href="#top">小龙女</>
5)热点:
将一个图片可以分割成多块区域，每一个区域称之为一个热点，点击热点，浏览器会向指定地址发请求。
step1先使用map标记，划分热点。
step1
1 <map name="Map">
2 <area shape="rect" coords="407,20,560,77" href="qy.html">
3 <area shape="rect" coords="580,22,734,76" href="gr.html">
4 </map>
step2 使用热点
step2
1 <img src="index04.jpg" width="772" height="357" border="0" usemap="#Map">
6)伪样式(见css)
2、表格
1)表格的基本用法
View Code
1 <table>
2 <tr><td>id</td><td>name</td><td>salary</td></tr>
3 <tr><td>1</td><td>小龙女</td><td>12000</td></tr>
4 </table>
width属性：500/50%(注意百比分相对于父标记)
cellpadding属性：单元格内部的数据与单元格之间的空隙
cellspacing属性：单元格与单元格之间的空隙
2)不规则表格
colspan属性：按列合并单元格
rowspan属性：按行合并单元格
3)对齐方式
align属性：水平对齐 left(缺省)/center/right
valign属性：垂直对齐 top/middle(缺省)/bottom
4)表格的完整结构
View Code
1 <table>
2 <!--表格的标题 出现次数0/1-->
3 <caption>员工信息</caption>
4 <!--表头 出现次数0/1-->
5 <thead>
6 <tr><td>id</td><td>name</td><td>salary</td></tr>
7 </thead>
8 <!--表脚 出现次数0/1-->
9 <tfoot>
10 <tr><td>合计</td><td colspan="2">20000</td></tr>
11 </tfoot>
12 <!--表体 出现次数1/n-->
13 <tbody>
14 <tr><td>1</td><td>zs</td><td>5000</td></tr>
15 <tr><td>2</td><td>ww</td><td>15000</tr>
16 </tbody>
17 </table>
5)表格可以嵌套
单元格的内容又是一个表格
3、表单
1)什么是表单
用来收集用户的请求参数的一种标记。
2)表单的基本结构
View Code
1 <form action="" method="">
2 <!--input标记-->
3 <!--非input标记-->
4 </form>
action属性:处理表单的程序的地址，比如一个servlet的地址。
method属性:表单的提交方式 get/post
4、列表
1)无序
View Code
1 <ul>
2 <li>item1</li>
3 <li>item2</li>
4 <li>item3</li>
5 </ul>
2)有序
View Code
1 <ol>
2 <li>item1</li>
3 <li>item2</li>
4 <li>item3</li>
5 </ol>
3)列表可以嵌套
View Code
1 <ul>
2 <ul>
3 <li>item1_1</li>
4 <li>item1_2</li>
5 </ul>
6 <li>item2</li>
7 <li>item3</li>
8 </ul>
5、窗口划分
1)frameset
View Code
1 <frameset rows="200,*">
2 <frame src="top.html"/>
3 <frame src="bottom.html"/>
4 </frameset>
注意： <frameset>与<body>不能同时出现。
frameset可以嵌套
View Code
1 <frameset rows="200,*">
2 <frame src="top.html"/>
3 <frameset cols="20%,*">
4 <frame src="left.html"/>
5 <frame src="main.html"/>
6 </frameset>
7 </frameset>
2)iframe
在body里面嵌入一个子窗口
View Code
1 <iframe src="content.html" width="400" height="300"></iframe>
