Learn HTML by building a Cat Photo App

https://www.freecodecamp.org/learn/2022/responsive-web-design

标签

• 优化显示

  HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility.

  • 标签用于指定文档的主体内容

    HTML main 标签

  • 标签与body标签的区别：页脚元素；您应该将其放置在主体内部，但要放置在主体外部，就像处理菜单或侧边栏一样。

    html - HTML5中的主要标签是什么？它与身体标签有何不同？ - Thinbug

  • 标签：定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

• 可点击链接🔗

  herf：Hypertext Reference超文本引用

  you can link to another page with the anchor (a) element. For example, would link to freecodecamp.org.

  • 点击文字 name

    HTML 链接

  • 点击图片

    freecodecamp笔记（1）_chabuduodele_的博客-CSDN博客

  • target 属性规定在何处打开链接文档

    HTML 属性

• 图片展示

  HTML 图像

  • alt的作用

    All imgelements should have an altattribute. The altattribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, has an altattribute with the text A cat.

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

  • 如何调整大小？

    HTML 图像

  • 如何加注释？

    • 标签规定独立的流内容（图像、图表、照片、代码等等）。

      HTML 标签

    • A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element. For example, 

       adds the caption A cute cat.

      HTML 标签

• 文字显示

  • 标题

    HTML 标题

    • 有多少级？6

      定义最大的标题。

      定义最小的标题——请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

  • 段落

    HTML 段落

    • 缩进

      • text-indent 属性规定文本块中首行文本的缩进。

        html中缩进属性是什么-前端问答-PHP中文网

    • 如何换行？

      html空行方法-html文章段落空行间隔空一行 - DIVCSS5

      • p标签
      • 两个br标签

    • 如何加前缀？

      手把手教你给html文本添加有序列表与无序列表（代码详解）-html教程-PHP中文网

      • 无序列表：标签

        +

        • 有序列表：标签

          +

          1. 此属性将分配值编号，即

             以创建以数字编号的有序列表。

             如何用HTML中用数字编号的列表项创建有序列表？

      • 强调

        • 斜体i标签

          html5中怎么设置文本斜体-html教程-PHP中文网

        • em标签

          HTML 标签

      • 如何加粗展示？

        • 使用标签或者采用css样式

          HTML中如何将字体加粗-html教程-PHP中文网

          b是bold，就是粗体的意思；strong意味着强调

  • 边框

    • 如何在边框线上加文字？

      • 采用fieldset标签

        html中border边框线上添加文字_天霸地霸tua的博客-CSDN博客_html怎么在边框线中加文字

        标签介绍：

        将表单内的相关元素分组。

        标签会在相关表单元素周围绘制边框。

        HTML 标签

        • legend作为标题

          HTML 标签

      • HTML CSS 代码实现:

        HTML CSS 个人注册界面 实现边框上加文字_Dogboss233的博客-CSDN博客_html边框上加文字

  • 数据收集

    • The actionattribute indicates where form data should be sent. For example, 

      tells the browser that the form data should be sent to the path /submit-url.

    • 标签用于创建供用户输入的 HTML 表单。

  • 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内**点击文本，就会触发此控件。**就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

    • label

      html中label标签的详细介绍

      • label 元素不0元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

        html的label是什么-前端问答-PHP中文网

      HTML 标签

  • 输入框

    • 如何加暗纹展示内容？

      • ——INPUT 标签可以设置 placeholder 属性为占位符

      • 三种不同写法

        input 标签实现输入框带提示文字效果(两种方法) | 文字

    • 输入框、单选等input操作

      HTML 输入类型

      check

      In order to make a checkbox checked or radio button selected by default, you need to add the checkedattribute to it. There's no need to set a value to the checkedattribute. Instead, just add the word checkedto the inputelement, making sure there is space between it and other attributes.

      <label><input type="checkbox" id="loving" name="door" value="1" checked="checked"/>Loving</label>
      

    • 如何加输入框？

  • 如何加提交按钮？

    <input type="submit" value="submit">
    <button type="submit">submit</button>
    

    • input方式

      HTML Input form* 属性

      表单及提交按钮，单列一行写应该不行

      W3School TIY Editor

    • button方式

    • 输入标签优化相关属性

      • The id attribute is used to identify specific HTML elements. Each idattribute's value must be unique from all other idvalues for the entire page.
      • If you select the Indoor radio button and submit the form, the form data for the button is based on its nameand value attributes. Since your radio buttons do not have a valueattribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

      ：输入（表单输入）元素 - HTML（超文本标记语言） | MDN

  • 选择项

    • The fieldset element is used to group related inputs and labels together in a web form. fieldsetelements are block-level elements, meaning that they appear on a new line.

    • 如何加单选框？radio

      我爱IT

      • Radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 每出现一次，一个 Radio 对象就会被创建。
      • 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。

    • 如何加多选框？checkbox

      • checkbox

        HTML checkbox 多选框

  • 点击反馈

    • 空态提交反馈 required：

      Html页面input提交空输入框提示

      • 这个属性指定用户在提交表单之前必须为该元素填充值。当 type 属性是 hidden、image 或者按钮类型（submit、reset、button）时不可使用。 [:optional]()  和 [:required]()  CSS 伪元素的样式将可以被该字段应用作外观。

      • 自定义空态提示内容：在input输入框中添加oninvalid和oninput属性

        HTML Input输入框自定义required的提示内容（默认值：请填写此字段）_临时工-冯宝宝的博客-CSDN博客_htmlinput输入框提示信息

    • 各种事件list——鼠标点击onclick

      HTML 事件 | 菜鸟教程

    • 提示列表

      DataList：HTML5中的input输入框自动提示利器

    • 历史记录

      • js实现

        html里input下拉框加载最近输入内容_xcLeigh的博客-CSDN博客_html input 下拉列表

  属性

  • for属性可以将label与想要触发的控件绑定起来——for 有什么好处？

    • 为label添加for属性的这个做法，能够提高代码质量——具体什么质量？

      html5中 标签的for属性使用方式方法详细分析_HTML基础_前端技术

    • for不止可以给label标签，还可以给其他标签使用，例如output标签

      哪些html元素有for属性-前端问答-PHP中文网

  • name属性：便于sever识别，如果定义不同的name，radio就不能单选

    HTML标签中id和name的区别_IamaMartian的博客-CSDN博客_html id name

    • Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other**, both buttons must have a nameattribute with the same value.**

  • value属性：name是控件的名称（多个控件可以取同一个名称），value是控件的值