html基础标签

最新推荐文章于 2024-08-14 09:08:45 发布
最新推荐文章于 2024-08-14 09:08:45 发布
阅读量228 收藏
点赞数 1
分类专栏： web基础小练习 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hssf_xxy/article/details/123305836
版权

文章目录

小练习1

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

<head>
    <!--charset设置字符编码-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--keywords 搜索引擎可以搜索的关键字-->
    <meta name="keywords" content="html">
    <!--description 标题的描述-->
    <meta name="description" content="练习1">
    <title>小练习1</title>
    <!--跳转该网页时候的小图标-->
    <link rel="icon" href="/images/logo.png">
</head>

<body>
</body>

</html>

小练习2

<!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>web应用课程作业</title>
</head>

<body>
    <!-- 标题标签 -->
    <h2>春江花月夜</h2>
    <h5>张若虚</h5>
    <!-- p段落标签 br换行 -->
    <p>
        春江潮水连海平，海上明月共潮生。<br>
        滟滟随波千万里，何处春江无月明！<br>
        江流宛转绕芳甸，月照花林皆似霰；<br>
        空里流霜不觉飞，汀上白沙看不见。<br>
        江天一色无纤尘，皎皎空中孤月轮。<br>
        江畔何人初见月？江月何年初照人？<br>
        人生代代无穷已，江月年年望相似。
    </p>
    <!-- hr水平下划线 -->
    <hr>
    <!-- pre段落标签可以保留回车和空格 -->
    <pre>
        int main()
        {
            int a, b;
            scanf("%d%d", &a, &b);
            printf("%d %d\n", a, b);
            return 0;
        }
    </pre>
    <p>
        <!-- i表示斜体，b表示加粗 ，del表示删除线，ins表示下划线 -->
        <i>春眠不觉晓，</i><b>处处闻啼鸟。</b><del>夜来风雨声，</del><ins>花落知多少。</ins>
    </p>
    <p>
        <!-- mark标记成黄色 -->
        <mark>练习</mark>
        <!-- strong加粗 -->
        <strong>加粗</strong>
    </p>
</body>

</html>

小练习3

<!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>练习3</title>
</head>

<body>
    <!-- src表示图片的相对路径 ，
        alt表示当图片显示失败时显示的信息 
        width宽度：如果只设置宽度则高度会等比例压缩
        同理高度(height)也是
    -->
    <img width="600" src="/images/mountain.jpg" alt="山">
</body>

</html>

小练习4

<!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>小练习4</title>
</head>

<body>
    <h1>audio</h1>
    <!-- 方式1：controls控制播放 src路径 -->
    <audio controls src="/audios/bgm.mp3">无法播放</audio>
    <!-- 方式2 假如第一个播放不了则播放第二个-->
    <audio controls>
        <source src="/audios/bgm.mp3" type="audio/mp3">
        <source src="/audios/bgm.mp3" type="audio/mp3">
    </audio>
    <h1>video </h1>
    <!-- 方式1  -->
    <video controls width="600" src="/videos/video2.mp4"></video>
    <!--方式2-->
    <video controls width="600">
        <source src="/videos/video2.mp4 " type="video/mp4">
        <source src="/videos/video2.mp4 " type="video/mp4">
    </video>
</body>

</html>

小练习5

<!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>小练习5</title>
</head>

<body>
    <!-- a 超链接标签 -->
    <h1>About</h1>
    <!--a标签内部可以嵌套标签，target表示在新页面打开此链接 没加的话默认当前页面打开超链接-->
    <a href="https://baidu.com" target="_blank"><img width="50px" src="/images/logo.png" alt="logo"></a>
    <a href="/about.html">About</a>
</body>

</html>

小练习6

<!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>小练习6</title>
</head>

<body>
    <h1>Form</h1>
    <!-- form表单标签 -->
    <form action="/login.html">
        <!-- text文本标签，label的for对应input的id 
            required是否必填
            minlength最小长度
            maxlength最大长度
            placeholder提示语句
        -->
        <label for="usename">用户名</label>
        <input type="text" name="usename" id="usename" required="true" minlength="3" maxlength="15" placeholder="用户名">
        <br>
        <!-- number数字标签 -->
        <label for="age">年龄</label>
        <input type="number" name="age" id="age" required="true" placeholder="年龄">
        <br>
        <!--email邮箱标签-->
        <label for="eamil">邮箱</label>
        <input type="email" name="email" id="email" required="true" placeholder="邮箱">
        <br>
        <label for="password">密码</label>
        <input type="password" name="password" id="password" required="true" placeholder="密码">
        <br>
        <label for="resume">个人简介</label>
        <!-- textarea多行 --rows行 cols列>
        <textarea name="resume" id="resume" placeholder="个人简历"></textarea>
        <br>
        <!-- 选择方式一select -->
        <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>
        <br>
        <!-- 方式二 radio ,单选选择项目的name要一样-->
        <label for="cpp">cpp</label>
        <input type="radio" name="lang2" id="cpp" value="cpp">
        <label for="java">java</label>
        <input type="radio" name="lang2" id="java" value="java">
        <label for="python">python</label>
        <input type="radio" name="lang2" id="python" value="python">
        <br>
        <!-- 上传文件 -->
        <input type="file">
        <!-- submit提交表单按钮 -->
        <input type="submit" value="提交">

    </form>
</body>

</html>

小练习7

<!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>小练习7</title>
</head>

<body>
    <h1>List</h1>
    <!-- 无序列表 -->
    <ol>
        <li>第一讲</li>
        <li>
            第二讲
            <ul>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ul>
        <li>
            第三讲
            <ol>
                <li>第一小节</li>
                <li>第二小节</li>
                <li>第三小节</li>
            </ol>
        </li>
        </li>
    </ol>
    <!-- 有序列表 -->
    <ol>
		<li></li>
    </ol>
     <!-- dl列表用于名词解释 -->
    <dl>
        <dt>不缩进</dt>
        <dd>缩进</dd>
    </dl>
</body>

</html>

小练习8

<!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>小练习8</title>
</head>

<body>
    <table>
        <h1>Table</h1>
        <!-- caption表的标题 -->
        <caption>成绩单</caption>
        <!-- thead会自动加粗表的第一行标题 -->
        <thead>
            <!-- tr表示行 -->
            <tr>
                <!-- th表示每行的单元格 -->
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
            </tr>
        </thead>
        <!--  tbody主体部分-->
        <tbody>
            <tr>
                <th>Alice</th>
                <th>100</th>
                <th>99</th>
                <th>98</th>
            </tr>
            <tr>
                <th>Bob</th>
                <th>99</th>
                <th>98</th>
                <th>97</th>
            </tr>
            <tr>
                <th>Tom</th>
                <th>98</th>
                <th>97</th>
                <th>96</th>
            </tr>
        </tbody>
    </table>
</body>

</html>

小练习9

<!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>小练习9</title>
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <h3>我的收藏夹</h3>
    </header>
    <!-- 导航区域 -->
    <nav></nav>
    <!--内容区域-->
    <section>
        <h4>图片</h4>
        <figure>
            <img width="100px" src="/images/logo.png">
            <!-- 图片解释 -->
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img src="/images/logo.png" width="100px">
            <figcaption>山</figcaption>
        </figure>
    </section>
    <section>
        <h4>古诗</h4>
        <!-- 文章区域 -->
        <article>
            <h5>春晓</h5>
            <p>
                春眠不觉晓，<br>
                处处闻啼鸟。<br>
                夜来风雨声，<br>
                花落知多少。<br>
            </p>
        </article>
        <article>
            <h5>咏柳</h5>
            <p>
                碧玉妆成一树高，<br>
                万条垂下绿丝绦。<br>
                不知细叶谁裁出，<br>
                二月春风似剪刀。<br>
            </p>
        </article>
    </section>

    <!--右边区域-->
    <aside></aside>
    <!-- 底部区域 -->
    <footer>©2018-2022 Me 版权所有</footer>
</body>

</html>

小练习10

<!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>小练习10</title>
</head>

<body>
     <!--&copy;如下图  &lt:< &gt;> -->
    &copy;<Web>版权所有

</body>

</html>

在这里插入图片描述

废材终结者
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML基础标签
weixin_45348240的博客
03-23 6067
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
html 基础标签
a1306489467的博客
12-26 4603
文本标签： 加粗：b（<b>内容</b>），strong(<strong>内容</strong>) 倾斜：i(<i>内容</i>)，em(内容) 删除线：del(<del>内容</del>)，s(<s>内容</s>) 下划线：u(...
HTML5 基础标签
m0_73070900的博客
08-04 2537
当今互联网时代，网页是我们获取信息、交流和展示自己的重要渠道之一。而HTML（超文本标记语言）作为构建网页的基础，学习掌握HTML标签成为了必不可少的技能。
HTML常用基础标签详解
实泽有之，无泽虚之
03-09 2976
本文通过样例详解HTML常用的基础标签，包括以下标签：html、h1、h2、h3、h4、h5、h6、body、p、a、br、img。
HTML基本标签
热门推荐
m0_57898822的博客
04-02 1万+
HTML标签
HTML基础标签及其语义
gswsssw的博客
05-10 1635
一、HTML语法规范 1.1、基本语法表述 <html></html>#标签通常都是成对出现（双标签），开始结束标签 <br />#单标签 1.2、标签关系 包含关系与并列关系 包含关系 <head>#父标签 <title> </title>#子标签 <head> 并列关系 <head> </head> <body> </body&...
vscode前端环境配置与html基础标签
佛系更新
05-05 2966
💫你好，我是辰chen，一个正在考研途中的 sophomore dog😖 💫本篇内容来源于对 AcWing-Web应用课的总结与复习，其内容来源于讲义与习题打卡，Web前端专栏地址：Web前端 💫欢迎大家的关注，我的博客主要关注于考研408以及AIoT的内容 以下的几个专栏是本人比较满意的专栏(大部分专栏仍在持续更新)，欢迎大家的关注： 💥ACM-ICPC算法汇总【基础篇】 💥ACM-ICPC算法汇总【提高篇】 💥AIoT(人工智能+物联网) 💥考研 💥CSP认证考试历年题解
HTML常用基础标签
qianniao_yingmo的博客
03-30 2006
HTML常用和需要了解的标签
html基本标签
weixin_44992737的博客
06-04 4572
html基本标签
HTML基础标签.md
02-05
HTML基本标签，对于初学者来说这是最基本的内容，有效的掌握基本标签是，学习HTML的第一步，也是至关重要的，
实验1html基础标签（学生端资料）.zip
02-22
这个实验1的主题是“HTML基础标签”，意味着我们将深入探讨HTML中的一些基本元素和结构，这对于任何想要学习Web开发的人来说都是至关重要的第一步。 HTML由一系列的标签组成，这些标签定义了网页的内容和结构。每个...
HTML5常用基础标签
12-12
### HTML5常用基础标签知识点详解 #### 一、HTML的基本结构 HTML5的基本结构由`<!DOCTYPE html>`声明、`<html>`根元素及其内部的`<head>`和`<body>`元素组成。 - **`<!DOCTYPE html>`**: 定义了文档类型和版本，...
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体...
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 330
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 589
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
html+css 实现hover 边框彩色按钮
最新发布
宝码香车的博客
08-14 772
这是一个，hover后按钮边框变彩色的效果。附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 405
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

废材终结者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值