HTML练习
1. HTML简介
- HTML注释标记是
<!- -> - HTML不用区分大小写，但是建议用小写
- 当网页既设置了背景图像有设置了背景色，那么以背景图片为主
- URL：统一资源定位器（uniform Resource Locator）
- http：超文本传输协议
- HTML后缀:.htm和.html
- 在网页中,可以使用书签连接方法制作帮助文档
2. HTML基本标签
- 斜体：
<i></i> - 粗体：
<b></b> - 删除线：
<s></s> - 一条横线：
<hr> - 段落标记：
<p></p> - 预格式
<pre> - 回车：
<br> - 下划线：
<u></u> - 上标：
<sup></sup> - 下标：
<sub></sub> - 空格：
html默认是一个空格，如果需要多个空格就需要nbsp - 着重元素：
<em>标记出需要用户着重阅读的内容，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。 - 小于：
<lt></lt> - 大于：
<gt></gt> - navigator：版本
- font
<p><font size=2 face='隶书'>欢迎访问我的主页！<font>
li 标记里的type属性设置的影响范围是只影响当前列表项
- 地图
target:目标的打开方式
<img src="3.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="福建" title="福建" href="https://www.fujian.gov.cn/" coords="846,628,825,643,809,667,803,693,816,706,826,730,841,709,853,704,867,690,875,671,886,647" shape="poly">
</map>
</img>
3. 列表
3.1 有序列表
<ol>
<li></li>
</ol>
【属性】
- type:指定列表项标志的类型，默认为数字排列 取值：1（默认值）/a/A/i/I
- start:定义起始值(一定是数字)，默认从1开始取值：数字，如：start:1;
3.2 无序列表
<ul>
<li></li>
</ul>
【属性】
- type：指定无序列表的列表项标识取值：
disc:实心圆
circle:空心圆
square:实心矩形
案例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<embed src="1.mp3" hidden="false" autostart="false" loop="true">
<p> 中国</p>
<ol type="1" start=1>
<li>安徽
<ul type='disc'>
<li>合肥</li>
<li>滁州
<ul type='circle'>
<li>来安</li>
<li>天长</li>
<li>全椒</li>
</ul>
<li>芜湖</li>
</li>
</ul>
</li>
<li>北京</li>
<li>上海</li>
</ol>
</embed>
</body>
</html>
案例2:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>列表练习</title>
</head>
<body>
<ol type="I" start=1>
<li>引言</li>
<li>第一部分
<ol type='A' start=1>
<li>说明</li>
<li>例子
<ul type='disc'>
<li>案例1</li>
<li>案例2</li>
</ul>
</li>
</ol>
</ul>
</li>
<li>第二部分</li>
<li>总结</li>
</ol>
</body>
</html>
4. 多媒体和超链接
4.1 多媒体
图片：
<img src="2.png" width="400" height="400">
背景音乐：
<embed src="de.mp3" hidden="true" autostart="true" loop="true">
<bgsounds>
4.2 超链接
链接： <a></a>
属性：
href：链接地址
target：打开方式
_blank：新标签页打开
_self：当前页面打开（默认）
<a id="top" href="#bottom">这里是顶部，点击我去往底部！</a>
<a id="bottom" href="#top">这里是底部，点击我返回顶部！</a>
<a href="https://www.cqupt.edu.cn/"><font size=5 color=#33ccff>超级链接练习</font>
跳转到锚点一定要在href的参数前面加上# title：链接提示（书签链接）
5. 表格
表格是一种能够有小描述信息的组成形式，有行，列和单元格组成
案例:
<html>
<head></head>
<body>
<capital align='center'>学生情况表</capital>
<table border="1" align='center' width=500 height=200>
<tr align='center'>
<td rowspan="2">学号</td>
<th colspan=3 >个人信息</th>
<th colspan=2 >入学信息</th>
</tr>
<tr align='center'>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>班级</td>
<td>入学年月</td>
</tr>
<tr>
<td>007</td>
<td>东方不败</td>
<td>不详</td>
<td>19</td>
<td>200303</td>
<td>2003月9月</td>
</tr>
<tr>
<td>008</td>
<td>任我行</td>
<td>男</td>
<td>20</td>
<td>200303</td>
<td>2003日9月</td>
</tr>
</table>
</body>
</html>
学生情况表
| 学号 | 个人信息 | 入学信息 | |||
|---|---|---|---|---|---|
| 姓名 | 性别 | 年龄 | 班级 | 入学年月 | |
| 007 | 东方不败 | 不详 | 19 | 200303 | 2003月9月 |
| 008 | 任我行 | 男 | 20 | 200303 | 2003日9月 |
- 表格标题的html是
<capition align=# valign=#></caption>默认效果为标题顶部居中显示 - table中常用的属性
border：定义表格边线，表格默认是没有边线的。 -
cellpadding的意思是单元格的填充 -
cellspacing的意思是单元格之间的空隙 -
align：设置表格在水平方向的对齐方式，其值可为left，right，center -
valign：设置表格在垂直方向的对齐方式，其值可为top，middle，baseline -
colspan（跨多列） -
rowspan（跨多行） - colspan（跨多列）、rowspan（跨多行）是td（默认左对齐）和th（表头，默认居中对齐）的专属标记
<th colspan="2">Telephone</th>、<th rowspan="2">Telephone:</th>
6. 表单
- HTML表单的作用是收集用户反馈信息
- 表单域的控件:单行文本框(
text) 复选框(checkbox) 下拉菜单(<select><option>) - 在指定单选框时,只有将
name属性的值指令为相同,才能使他们成为一组 - method属性的取值可以为get和post之一,默认是get
<form></form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>国家摄影师考评在线系统</title>
</head>
<body>
<form action="1.htm" method="get">
<table border=1 bordercolor=#004080 align="center" celladding="0" cellspacing="0" >
<tr bordercolor=#004080><td align="center" width=200>姓 名：</td><td width=800> <input type="text" name="text" value="">*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>性 别：</td><td> <input type="radio" name="gender" value="0">男<input type="radio" name="gender" value="1">女 *</td></tr>
<tr bordercolor=#004080><td align="center" width=200>出生日期：</td><td> <input type="text">年<input type="text">月<input type="text">日*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>文化程度：</td><td>
<select name="whcd">
<option value="gz">高中</option>
<option value="dx">大学</option>
<option value="yjs">研究生</option>
<option value='bss'>博士生</option>
</select>*</td></tr>
<tr bordercolor=#004080><td align="center" width=200>所在省份：</td><td>
<select name="szsf">
<option value="bj">北京</option>
<option value="cq">重庆</option>
<option value="cd" selected>成都</option>
</select>*</td></tr>
<tr><td align="center" width=200>联系地址：</td><td> <input type="text">*</td></tr>
<tr><td align="center" width=200>邮政编码：</td><td> <input type="text">*</td></tr>
<tr><td align="center" width=200>联系电话：</td><td> <input type="text">*</td></tr>
<tr><td align="center" width=200>电子信箱：</td><td> <input type="text"></td></tr>
<tr><td align="center" width=200>类 别：</td><td>
<select name="whcd" >
<option value="hs">函授</option>
<option value="js">讲师</option>
<option value="bs">博士</option>
<option value="yjs">研究生</option>
</select>*</td></tr>
<tr><td align="center" width=200>报考层次：</td><td>
<select name="whcd" >
<option value="gj">高级</option>
<option value="zj">中级</option>
<option value="cj">初级</option>
</select>*</td></tr>
<tr><td align="center" width=200>报考专业：</td><td>
<select name="whcd" size="">
<option value="gjsy">国家摄影师等级考评</option>
<option value="mba">MBA考试</option>
<option value="yjs">研究生入学考试</option>
</select>*</td></tr>
<tr><td align="center" width=200>备注：</td><td> <textarea name="bz" cols=60 rows=5 ></textarea></td></tr>
<tr><td align="center" width=200></td>
<td align="center">
<input type="submit" name="ok" value="提交">
<input type="reset" name="re-input" value="重填">
</td>
</tr>
</table>
</form>
</body>
</html>
</head>
<body>
<table>
<tr>
<td id="head" colspan="2">◼︎同城网在线调查</td>
</tr>
<tr>
<td>你从哪里知道同城的</td>
<td>
<select>
<option value="网上搜索">网上搜索</option>
<option value="朋友推荐">朋友推荐</option>
</select>
</td>
</tr>
<tr>
<td>你正在使用的同城网服务</td>
<td>
<input type="checkbox" value="免费社区">免费社区</input>
<input type="checkbox" value="免费留言簿">免费留言簿</input>
<input type="checkbox" value="免费投票">免费投票</input>
</td>
</tr>
<tr>
<td>你希望我们提供哪些新服务</td>
<td>
<input type="checkbox" value="聊天室">聊天室</input>
<input type="checkbox" value="博客">博客</input>
<input type="checkbox" value="游戏系统">游戏系统</input>
</td>
</tr>
<tr>
<td>你是同城网的会员吗</td>
<td>
<input type="radio" id="is-member-yes" name="is-member" value="是">
<label for="is-member-yes">是</label>
<input type="radio" id="is-member-no" name="is-member" value="否">
<label for="is-member-no">不是</label>
</td>
</tr>
<tr>
<td valign="top">你对同城网的其他意见</td>
<td>
<textarea name="opinions" id="opinions" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button>提交</button>
</td>
</tr>
</table>
</body>
</html>