编写猫咪相册应用 HTML

文章目录

      • 1. 标题元素标签
      • 2. `p`元素用于在网站上创建一段文本
      • 3. 注释
      • 4. 页面主要部分标识标签
      • 5. 通过使用`img`元素来为你的网站添加图片
      • 6. 使用锚点元素`(a)`链接到另一个页面
      • 7. 使用 `section` 元素将照片内容与未来的内容分开
      • 8. 无序列表`(ul)`元素,列表项`(li)`元素在列表中创建项目
      • 9. `figure` 元素代表独立的内容,并允许将图像与标题相关联
      • 10. 图像标题`(figcaption)`元素
      • 11. 强调 `em` 元素(斜体)
      • 12. 有序列表`(ol)`
      • 13. 将添加一个 Web 表单来收集来自用户的信息
      • 14. `input` 元素允许通过多种方式从 Web 表单中收集数据
      • 15. `button` 元素创建一个可点击的按钮
      • 16. 单选按钮 `<input type="radio">`
      • 17. `label` 元素
      • 18. `fieldset` 元素
      • 19. `legend` 元素
      • 20. 复选框`<input type="checkbox">`
      • 21. `footer` 元素
      • 22. `head` 元素
      • 23. `title` 元素
      • 24. `html` 元素
      • 25. `<!DOCTYPE html>`声明
      • 26. `meta` 元素
        • 渲染语言
        • 页面自适应设备
    • 完整代码
    • 效果图

1. 标题元素标签

h1h6标题元素用于表明其下方内容的重要性。 数字越低,重要性越高,所以h2元素所具有的重要性要低于h1元素。 每页只使用一个h1元素,并将重要性较低的标题放在重要性较高的标题之下。

<h1>Hello World</h1>
<h2>Cat Photos</h2>

2. p元素用于在网站上创建一段文本

<p>See more cat photos in our gallery.</p>

3. 注释

注释让你在不影响浏览器显示内容的情况下,留下信息,它也能让你的代码失效

<!-- TODO: Remove h1 -->

4. 页面主要部分标识标签

HTML5 有些元素能够指明不同的内容区域, 这些元素能让你的 HTML 易于阅读,并有助于搜索引擎优化(SEO)和无障碍访问。

<main></main>

5. 通过使用img元素来为你的网站添加图片

img元素只有一个开始标签,没有结束标签。 一个没有结束标签的元素,它的标签被称为自闭合标签。
img元素中的src属性明确了一个图片的URL(图片所在的位置)

<img src="https://www.example.com/the-image.jpg">

所有的img元素都应该有一个alt属性。alt属性的文本(值)有两个作用,第一个作用是让屏幕阅读器可以知晓图片的内容,这会对网页的可访问性有很大提升;另一个作用是当图片无法加载时,页面需要显示的替代文本

<img src="cat.jpg" alt="A cat">

6. 使用锚点元素(a)链接到另一个页面

链接的文本必须放置在锚点元素(a)的起始和闭合标签之间

<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>

p元素的文本中,将单词 cat photos 转换为指向 https://freecatphotoapp.com 的链接,通过把这些单词放到开始和结束锚点标签(a)内来实现

<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

在这里插入图片描述

向锚点元素(a)的起始标签中添加值为 _blanktarget 属性,用以在新的标签页中打开链接

<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

锚点元素也可以把其他类型的内容放在锚标签中,将其转换成一个链接;用必要的元素标签包裹图片,把它变成一个链接

<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

7. 使用 section 元素将照片内容与未来的内容分开

<section></section>

8. 无序列表(ul)元素,列表项(li)元素在列表中创建项目

<ul><li>milk</li><li>cheese</li>
</ul>

9. figure 元素代表独立的内容,并允许将图像与标题相关联

<figure></figure>

10. 图像标题(figcaption)元素

图像标题(figcaption)元素用于添加标题以描述 figure 元素中包含的图像
在嵌套在 figure 元素中的图像之后,添加一个 figcaption 元素

<figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."><figcaption>Cats love lasagna.</figcaption>
</figure>

11. 强调 em 元素(斜体)

figcaption 元素中的单词包裹在强调 em 元素中来强调它(斜体)

<figcaption>Cats <em>love</em> lasagna.</figcaption>

12. 有序列表(ol)

有序列表(ol)的代码类似于无序列表,但有序列表中的列表项在显示时会被编号

<ol><li>flea treatment</li><li>thunder</li><li>other cats</li>
</ol>

13. 将添加一个 Web 表单来收集来自用户的信息

<form></form>

action 属性指示应该将表单数据发送到哪里,例如告诉浏览器应该将表单数据发送到路径/submit-url

<form action="/submit-url"></form>

14. input 元素允许通过多种方式从 Web 表单中收集数据

img 元素一样,input 元素是自闭合的,并且不需要结束标签
使用 type 属性创建多种输入,可以创建密码字段、重置按钮或控件,让用户从他们的计算机中选择文件
例如,创建一个文本字段以从用户那里获取文本输入

<input type="text">

为了通过 action 属性中指定的位置访问表单的数据,必须给文本字段一个 name 属性,并为其分配一个值来表示数据正在提交

<input type="text" name="catphotourl">

placeholder占位符文本用于提示人们在输入框中输入什么样的信息(起提示作用,并不是在框内输入内容)

<input type="text" name="catphotourl" placeholder="cat photo URL">

在这里插入图片描述
为了防止用户在缺少所需信息时提交表单,需要将 required 属性添加到 input 元素。 无需为 required 属性设置值。 只需将单词 required 添加到 input 元素,确保它和其他属性之间有空格

<input type="text" name="catphotourl" placeholder="cat photo URL" required>

15. button 元素创建一个可点击的按钮

例如,创建一个带有文本 Click Here 的按钮

<button>Click Here</button>

input 元素下方添加带有文本 Submitbutton 元素。 单击没有任何属性的表单按钮的默认行为会将表单提交到表单的 action 属性中指定的位置
即使你在文本输入下方添加了按钮,它们也会在页面上彼此相邻。 这是因为 inputbutton 元素都是内联元素,它们不会出现在新的行上
在这里插入图片描述
添加的按钮将默认提交表单, 而依赖默认行为可能造成混乱。 将值为 submittype 属性添加到 button 以明确它是一个提交按钮

<button type ="submit">Submit</button>

16. 单选按钮 <input type="radio">

对于需要从多个选项中获得一个答案的问题,可以使用单选按钮 <input type="radio">
例如,这是一个带有 cat 选项的单选框:<input type="radio"> cat
希望单选按钮一次只能选中一个:给每一个单选按钮添加相同的 name 属性并设置其值为 account-type,以关联单选按钮,这样两个单选按钮就无法同时选中了

<label><input type="radio"  name="account-type"/> Personal Account</label>
<label><input type="radio" name="account-type"/> Business Account</label>

17. label 元素

label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来(尤其是对于屏幕阅读器等辅助技术)
例如,下列语句使得点击单词 cat 也会选择相应的单选按钮

<label><input type="radio"> cat</label>

还有另一种方法可以将 input 元素的文本与元素本身相关联。 你可以将文本嵌套在 label 元素中,并添加与 input 元素的 id 具有相同值的 for 属性

<input id="loving" type="checkbox"> <label for ="loving"> Loving </label>>

id 属性用于标识特定的 HTML 元素, 每个 id 属性的值必须不同于整个页面的所有其他 id
当元素具有多个属性时,属性的顺序无关紧要

<label><input type="radio" id="indoor"> Indoor</label>

为了使选择一个单选按钮自动取消选择另一个,两个按钮必须有具有相同值name 属性

<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

为两个单选按钮添加 value 属性
如果选择 Indoor 单选按钮并提交表单,则该按钮的表单数据基于其 namevalue 属性。 由于单选按钮没有 value 属性,因此表单数据将包含 indoor-outdoor=on,这在有多个按钮时没有用处
为两个单选按钮添加 value 属性。 为方便起见,将按钮的 value 属性设置为与其 id 属性相同的值

<label><input id="indoor" type="radio" name="indoor-outdoor" value ="indoor"> Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor" value ="outdoor"> Outdoor</label>

18. fieldset 元素

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起, fieldset 元素是块级元素,这意味着它们出现在新的一行上

<fieldset></fieldset>

在这里插入图片描述
加上fieldset 元素之后
在这里插入图片描述

19. legend 元素

legend 元素充当 fieldset 元素中内容的标题,它为用户提供了有关他们应该在表单的该部分中输入什么的上下文

<fieldset><legend>Is your cat an indoor or outdoor cat?</legend><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

在这里插入图片描述

20. 复选框<input type="checkbox">

对于可能有多个答案的问题,表单通常使用复选框。 例如,这是一个带有 tacos 选项的复选框:<input type="checkbox"> tacos
将值为 personalityname 属性添加到复选框 input 元素。虽然你不会在浏览器中注意到这一点,但这样做会使服务器更容易处理你的 Web 表单,尤其是当有多个复选框时

<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>

与单选按钮一样,选中复选框的表单数据是 name / value 属性对。 虽然 value 属性是可选的,但最好将它包含在页面上的任何复选框或单选按钮中。为每个复选框添加一个 value 属性,为方便起见,将每个复选框的 value 属性设置为与其 id 属性相同的值

<input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>

为了使复选框或单选按钮默认被选中,需要为其添加 checked 属性。 无需为 checked 属性设置值。 只需将单词 checked 添加到 input 元素,确保它和其他属性之间有空格。(默认选中第一个单选按钮和第一个复选框)

<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>

21. footer 元素

向页面添加页脚部分。在 main 元素之后,添加 footer 元素

22. head 元素

到目前为止,添加到页面的所有内容都在 body 元素内, 应该呈现到页面的所有页面内容元素都放在 body 元素中。 但是,其他重要信息位于 head 元素中。在 body 元素上方添加一个 head 元素

23. title 元素

title 元素决定了浏览器在页面的标题栏或选项卡中显示的内容

<head><title>CatPhotoApp</title>
</head>

title 元素为搜索引擎提供了有关页面的额外信息。 它还通过以下两种方式显示 title 元素的内容:

  • 当页面打开时,在标题栏中
  • 当你把鼠标悬停在该页面上时,在浏览器标签中。 即使该标签未被激活,一旦你将鼠标悬停在该标签上,title 文本就会显示出来

24. html 元素

页面的全部内容都嵌套在 html 元素中。 所有其他元素必须是此 html 元素的后代。
将值为 enlang 属性添加到开始 html 标签以指定页面的语言为英语

<html lang="en">

25. <!DOCTYPE html>声明

所有页面都应以 <!DOCTYPE html> 开头。 这个特殊的字符串被称为声明,并确保浏览器尝试满足行业范围的规范。将此声明添加为代码的第一行

26. meta 元素

你可以通过在 head 中添加自闭合的 meta 元素,来设置浏览器行为

渲染语言

通过创建一个 meta 元素作为 head 元素的子元素,告诉浏览器渲染 markdown 为多种语言。 将其 charset 属性设置为 UTF-8

<head>
<meta charset="UTF-8">
<title>CatPhotoApp</title>
</head>

页面自适应设备

head 中添加另一个自闭合的 meta 元素。 给它一个 name 属性,值为 viewport,和一个 content 属性,值为 width=device-width, initial-scale=1.0,这样你的页面在各种设备上看起来是一样的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

完整代码

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8"><title>CatPhotoApp</title></head><body><main><h1>CatPhotoApp</h1><section><h2>Cat Photos</h2><!-- TODO: Add link to cat photos --><p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p><a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a></section><section><h2>Cat Lists</h2><h3>Things cats love:</h3><ul><li>cat nip</li><li>laser pointers</li><li>lasagna</li></ul><figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."><figcaption>Cats <em>love</em> lasagna.</figcaption>  </figure><h3>Top 3 things cats hate:</h3><ol><li>flea treatment</li><li>thunder</li><li>other cats</li></ol><figure><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."><figcaption>Cats <strong>hate</strong> other cats.</figcaption>  </figure></section><section><h2>Cat Form</h2><form action="https://freecatphotoapp.com/submit-cat-photo"><fieldset><legend>Is your cat an indoor or outdoor cat?</legend><label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label><label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label></fieldset><fieldset><legend>What's your cat's personality?</legend><input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label><input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label><input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label></fieldset><input type="text" name="catphotourl" placeholder="cat photo URL" required><button type="submit">Submit</button></form></section></main><footer><p>No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a></p></footer></body>
</html>

效果图

请添加图片描述
请添加图片描述
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/21861.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ChatGPT|一文读懂GPT-4!

前言 大家好&#xff0c;今天早上一早醒来&#xff0c;发现各大科技圈公众号平台开始刷屏OpenAI发布的新模型GPT4.0&#xff0c;看这个版本号就已经知道又是一大波特性的更新。 于是立马起来开始学习&#xff01; GPT-4 发布视频&#xff08;2023.03.15&#xff09; www.youtub…

李彦宏谈文心一言:市场反馈符合预期;OpenAI CEO 承认害怕 ChatGPT;Twitter 将开源推荐算法源码|极客头条

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&…

ChatGPT 拿测试 offer ?!

前段时间&#xff0c;全网都在说GPT&#xff0c;听说GPT能写代码、写用例、写算法、写论文、写策划方案、写日报周报新闻稿、种草笔记、视频脚本、作诗作词作曲、处理 Excel 。 心想&#xff1a;这也太厉害了吧&#xff01;都能帮忙写代码和写用例了&#xff0c;我是不是要被取…

读脑术!由大脑信号构建高清视频的方法实现啦,Stable Dinfusion还能这么用

夕小瑶科技说 分享 来源 | 量子位 作者 | 金磊 现在&#xff0c;AI可以把人类脑中的信息&#xff0c;用高清视频展示出来了&#xff01; 例如你坐在副驾所欣赏到的沿途美景信息&#xff0c;AI分分钟给重建了出来&#xff1a; 看到过的水中的鱼儿、草原上的马儿&#xff0c;也…

人工智能之深度学习常见应用方向你都了解吗?(文末福利)

本文导读 从零带你了解深度学习常见的7大应用方向&#xff0c;包括&#xff1a;数字识别、图像识别、图像分类、目标检测、人脸识别、文本分类、聊天机器人。 1. 数字识别 数字识别是计算机从纸质文档、照片或其他来源接收、理解并识别可读的数字的能力&#xff0c;目前比较受…

GPT-4“王炸”发布,背后的这些问题你想到了吗?

今天GPT-4发布&#xff0c;看了一下&#xff0c;主要有这几个方面的飞跃式提升&#xff1a; 强大的识图能力&#xff1b;文字输入限制提升至 2.5 万字&#xff1b;回答准确性显著提高&#xff1b;能够生成歌词、创意文本&#xff0c;实现风格变化。 除此之外&#xff0c;GPT-…

chatGPT-4论文导读:百年未有之大变局-(1)(转载)

声明&#xff1a;本文已征得原作者&#xff1a;荔枝海豹&#xff0c;同意后转载。 原文链接&#xff1a;https://zhuanlan.zhihu.com/p/628494696 本文按照以下框架讲解&#xff0c;阅读时间大约15分钟&#xff0c;对技术要求能力为三颗星。 什么是GPT&#xff0c;GPT4出现之…

文心一言的大众化理解

首先它是什么&#xff1f; 文心一言&#xff08;类似于于chatgpt&#xff08;由浮点参数表示的深度神经网络大模型&#xff09;的本质&#xff09;&#xff08;英文名ERNIE Bot&#xff09;&#xff08;基于飞桨深度学习平台和文心知识增强大模型&#xff09;为百度基于文心大…

谈谈对GPT发展的一些思考(产品角度)

滁州西涧 韦应物 独怜幽草涧边生&#xff0c;上有黄鹂深树鸣。 春潮带雨晚来急&#xff0c;野渡无人舟自横。 作者&#xff1a;良知犹存 转载授权以及围观&#xff1a;欢迎添加微信号&#xff1a;become_me 搬运一下朋友圈写的一些小文字&#xff0c;分享一波。 核心&#xf…

ChatGPT最实用的提示(Prompts)写法有哪些?

OpenAI在D站的官方服务器上有一个prompt-library的频道&#xff0c;这个频道用于给各路大神展示和讨论其创建的prompt。上面有各种用途的prompt&#xff0c;比如私人助手用于写邮件、写专业论文的、各类角色扮演的、学习技能的等等。很多回答中已经提到了不少这类prompt。 而为…

标题:ChatGPT精准指令:用自然语言控制计算机

人们一直期望能够用自己的自然语言来控制计算机&#xff0c;而ChatGPT就是这样一款可以实现这一愿望的智能系统。利用最新的自然语言处理技术&#xff0c;ChatGPT可以接受用户输入的自然语言指令&#xff0c;并在计算机上实现相应的操作。本文将为您详细介绍ChatGPT精准指令的原…

玩转ChatGPT:Custom instructions (vol. 1)

一、写在前面 据说GPT-4又被削了&#xff0c;前几天让TA改代码&#xff0c;来来回回好几次才成功。 可以看到之前3小时25条的限制&#xff0c;现在改成了3小时50条&#xff0c;可不可以理解为&#xff1a;以前一个指令能完成的任务&#xff0c;现在得两条指令&#xff1f; 可…

​这款「咒语」优化工具,功能有多强大?#Prompt Perfect

根据提示&#xff0c;写个笑话、来个新年祝词&#xff0c;这款 AI 工具都能做到&#xff01;&#x1f64a; Prompt Perfect Prompt Perfect 是一个 AI prompt 「咒语」优化工具&#xff0c;它可以帮助用户为大型语言模型&#xff08;LLMs&#xff09;、大型模型&#xff08;LMs…

编程范式[paradigm]

编程的“思想”&#xff0c;是一个很中国化的词汇。编程的思想&#xff0c;通常称为一门编程语言背后的编程范式&#xff08;Programming Paradigm&#xff09;。随着编程&#xff08;programming&#xff09;方法学和软件工程研究的深入&#xff0c;特别是OO技术的普及&#x…

ChatGPT一小步,NLP范式转变一大步

来源&#xff1a;算法邦 本文约7200字&#xff0c;建议阅读14分钟 在本文中&#xff0c;我们将仔细研究这些能力是什么&#xff0c;大型语言模型可以提供什么&#xff0c;以及它们在更广泛的 NLP/ML 任务中的潜在优势是什么。 [ 导语 ]作者符尧&#xff0c;yao.fued.ac.uk&…

小宁ChatGPT智能机器人上线,无需魔法注册即可使用!

​大家好&#xff0c;今天我要向大家介绍一款基于人工智能技术的聊天机器人——ChatGPT。ChatGPT可以与用户进行自然语言交互&#xff0c;回答用户的问题、提供服务、进行闲聊等&#xff0c;让聊天变得更有趣。 小宁ChatGPT是对接ChatGPT官方api&#xff0c;实现无需魔法无误差…

免费,无需魔法,媲美ChatGPT4

今天给大家介绍的AI产品是Claude&#xff0c;这个产品是 OpenAI 前研究副总裁 Dario Amodei 带领前公司一些员工于2021年创立的。效果据说媲美ChatGPT4&#xff0c;我自己感觉比GPT3.5强点&#xff0c;实际还是得大家自己尝试下。 注册的话需要一个企业邮箱&#xff0c;或者你…

chatgpt赋能python:Python反向迭代:让迭代更高效

Python 反向迭代&#xff1a;让迭代更高效 Python 是一种动态语言&#xff0c;引入了许多强大的编程概念&#xff0c;其中之一是迭代器。在 Python 中&#xff0c;迭代器是一种对象&#xff0c;它允许开发人员按特定顺序遍历集合。 迭代器可以帮助开发人员更高效地编写代码&am…

在哪里尝试爆火的AI绘画?16款AI绘画工具大盘点!

要说今年什么最火&#xff0c;一定是AI绘画。AI绘画在人工智能领域中大放异彩&#xff0c;彻底火了。 随着各种开放代码和模型出现&#xff0c;国内外各种AI工具开始争奇斗艳&#xff0c;今天就来给大家盘点一下国内外AI绘画工具有哪些?其中那家生成效果最好&#xff1f;让我…

大话Stable-Diffusion-Webui-将stable-diffusion-webui接入微信群(二)

文章目录 效果群成员发送的词条生成sd的prompt中文词条翻译为英文过滤NSFW代码效果 群成员发送的词条生成sd的prompt 上一篇内容我们已经将sd的文生图API接入了微信群,但是群成员只能通过指定关键词触发sd的调用而生成图片,但我们在实际使用sd时是可以自定义prompt的,从而使…