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

上述主要是对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.mzph.cn/pingmian/45645.shtml

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

相关文章

克隆某个特定的分支而不是默认分支(master)

当你克隆一个远程仓库时&#xff0c;默认情况下 Git 会克隆整个仓库并将 master&#xff08;或 main&#xff0c;取决于默认分支的名称&#xff09;分支检出为当前分支。如果你想直接克隆某个特定的分支而不是默认分支&#xff0c;可以使用 --branch 或 -b 选项来指定分支。 克…

PostgreSQL 怎样处理数据仓库中维度表和事实表的关联性能?

文章目录 PostgreSQL 中维度表和事实表关联性能的处理 PostgreSQL 中维度表和事实表关联性能的处理 在数据仓库的领域中&#xff0c;PostgreSQL 作为一款强大的关系型数据库管理系统&#xff0c;对于处理维度表和事实表的关联性能是一个关键的问题。维度表和事实表的关联是数据…

【手写数据库内核组件】0301 动态内存池,频繁malloc/free让系统不堪重负,动态内存池让应用自由使用动态内存

动态内存管理 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 文章目录 动态内存管…

RSA算法详解:万字文章详解RSA的加密与解密

本文目录 文章前言一、RSA的诞生1、加密算法的前世今生① 《六韬龙韬》中的阴符与阴书② 古罗马&#xff1a;凯撒密码③ 斯巴达&#xff1a;塞塔式密码&#xff08;Scytale&#xff09; 2、对称加密的脆弱性3、非对称加密算法的出现 二、RSA中的数学概念与定理1、质数理论2、关…

韩国裸机云大宽带服务器主要特点和优势

韩国裸机云大宽带服务器是一种高性能的服务器解决方案&#xff0c;它专为需要大量数据处理和快速互联网连接的应用而设计**。这种服务器通常由第三方服务提供商提供&#xff0c;主要特点是没有预装操作系统和软件&#xff0c;用户可以根据自身需求进行个性化配置。以下将根据您…

使用Qt和mitmproxy开发一个抓取网页短视频的万能工具

目录 实现原理 mitmproxy介绍 功能简介 安装 脚本示例 如何使用 解释 注意事项 QT工具实现 其他资源 实现原理 使用WebView组件造一工具,工具可输入网页地址并显示网页内容及播放视频。把工具的代理设置指向mitmproxy的端口服务。配合使用mitmproxy的MITM技术,监…

7.8~7.10练习

目录 1.扑克牌游戏 2.链表基本功能的实现&#xff08;单项链表&#xff09; 3.移除链表元素力扣 4.反转链表力扣 5.链表的中间结点 5.返回倒数第k个节点​编辑 6.合并两个有序链表 7.链表基本功能的实现&#xff08;双向链表&#xff09; 8.链表分割 1.扑克牌游戏 public…

LightRAG:高效构建和优化大型语言模型应用的 PyTorch 框架

一、前言 随着大语言模型 (LLM) 的蓬勃发展&#xff0c;检索增强生成 (RAG) 技术作为一种将 LLM 与外部知识库结合的有效途径&#xff0c;受到了越来越多的关注。 然而&#xff0c;构建 LLM 应用的真正挑战在于开发者需要根据具体需求进行高度定制化&#xff0c;而现有的 RAG …

Vscode ssh远程连接Linux服务器登录时密码password无法输入

问题 最近在用Vscode远程连接Linux服务器时&#xff0c;在终端提示输入密码password的时候用键盘输入没有反应。 以为是键盘坏了&#xff0c;然后尝试复制粘贴没有用。 后来找到了原因以及解决方法&#xff0c;感谢原帖作者&#xff08;原贴链接粘在下面&#xff09; 原因 …

flutter 列表下拉框加搜索

1.使用控件搜索加下拉框dropdown_search: ^0.4.9和获取中文拼音lpinyin: ^1.1.1 2.加入中文查询和首字查询 在当中找到相应的packages&#xff0c;再在SelectDialog.dart当中加入引入拼音搜索 import package:lpinyin/lpinyin.dart; 更改匹配方法manageItemsByFilter使其可…

有必要把共享服务器升级到VPS吗?

根据自己的需求来选择是否升级&#xff0c;虚拟专用服务器 (VPS) 是一种托管解决方案&#xff0c;它以低得多的成本提供专用服务器的大部分功能。使用 VPS&#xff0c;您的虚拟服务器将与在其上运行的其他虚拟服务器共享硬件服务器的资源。但是&#xff0c;与传统的共享托管&am…

Oracle数据库加密与安全

Wallet简介&#xff1a; Oracle Wallet(即内部加密技术TDE( Transparent DataEncryption&#xff09; TDE是 Oracle10gR2中推出的一个新功能,使用时要保证Oracle版本是在10gR2或者以上 Wallet配置&#xff1a; 1.创建一个新目录&#xff0c;并指定为Wallet目录 /home/oracle…

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

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

C# Path

Path.CombinePath.GetDirectoryNamePath.GetFileNamePath.GetFullPathPath.GetExtensionPath.GetFileNameWithoutExtensionPath.HasExtensionPath.ChangeExtensionPath.GetPathRootPath.IsPathRooted C# 中的 Path 是 System.IO 命名空间中的一个类&#xff0c;提供了用于操作…

el-input-number计数器change事件校验数据,改变绑定数据值后change方法失效问题的原因及解决方法

在change事件中如果对el-input-number绑定的数据进行更改&#xff0c;会出现change事件失效的问题 试过&#xff1a;this.$set()及赋值等方法&#xff0c;都无法解决 解决方法&#xff1a;用$nextTick函数对绑定值进行更改&#xff08; this.$nextTick(() > { this.绑定…

Java:构造函数与对象

第一章&#xff1a;构造函数揭秘 —— 创造者的第一次触碰 构造函数&#xff0c;顾名思义&#xff0c;是用于创建和初始化对象的特殊方法。它没有返回类型&#xff0c;名字与类名一致。构造函数是对象诞生的第一步&#xff0c;也是最至关重要的一步。让我们通过一个生动的例子…

STM32HAL库+ESP8266+cJSON+微信小程序_连接华为云物联网平台

STM32HAL库ESP8266cJSON微信小程序_连接华为云物联网平台 实验使用资源&#xff1a;正点原子F407 USART1&#xff1a;PA9P、A10&#xff08;串口打印调试&#xff09; USART3&#xff1a;PB10、PB11&#xff08;WiFi模块&#xff09; DHT11&#xff1a;PG9&#xff08;采集数据…

JavaScript 判断客户端是手机还是pad

引言 在日常开发中&#xff0c;经常需要根据设备的类型来做不同的适配或逻辑处理。特别是在移动端开发中&#xff0c;判断用户使用的设备类型是手机还是平板电脑是非常常见的需求。本文将介绍使用 JavaScript 判断设备类型的方法&#xff0c;并提供相应的代码示例。 设备类型…

【Soc级系统防御】PCB安全威胁与防御策略:攻击模型与实践指南

本文档深入探讨了印刷电路板(PCB)面临的安全挑战,包括硬件木马、现场修改、盗版和反向工程等攻击方式,并提供了相应的攻击模型、案例研究、实验操作及练习题,旨在提升对PCB安全威胁的认识和防范能力。 目录 您提供的文档内容中包含了第11章的目录信息,以下是该目录部分的…

阿里云通义千

**阿里云通义千问是阿里云自主研发的一款超大规模语言模型**&#xff0c;专门用于深入理解和分析用户输入的自然语言&#xff0c;以便在不同领域和任务中为用户提供智能服务与协助。以下是对阿里云通义千问模型的相关介绍&#xff1a; 1. **模型能力** - **单轮对话能力**&…