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，centervalign：设置表格在垂直方向的对齐方式，其值可为top，middle，baselinecolspan（跨多列）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>
标签：表格,练习,默认,列表,HTML,nbsp,属性 来源： https://blog.csdn.net/qq_42907061/article/details/117917706
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。