w3cschool实战答案
2024-05-11 13:43:23
关于HTML最快入门的方法估计就是把W3Cschool的实战编程做一遍吧
实战传送门
下面是所有题目的答案 想快速查找你要的答案 请使用Ctrl + F
开始学习HTML标签
<h1>Hello World</h1>
HTML 学习h2标签
<h1>Hello World</h1><h2>CatPhotoApp</h2>
HTML 学习p标签
<h1>Hello World</h1>
<h2>你好html</h2>
<p>Hello Paragraph</p>
删除HTML的注释
<h1>Hello World</h1><h2>你好html</h2><p>Hello Paragraph</p>
HTML注释语句学习
<!--
<h1>Hello World</h1>
-->
<h2>html编程入门教程</h2>
<!--
<p>Hello Paragraph</p>
-->
HTML用占位符文本填补空白
<h1>西游记</h1><h2>齐天大圣</h2><h2>孙悟空</h2><p>Monkey code 猴哥猴哥，你真了不得，五行大山压不住你，蹦出个孙行者。</p>
删除HTML标签
<h2>编程入门教程</h2><p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
HTML 更换文本的颜色
<h2 style="color:red">html编程入门教程</h2><p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
使用CSS选择器定义标签
<style>h2{color: blue;}
</style>
<h2>html编程入门教程</h2><p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
使用一个CSS Class去给标签定义Style
<style>
.red-text{color: red;
}
</style><h2 class="red-text">html编程入门教程</h2><p>在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
HTML 为多个元素使用CSS类定义样式
<style>
.red-text {color: red;
}
</style><h2 class="red-text">html编程入门教程</h2><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
HTML 设置标签的字体大小
<style>.red-text {color: red;}p{font-size: 30px;}
</style><h2 class="red-text">我家的猫咪</h2><p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
<p>养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
</p>
HTML 设置标签的字体样式
<style>
.red-text {color: red;
}
.Monospace {font-family: Monospace
}
p {font-size: 16px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="Monospace">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
引入Google字体
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>
.red-text {color: red;
}
h2{font-family: Lobster;
}
p {font-size: 16px;
font-family: Monospace;
}
</style><h2 class="red-text">CatPhotoApp</h2><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 处理多个字体降级
<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
<style>
.red-text {color: red;
}
h2 {font-family: Lobster, Monospace;
}
p {font-size: 16px;
font-family: Monospace;
}
</style><h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 给页面添加图片
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}
</style>
<img src='/statics/codecamp/images/relaxing-cat.jpg' alt="这里应该有个图片">
<h2 class="red-text">html编程入门教程</h2><p class="red-text">猫咪猫咪我就喜欢你</p>
<p class="red-text">深深地爱上你</p>
<p class="red-text">没有理由没有原因</p>
<p class="red-text">从见到你的那一天起</p>
<p class="red-text">你知道我在等你吗?</p>
<p class="red-text">你如果真的在乎我</p>
<p class="red-text">又怎会让无尽的夜陪我度过</p>
<p class="red-text">猫咪猫咪我就喜欢你</p>
<p class="red-text">深深地爱上你</p>
<p class="red-text">在黑夜里倾听你的声音</p>
HTML 调整网页里图片大小
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.smaller-image{width: 100px
}.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}</style><h2 class="red-text">CatPhotoApp</h2><img class="smaller-image" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg" ><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 给标签增加边框
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.smaller-image {width: 100px;
}
.thick-green-border {border-width:10px;border-style:solid;border-color:green;
}
</style><h2 class="red-text">CatPhotoApp</h2><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 给标签增加圆角边框
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster,Monospace ;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-radius: 10px;
border-style: solid;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">html编程入门教程</h2><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"><p class="red-text">我家两岁的小公猫哈哈是个收藏家，臭鱼烂虾，鸡头猪手，无所不爱。清晨我还在睡梦中，突然觉得胸口一沉，恍惚中意识到哈哈又跑到我身上来撒娇，心里不由得滚起温暖的热流，拉过哈哈一把从头摸过背，小家伙顺势想往被子里钻，我一边拒绝着一边往上拉被子，突然脚下一凉，烂泥一样挂在我的大脚趾上的是一块垃圾箱里的鱼头！我顿时睡意全无，换床单洗被罩，天光放亮才勉强收拾妥当。害得我带着熊猫眼跑去上班，一天都没有好心情。实在搞不懂它为什么爱把垃圾叼上床，是故意恶作剧？还是我给的猫粮不够吃？</p>
<p class="red-text">有时候猫会把主人当成自己的孩子(听起来有点令人窝心)，这种行为是在给家里带来猎物。它把自己看成是家里的顶梁柱，有责任给不争气的主人找来食物——猫咪通过长时间对你的观察，沉痛地发现你不会打猎。经常出门的猫咪会把它逮到的老鼠、小鸟带回家里，不出门的就经常翻翻垃圾箱找点东西给你。这个时候，主人可不要责骂它，不然它会认为你对它带回来的食物不满意，下次去找更了不起的东西带回来，放在房间里最显眼的地方。但如果你看见它往家里运输死老鼠，最好也别谢它，别让它觉得你对这种猎物很满意，下次照单带回来。最好的办法是心里感念着猫咪所为你做的，并默默地收拾好一切。</p>
HTML 给图像设置圆角边框
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}.smaller-image {width: 100px;
border-radius:50%;
}
</style><h2 class="red-text">CatPhotoApp</h2><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 设置链接锚元素外部页面
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {width: 128px;background-size: cover;border-radius: 200px;box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);border: 3px solid #00a0ff;opacity: 1;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;transition: all 1.0s;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text"><a href="http://freecatphotoapp.com">cat photos</a>App</h2><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 在p标签内设置锚链接
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><p>View more <a href="https://www.w3cschool.cn"></a>suibianshudianshenme</p>
<h2 class="red-text">CatPhotoApp</h2><a href="https://www.w3cschool.cn">cat photos</a><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 使用#符号设置固定链接
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href=#>cat photos</a>.</p><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 为图片设置超链接
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href='#'><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 为图片添加alt描述
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 创建项目符号无序列表
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a>
<ul><li>mike</li><li>cheese</li><li>mike</li>
</ul><p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>
HTML 创建有序列表
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol><li>12</li><li>12</li><li>12</li>
</ol>
HTML 创建文本输入框
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><input type="text">
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
HTML 为文本输入框设定预定值
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><input type="text" placeholder="cat photo URL">
<h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<input type="text">
HTML 添加表单
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>
HTML 为表单添加提交按钮
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
HTML 使用HTML5技术把表单设置为必填
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 添加单选框
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {width: 128px;background-size: cover;border-radius: 200px;box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);border: 3px solid #00a0ff;opacity: 1;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;transition: all 1.0s;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<button type="submit">Submit</button>
</form>
HTML 添加复选框
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="checkbox" name="personality"> Indoor</label>
<label><input type="checkbox" name="personality"> Outdoor</label>
<label><input type="checkbox" name="personality"> personality</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 使用checked属性设置复选框和单选框默认被选中
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 在div元素中嵌套多个元素
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 为div元素设置背景颜色
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>.gray-background{background-color: gray;
}
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div><form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 为标签添加ID属性
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}
.gray-background {background-color: gray;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div><form id='cat-photo-form' action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 使用ID属性设置标签样式
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;
}h2 {font-family: Lobster, Monospace;
}p {font-size: 16px;
font-family: Monospace;
}#cat-photo-form{background-color: green
}.thick-green-border {border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}.smaller-image {width: 100px;
}.gray-background {background-color: gray;
}
</style><h2 class="red-text">CatPhotoApp</h2><p>Click here for <a href="#">cat photos</a>.</p><a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a><div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div><form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
HTML 使用padding布局页面标签
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 10px;
}.red-box {background-color: red;
padding: 20px;
}.green-box {background-color: green;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
HTML 使用margin布局页面标签
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 10px;
}.red-box {background-color: red;
padding: 20px;
margin: 20px;
}.green-box {background-color: green;
padding: 20px;
margin: 20px;
}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
HTML 使用负值设置页面元素的margin属性
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 10px;
}.red-box {background-color: red;
padding: 20px;
margin: -15px;
}.green-box {background-color: green;
padding: 20px;
margin: -15px;
}
</style><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
HTML 为不同方向padding设置不同的值
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 10px;
}.red-box {background-color: red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}.green-box {background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
HTML 为不同方向margin设置不同的值
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 10px;
}.red-box {background-color: red;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}.green-box {background-color: green;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
HTML CSS中padding简写
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 20px 40px 20px 40px;
}.red-box {background-color: red;
padding: 20px 40px 20px 40px;
}.green-box {background-color: green;
padding: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
HTML CSS中margin简写
<style>
.injected-text {margin-bottom: -25px;
text-align: center;
}.box {border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}.yellow-box {background-color: yellow;
padding: 20px 40px 20px 40px;
}.red-box {background-color: red;
margin: 20px 40px 20px 40px;
}.green-box {background-color: green;
margin: 40px 20px 20px 40px
}
</style>
<h5 class="injected-text">margin</h5><div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
CSS 样式的继承
<style>
body {background-color: black
}</style>
CSS 继承Body元素样式
<style>
body {color: green;
font-family: Monospace
}</style>
<h1 >Hello World</h1>
CSS 样式的覆盖
<style>
body {background-color: black;
font-family: Monospace;
color: green;
}
.pink-text{color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
CSS 多个class处理样式覆盖
<style>
body {background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {color: pink;
}
.blue-text{color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
CSS 通过ID的样式属性覆盖class类的声明
<style>
body {background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {color: pink;
}
.blue-text {color: blue;
}#orange-text { color: orange;
}</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>
CSS 通过内联样式覆盖class类的声明
<style>
body {background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {color: orange;
}
.pink-text {color: pink;
}
.blue-text {color: blue;
}</style>
<h1 style="color:white;" id="orange-text" class="pink-text blue-text" >Hello World!</h1>
CSS 通过使用Important覆盖所有其他样式
<style>
body {background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {color: orange;
}
.pink-text {color: pink !important;
}
.blue-text {color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
CSS 通过使用十六进制代码设置特定的颜色
<style>
body {background-color: #000000;
}
</style>
CSS 十六进制白色表达方式
<style>
body {background-color: #FFFFFF;
}
</style>
CSS 十六进制RGB红色表达方
<style>
body {background-color: #FF0000;
}
</style>
CSS 使用rgb属性设定混合颜色
<style>
body {background-color: rgb(255, 165, 0);
}
</style>
w3cschool实战答案相关推荐
- W3Cschool编程实战答案之JavaScript
JavaScript 注释语句操作 /*** 你的代码运行结果将显示在这里.* 使用 console.log() * 结果将显示在你浏览器的开发工具里的 JavaScript 控制台.*/ //浏览器 ...
- 零基础学python全彩版实战答案-零基础学Python（全彩版）
商品描述: 本店出售的图书均是正版二手书,有一些笔记划线,基本是六-九品新左右,基本都没有光盘.介意者请提前咨询客服.本店所有书籍,因买家导致退货退款的,发出运费参照不包邮运费模板由买家承担.如果签收 ...
- 成都大学c语言综合实战答案,信工课程之星-《C语言课程设计》深耕细作、孜孜以求；翻转课堂，我们一直在努力……...
本课程是<C语言程序设计>基础部分的后续课程,属项目实训类课程.课程本着传授知识.培养能力.提高素质的教学理念,采用项目导向.案例驱动的思想来组织. 通过项目案例学习和实践,综合复习C语言 ...
- 牛客网数据库SQL实战答案解析下篇
部分答案来自牛客网讨论分析 查找描述信息中包括robot的电影对应的分类名称以及电影数目,而且还需要该分类对应电影数量>=5部 SELECT c.name, COUNT(fc.film_id) ...
- 牛客网数据库SQL实战答案解析上篇
部分解析摘自牛客网讨论分析 查找最晚入职的员工信息 SELECT * FROM employees WHERE hire_date = (SELECT MAX(hire_date) FROM empl ...
- 零基础学python实战答案-Python编程从零基础到项目实战 完整PPT+习题答案
Python编程从零基础到项目实战是一本介绍Python相关知识的Python基础教程,内容涉及算法.Python数据分析.图形处理.Web开发.科学计算.项目管理.人工智能.Python爬虫等.其中 ...
- 成都大学c语言综合实战答案,成都大学C语言教案讲述.doc
<C语言程序设计>教案 学院(部): 信息科学与技术学院 系(教研室): 软件工程系 授课教师: 叶 安 胜 职 称: 副 教 授 课程名称C语言程序设计总学分: 4学分总学时:64学时 ...
- 牛客网数据库SQL 实战答案解析
- python编程入门指南 明日科技-python从入门到项目实践明日科技三剑客书籍视频...
┃ code(实例源码) ┃ ┃ 03.rar ┃ ┃ 04.rar ┃ ┃ 05.rar ┃ ┃ 06.rar ┃ ┃ 07.rar ┃ ┃ 08.rar ┃ ┃ 09.rar ┃ ┃ 10.rar ...
- 为什么美团点评系统架构这么牛？
点击"开发者技术前线",选择"星标????" 在看|星标|留言, 真爱 文章来源:美团技术团队 原标题:领域驱动设计在美团点架评业务系统构 至少30年以前,一 ...
最新文章
- 面经：为了拿到字节跳动offer，鬼知道我经历了啥...
- java 分配cpu使用率_Java-JVM-CPU使用率达到100％
- 初级图像混合——线性混合操作
- matlab画线不同颜色_怎样画线框图才有意义？
- Animation Studio插件怎么用？Nitrozme Animation Studio Packages Mac(AE插件拓展包) 安装教程
- 创建基于webpack打包的vue项目
- m1芯片MacBook安装本地编译版matplotlib库
- 从实现原理来讲，Nacos 为什么这么强
- [2005/05/03] 卡耐基选语
- uniapp php交互,uni-app路由跳转及参数的传参和接收
- Memcached如何实现高性能批量删除
- QR 二维码纠错码（三）
- JS/html5前端合成语音(播报)
- qmoc文件_Qt（2）：MOC文件解析
- NR-DL PDSCH Resource allocation 下行资源分配
- 使用UltraISO从文件还原Linux操作系统ISO
- 凸优化（convex optimization）第二讲：convex set
- SpringBootSecurity安全相关
- 2022年环境影响评价工程师考试案例分析练习题及答案
- 根据正则规则爬取一个网站的视频
热门文章
- 捷联惯导matlab算法,捷联惯导算法与组合导航原理讲义（20170220）.pdf
- SurfaceView 实现 转盘抽奖
- 8086CPU指令系统--汇编语言算术运算指令（ADD/ADC、SUB/SBB、INC/DEC、CMP、MUL、DIV）
- WINDOWS XP优化批处理
- 学子商城实训项目总结
- web前端实训day06——学子商城登录页面实现
- 标准误计算机excel公式,excel标准误差怎么算
- (进来补知识啦！)利用双四选一数据选择器74153实现十六选一数据选择器(包含74153简单解释)
- 基于java 海康视频监控 jar包运行
- 使用USB转485编程电缆连接西门子 S7-200的软件配置方法以及可能出现的问题