Cat-God-007

导航

胡学乱想----前端知识点（html）

基础

1.注意缩进
2.注释
在 HTML 中，一个注释以 <!-- 开始，包含数行文本，并以 --> 结束。
<main>
能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问
<section>
能让你的 HTML 易于阅读，有助于分段
3.图片
为你的网站添加图片。 img 元素只有一个开始标签，没有结束标签。 一个没有结束标签的元素，它的标签被称为自闭合标签。

  • src
    图片路径
  • alt
    alt 属性的文本（值）有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
 <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="this is a cat">
this is a cat

4.锚点元素（a）
链接到另一个页面, 链接的文本必须放置在锚点元素（a）的起始和闭合标签之间

  • target 属性
    添加值为 _blank ,用以在新的标签页中打开链接。
 <a target="_blank" href='https://freecatphotoapp.com'>this is a cat</a>

this is a cat

5.简单嵌套
在 p 元素的文本中，将单词 cat photos 转换为指向 https://freecatphotoapp.com 的链接

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

6.无序列表

  • （ul）元素
  • 列表项（li）元素在列表中创建项目
<ul>
   <li>cat nip</li>
   <li>laser pointers</li>
   <li>lasagna</li>
</ul>

7.有序列表（ol）
类似于无序列表，但有序列表中的列表项在显示时会被编号

 <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
  </ol>
  1. flea treatment
  2. thunder
  3. other cats

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

<figure>  
	<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
</figure>
  • （figcaption）元素
    用于添加标题以描述 figure 元素中包含的图像
 <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>
  • em 元素(强调作用）
 <figcaption>Cats <em>love</em> lasagna.</figcaption>
  • strong 元素
    用于指示某些文本非常重要或紧急

9.Web 表单

  • form 元素：收集来自用户的信息
  • action 属性：指示应该将表单数据发送到哪里
<form action="https://freecatphotoapp.com/submit-cat-photo"></form>
  • input 元素：允许你通过多种方式从 Web 表单中收集数据(自闭合)
  • type 属性：创建多种输入， 你可以轻松创建密码字段、重置按钮或控件，让用户从他们的计算机中选择文件
 <input type="text">
  • name属性：action 属性指定的位置访问表单的数据，你必须给文本字段一个 name 属性，并为其分配一个值来表示数据正在提交
  • placeholder占位符文本:用于提示人们在输入框中输入什么样的信息
 <input type="text" name="catphotourl" placeholder="cat photo URL" >
  • required 属性：防止用户在缺少所需信息时提交你的表单，你需要将 required 属性添加到 input 元素， 无需为 required 属性设置值

10.按钮元素(button)

  • 创建一个可点击的按钮
 **<button> Submit </button>**

按钮将默认提交表单。,然而，依赖默认行为可能造成混乱。 将值为 submit 的 type 属性添加到 button 以明确它是一个提交按钮。

   <button type="submit">Submit</button>
  • 单选按钮
    input 元素是自闭合的。
<input type="radio">Indoor
  • label 元素
    用于帮助将 input 元素的文本与 input 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）
<label><input type="radio"> Indoor</label>
  • id 属性
    用于标识特定的 HTML 元素。 每个 id 属性的值必须不同于整个页面的所有其他 id 值。
 <label><input type="radio" id="indoor"> Indoor</label>
  • name属性
    为了使选择一个单选按钮自动取消选择另一个，两个按钮必须有具有相同值的 name 属性
 <label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
 <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

选择 Indoor 单选按钮并提交表单，则该按钮的表单数据基于其 name 和 value 属性。 由于你的单选按钮没有 value 属性，因此表单数据将包含 indoor-outdoor=on，这在你有多个按钮时没有用处

  • value属性
<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>

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

 <fieldset>
    <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>

12.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>

13.表单复选框

 <input type="checkbox"> Loving

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

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

与单选按钮一样，选中复选框的表单数据是 name / value 属性对。 虽然 value 属性是可选的，但最好将它包含在页面上的任何复选框或单选按钮中。

  • checked 属性
    使复选框或单选按钮默认被选中，无需为 checked 属性设置值。 只需将单词 checked 添加到 input 元素，确保它和其他属性之间有空格。
    默认选中第一个单选按钮和第一个复选框
    14.案例（两种复选框）
<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>

14.footer 元素
页脚部分（在 main 元素之后，添加 footer 元素）

<footer>
  <p>
  No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
  </p>
</footer>

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

<html lang="en">

16.声明
确保浏览器尝试满足行业范围的规范

<!DOCTYPE html>

17.完整案例

<!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>

注：学习内容皆来自www.freecodecamp.org

posted on 2023-04-04 23:38  成果和地方  阅读(51)  评论(0)  编辑  收藏  举报  来源