Skip to main content

WEB-HTML

表格标签​

HTML表格标签
HTML表格标签
tfoot定义表格的页脚
table定义表格
th定义表格的表头
tr定义表格的行
td定义表格单元
caption定义表格标题
colgroup定义表格列的组
col定义用于表格列的属性
thead定义表格的页眉
tbody定义表格的主体

<html>标签​

html标签定义HTML文档。

  • lang：指定文档的语言。

<head>标签​

head标签定义文档的头部。

<meta>标签​

meta标签定义文档的元数据。

<title>标签​

title标签定义文档的标题。

<style>标签​

style标签定义文档的样式。

<link>标签​

link标签定义文档的外部资源。

<body>标签​

body标签定义文档的主体内容。

<footer>标签​

footer标签定义文档的页脚。

<main>标签​

main标签定义文档的独一无二的主体内容。

<section>标签​

section标签定义文档主体内容中的节。

<!-- 告诉浏览器该文档是 HTML5 文档 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 指定文档的字符编码 -->
    <meta charset="UTF-8">
    <!-- 指定视口宽度为设备宽度，初始缩放比例为1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CatPhotoApp</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>  
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</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>
    </main>
    <footer>
      <p>No Copyright - freeCodeCamp.org</p>
    </footer>
  </body>
</html>

<div>标签​

div标签定义文档中的一个块级元素。

<a>标签​

a标签定义超链接，用于从一个页面链接到另一个页面。

<a href="https://www.freecodecamp.org" target="_blank">
  <img src="image-link.jpg" alt="A photo of a cat.">
</a>
freeCodeCamp
  • href：指定链接的目标URL。
  • target：指定链接的打开方式
    • _blank表示在新窗口中打开
    • _self表示在当前窗口中打开
    • _parent表示在父窗口中打开
    • _top表示在最顶层窗口中打开

<ul>标签​

ul标签定义无序列表。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>标签​

ol标签定义有序列表。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<figure>标签​

figure标签将媒体内容和描述信息组合在一起。

<figcaption>标签​

figcaption元素用于为figure元素添加标题，以描述figure元素中包含的图像。

<figure>
  <img src="image-link.jpg" alt="A photo of a cat.">
  <figcaption>A cat</figcaption>
</figure>

<em>标签​

em标签定义强调文本。

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

<strong>标签​

strong标签定义强调文本。

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

<form>标签​

form标签定义表单。

  • action：指定表单提交的URL。
  • method：指定表单提交的方式
    • post：将表单数据发送到服务器进行处理。
    • get：将表单数据附加到URL的查询字符串中。
<form action="/url-of-form-handler" method="post">
  <input type="text" name="name" />
</form>

<fieldset>标签​

fieldset元素用于在 Web 表单中将相关输入和标签分组在一起。

<legend>标签​

legend元素用于为fieldset元素添加标题。

<label>标签​

label用于帮助将输入元素的文本与输入元素本身关联起来。

<input>标签​

input标签定义输入控件。

  • id：指定输入控件的唯一标识符。
  • type：指定输入控件的类型
    • text：单行文本输入框。
    • password：密码输入框。
    • email：电子邮件输入框。
    • number：数字输入框。
    • radio：单选按钮。
    • checkbox：复选框。
  • name：指定输入控件的名称。
  • value：指定输入控件的值。
  • placeholder：指定输入控件的占位符文本。
  • required：指定输入控件为必填项。
  • checked：指定输入控件为默认选中状态。
<input type="text" name="username" placeholder="请输入用户名" required />

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

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

使用for属性将label与input关联起来。

<!-- 使用for属性将label与input关联起来 -->
<input id="loving" type="checkbox"> <label for="loving"> Loving</label>

<button>标签​

button标签定义按钮。

  • type：指定按钮的类型
    • submit：提交表单。
    • reset：重置表单。
    • button：普通按钮。
<!-- 不带任何属性的表单按钮的默认会将表单提交到表单的action指定的位置 -->
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <input type="text" name="catphotourl" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

<article>标签​

article标签定义独立的内容块。

<hr>标签​

hr标签定义水平线。