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

news2024/9/22 19:41:22

上述主要是对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源代码显示结果    描述
&lt;<    小于号或显示标记
&gt;>    大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot; “  引号
&reg;®已注册
&copy; ©版权
&trade;商标
&nbsp;不断行的空白

 作业

编写一个完整的 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 页面。

页面中包含一个表格,要求:

  • 表格的标题为:成绩单
  • 表格的内容为:
姓名数学语文英语
Alice1009998
Bob999897
Tom    989796

 

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

  • 包含一行文本:©2018-2022 Me 版权所有 

 

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

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1922759.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kithara与OpenCV (二)

Kithara使用OpenCV QT 进行特征检测 目录 Kithara使用OpenCV QT 进行特征检测OpenCV 特征检测简介Qt应用框架简介项目说明关键代码抖动测试测试平台&#xff1a;测试结果&#xff1a;结论 OpenCV 特征检测简介 OpenCV是一个开源的计算机视觉库&#xff0c;提供了各种图像处理…

WordPress 主题技巧:给文章页增加“谁来过”模块。

模块功能&#xff1a; 我个人目前在做一个电影类的网站&#xff0c;在开发文章页的模版时候&#xff0c;突然觉得给文章页增加一个“谁对本电影感兴趣”的功能模块可能会比较有趣&#xff0c;这个功能有点类似于‘足迹’的感觉&#xff0c;用户可以通过这个功能&#xff0c;发…

昇思25天学习打卡营第14天|K近邻算法实现红酒聚类

红酒Wine数据集 类别(13类属性)&#xff1a;Alcohol&#xff0c;酒精&#xff1b;Malic acid&#xff0c;苹果酸 Ash&#xff0c;灰&#xff1b;Alcalinity of ash&#xff0c;灰的碱度&#xff1b; Magnesium&#xff0c;镁&#xff1b;Total phenols&#xff0c;总酚&#xf…

tkinter-TinUI-xml实战(12)pip可视化管理器

引言 pip命令行工具在平常使用方面确实足够简单&#xff0c;本项目只是作为TinUI多界面开发的示例。 当然&#xff0c;总有人想用GUI版pip&#xff0c;实际上也有。不过现在&#xff0c;我们就来手搓一个基于python和TinUI&#xff08;tkinter&#xff09;的pip可视化管理器。…

102.qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互使用教程

自定义实现的Table控件&#xff0c;支持跨qt版本&#xff0c;兼容qt5,qt6&#xff01; 截图如下所示: 黑色风格如下所示&#xff1a; 视频演示入口&#xff1a;Qt QML QianWindowV2.5(新增曲线综合示例、QML最全Table交互示例、支持qt5/qt6)_哔哩哔哩_bilibili 1.示例页面入口…

Python爬虫技术从去哪儿网获取旅游数据,对攻略进行可视化分析,提供全面的旅游攻略和个性化的出行建议

背景 随着信息技术的快速发展和互联网的普及&#xff0c;旅游行业也迎来了数字化和智能化的变革。去哪儿网作为中国领先的在线旅游平台之一&#xff0c;提供了丰富的旅游产品和服务&#xff0c;涵盖了机票、酒店、旅游度假等各个方面。用户通过去哪儿网可以方便地查询、预订和…

羧基聚乙二醇生物素的制备方法;COOH-PEG-Biotin

羧基聚乙二醇生物素&#xff08;COOH-PEG-Biotin&#xff09;是一种常见的生物分子聚合物&#xff0c;具有多种应用&#xff0c;特别是在生物实验、药物研发和生物技术等领域。以下是对该化合物的详细解析&#xff1a; 一、基本信息 名称&#xff1a;羧基聚乙二醇生物素&#x…

C/C++ 进阶(7)模拟实现map/set

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;C 一、简介 map和set都是关联性容器&#xff0c;底层都是用红黑树写的。 特点&#xff1a;存的Key值都是唯一的&#xff0c;不重复。 map存的是键值对&#xff08;Key—Value&#xff09;。 set存的是键…

一图展示免费开源的分布式版本控制系统​Git

文章目录 前言一、安装Git二、Git配置三、git命令 前言 Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。 一、安装Git Windows操作系统…

端到端拥塞控制的本质

昨天整理了一篇 bbr 的微分方程组建模(参见 bbr 建模)&#xff0c;算是 bbr 算法终极意义上的一个总结&#xff0c;最后也顺带了对 aimd 的描述&#xff0c;算是我最近比较满意的一篇分享了。那么接下来的问题&#xff0c;脱离出具体算法&#xff0c;上升到宏观层面&#xff0c…

【Redis】复制(Replica)

文章目录 一、复制是什么&#xff1f;二、 基本命令三、 配置&#xff08;分为配置文件和命令配置&#xff09;3.1 配置文件3.2 命令配置3.3 嵌套连接3.4 关闭从属关系 四、 复制原理五、 缺点 以下是本篇文章正文内容 一、复制是什么&#xff1f; 主从复制 master&#xff…

【UE5.1 角色练习】15-枪械射击——子弹发射物

目录 效果 步骤 一、创建并发射子弹 二、优化子弹 效果 步骤 一、创建并发射子弹 1. 在前面的文章中&#xff08;【UE5.1 角色练习】06-角色发射火球-part1&#xff09;我们创建了蓝图“BP_Skill_FireBall” 这里我们复制一份命名为“BP_Ammo_5mm”&#xff0c;用于表示…

OpenAI终止对中国提供API服务,对国内AI市场产生重大冲击?

6月25日&#xff0c;OpenAI突然宣布终止向包括中国在内的国家地区提供API服务&#xff0c;本月9日这一政策已经正式生效了&#xff01; 有人说&#xff0c;这个事件给中国AI行业带来很大冲击&#xff01;是这样吗&#xff1f;在展开讨论前&#xff0c;我们先来看看什么是API服务…

详解如何通过稀疏向量优化信息检索

在信息检索方法的发展历程中&#xff0c;我们见证了从传统的统计关键词匹配到如 BERT 这样的深度学习模型的转变。虽然传统方法提供了坚实的基础&#xff0c;但往往难以精准捕捉文本的语义关系。如 BERT 这样的稠密检索方法通过利用高维向量捕获文本的上下文语义&#xff0c;为…

配置Maven并使用IDEA新建一个简单的Springboot项目

一.maven的配置 1.查看电脑上是否配置了maven ①使用快捷键“WinR”打开运行窗口&#xff0c;在窗口中输入cmd&#xff0c;点击确定进入黑色命令窗口 ②在命令行窗口中输入如下命令 mvn -version 如果出现下面的提示则表示该电脑已配置maven&#xff0c;否则需要进行maven配…

pdf工具

iLovePDF | 为PDF爱好者提供的PDF文件在线处理工具 https://www.ilovepdf.com/zh-cn 图片 pdf 合并成一个pdf也可以拆分

基于AT89C51单片机超声波水位液位控制系统设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的1616点阵LED显示器字符滚动显示设计的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 设计任务与要求 原理图 仿真图 代码 系统论文 资源下载 设计任务与要求…

css横向滚动条支持鼠标滚轮

在做视频会议的时候&#xff0c;标准模式视图会有顶部收缩的一种交互方式&#xff0c;用到了横向滚动&#xff1b;一般情况下鼠标滚轮只支持竖向滚动&#xff0c;这次写个demo是适配横向滚动&#xff1b; 效果图展示 实现横向滚动条顶部显示 <div className{style.remote_u…

【C++基础】初识C++(2)--引用、const、inline、nullptr

目录 一、引用 1.1 引用的概念和定义 1.2 引用的特性 1.3引用的使用 1.4 const引用 1.5 指针和引用的关系 二、inline 三、nullptr 一、引用 1.1 引用的概念和定义 引⽤不是新定义⼀个变量&#xff0c;⽽是给已存在变量取了⼀个别名&#xff0c;编译器不会为引⽤…

打造你的智能家居指挥中心:基于STM32的多协议(zigbee、http)网关(附代码示例)

1. 项目概述 随着物联网技术的蓬勃发展&#xff0c;智能家居正逐步融入人们的日常生活。然而&#xff0c;市面上琳琅满目的智能家居设备通常采用不同的通信协议&#xff0c;导致不同品牌设备之间难以实现互联互通。为了解决这一难题&#xff0c;本文设计了一种基于STM32的多协…