习题HTML（web程序设计第8版）
2024-05-24 04:40:25
HTML初学
创建简单文档
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>三章十题</title><style type="text/css">li.img1{list-style-image: url(tv01.jpg);}li.img2{list-style-image: url(tv02.jpg);}li.img3{list-style-image: url(tv03.jpg);}li.img4{list-style-image: url(tv04.jpg);}li.img5{list-style-image: url(tv05.jpg);}</style></head><body><ul><li class="img1">平凡的世界</li><li class="img2">老人与海</li><li class="img3">爱的教育</li><li class="img4">接力1800</li><li class="img5">C程序设计</li></ul></body>
</html>
添加照片
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章二题</title></head><body><img src="同级图片.png" ></body>
</html>
链接与多段文本
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章三题</title></head><body><a href="链接与多段文本.html">经历</a><p>自我介绍：我是一名共产主义者，<br/>我为自己而骄傲。</p><p>工作经历：<br/>2020-2021任北京市委书记<p>2022-2023任中宣部部长</p></body>
</html>
无序列表
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章四题</title></head><body><h3>my grocery</h3><ul><li>apple</li><li>pear</li><li>orange</li></ul></body>
</html>
无序列表嵌套
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章五题</title></head><body><ul><li>山西省<ul><li>太原市</li><li>大同市</li><li>运城市</li></ul></li><li>山东省<ul><li>济南市</li><li>青岛市</li><li>聊城市</li></ul></li></ul><ul><li>河南省<ul><li>郑州市</li><li>洛阳市</li><li>商丘市</li></ul></li></ul><ul><li>河北省<ul><li>保定市</li><li>邯郸市</li><li>石家庄市</li></ul></li></ul></body>
</html>
有序列表
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章六题</title></head><body><ol><li>我和我的祖国</li><li>我和我的家乡</li><li>我和我的姐姐</li><li>夏洛特烦恼</li><li>肖申克救赎</li></ol></body>
</html>
有序套无序
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章七题</title></head><body><ol><li>我和我的祖国<ul><li>吴京</li><li>张译</li></ul></li><li>我和我的家乡<ul><li>黄渤</li><li>徐峥</li></ul></li><li>我和我的姐姐<ul><li>肖央</li><li>张子枫</li></ul></li><li>夏洛特烦恼<ul><li>沈腾</li><li>马利</li></ul></li><li>肖申克救赎<ul><li>男主</li><li>男二</li></ul></li></ol></body>
</html>
有序列表嵌套
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章八题</title></head><body><ol><li>母亲<ol><li>舅舅<ol><li>大表哥</li><li>二表哥</li><li>三表哥</li></ol></li><li>姨姨<ol><li>大表妹</li><li>二表妹</li><li>三表妹</li></ol></li></ol></li><li>父亲<ol><li>大伯<ol><li>大哥</li><li>二哥</li><li>三哥</li></ol></li><li>姑姑<ol><li>大姐</li><li>二姐</li><li>三姐</li></ol></li></ol></li></ol></body>
</html>
创建表格
代码如下（示例）：
<!DOCTYPE html>
<html><head lang=""><meta charset="utf-8"><title>二章九题</title></head><body><table border="10" cellspacing="" cellpadding=""><tr><th></th><th>Pine</th><th>Maple</th><th>Oak</th><th>Fir</th></tr><tr><th>Average Height</th><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><th>Average Width</th><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><th>Typical Life Span</th><td>10</td><td>11</td><td>12</td><td>13</td> </tr><tr><th>Leaf Type</th><td>14</td><td>15</td><td>16</td><td>17</td></tr></table></body>
</html>
合并单元格rowspan colspan
代码如下（示例）：
<html><head lang="en"><meta charset="utf-8"><title>二章十题</title></head><body><table border="" cellspacing="" cellpadding=""><tr><th rowspan="2" colspan="2"></th><th colspan="4">Tree</th></tr><tr><th>Pine</th><th>Maple</th><th>Oak</th><th>Fir</th></tr><tr><th rowspan="4" >C</th><th>Average Height</th><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><th>Average Width</th><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><th>Typical Life Span</th><td>10</td><td>11</td><td>12</td><td>13</td> </tr><tr><th>Leaf Type</th><td>14</td><td>15</td><td>16</td><td>17</td></tr></table></table></body>
</html>
创建表格
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章十一</title></head><body><table border="" cellspacing="" cellpadding=""><tr><th></th><th>省</th><th>省鸟</th><th>省花</th><th>省树</th></tr><tr><th>陕西</th><td></td><td></td><td></td><td></td></tr><tr><th>辽宁</th><td></td><td></td><td></td><td></td></tr><tr><th>山西</th><td></td><td></td><td></td><td></td></tr><tr><th>福建</th><td></td><td></td><td></td><td></td></tr><tr><th>江苏</th><td></td><td></td><td></td><td></td></tr> </table></body>
</html>
二级标签的应用
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章十二</title></head><body><table border="" cellspacing="" cellpadding=""><tr><th rowspan="2" colspan="2"></th><th colspan="3">Meals</th></tr><tr><th>Breakfast</th><th>Lunch</th><th>Dinner</th></tr><tr><th rowspan="4">Foods</th><th>Bread</th><td>1g</td><td>2g</td><td>3g</td></tr><tr><th>Main Course</th><td>4g</td><td>5g</td><td>6g</td></tr><tr><th>Vegetable</th><td>7g</td><td>8g</td><td>9g</td></tr><tr><th>Dessert</th><td>10g</td><td>11g</td><td>12g</td></tr></table></body>
</html>
简单公司主页
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章十三</title></head><body><h1>Tree Brancher有限公司</h1><p>枝条种类：</p><img src="同级图片.png" width="100" height="100"><a href="14.柳树枝条.html">柳树枝条</a><hr/ ><img src="同级图片.png" width="100" height="100"><a href="15.杨树枝条.html">杨树枝条</a><hr/ ><img src="同级图片.png" width="100" height="100"><a href="16.杏树枝条.html">杏树枝条</a><hr/ ><!--一个有序列表--><p>购买步骤：<ol><li>选择枝条种类</li><li>选择枝条数目</li><li>点击结算</li></ol></p><!--一个表格--><table border="" cellspacing="" cellpadding=""><tr><th></th><th>单价</th><th>产地</th></tr><tr><th>杨树</th><td>25</td><td>山西</td></tr><tr><th>柳树</th><td>35</td><td>北京</td></tr><tr><th>杏树</th><td>45</td><td>河北</td></tr></table><!--一个无序列表--><ul><li>公司地址：山西大同国际陆港121号</li><li>公司电话：3677-224</li></ul></body>
</html>
##柳树枝条
代码如下（示例）：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>介绍：<br/>应用：边框<br/>卖点：结实</p></body>
</html>
##杨树枝条
代码如下（示例）：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>介绍：<br/>应用：扫地<br/>卖点：耐用</p></body>
</html>
##杏树枝条
代码如下（示例）：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>介绍：<br/>应用：煮酒<br/>卖点：香甜</p></body>
</html>
创建表单
代码如下（示例）：
<!--表单顺序一定是form、p、lable、input-->
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章十四</title></head><body><form action="" method=""><!--文本框--><p><label>Usename:<input type="text" name="theUsename" size="10"/></label></p><!--复选框 如果不预先选中就不要写checked特性，即使是空值也不行，空值也会默认选中--><p><lable><input type="checkbox" name="light" value="i" checked="checked"/>4个25瓦的灯泡 &2.39</lable><br/><lable><input type="checkbox" name="light" value="ii" checked="checked"/>8个25瓦的灯泡 &4.29</lable><br/><lable><input type="checkbox" name="light" value="iii" />4个25瓦的长寿命灯泡 &3.95</lable><br/><lable><input type="checkbox" name="light" value="iv" />8个25瓦的长寿命灯泡 &7.49</lable></p><!--单选框 必须写name和value，且name的值必须一样，这样才能保证是同一组单选框。--><p><h5>Payment</h5><lable><input type="radio" name="payment" value="Visa" checked="checked"/>Visa</lable><lable><input type="radio" name="payment" value="Msater Card" />Msater Card</lable><lable><input type="radio" name="payment" value="Discover" />Discover</lable></p></form></body>
</html>
添加音频
代码如下（示例）：
<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>二章十五</title></head><body><!--i--><!DOCTYPE html><html><head lang="en"><meta charset="utf-8"><title>二章十三</title></head><body><h1>Tree Brancher有限公司</h1><p>枝条种类：</p><img src="同级图片.png" width="100" height="100"><a href="14.柳树枝条.html">柳树枝条</a><hr/ ><img src="同级图片.png" width="100" height="100"><a href="15.杨树枝条.html">杨树枝条</a><hr/ ><img src="同级图片.png" width="100" height="100"><a href="16.杏树枝条.html">杏树枝条</a><hr/ ><!--一个有序列表--><p>购买步骤：<ol><li>选择枝条种类</li><li>选择枝条数目</li><li>点击结算</li></ol></p><!--一个表格--><table border="" cellspacing="" cellpadding=""><tr><th></th><th>单价</th><th>产地</th></tr><tr><th>杨树</th><td>25</td><td>山西</td></tr><tr><th>柳树</th><td>35</td><td>北京</td></tr><tr><th>杏树</th><td>45</td><td>河北</td></tr></table><!--一个无序列表--><ul><li>公司地址：山西大同国际陆港121号</li><li>公司电话：3677-224</li></ul><!--添加不断播放的音频 如果有任一种资源可以播放，则跳过元素内容，如果都不能，只显示内容--><audio controls="controls"><source src=".Ogg" /><source src=".Wav" /><source src=".Mp3" />Do not support</audio><!--添加不断播放的视频 自动播放和一旦文档加载即播放--><video width="" height="" autoplay="autoplay" controls="controls" preload="preload"><source src=".mp4" /><source src=".flv" /><source src=".avi" />Do not support</video></body></html></body>
</html>
习题HTML（web程序设计第8版）相关推荐
- Web程序设计—ASP.NET实用网站开发（第三版）课后习题答案
Web程序设计-ASP.NET实用网站开发(第三版)课后习题答案 (沈士根.叶晓彤编著-清华大学出版社) 第一章 一.填空题: 1.NET Framework 主要包括 (CLR)和(.NET Fra ...
- ASP.NET Web程序设计习题与练习答案-祁长兴主编版
ASP.NET Web程序设计习题与练习答案 第1章 习题与练习 1.简答题 1)什么是MSDN,它包含哪些功能? 答案: MSDN(Microsoft Developer Network)是Micr ...
- java第二版课后题答案_Java语言程序设计第2版第16章 课后习题答案
<Java语言程序设计第2版第16章 课后习题答案>由会员分享,可在线阅读,更多相关<Java语言程序设计第2版第16章 课后习题答案(62页珍藏版)>请在人人文库网上搜索. ...
- c语言二分答案最小值,C语言程序设计第2版课后习题答案(贾宗璞许合利人民邮电-第2版).doc...
C语言程序设计第2版课后习题答案(贾宗璞许合利人民邮电-第2版) C语言习题答案 第1章 1．选择题 (1) C (2) B (3) 2．填空题 (1)main (2) main (3) 有穷性.确定 ...
- c语言程序设计第五版课后习题答案谭浩强第八章课后题
c语言程序设计第五版课后习题答案谭浩强第八章课后题 输入三个字符串,按由大到小的顺序输出 要求用指针实现 输入10个整数,将其中最小的数与第一个数对换,把最大的数与最后一个属兑换.写三个函数:1.输入 ...
- 《C语言程序设计(第五版)》习题答案
想看更多算法题,可以扫描上方二维码关注我微信公众号"数据结构和算法",截止到目前我已经在公众号中更新了500多道算法题,其中部分已经整理成了pdf文档,截止到目前总共有800多页( ...
- C语言程序设计第五版谭浩强课后答案 第九章习题答案
C语言程序设计第五版谭浩强第九章答案 1.定义一个结构体变量(包括年.月.日).计算该日在本年中是第几天,注意闰年问题. 2.写一个函数days,实现第1 题的计算.由主函数将年.月.日传递给days ...
- C++语言程序设计第五版 - 郑莉（第六章课后习题）
第6章 数组.指针与字符串 6-20 实现一个名为 SimpleCircle 的简单圆类.其数据成员 int* itsRadius 为一个指向其半径值的指针,存放其半径值.设计对数据成员的各种操作 ...
- C++语言程序设计第五版 - 郑莉（第四章课后习题）
第4章 类与对象 4-9设计并测试一个名为rectangle的矩形类,其属性为矩形的左下角与右上角坐标,根据坐标能计算矩形的面积. #include <iostream> using n ...
最新文章
- 在SharePoint 2010使用OWA查看自己邮箱的内容
- 并肩XGBoost、LightGBM，一文理解CatBoost！
- SQL Server DBA常见面试 笔试问题
- linux bash java,从Linux Bash Shell配置NIC
- [codevs 1298] 凸包周长 [codevs 3201] 奶牛代理商 XI
- [Leetcode][第977题][JAVA][有序数组的平方][排序][双指针]
- PTA 01-复杂度2 Maximum Subsequence Sum (25分)
- 从使用 KVO 监听 readonly 属性说起
- asp.net添加自定义用户控件并传值
- kali rolling source 16.1~~18.2
- 前端 docker + gitlab CI 的持续集成（三）
- (PTA)java基础编程题汇总
- 电子技术实训——多功能数字钟的设计
- ESET NOD32
- php 生成电话名片二维码
- Unity学习-RTTM总结（1）
- 大数据开发常用的编程语言有哪些
- 谷歌浏览器打开本地堡垒机应用发布服务器cmd的方法
- 基于Android的地铁查询系统app
- 初始Amazon S3