【Web开发手礼】探索Web开发的魅力（三）-html基础标签（3）

最新推荐文章于 2024-08-09 21:30:00 发布

程序猿零零漆

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量1.5k

点赞数 47

分类专栏： Web应用文章标签：前端 html

本文链接：https://blog.csdn.net/m0_63267251/article/details/140364734

版权

Web应用专栏收录该内容

18 篇文章 0 订阅

订阅专栏

上述主要是对html标签的介绍和一些基本练习可以当作日常笔记收藏一下！！！

前言

html基础标签

前言

上述主要是对html标签的介绍和一些基本练习可以当作日常笔记收藏一下！！！

提示：以下是本篇文章正文内容，下面案例可供参考

html基础标签

表格

<table>标签

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

<thead>标签

HTML的<thead>元素定义了一组定义表格的列头的行。

<tbody>标签

HTML的<tbody>元素定义一组数据行。

<tr>标签

HTML <tr> 元素定义表格中的行。同一行可同时出现<td> 和<th> 元素。

<th>标签

HTML <th>元素定义表格内的表头单元格。

<td>标签

HTML <td> 元素定义了一个包含数据的表格单元格。

<caption>标签

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在相对于表格的任意位置。

<table>
    <caption>My Table</caption>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

语义标签

<header>

HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<nav>

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

<section>

HTML <section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

<figure>

HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

<figcaption>

HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

<article>

HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

<aside>

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。

<footer>

HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

特殊方法
HTML源代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

作业

编写一个完整的 HTML 页面。

要求：

页面标签的标题为：Web应用课作业
charset为：UTF-8
keywords为：acwing,web,html
description为：本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。
icon设置为：/images/logo.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>Web应用课作业</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/images/logo.png">
  <meta name="keywords" content="acwing,web,html">
  <meta name="description" content="本课程为【AcWing工程课系列——Level-3 第一篇】《Web应用课》，讲解Web相关知识。">
  
</head>
</html>

编写一个完整的HTML页面。

要求
页面从上到下的内容依次为：

(1) <h2>标题，内容为：春江花月夜。
(2) <h5>标题，内容为：张若虚。
(3) 编写一个段落，内容为（注意标点和行末回车）：

春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明！
江流宛转绕芳甸，月照花林皆似霰；
空里流霜不觉飞，汀上白沙看不见。
江天一色无纤尘，皎皎空中孤月轮。
江畔何人初见月？江月何年初照人？
人生代代无穷已，江月年年望相似。

(4) 一个水平线
(5) 一段代码，需要用预定义格式文本，内容为：

int main()
{
    int a, b;
    scanf("%d%d", &a, &b);
    printf("%d %d\n", a, b);
    return 0;
}

(6) 编写一个段落，内容为：春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。，第一句话用斜体（包括句末标点），第二句话加粗（包括句末标点），第三句话加删除线（包括句末标点），第四句话加下划线（包括句末标点）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>春江花月夜</h2>
  <h5>张若虚</h5>
  <p>
    春江潮水连海平，海上明月共潮生。<br>
    滟滟随波千万里，何处春江无月明！<br>
    江流宛转绕芳甸，月照花林皆似霰；<br>
    空里流霜不觉飞，汀上白沙看不见。<br>
    江天一色无纤尘，皎皎空中孤月轮。<br>
    江畔何人初见月？江月何年初照人？<br>
    人生代代无穷已，江月年年望相似。
  </p>
  <hr>
  <pre>
    int main()
{
    int a, b;
    scanf("%d%d", &a, &b);
    printf("%d %d\n", a, b);
    return 0;
}
  </pre>
  <p>
    <i>春眠不觉晓，</i>
    <b>处处闻啼鸟。</b>
    <del>夜来风雨声，</del>
    <ins>花落知多少。</ins>
  </p>
</body>
</html>

编写一个完整的 HTML 页面。

要求
页面里包含一张图片，各个属性值为：

src为：/images/mountain.jpg。
alt为：山。
width为：600

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <img src="/images/mountain.jpg" alt="山" width="600">
    </body>
    </html>

编写一个完整的 HTML 页面。

页面中包含一个音频和一个视频。

音频格式：

具有属性controls。
src为：/audios/bgm.mp3

视频格式：

具有属性controls
src为：/videos/video2.mp4
width为：600

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <audio controls src="/audios/bgm.mp3"></audio>
        <video controls src="/videos/video2.mp4" width="600"></video>
    </body>
    </html>

编写一个完整的 HTML 页面。

页面从上到下的内容依次为：

一个超链接，内容为：About，跳转到/about.html，在当前页面中加载。
一个超链接，内容为一张图片，图片地址：/images/logo.png，宽度为50px，alt为logo，跳转到：https://www.acwing.com，在新窗口中打开。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <a href="/about.html">About</a>
        <a href="https://www.acwing.com" target="_blank"><img src="/images/logo.png" alt="logo" width="50px"></a>
    </body>
    </html>

编写一个完整的 HTML 页面。

页面中包含一个表单，表单的action为/login.html，表单中的内容从前到后依次为：

1.一个text类型的input标签。

name为：username
id为：username
具有required属性
minlength为：3
maxlength为：15
placeholder为：用户名
label的文本为：用户名

2.一个number类型的input标签。

name为：age
id为：age
具有required属性
placeholder为：年龄
label的文本为：年龄

3.一个email类型的input标签

name为：email
id为：email
具有required属性
placeholder为：邮箱
label的文本为：邮箱

4.一个password类型的input标签

name为：password
id为：password
具有required属性
placeholder为：密码
label的文本为：密码

5.一个textarea标签

name为：resume
id为：resume
没有required标签
placeholder为：个人简介
label的文本为：个人简介

6.一个select标签

name为：lang
id为：lang
label的文本为：语言
第一个option：value为Cpp，文本为：Cpp
第二个option：value为Java，文本为：Java
第三个option：value为Python，文本为：Python

7.一个按钮

type为submit
文本为：提交

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form action="/login.html">
            <label for="username">用户名</label>
            <input required type="text" id="username" name="username" placeholder="用户名"
            minlength="3" maxlength="15">
            <label for="age">年龄</label>
            <input required type="number" id="age" name="age" placeholder="年龄">
            <label for="email">邮箱</label>
            <input required type="email" id="email" name="email" placeholder="邮箱">
            <label for="password">密码</label>
            <input required type="password" name="password" id="password" placeholder="密码">
            <label for="resume">个人简介</label>
            <textarea name="resume" id="resume" placeholder="个人简介"></textarea>
            <label for="lang">语言</label>
            <select name="lang" id="lang">
                <option value="Cpp">Cpp</option>
                <option value="Java">Java</option>
                <option value="Python">Python</option>
            </select>
            <button type="submit">提交</button>
        </form>
    </body>
    </html>

编写一个完整的 HTML 页面。

页面中包含一个有序列表：

列表第一项只包含一个文本，内容为：第一讲

列表第二项包含：

一个文本，内容为：第二讲
一个无序列表，包含3项，均为文本，内容分别为：第一小节、第二小节、第三小节。

列表第三项包含：

一个文本，内容为：第三讲
一个有序列表，包含3项，均为文本，内容分别为：第一小节、第二小节、第三小节。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ol>
    <li>第一讲</li>
    <li>第二讲
      <ul>
        <li>第一小节</li>
        <li>第二小节</li>
        <li>第三小节</li>
      </ul>
    </li>
    <li>第三讲
      <ol>
        <li>第一小节</li>
        <li>第二小节</li>
        <li>第三小节</li>
      </ol>
    </li>
  </ol>
</body>
</html>

编写一个完整的 HTML 页面。

页面中包含一个表格，要求：

表格的标题为：成绩单
表格的内容为：

姓名	数学	语文	英语
Alice	100	99	98
Bob	99	98	97
Tom	98	97	96

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table >
    <caption>成绩单</caption>
    <thead>
      <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>语文</th>
      <th>英语</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>100</td>
        <td>99</td>
        <td>98</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>99</td>
        <td>98</td>
        <td>97</td>
      </tr>
      <tr>
        <td>Tom</td>
        <td>98</td>
        <td>97</td>
        <td>96</td>
      </tr>
      
    </tbody>
    
  </table>
</body>
</html>

编写一个完整的 HTML 页面。

内容包括四个部分：

header区：

包含<h3>标题，内容为：我的收藏夹

section区，从上到下依次为：

包含<h4>标题，内容为：图片
第一个<figure>，包含一个<img>，src为/images/logo.png，宽度为100px，<figcaption>的文本为：logo
第二个<figure>，包含一个<img>，src为/images/mountain.jpg，宽度为100px，<figcaption>的文本为：山

section区，从上到下依次为：

包含<h4>标题，内容为：古诗
第一个<article>，包含一个<h5>标题，内容为：春晓，之后包含一个段落，内容为：春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
第二个<article>，包含一个<h5>标题，内容为：咏柳，之后包含一个段落，内容为：碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。

footer区

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <h3>我的收藏夹</h3>
    </header>

    <section>
        <h4>图片</h4>
        <figure>
            <img width="100" src="/images/logo.png" alt="logo">
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img width="100" src="/images/mountain.jpg" alt="山">
            <figcaption>山</figcaption>
        </figure>
    </section>

    <section>
        <h4>古诗</h4>
        <article>
            <h5>春晓</h5>
            <p>
                春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
            </p>
        </article>
        <article>
            <h5>咏柳</h5>
            <p>
                碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。
            </p>
        </article>
    </section>

    <footer>
        &copy;2018-2022 Me 版权所有
    </footer>
</body>

</html>

编写一个完整的 HTML 页面。

页面中包含一行如下内容：

©<Web>版权所有

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        &copy;&lt;Web&gt;版权所有
    </body>
    </html>