王 wangcm@tarena.com.cn
web 基础的课程
html:1
css:1
javascript:3
JQuery/Ajax:
静态页面:不与服务器发生动态交互
html:页面的架构/内容
CSS:美化页面--控制页面的外观
JS:页面的动态显示效果
服务器端技术:页面数据和服务器的交互
JSP
PHP
ASP.NET
HTML 课程
1 什么是 HTML
hypertext markup language-超(超级链接)文本标记语言
是一种编写网页的标记语言(纯文本),后缀为htm或者html的文件,
由浏览器软件解释运行(标记错误,意想不到的后果)
2 基础语法
大多数的标记成对出现: <a></a>
个别标记只有开始标记: <br> 或者 <br />
带有属性的标记: <a href="a.html" title='sss'></a>
空格隔开,属性名称和值之间用等号连接,属性的值用一对单引号或者一对双引号
3 编写一个 html 网页
创建一个后缀为 html 或者 htm 的文件,用文本编辑器打开,编写
用浏览器打开
4 浏览器软件
IE/Firfox/Chrome/Safiri
同样的文件,用不同的浏览器查看,可能会有不同的效果
5 html 页面的标准结构:练习(标准格式的html文档,版本信息不需要)
DTD定义的版本信息
根元素为 html
<head>:对于整个文档的描述信息 **
<title>:为网页添加标题
<meta>:元数据--单标记
<meta http-equiv="refresh" content="3">
定义消息头,常用于留言论坛的页面
<meta http-equiv="content-type" content="text/html;charset=utf-8">
定义编码格式
<link>:引入外部的其他文件,比如 CSS 文件
<style>:内部样式表
<script>:引入脚本文件,比如 js文件/vbs文件
<body>:页面的主体展示内容
文本标记
图像和超级链接
表格
表单
列表
框架元素
6 版本信息
4.01:过渡型
XHTML 1.0:严格型
框架类型
7 文本标记:文本默认显示的
<p>:段落标记,常用于文章的编辑
<br>:单标记,代表换行
用<p>或者两个 <br>,实现单独的行,默认情况下,<p>有较大的段落间距
<hn>:<h1>--<h6>,代表1号--6号标题,将一些文本以标题的方式突出显示
<span>和<div>:分区显示元素,常用于分别设置样式外观
<span>:不影响原有的布局,适用于同一行的分组
<div>:独占一行,适用于不同行不同元素的分组
8 图像和超级链接
图像 <img>:单标记
src:设置显示的图片的路径(相对或者绝对)
width/height:尺寸
title:提示性的文本信息
<img src="http://bbs.tarena.com/images/logo.gif"
<img src="d:/a.jpg">
<img src="a.jpg">
超级链接:<a> 标记---<a>被点击的文本或者其他元素<a>
href:url地址(相对或者绝对)---页面间跳转
<a href="http://bbs.tarena.com.cn"></a>:友好链接
<a href="home.jsp">主页</a>:当前站点跳转
target:页面在何处打开(原有的窗口,新窗口)
_blank:查看详细
_self:前后逻辑顺序
name:定义锚点---当前页面上的不同部分之间的跳转
一个 <a> 定义锚点:使用name 属性
一个 <a> 定义链接: href="#锚点名称"
整幅图像只有一个链接:<a href=""><img></a>
为一副图像添加多个链接:热点映射
<map name="aaa">
<area shape="" coords="" href="">定义一个区域,单标记
<area shape="circle" coords="x,y,r">
<area shape="rect" coords="x1,y1,x2,y2">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,.....">
</map>
<img src="" width="" title="" usemap="#aaa">
9 表格
显示规则化数据
页面的布局
主要元素:<table> <tr> <td>,内容只能显示在td里
table 元素可以附带一些属性:
border
width/height:默认大小是自适应的
设置大小后,按照行列中内容的比例自动分配
cellspacing
cellpadding:单元格内容与单元格的边距
tr和td元素也可以设置一些属性:格子之间(边框)的间距
width/height:
align:水平方向的对齐 left/center/right
valign:垂直方向的对齐 top/middle/bottom
表格的完整结构
<caption>:为表格定义标题
行分组:适应于为多行统一的样式定义的时候
<thead>:表头,一个
<tbody>:表主体,可以有多个
<tfoot>:表的页脚部分,一个
不规则表格:
td 元素属性
rowspan:跨多行
colspan:跨多列
表格的嵌套
td 元素中包含整个table 的定义
10 表单:页面的数据录入/选择和提交
<form>:包含表单元素,以表单为单位提交
action="register.jsp"
method="post"
<input>标记:单标记
type 属性:决定输入元素的类型
type="text":文本输入框
type="password":密码输入框,用掩码的方式显示文本
type="checkbox":核选框,多选框,
checked属性:设置默认选中
type="radio":单选,一组实现互斥的选择
通过name属性来实现分组
按钮相关
type="submit":提交类型的按钮
type="reset":重置类型的按钮,恢复到加载时
两种
type="hidden":隐藏域控件--界面上不显示,专用于记载那些不希望用户看见的关键数据
type="file":文件上传
value属性:如果是文本框或者密码框,value的值将显示在
如果是核选框/单选框,记载发送给服务器端的关键数据
如果是按钮类型,设置按钮上的文本
非<input>标记:
<select>和<option>:下拉框或者列表框(依靠size属性)
select 的常用属性:multiple实现多选,只能用于列表框
<textarea>:多行的文本区域
<label>:用来包含文本的,包含的文本和表单元素关联起来
for 属性: <label for="元素的id的值">文本</label>
11 列表:将一系列的选项按照分行对齐显示
<ol>:有序列表
<ul>:无序列表
<li>:list item
嵌套实现导航菜单的效果
12 框架元素(了解)
作用:在一个浏览器窗口或者页签中显示多个html页面
使用方式:
新建一个html文件,代码中使用框架元素划分页面并引入其他html文件
不需要body元素,包含如下:
<frameset rows="200,*">---使用rows或者cols属性划分
<frame src="a.html">---单标记,引入html页面
<frame src="b.html">
</frameset>
<iframe>标记:在一个非框架页面(普通html页面)上嵌入一个其他页面
练习:嵌套的列表/iframe 的使用
tts文档
额外加一个:
<!--DTD 定义的版本信息-->
<html>
<head>
<title>我的第一个页面</title>
<meta http-equiv="refresh" content="30">
</head>
<body>
<!--定义一个锚点:目标点-->
<a name="top"></a>
<a href="http://bbs.tarena.com.cn">click me</a>
段落前的文本<p>aaaaaaaa</p>段落后的文本
段落前的文本<br>aaaaaaaa<br>段落后的文本
<h1>第一章 html概述</h1>
<h2>1.1 html 起源</h2>
aaa<span>aaa</span>aaa<div>aaaa</div>aaaaaa
<a href="http://bbs.tarena.com.cn" target="_blank">
<img src="cat.jpg" width="200" title="miaomiao" >
</a>
<br>
<a href="#top">To Top</a>
为一副图像添加多个链接:
<img src="cat.jpg" width="200" height="200" usemap="#MyMap">
<map name="MyMap">
<area shape="circle" coords="50,150,50" href="a.html">
<area shape="rect" coords="100,0,200,100" href="http://bbs.tarena.com.cn">
</map>
<br>
用户名:aaa<br>
密码: bbb
</body>
</html>
<html>
<head>
<title>表单的用法</title>
</head>
<body>
<form>
用户名:<input value="录入登录用的邮箱"><br>
密码:<input type="password"><br>
选择你最喜欢的运动(可多选):
<input id="chkSwimming" type="checkbox" value="1" checked="checked">
<label for="chkSwimming">游泳</label>
<input type="checkbox" value="2">跑步
<input type="checkbox" value="3">羽毛球
<br>
性别(单选):
<input type="radio" name="sex">Male
<input type="radio" name="sex">FeMale
<input type="radio" name="sex">Unknown <br>
<input type="submit" value="注册">
<input type="reset" value="重写">
<input type="button" value="普通按钮">
<br>
隐藏域控件:aaaaa<input type="hidden" value="sfsddsdf">aaaa<br>
上传头像:<input type="file"><br>
选择学历(下拉框选择):
<select>
<option>本科</option>
<option>sss</option>
<option>ddd</option>
</select><br>
选择学历(列表框选择):
<select size="5" multiple>
<option>本科</option>
<option>sss</option>
<option>ddd</option>
<option>本科</option>
<option>sss</option>
<option>ddd</option>
</select><br>
自我介绍:
<textarea>
</textarea>
</form>
生成订单的步骤如下:
<ol>
<li>加入购物车</li>
<li>填写订单信息</li>
<li>支付</li>
</ol>
本章包含如下知识点:
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<h2>列表的嵌套</h2>
<ul>
<li>
java系列版
<ul>
<li>core java</li>
<li>jdbc</li>
<li>html</li>
</ul>
</li>
<li>
php系列版
<ul>
<li>unix</li>
<li>html</li>
</ul>
</li>
</ul>
嵌入一个页面(模拟广告页面):
<iframe src="first.html"></iframe>
</body>
</html>
<html>
<head>
</head>
<frameset rows="200,*">
<frame src="table.html">
<frame src="form.html">
</frameset>
</html>
<html>
<head>
<title>表格的用法</title>
</head>
<body>
<h2>表格的基本构成:table/tr/td</h2>
<table border="1" height="200" width="200" cellpadding="5" cellspacing="5">
<tr>
<td width="70" height="50">用户名:</td>
<td>aaa</td>
</tr>
<tr>
<td valign="bottom">密码:</td>
<td align="right">bbb</td>
</tr>
</table>
<h2>表格的完整结构</h2>
<table border="1" width="200" height="100">
<caption>描述性的标题</caption>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>b</td>
<td>2</td>
</tr>
<tr>
<td>c</td>
<td>3</td>
</tr>
</tbody>
</table>
<h2>不规则表格</h2>
<table border="1">
<tr>
<td colspan="2">
aaaa
</td>
</tr>
<tr>
<td>
原有的文本
<table border="1">
<tr><td>111</td></tr>
<tr><td>aaa</td></tr>
</table>
</td>
<td>c</td>
</tr>
</table>
<table border="1">
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>表格合并</title>
</head>
<body>
<form>
<table border="1" width="200">
<tr>
<td colspan="2">a</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td rowspan="2">b</td>
<td>c</td>
</tr>
<tr>
<td colspan="2">e</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
4159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
