目录
3/常用属性:border/align/valign/width/height
-----web阶段介绍
软件--3层
UI层:控制台/swing/Web
业务层
数据层
Web类型的应用程序:OA/CRM
Server:Code
Browser:访问的客户端
Web 的工作原理
打开浏览器,输入URL,回车,发送请求,服务器得到请求(分析),返回响应,由浏览器解析显示
Web的技术
客户端技术:HTML/CSS/JavaScript
服务器端技术:servlet/JSP/Jquery/Ajax
客户端技术(Web 基础):客户端的技术相同
HTML:构建
CSS:外观(美化)
JS:添加动态效果
-----概述、基础语法
一:概述
1**/什么是 HTML(超文本标记语言):一种纯文本的网页技术,后缀为 .html/htm 文件,由浏览器解释运行
2/依靠浏览器:IE/Firefox/Chrome/safari
二:基础语法--标记 <标记名称>**
1/双标记(成对出现):
<h1></h1>
2/单标记(只有一个):
<br />
3/为标记定义属性:
描述标记的各方面----空格隔开, 多个属性也用空格隔开, 值可以用一对双引号或者一对单引号
<h1 align="center">text</h1>
4/注释
<!--注释内容-->
5/html文档的标准结构
版本信息
<html>
<head></head>
<body></body>
</html>
6/版本信息(了解):指定文档的语法规范
严格:最新
过渡:兼容
<br />--新
<br>--旧
框架型:
//严格型:( 自己从头到尾, 开发使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//传统型:( 维护别人的代码, 开发使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//框架型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">7/head:
定义和整个文档相关的信息(标题/刷新/编码方式)
<head>
<!-- 刷新：每3妙, 刷新一次 -->
<meta http-equiv="refresh" content="3" />
<!-- 编码类型,：纯文本html,字符类型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>xxx</title>
</head>8/body
第一个课堂练习:创建一个标准结构的 html 页面,为页面定义标题/刷新频率/编码方式
三:文本
1/普通文本和特殊字符
a/空格折叠：
多个空格以及换行，折叠显示为1个
b/特殊字符:转义字符
< <
> >
空格
2/段落标记
<p>文本</p>: 自成段落,行间距
<br />:换行
3/标识标题<hn></hn>
<h1>aa</h1>
显示标题从大到小：<h1>,<h2>,<h3>......
4/分组
<div></div>:适用于对于块级元素分组
<span></span>:适用于对于行内元素分组
5/**块级元素和行内元素
块级元素(block):独占一行, h1, p,div，table，ul，ol，li
行内元素(inline):可以和其他元素位于同一行,span,a
四:图像和链接
1/为页面添加图像
<img src="URL" />
2/URL
绝对路径(全路径):
<img src="http://sss/a.jpg" />
注：d:/aa/a.jpg (错误, 不能有这种路径. 因它是相对于个人计算机的磁盘)
相对路径:
<img src="aa/a.jpg" />
注：图片与 .html 在同一个文件夹
3/为页面添加超级链接
<a href="url">点击的内容</a>
<a href="a.html">click me</a>
<a href="http://www.baidu.com">click me</a>
<a href="" target="_blank">click me</a>
target="_blank"：开启第二个页面打开.
4/同一页面上的不同位置之间
情况一:回到页面的顶端
<a href="#">回到顶部</a>
情况二:自定义位置
定义目标位置(锚点):
<a name="a1"></a>
定义一个链接:
<a href="#a1">to a1</a>
--加＃, 防止被认为 a1为没写完的url地址
***注意：
不知道图片宽高
宽或高 任意写一个, 其它将自动按比例缩放
宽或高 凭感觉都写, 图片可能会变形
<img src ="aa/a.jpg" width="xxx”>
五:列表
1/基础语法
<ol></ol>---ordered list，有序列表
<ul></ul>---unordered list，无序列表
<li></li>----list item，列表项
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
2/实际应用
应用一:直接
应用二:嵌套的列表---分级菜单
<ol>
<li>书</li>
<li>家电</li>
<li>日用品</li>
</ol>
<ol>
<li>个人所得税
<ul>
<li><a href="#问题1.1">问题</a><有某有？？？></li>
<li><a href="#方案1.2">方案</a></li>
<li><a href="#实现1.3">实现</a></li>
</ul>
</li>
<li>命令解析器</li>
</ol>
六:表格
1/用来显示网格数据,布局
2/表格的基本结构:table/tr/td(单元格)
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
3/常用属性:border/align/valign/width/height
cellspacing(单元格之间以及单元格和外边框之间的距离)/cellpadding(单元格的内边距)
border:边框
align：水平布局
valign：垂直布局
width：宽
height：高
4/表格的复杂结构
a/可以为表格添加标题
<caption>文本</caption>
b/行分组
thead/tbody/tfoot
5/不规则表格
td设置 colspan（跨列）或者rowspan（跨行）属性
6/表格的嵌套:解决复杂布局情况
td里写一个table
七：表单****
1、form：承载页面元素，备于做提交
<form action="a.jsp" method="post">
</form>
2、form可以承载的：input、其它元素
3、input：单标记，靠 type 属性的不同取值
a、类型
<input type="text" />--文本框( 不写type属性, 默认为文本框 )
<input type="password" />--密码框
<input type="radio" />--单选按钮
<input type="checkbox" />--多选（复选/核选）框
<input type="submit" />--提交按钮，提交并刷新页面
<input type="reset" />--重置按钮，将页面恢复到原始状态
<input type="button" />--普通按钮
<input type="file" />--选择文件，以供上传
<input type="hidden" />--隐藏域，适用于记载那些不需要显示的关键数据
b、常用属性
id：需要的时候，唯一标识
name：名值对的方式提交数据
value：取决于需求
maxlength：文本框、密码框
readonly：只读
checked：单选、多选
4、列表框、下拉框：取决于 size 的取值
<select>
<option></option>
<option></option>
<option></option>
</select>
如何选择：页面布局
5、多行文本框
<textarea>
</textarea>
6、label：文本标签
<input type="radio" id="r1" />
<label for="r1">文本</label>
7、fieldset：元素圈起来
legend:为圈添加名称描述
比如：
<fieldset>
<legend>标题</legend>
</fieldset>
8、iframe：浮动框架
a、显示：一个浏览器窗口中显示多个html页面
main.html---页面
a.html---广告页面
b、嵌入到某个html页面里：
<iframe src="url"></iframe>
