第一章 HTML基础 ② 代码(练习、作业)
2024-07-02 08:20:41
HTML 第一章节 代码部分
一、新闻的构造
代码、图片布局如下：
代码如下：（test001.html）
<html><head><title>劳动者</title><meta charset="utf-8"/></head><body><h1>“你们是辛勤的劳动者，我专门来看看你们”</h1><h2>（原标题：“你们是辛勤的劳动者，我专门来看看你们”）</h2><img src="1.png"/><p>对“快递小哥”来说，有两年的春节令他印象深刻。</p><p>2019年春节前夕，XX前门石头胡同快递站点，正准备出门送货的快递小哥遇到了前来看望他们的领导。</p></body>
</html>
运行结果：
二、孙悟空简介
代码、图片布局如下：
代码如下：(Noname1.html)
<!DOCTYPE HTML>
<html><head><title> 孙悟空简介</title></head><body><h1>孙悟空 （中国古典名著《西游记》中的主角）</h1><img src="2.jpg"/ width="100" height="150" align="right"><hr><p>孙悟空（又称齐天大圣、孙行者、斗战胜佛），是中国古典神魔小说《西游记》中的主要角色之一。由开天辟地产生的仙石孕育而生，出生地位于东胜神洲的花果山上，因带领猴群进入水帘洞而被尊为 “美猴王”。为了学艺而漂洋过海拜师于须菩提祖师，得名孙悟空，学会大品天仙诀、地煞数七十二变、筋斗云等高超的法术。</P><p>出师的孙悟空为得兵器，在东海龙宫取得如意金箍棒， 后大闹地府勾去生死簿， 惊动上天而被玉皇大帝招安，封为弼马温。 [75] 得知职位低卑后怒返花果山， 并战胜李天王和哪吒三太子的讨伐， 迫使玉帝封其为齐天大圣，并在天宫建有府邸，奉旨管理蟠桃园。 [79] 因醉酒搅乱王母的蟠桃盛会、偷吃太上老君的金丹， 炼成了金钢之躯，后在太上老君的八卦炉中眼睛被熏成火眼金睛。 [90] 之后大闹天宫，十万天兵天将、四大天王、二十八星宿对其围剿亦不能将其打败， [91] 后来在与如来佛祖的打赌斗法中失利，被压在如来用五指化作的五行山下五百余年悔过自新。 后经观音点化，被唐僧救出，法号行者，保护唐僧西天取经， 一路降妖除魔，不畏艰难困苦，历经九九八十一难，最后取得真经修成正果，被封为斗战胜佛。 [182] </p><hr><h2>打怪的等级</h2><ul><li>一级妖怪</li><li>二级妖怪</li><li>三级妖怪</li><li>四级妖怪</li></ul><p>师徒四人关系</p><dl><dt>师傅</dt><dd>唐僧</dd><dt>二师弟</dt><dd>猪八戒</dd><dt>三师弟</dt><dd>沙悟净</dd></dl></body>
</html>
运行结果：
三、四季轮回转换 标签 src 内部属性
代码、图片布局如下：
原理：
“春天—>夏天”的代码如下：(Noname2四季轮回.html)
<!DOCTYPE HTML>
<html><head><title> 四季轮回 </title></head><body><h1>春天</h1><img src="chuntian.jpg" width="100" height="150"><br><a href="Noname3夏天.html">进入夏天</a></body>
</html>
“夏天—>秋天”的代码如下：(Noname3夏天.html)
<!DOCTYPE HTML>
<html><head><title> 夏天 </title></head><body><h1>夏天</h1><img src="xiatian.jpg" width="100" height="150"><br><a href="Noname4秋天.html">进入秋天</a></body>
</html>
“秋天—>冬天”的代码如下：(Noname4秋天.html)
<!DOCTYPE HTML>
<html><head><title> 秋天 </title><body><h1>秋天</h1><img src="qiutian.jpg" width="100" height="150"><br><a href="Noname5冬天.html">进入冬天</a></body>
</html>
“冬天—>春天”的代码如下：(Noname5冬天.html)
<!DOCTYPE HTML>
<html><head><title> 冬天 </title></head><body><h1>冬天</h1><img src="dongtian.jpg" width="100" height="150"><br><a href="Noname2四季轮回.html">进入春天</a></body>
</html>
运行结果如图所示：
四、音乐短视频播放
代码、图片布局如下：
代码如下：（Noname3曲音.html）
<!DOCTYPE HTML>
<html><head><title> New Document </title></head><body><h3>播放音乐</h3><audio src="新二曲.mp3" controls=controls></audio><h3>播放音乐</h3><video src="飞书笔法.mp4" controls=controls width="400" height="200"></video></body>
</html>
运行结果如下：
五、小说目录 索引 锚点
代码如下：
// A code block
<!DOCTYPE HTML>
<html><head><title>小说目录</title></head><body><!--网络小说网址：https://book.qidian.com/info/1033908507/#Catalog--><table border="1" align="center"><tr><td colspan="3" align="center" >心有万里星海 </td> <!--clospan 合并单元格--></tr><tr><!--href：（全称：Hypertext Reference，超文本引用）--><td><a href="#第一章 重逢">第1章 重逢</a></td> <td><a href="#第2章 担忧">第2章 担忧</a></td><td><a href="#第3章 喜讯">第3章 喜讯</a></td></tr><tr><td><a href="#第4章 热血">第4章 热血</a></td><td><a href="#第5章 进驻发射中心">第5章 进驻发射中心</a></td><td><a href="#第6章 最好的礼物">第6章 最好的礼物</a></td></tr><tr><td><a href="#第7章 有惊无险">第7章 有惊无险</a></td><td><a href="#第8章 戈壁之行">第8章 戈壁之行</a></td><td><a href="#第9章 患难见真情">第9章 患难见真情</a></td></tr><tr><td><a href="#第10章 新征程">第10章 新征程</a></td><td></td><td></td></tr><hr></table><h1><a name="第一章 重逢">第1章 重逢</a></h1><!--可复制的该小说网址：https://www.mayiwxw.com/97_97848/40832481.html--><p>“16日上午9时10分左右，征途二号F遥十二运载火箭在西北发射中心点火起飞。火箭搭载了星海十二号载人飞船。3名航天员正式向太空出发！”</P><p>.......</p><h1><a name="第2章 担忧">第2章 担忧</a></h1><p>你记得云毅吗？”云星海试探着问。</P><p>......</P>运行结果如下：
六、标题超链接制作
代码如下：
<!DOCTYPE HTML>
<html><head><title>HTML5 发展历程</title></head><body><h1>HTML5 发展历程</h1><a href="http://www.tup.tsinghua.edu.cn/index.html">清华大学出版社</a><a href="https://www.w3school.com.cn/">w3school 在线教程</a><a href="https://www.w3school.com.cn/w3c/w3c_china.asp">W3C 中国</a><p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。</P><p>在前五年（1990-1995），HTML经历了多次修订并经历了许多扩展，主要是在欧洲核子研究中心首先托管，然后是IETF。</p><p>随着W3C的创建，HTML的发展再次改变了场地。 1995年第一次尝试在HTML 3.0中扩展HTML，然后在1997年完成了一种称为HTML 3.2的更实用的方法。同一年晚些时候，HTML 4.01很快就出现了。</p><p>第二年，W3C成员决定停止发展HTML，而是开始研究基于XML的等价物，称为XHTML。这项工作始于XML中的HTML 4.01重新编写，称为XHTML 1.0，除了新的序列化之外没有添加任何新功能，并且在2000年完成。在XHTML 1.0之后，W3C的重点转向使其他工作组更容易在XHTML模块化的旗帜下扩展XHTML。与此同时，W3C还开发了一种与早期HTML和XHTML语言不兼容的新语言，称之为XHTML 2.0</P><p>大约在1998年停止HTML演变的时候，浏览器供应商开发的HTML部分API被命名并以DOM Level 1（1998年）和DOM Level 2 Core和DOM Level 2 HTML（从2000年开始）发布。最终于2003年）。这些努力随后逐渐消失，2004年发布了一些DOM Level 3规范，但工作组在所有3级草案完成之前就已关闭。</P><p>......</p></body>
</html>
运行结果如下：
七、使用sup sub标签
代码如下：
<!DOCTYPE HTML>
<html><head><title> sub sup </title><meta charset="utf-8"/></head><body><p>解方程：x<sup>2</sup>+2x-3=0</p><p>解：把常数项移项得：<sup>2</sup>+2x=3</p><p>等式两边同时加1（构成完全平方式）得：x<sup>2</sup>+2x+1=4</p><p>因式分解得：(x+1)<sup>2</sup>=4</p><p>解得：<sub>1</sub>=-3,x<sub>2</sub>=1</p></body>
</html>
运行结果如下：
八、b i em u strong 标签的使用
代码如下：
<!DOCTYPE HTML>
<html><head><title> b i em strong </title></head><body><p>草地上有一所房子，一所<b>漂亮的红色的</b>房子。（b元素）</p><p>房子的名字叫做：<i>HAPPY HOUSE</i>。（i元素）</p><p><em>兔妈妈和小兔子们</em>一起生活在这里。（em元素）</p><p>它们每天都感觉到<strong>非常的幸福</strong>。（strong元素）</p></body>
</html>
运行结果如下：
九、个人简介 图片 标签
代码、图片布局如下：
代码如下：（Noname1th个人简历.html）
<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title></head><body><h1 align="center">个人简介</h1><hr/><img src="th.jpg" align="left"><p>姓名：<b><u><font size="10" color="red">th</font></u></b></p><p>性别：男</p><p>年龄：18</p><p>个人简介：他很帅他很帅他很帅他很帅他很帅他很帅他很帅他很帅他很帅他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖。</p></body>
</html>
运行结果如下：
十、基础标签 标题标签 常用标签
代码如下：
<!DOCTYPE HTML>
<html><head><meta charset="utf-8"/><title> New Document </title></head><body><h1>第一章 HTML基础</h1><b><hr/></b><h2>1.课程目标</h2><p>.掌握HTML标签的使用</p><p>.掌握css的用法</p><p>.能进行网络布局</p><h2>2.本章内容</h2><h3>2.1.HTML概述</h3><h4>2.2.1什么是HTML</h4><p>HTML的全程为超文本标记语言，是一种标记语言<sup>[1]</sup>。<p></body>
</html>
运行结果如下：
第一章 HTML基础 ② 代码(练习、作业)相关推荐
- 计算机基础知识作业,第一章计算机基础知识作业
第一章计算机基础知识作业 读书之法,在循序而渐进,熟读而精思 作业一计算机基础知识 一.作业目的 1．掌握 1)计算机的发展历史: 2)计算机的主要特点和应用领域: 3)计算机系统硬件组成和工作原理: ...
- 第一章 JDBC基础操作 ② 代码
第一章 JDBC基础操作 ② 代码 1.jar包的安装与异常处理 1.1安装jar包 1.2 异常报错 3.异常处理 2.连接数据库 3.调用数据库 3.1 异常处理 4.数据库操作:增删改查 5.定 ...
- 使用HTML5和CSS3第一章HTLM5基础课后作业
第三题,制作聚美优品常见问题页面. <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业
使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业 第三题,制作聚美优品常见问题页面. <!DOCTYPE html> <html lang="en&qu ...
- 第一章计算机基础知识作业答案,第一章 计算机基础知识.doc第一次作业
交流 借鉴 第一章 计算机基础知识 一.单选题 1． 第四代电子计算机是( C )计算机. A．电子管 B．晶体管 C．大规模集成电路 D．人工智能 2．第一台电子计算机是1946年在美国研制的,该机 ...
- 计算机术语new一个,微机原理第一章计算机基础知识(new)
<微机原理第一章计算机基础知识(new)>由会员分享,可在线阅读,更多相关<微机原理第一章计算机基础知识(new)(47页珍藏版)>请在人人文库网上搜索. 1.1.第一章计算机 ...
- 微机计算机原理及应用ppt,微机原理及应用-第一章 计算机基础知识课件.ppt
<微机原理及应用-第一章 计算机基础知识课件.ppt>由会员分享,提供在线免费全文阅读可下载,此文档格式为ppt,更多相关<微机原理及应用-第一章 计算机基础知识课件.ppt> ...
- 《零成本实现Web自动化测试--基于Selenium》第一章 自动化测试基础
第一篇 Selenium 和WebDriver工具篇 第一章 自动化测试基础 1.1 初识自动化测试 自动化测试有两种常见方式 1.1.1 代码驱动测试,又叫测试驱动开发(TDD) 1.1.2 ...
- 人工操作阶段计算机是如何工作的,第一章计算机基础概述全解.ppt
第一章计算机基础概述全解 1.2.3 汉字编码 汉字的编码 国标码:中文内码之一,汉字信息交换的标准编码.国标码是不可能在计算机内部直接采用.于是, 汉字的机内码采用变形国标码 . 国标码:作为转换为 ...
最新文章
- 一笔画问题 连通图（搜索+队列）
- Python切片中的误区与高级用法
- DevOps/.NET 微服务 秋季分享会领优惠门票
- extern关键字讲解
- 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
- 小米架构调整：将销售与服务部改组为中国区 王川任总裁
- 锻炼编程思维的小题目
- C#_串口通信_SerialPort_一个最基础的串口程序
- 【Python】SyntaxError: Non-ASCII character '\xe8' in file
- 加载项目失败的解决办法
- 手工制作totem播放器的播放列表
- 人到中年想学一门手艺自己创业好不好
- 数据库一条insert插入多条记录
- CYCADA: cycle-consistent adversaial domain adaption阅读笔记
- 《游戏引擎架构》读书笔记（二）
- FPGA数字信号处理（二）并行FIR滤波器Verilog设计
- 《途客圈创业记：不疯魔，不成活》一一2.7 愿景和使命
- 偶数乘2奇数乘3C语言,输入一个整数x,如果为偶数乘2,否则乘3,然后输出.C语言
- linux的nslookup命令,Linux nslookup命令
- powershell使用总结