第一天开始学前端——文本标签

最新推荐文章于 2024-10-09 21:37:09 发布
最新推荐文章于 2024-10-09 21:37:09 发布
阅读量71 收藏
点赞数 1
分类专栏： 前端 文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62911018/article/details/120832876
版权

代码：

<!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>body标签</title>

</head>

<body>

    <!-- p19 -->

    <h3>静夜思</h3>

    <p>床前明月光，疑似地上霜。</p>

    <p>举头望明月，低头思故乡。</p>

    <!-- p25 -->

    <h1>这是一级标题</h1>

    <h2>这是二级标题</h2>

    <h3>这是三级标题</h3>

    <h4>这是四级标题</h4>

    <h5>这是五级标题</h5>

    <h6>这是六级标题</h6>

    <!-- p26 -->

    <h3>爱莲说</h3>

    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，

        世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，

        中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>

    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。

        噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>

        <!-- p28 -->

        <h3>静夜思</h3>

    <p>床前明月光，疑似地上霜。<br/>举头望明月，低头思故乡。</p>

    <!-- p29 -->

    <p>这是普通文本</p>

    <strong>这是粗体文本</strong>

    <b>这是粗体文本</b>

    <i>斜体文字</i>

    <em>斜体文字</em>

    <cite>斜体文字</cite>

    <!-- p31:文字上标-->

    <p>(a+b) <sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>

    <!-- 文字下标 -->

    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>

    <!-- p32:删除线 -->

    <p>新西兰奇异果</p>

    <p><s>原价：6.50/kg</s></p>

    <p><strong>现：4.00/kg</strong></p>

    <!-- p33：下划线 -->

    <p><u>绿叶学习网</u></p>

    <!-- p33:大小号标签 -->

    <p>普通文字标签</p>

    <big>大号文字</big>

    <small>小号文字</small>

    <!-- p35:水平线标签 -->

    <h3>静夜思</h3>

    <hr />

    <p>床前明月光，疑似地上霜。</p>

    <p>举头望明月，低头思故乡。</p>

    <!-- p36:div -->

    <div>

        <h3>静夜思</h3>

    <p>床前明月光，疑似地上霜。</p>

    <p>举头望明月，低头思故乡。</p>

    </div>

    <div><h3>静夜思</h3>

        <p>床前明月光，疑似地上霜。</p>

        <p>举头望明月，低头思故乡。</p>

    </div>

    <!-- p39:块元素与行内元素 -->

    <div>

        <h3>绿叶学习网</h3>

        <p>“绿叶，给你初恋般的感觉。”</p>

        <strong>绿叶学习网</strong>

        <em>“绿叶，给你初恋般的感觉。”</em>

    </div>

    <!-- p41:网页中的空格 -->

    <h3>爱莲说</h3>

    <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，

        世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，

        中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>

    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。

        噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>

    <!-- p43:特殊符号 -->

    <p>欧元：&euro;</p>

    <p>英镑：&pound;</p>

   

</body>

</html>

 

 

 

 

肝了肝了
关注
专栏目录
斑码教育大前端课堂笔记-css第一天
11-24
【CSS第一天】——斑码教育大前端课堂笔记详解 斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，...
icon字体-对应练习第二天的font资源
02-26
在“icon字体——对应练习第二天的font资源”这个主题中，可能涉及到的练习包括学习如何导入和使用icon字体库，理解Unicode码点，以及通过CSS自定义图标样式。提供的"font"文件可能包含了练习所需的各种字体资源，...
(4)_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
例如，新的`<canvas>`标签提供了在浏览器中进行图形绘制的能力，`<video>`和`<audio>`标签则让网页可以直接内嵌视频和音频内容，无需依赖Flash等第三方插件。此外，`<section>`、`<article>`、`<header>`、`<footer>...
(74)_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
资源包中的"天字一号网络 (74)"可能是一个具体的示例项目，展示了如何实现这种自适应布局。 前端页面的构建不仅依赖于HTML，CSS（Cascading Style Sheets）同样起着至关重要的作用。CSS3新增了许多功能，如选择器...
tenDayChallenge-dayOne:这是我自己挑战的十天挑战。 dayOne 是一个简单的博客模板，您可以在其中发布图像和文本
06-14
下面我们将详细探讨这个挑战的第一天——斯特拉（Stella）阶段，以及涉及的CSS技术。 首先，让我们了解一下斯特拉。斯特拉可能是这个项目第一天所采用的设计概念或者主题名，它可能代表了设计的简洁性和优雅性。在...
HTML5实现唐朝服饰网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-27 1666
HTML5实现唐朝服饰网站模板源码，大作业，毕业设计，唐装网站，服饰网站，网站源码，介绍唐装的由来，分为网站首页，唐装演变，唐装配色，唐装花纹，唐装文化等页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入唐朝服饰的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5
最新发布
rch041126的博客
10-09 504
文章目录1 HTML基础认识1.1 HTML注释1.2 HTML标签的结构2 HTML标签2.1 排版标签2.1.1 标题标签2.1.2 段落标签2.1.3 换行标签2.1.4 水平线标签2.2 文本格式化标签2.2.1 文本格式化标签2.3 媒体标签2.3.1 图片标签2.3.2 路径2.3.2.1 绝对路径2.3.2.2 相对路径2.3.2.2.1 同级目录2.3.2.2.2上级目录2.3.2.2.3下级目录2.3.3 音频标签2.3.4 视频标签2.4 链接标签3 综合案例3.1 招聘4 列表标签4.
HTML5实现古典音乐网站源码模板1
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
10-09 770
HTML5实现古典音乐网站源码模板1，大作业，毕业设计，古典音乐网站，音乐网站，网站源码，介绍古典音乐由来，分为网站首页，古典音乐，著名人物，古典乐器，历史起源等页面，实现了轮播图、视频、音乐播放，表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入古典音乐的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
CSS中的flex概述
学无止境
10-02 316
例如，当容器空间小于子元素的总宽度（或高度）时，子元素将按照。（默认值，当子元素未设置交叉轴方向的尺寸时）：子元素沿交叉轴方向拉伸，填满容器。：行（列）沿交叉轴均匀分布，每行（列）之间以及与容器边缘的间隔都相等。：子元素沿主轴均匀分布，每个子元素之间以及与容器边缘的间隔都相等。：行（列）沿交叉轴均匀分布，两端的行（列）与容器边缘对齐。：行（列）沿交叉轴均匀分布，每行（列）两侧都有相等的间隔。：子元素沿主轴均匀分布，每个子元素两侧都有相等的间隔。：子元素沿主轴均匀分布，两端的子元素与容器边缘对齐。
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 369
【代码】CSS彩虹按钮设计demo。
【CSS】水平垂直居中
小秀的博客
10-02 527
容器设置position: relative。子元素设置 position: absolute;left: 50%;需要给子元素设置 position: absolute;设置固定宽度和高度;top、left、bottom、right都设置为0;margin设置为auto；给容器设置 display: flex;子项设置 margin: auto;给父盒子设置属性 flex。给父盒子和子盒子设置属性。flex:1 的作用。
Tailwind Css的使用
liu62615的博客
10-09 200
官网解释：Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。我的理解是利用Tailwind CSS 提供的特定的类名，它帮你来实现css。项目里面饮入Tailwind Css样式。在main.js全局引入对应的css文件。配置文件中添加所有模板文件的路径。下载好之后项目里面就会有。
【CSS】flex: 1； 的意思
小秀的博客
10-09 141
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
前端通过 CSS 为 ＜i＞ 标签（图标）和 ＜span＞ 标签（文本）设置不同的样式
susu1083018911的博客
10-09 161
前端通过 CSS 为 标签（图标）和 标签（文本）设置不同的样式
CSS基础中padding详解
ning的博客
10-09 740
通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元素尺寸的影响。掌握这些知识，可以帮助我们在布局设计中更加灵活和精确地控制元素的显示效果。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS基础：最详细 padding的 4 种用法解析。
CSS基础中margin详解
ning的博客
10-09 416
外边距是元素盒子模型的一部分，位于边框（border）之外。它定义了元素与其他元素之间的距离。外边距不会影响元素的宽度和高度，但它会影响元素的总占用空间。外边距是CSS布局中一个非常强大的工具，合理使用外边距可以创建出更加美观和响应式的网页设计。通过理解外边距的基本概念和高级应用，我们可以更好地控制元素之间的空间，提升页面的整体布局效果。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章如何设置 CSS 的外边距和内填充（附布局小技巧）
CSS响应式布局
2401_82561004的博客
10-09 516
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
CSS调整元素大小
2401_82561004的博客
10-09 143
属性，该属性允许用户通过拖动的方式来自由缩放元素的尺寸，在此之前要实现类似的效果还需要借助大量的 JavaScript 代码。为了增强用户体验，CSS3 中新增了一个非常实用的 resize。运行上面的代码，然后通过拖动元素的右下角就可以调整元素的大小。图：resize 属性演示。
使用CSS实现酷炫加载
qq_33003143的博客
10-03 883
使用CSS实现炫酷loading动画
前端学习全攻略：从入门到精通
"前端学习路线详细版，涵盖了前端学习的各个阶段，包括前端入门、巩固基础、前端工程化、前端优化、前端生态、前端求职和前端未来。此路线图强调了学习特质如兴趣、坚持和付出，提供了丰富的学习资源，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值