后面的内容是分两节课上的，但便于方面查看，我把HTML后面剩的标签全都写在这个文档里面。首先学习了图像和链接，锚点，表格，不规则表格，表格嵌套，结构标记，表单，文本框与密码框，按钮设置。
图像的标签：
hh
链接元素大部分都是<a>：
<a href="" target="">文本</a>
– href 属性：链接 URL – target 属性：
目标，可取值为 _blank、_self 等 – name 属性：锚点名称 <a href="http://www.google.com.hk">To Google</a> <br /> <a href="teacher/teacher.asp" target="_blank"> To other page </a>
alt搜索引擎优化
target 属性有两个值，默认_self,_blank打开一个新的窗口
name属性，作为锚点，可以回到当前标签
下载直接给压缩地址
mailto 调用邮件，发送给后面的对象
定义表格：使⽤用成对的 <table></table>
创建表⾏行：使⽤用成对的 <tr></tr> 标记
创建单元格：使⽤用成对的 <td></td> 标记
表格的常用属性：
<table>元素 – width
设置表格宽度 – height
设置表格高度 – align
设置表格对齐方式(left|center|right) –
border设置表格边框宽度 –
cellpadding设置内边距(单元格边框与内容之间的距离) –
cellspacing设置外边距(单元格之间的距离) –bgcolor设置表格背景颜色
<tr>元素 –
align设置水平对齐方式(left|center|right) –
valign设置垂直对齐方式(top|middle|bottom) <td>元素 –
align设置水平对齐方式(left|center|right) –
valign设置垂直对齐方式(top|middle|bottom) – width设置宽度 –
height，设置高度 –
colspan，设置单元格跨列 –
rowspan，设置单元格跨行
表格标题<caption></caption>
行分组
表格可以划分为3个部分：表头、表主体和表尾
表头行分组：<thead></thead>
表主体⾏行分组：<tbody></tbody>
表尾⾏行分组：<tfoot></tfoot>
不规则表格
设置单元格 <td> 的跨⾏行或者跨列属性
跨列：colspan – ⽔水平⽅方向延伸单元格，值为正整数，代表此单元格⽔水平延伸的单元格数
跨行：rowspan – 垂直⽅方向延伸单元格，值为正整数，代表此单元格垂直延伸的单元格数
结构标记经常使用<div>HTML5为了标记方便通常分为页头部分<div id="herder"></div>
页面的主体部分<div id="main"></div>
页面的结束部分<div id="footer"></div>
表单元素通常用<form></form>标记，表单的控制元素主要有：input元素，textarea元素，select和option元素，
⽂文本框与密码框
文本框：<input type =“text” />
密码框：<input type =“password”/>
主要属性 name：名称
value ：由访问者⾃自由输⼊入的任何⽂文本 maxlength ：限制输⼊入的字符数
readonly ：设置⽂文本控件只读
单选框和复选框
单选框： <input type=“radio”/>
复选框： <input type=“checkbox” />
按钮
提交按钮： <input type=“submit”/>
传送表单数据给服务器端或其它程序处理
重置按钮： <input type=“reset” /> –
清空表单的内容并把所有表单控件设置为最初的默认值 •
普通按钮： <input type=“button” />
用于执行客户端脚本
其他还有<label>元素
选项框有两种：下拉选项框和滚动列表
可能还需要补充的有许多，用的特别不熟，希望自己多练一下，把写出来的，没有写出来的都能运用。下面是用这些标签写的程序：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<table border="1"cellpadding="20" cellspacing="0">
<caption>修改个人信息</caption>
<tr>
<td width="50">姓名：</td>
<td width="300"><input type="text" value="mary"></td>
<td rowspan="7" width="150" valign="top">
<details>
<summary>各项<mark>技能</mark>指数</summary>
<ul type="none">
<li>HTML：<meter max="100" min="0" value="100" title="100%"></meter></li>
<li>CSS3：<meter max="100" min="0" value="90" title="90%"></meter></li>
<li>AJAX：<meter max="100" min="0" value="50" title="50%"></meter></li>
</ul>
</details>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
女士<input type="radio" value="1" name="city">
男士<input type="radio" value="2" name="city">
</td>
</tr>
<tr>
<td>学历：</td>
<td>其他<select name="xueli" size="1" multiple="3"></select></td>
</tr>
<tr>
<td >意向工作城市：</td>
<td>
<select name="chengshi" size="5" multiple>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>个人描述</td>
<td><textarea name="" id="" colos="3" rows="4"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="remeberpassword" id="remeberpassword">
<label for="remeberpassword">不要公开我的信息</label>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="submit"="保存">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
02
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>京东</title>
</head>
<body>
<form>
<div id="header"><img cellspacing src="j01.jpg" alt=""></div>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<td rowspan="8" width="300"><img width="500" height="500" cellspacing src="j03.jpg" alt=""> </td>
<td width="200"> 用户名/邮箱：</td>
</tr>
<tr>
<td> <input type="text" value="mary@163.com"></td>
</tr>
<tr>
<td>密码</td>
</tr>
<tr>
<td><input type="text" value=""></td>
</tr>
<tr>
<td> <input type="checkbox" name="remeberpassword" id="remeberpassword">
<label for="remeberpassword">自动登陆</label> </td>
</tr>
<tr>
<td align="center">
<input type="submit"="登陆">
<input type="reset">
</td>
</tr>
<tr>
<td>使用京东合作账号登陆</td>
</tr>
<tr>
<td align="right">
<input type="radio" value="1" name="city" >QQ
<input type="radio" value="2" name="city"
>京东账号
</td>
</tr>
<tr>
<td colspan="2" align="right"> <img cellspacing src="j02.jpg" alt=""></td>
</tr>
</table>
</form>
</body>
</html>
网友评论