HTML与CSS闯关

最新推荐文章于 2024-06-16 23:58:06 发布
最新推荐文章于 2024-06-16 23:58:06 发布
阅读量740 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
ccc1874的博客
01-03 141
HTML HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)（俗称网页），HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。 html 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。...
HTML和CSS
weixin_51994374的博客
08-12 660
一、书写规范 <!DOCTYPE html><!--约束，声明--> <html lang="zh_CN"><!--html标签表示html的开始 html标签分为两部分，分别是head和body--> <head><!-- 头部信息包括三部分：title标签，css样式，js代码--> <meta charset="UTF-8"> <title>标题</title> </h
HTML客户案例卡片布局样式
ICode联盟
08-28 794
下载地址HTML客户案例卡片布局样式，精美的css3鼠标悬停图文伸展展示布局特效，图文卡片还有好看的背景透明效果。 dd:
html5卡片效果
Amare丶的部落格
06-08 9839
html5卡片效果
HTML和CSS基础（一）
最新发布
老王的博客
06-16 1041
介绍html和css基础，其中包括常用html元素：div,p,ul,li,img,table等，常用css属性：display，position等。
实现美图官网活动卡片——html、css
u013430418的博客
07-13 520
通过使用HTML+CSS实现美图官网的卡片样式
html中几种常用样式
chinasoftosg的专栏
04-19 881
body {  background-color: #B5CDE7;  font-family: "宋体";  color: #174D7D;  font-size: 12px;  font-weight: bold;  padding: 0px;  margin: 0px;  width: 100%;  height: 100%; } table {  border: 1
HTML与CSS详细介绍
热门推荐
weixin_44454512的博客
11-28 1万+
HTML 与 CSS 1. 主要内容 2. HTML HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。 它是⼀种建⽴⽹⻚⽂件的语⾔，通过标记式的指令（Tag），将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。 HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写，以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件
青蛙闯关HTML5游戏源码
06-25
《青蛙闯关HTML5游戏源码详解》 HTML5作为一种新兴的网页开发技术，以其强大的交互性和跨平台性，已经成为现代网页游戏开发的首选。本篇文章将深入探讨一款基于HTML5构建的“青蛙闯关”游戏源码，帮助开发者理解和...
飞机大战,闯关,加积分
02-18
综合以上信息，我们可以得出这是一个使用JavaScript、CSS和HTML构建的前端飞机大战游戏，具备闯关和积分系统，随着关卡深入难度逐渐加大。游戏的视觉效果、交互体验以及游戏逻辑主要依赖这三种技术的配合实现。对于...
简单JS闯关小游戏特效代码
03-20
【简单JS闯关小游戏特效代码】是一个基于JavaScript开发的互动娱乐项目，主要目的是提供一个轻松有趣的用户体验，通过四个不同难度的关卡来测试玩家的反应速度和策略思考能力。这款游戏利用了JavaScript的核心功能，...
HTML5闯关小游戏代码
05-20
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。 今时今日，我们将加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。
天火决闯关游戏源码-HTML-完整项目
05-24
《天火决闯关游戏源码-HTML-完整项目》是一个专为前端开发者设计的学习资源，它涵盖了HTML、CSS和JavaScript等核心技术，旨在提供一个实际的网页游戏开发案例，帮助学习者深入理解并实践Web前端开发。这个项目不仅...
HTML5闯关游戏编写实例源码.rar
07-10
采用HTML5技术编写的闯关游戏实例附上源码，一关一关过的那种小游戏，超级玛丽也是闯关游戏，这款游戏的界面是简洁风格，我也没试玩，看上去像是嘣来蹦去那种，只是实现了基本的游戏逻辑和雏形，更多的目的是通过本...
HTML使用CSS的方法详解
cnds123的专栏
01-10 1万+
在尝试学习 CSS 之前，您应该了解 HTML 的基础知识，可以同时学习 HTML 和 CSS。 本文重点介绍HTML使用CSS的方法，即怎样将css引入到html文件。
HTML中的CSS超详细使用（附代码图文示例）【干货】
Jin_Xiang123的博客
12-15 1万+
本篇文章主要介绍HTML中的CSS详细使用（附代码图片示例）以及部分理论知识 为什么使用CSS： CSS（层叠样式表）是一种用来描述网页上元素样式的技术。使用CSS的主要原因包括以下几点： ①有效的传递页面信息 ②使用CSS美化网页使网页漂亮、美观、吸引用户 ③可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 ④具有良好的用户体验
HTML+CSS学习
m0_56709616的博客
02-20 948
学习笔记
HTML和CSS (前端共三篇)【详解】
qq_1424674116的博客
03-03 1477
web应用有BS和CS架构两种，其中我们主要涉及的是BS架构。而BS架构里，B（Browser浏览器）是客户端的角色，它负责与用户交互：给用户展示数据、收集用户输入的数据。前端页面是在浏览器里渲染显示的，而同一页面在不同浏览器里显示的效果是有差异的，所以建议大家都使用chrome浏览器前端开发有一套Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：HTML：负责展示内容、收集数据。但是不好看。
HTML&CSS
二月
01-28 830
2020.9.10 文章目录web概念概述软件架构B/S架构详解静态资源：动态资源：HTML web概念概述 JavaWeb：使用Java语言开发基于互联网的项目 软件架构 C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷... 优点：用户体验好 缺点：开发、安装，部署，维护 麻烦 B/S: Browser/Server 浏览器/服务器端 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端
HTML5与CSS3基础教程入门指南
"HTML5与CSS3基础教程（第8版）" HTML5和CSS3是现代网页设计的核心技术，它们的结合使得网页开发者能够构建功能丰富、视觉效果出色的网站。HTML5是超文本标记语言（HTML）的最新版本，引入了许多新的元素和功能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值