HTML与CSS闯关

最新推荐文章于 2024-05-19 01:30:07 发布

阿黄Ahuang

最新推荐文章于 2024-05-19 01:30:07 发布

阅读量736

点赞数

本文链接：https://blog.csdn.net/FZUMRWANG/article/details/89682115

版权

HTML用占位符文本填补空白

<h1>Hello World</h1>

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

<h1>Hello World</h1>
<h2>你好html</h2>
<p>Hello Paragraph</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:16px;}
</style>

<h2 class="red-text">我家的猫咪</h2>

<p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
<p>养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>

HTML设置标签的字体样式

<style>
.red-text {color: red;}
p {font-size: 16px;font-family:Monospace;}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p>可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括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, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<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;
}
</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">html编程入门教程</h2>
<img src="/statics/codecamp/images/relaxing-cat.jpg">
<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" class="red-text">CatPhotoApp</h2>

<img class="smaller-image" src="/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;
}
.thick-green-border{
    border-color: green;
    border-width: 10px;
    border-style: solid;
}
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="/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: 10px;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">html编程入门教程</h2>

<img class="smaller-image thick-green-border" src="/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: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image thick-green-border" src="/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>
<a href="http://freecatphotoapp.com">cat photos</a>
<h2 class="red-text">
    CatPhotoApp
</h2>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>

HTML 在p标签内设置锚链接

<p>View more cat photos<a href="https://www.w3cschool.cn">cat photos</a></p>

HTML 使用#符合设置固定链接

<p>Click here for <a href="#">cat photos</a>.</p>

HTML 为图片设置超链接

你可以通过将某元素嵌套在a元素中使其变为一个链接。把你的图片嵌入到a元素中。
例子如下：
<a href="#"><img src="/images/relaxing-cat.jpg"></a>
请记住使用 #作为元素的 href属性, 以便将其转换为固定链接。
将现有的图像元素放置在锚点元素中。
完成后，把你的光标悬停在你的图片上。此时光标应该由光标指针变成手形指针。这张图片现在是一个链接了。

<a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>

HTML 为图片添加alt描述

alt属性，是当图片无法显示时的替代文本

<a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a>

HTML 创建项目符号无序列表

HTML具有用于创建 unordered lists（无序列表） ，或带项目符号列表的特殊元素。

无序列表以 <ul> 元素开始，并包含一个或多个<li>元素。

<ul>
    <li>ssddc</li>
    <li>sdfsfsf</li>
    <li>dsfsafdsaff</li>
</ul>

HTML 创建有序列表

HTML具有用于创建ordered lists（有序列表）, 或数字编号列表的特殊元素。
有序列表以<ol>元素开始，并包含一个或多个<li>元素。

<ol>    
  <li>Garfield</li>    
  <li>Sylvester</li>    
</ol>

HTML 创建文本输入框

现在我们来创建一个Web表单。
文本输入框是获取用户输入的一种方便的方法。
你可以用如下方法创建：<input type="text">
注意，input元素是自关闭的。

HTML 为文本输入框设定预定值

placeholder text（占位符）是用户在 input框输入任何内容之前放置在input框中的预定义文本。
你可以创建如下所示的占位符：<input type="text" placeholder="this is placeholder text">

HTML 添加表单

你可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form元素上添加一个action属性来执行此操作。

action属性的值指定了表单提交到服务器的地址。

例如：

<form action="/url-where-you-want-to-submit-form-data"></form>

把你的文本输入框嵌套到form元素中。并为此form元素添加action="/submit-cat-photo"。

<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"></form>

阿黄Ahuang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS闯关

HTML用占位符文本填补空白<h1>Hello World</h1><h1>Hello World</h1><h2>CatPhotoApp</h2><h1>Hello World</h1><h2>你好html</h2><p>Hello Paragrap...
复制链接

扫一扫