【FreeCodeCamp】 ResponsiveWebDesign网页设计 测试1学习笔记

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.

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

    HTML main 标签

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

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

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

  • <footer>标签

    add a footer section to the page.

• 可点击链接🔗

  herf：Hypertext Reference超文本引用

  you can link to another page with the anchor (a) element. For example, <a href='<https://freecodecamp.org>'></a>would link to freecodecamp.org.

  • 点击文字 <a href=”#”>name</a>

    HTML 链接

  • 点击图片 <a href=”#”><img scr=””…></a>

    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, <img src="cat.jpg" alt="A cat">has an altattribute with the text A cat.

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

  • 如何调整大小？

    HTML 图像

  • 如何加注释？

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

      HTML 标签

    • A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element. For example, <figcaption>A cute cat</figcaption> adds the caption A cute cat.

      HTML 标签

• 文字显示

  • 标题

    HTML 标题

    • 有多少级？6

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

  • 段落

    HTML 段落

    • 缩进

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

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

    • 如何换行？

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

      • p标签
      • 两个br标签

    • 如何加前缀？

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

      • 无序列表：标签<ul>+<li>

      • 有序列表：标签<ol>+<li>

        此属性将分配值编号，即<ol type =“ 1”>以创建以数字编号的有序列表。

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

    • 强调

      • 斜体i标签

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

      • em标签

        HTML 标签

    • 如何加粗展示？

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

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

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

• 边框

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

    • 采用fieldset标签

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

      标签介绍：

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

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

      HTML 标签

      • legend作为标题

        HTML 标签

    • HTML CSS 代码实现:

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

• 数据收集

  • The actionattribute indicates where form data should be sent. For example, <form action="/submit-url"></form>tells the browser that the form data should be sent to the path /submit-url.

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

• <label> 标签为 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方式

  • <input>输入标签优化相关属性

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

  • 如何加多选框？checkbox

    • checkbox

      HTML checkbox 多选框

• 点击反馈

  • 空态提交反馈 required：

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

    • 这个属性指定用户在提交表单之前必须为该元素填充值。当 type 属性是 hidden、image 或者按钮类型（submit、reset、button）时不可使用。 [:optional](<https://developer.mozilla.org/zh-CN/docs/Web/CSS/:optional>)  和 [:required](<https://developer.mozilla.org/zh-CN/docs/Web/CSS/: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是控件的值