关于『HTML』:第一弹

建议缩放90%食用

根据C2024XSC212童鞋的提问, 我准备写一稿关于『HTML』基础的帖

But!

当我看到了C2024XSC130的 "关于『HTML5』『CSS3』"

猛然发现

我的代码居然

不! 符! 合! 标! 准! 了! 呜呜呜  (暴风哭泣)  

我的风格突然就又双叒叕过时了

要是不能用,我岂不是误人子弟,残害祖国花朵

... ...

But!

经过我的亲自验证(拿OJ做实验)

发现

旧版HTML的代码格式还是可以用哒~[但你还是过时了(痛苦面具)], 接下来不废话直接开讲~

  知道前面是废话就好  


你现在看到的是这样的

其实我看到的,是这样的

糟糕,是幻术么

不!它是过时的HTML!


正文开始

一. 什么是HTML

(这段可以直接略过,反正你也看不懂)

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

二. HTML 标签

(这段也可以直接略过,没啥用)

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)
  • HTML 标签通常是成对出现的,比如 <p> 和 </p>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

一般格式:

<标签>内容</标签>

三. HTML 属性

(干货开始了)

(一). 标题

  • HTML 标题(Heading)是通过 <h1 - h6> 标签来定义的
  • 由于 h 元素拥有确切的语义,因此要慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小 (不要贪图字少)

代码:

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

效果:

这是一个一级标题

这是一个二级标题

这是一个三级标题

这是一个四级标题

这是一个五级标题
这是一个六级标题

(二). font 标签

  • <font>规定文本的字体,字体的颜色,字体的大小
  • face 属性定义字体的外观
  • size 属性定义字体的大小
  • color 属性定义字体的颜色

一般格式:

<font 属性=“需要的样式/颜色/字体大小”>内容</font>

1. face

代码:

<p><font face="宋体">这是一个文本</font></p>
<p><font face="微软雅黑">这是一个文本</font></p>
<p><font face="仿宋">这是一个文本</font></p>
<p><font face="楷体">这是一个文本</font></p>

效果:

这是一个文本

这是一个文本

这是一个文本

这是一个文本

2. size

代码:

<p><font size="1px">这是一个文本</font></p>
<p><font size="2px">这是一个文本</font></p>
<p><font size="3px">这是一个文本</font></p>
<p><font size="4px">这是一个文本</font></p>
<p><font size="5px">这是一个文本</font></p>
<p><font size="6px">这是一个文本</font></p>
<p><font size="7px">这是一个文本</font></p>

效果:

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

3. color

(1). 英文单词

代码:

<p><font color="red">这是一个文本</font></p>
<p><font color="orange">这是一个文本</font></p>
<p><font color="yellow">这是一个文本</font></p>
<p><font color="green">这是一个文本</font></p>
<p><font color="cyan">这是一个文本</font></p>
<p><font color="blue">这是一个文本</font></p>
<p><font color="purple">这是一个文本</font></p>

效果:

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

哇!七色彩虹!

(2). 色值

代码:

<p><font color="#66789A">这是一个文本</font></p>
<p><font color="#E5B193">这是一个文本</font></p>
<p><font color="#EFC884">这是一个文本</font></p>
<p><font color="#76A9DE">这是一个文本</font></p>
<p><font color="#9BCDFC">这是一个文本</font></p>
<p><font color="#E9A0B4">这是一个文本</font></p>
<p><font color="#6A90EA">这是一个文本</font></p>

效果:

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

这是一个文本

莫兰迪色系呢(夹带私货)

(三). HTML 段落

  • HTML 段落是通过标签 p来定义的.

代码:

<p>这是一个段落</p>
<p>这是另一个段落</p>

效果:

这是一个段落

这是另一个段落

(四). 文本修饰

1. 删除线(中划线):

代码:

<p><del>我爱刷题ヾ(≧▽≦*)刷题爱我</del></p>
<p><s>这条挂掉</s></p>

效果:

我爱刷题ヾ(≧▽≦*)刷题爱我

这条挂掉

2. 下划线:

代码:

<p><u>今年817稻米节快乐鸭~</u></p>

效果:

今年817稻米节快乐鸭~

3. 加粗:

代码:

<p><b>小朋友你是否有很多问号</b></p>
<p><strong>山河拱手,为君一笑</strong></p>

效果:

小朋友你是否有很多问号

山河拱手,为君一笑

4. 缩小:

代码:

<small>我是您亲友为您预定的七夕蛤蟆</small>

效果:
我是您亲友为您预定的七夕蛤蟆

5. 斜体:

代码:

<i>一想二干三成功,一等二看三落空</i>

效果:
一想二干三成功,一等二看三落空

第一弹到这就结束了呢亲


第一弹完结撒花~ []~( ̄▽ ̄)~*

至于第二弹么... 我要学习三叔拖更(丙丙叔!我也来鸽稿辣~)

上述语言挺好使的  但它还是过时了呜呜呜

关于『HTML』:第一弹 就酱紫结束啦~叭叭~

下一篇:"关于『HTML』:第二弹"

关于『HTML』:第一弹的更多相关文章

  1. 关于『HTML5』第一弹

    关于『HTML5』:第一弹 建议缩放90%食用 祝各位国庆节快乐!!1 经过了「过时的 HTML」.「正当时的 Markdown」的双重洗礼后,我下定决心,好好学习HTML5  这回不过时了吧(其实和 ...

  2. 关于『Markdown』:第一弹

    关于『Markdown』:第一弹 建议缩放90%食用 声明: 在我之前已有数位大佬发布 "Markdown" 的语法知识点, 在此, 仅整理归类以及补缺, 方便阅读. 感谢 C20 ...

  3. 『MXNet』第一弹_基础架构及API

    MXNet是基础,Gluon是封装,两者犹如TensorFlow和Keras,不过得益于动态图机制,两者交互比TensorFlow和Keras要方便得多,其基础操作和pytorch极为相似,但是方便不 ...

  4. 『PyTorch』第一弹_静动态图构建if逻辑对比

    对比TensorFlow和Pytorch的动静态图构建上的差异 静态图框架设计好了不能够修改,且定义静态图时需要使用新的特殊语法,这也意味着图设定时无法使用if.while.for-loop等结构,而 ...

  5. 关于『HTML5』:第二弹

    关于『HTML5』:第二弹 建议缩放90%食用 咕咕咕咕咕咕咕!!1 (蒟蒻大鸽子终于更新啦) 自开学以来,经过了「一脸蒙圈的 半期考试」.「二脸蒙圈的 体测」的双重洗礼,我终于有空肝 HTML5 辣 ...

  6. 关于『Markdown』:第二弹

    关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...

  7. 关于『HTML』:第二弹

    关于『HTML』:第二弹 建议缩放90%食用 第二弹! 它来了! 它来了! 我竟然没有拖更,对了,你们昨天用草稿纸了么 开始正文之前提一个问题:大家知道"%%%"是什么意思吗?就这 ...

  8. 关于『进击的Markdown』:第一弹

    关于『进击的Markdown』:第一弹 建议缩放90%食用 比起隐蔽物下的狙击手,Markdown更像冲锋陷阵的阵头兵 简单.粗暴.直接.而且好上手 各位晚上好! 早饭吃了吗您 我 今 天 没 吃 M ...

  9. 『PyTorch』第二弹重置_Tensor对象

    『PyTorch』第二弹_张量 Tensor基础操作 简单的初始化 import torch as t Tensor基础操作 # 构建张量空间,不初始化 x = t.Tensor(5,3) x -2. ...

随机推荐

  1. Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件

    运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. ...

  2. oracle三个重要参数文件:pfile和spfile和init.ora

    Oracle中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件.它们是在数据库实例启动第一个阶段时候加载的, 决定了数据库的物理 结构.内存.数据库的限制及系统大量的默认值.数据库的各种物理 ...

  3. 基于File NIO写的一个文件新增内容监控器

    基于File NIO写的一个文件新增内容监控器 需求说明 监控一个文件,如果文件有新增内容,则在控制台打印出新增内容. 代码示例 FileMoniter文件监控器类 package com.black ...

  4. linux运行二进制文件编写方式

    chmod +x ./test.sh #使脚本具有执行权限 ./test.sh #执行脚本 注意,一定要写成 ./test.sh,而不是 test.sh,运行其它二进制的程序也一样,直接写 test. ...

  5. Unity中制作血条2.0

    ##1.血量显示 不必像之前那样添加Slider组件 直接创建Image 在添加Source Image之后,将Image Type 修改为Filled 通过修改Fill Mode就可以显示不同效果 ...

  6. GraphScope v0.12.0 版本发布

    GraphScope 每月进行常规版本的迭代与发布,GraphScope v0.12.0 全新版本在四月如期而至.v0.12.0 为交互式图查询 GAIA 引入全新的 IR 层以及新增 Giraph ...

  7. 执行Hive sql 报FAILED:Execution Error,return code 2 from org.apache.hadoop.hive.ql.exec.mr.MapRedTask

    在hive Beeline命令行使用insert into ... select ...向hive表插入数据时,报FAILED:Execution Error,return code 2 from o ...

  8. vue-core-video-player-基于vue.js的视频播放器组件

    一 介绍 一款基于 vue.js 的轻量级的视频播放器插件插件 个性化配置 i18n 服务端渲染 画中画模式 事件订阅 易于开发 移动端适配 1.1 官方文档 https://core-player. ...

  9. 【笔记】PyTorch快速入门:基础部分合集

    PyTorch快速入门 Tensors Tensors贯穿PyTorch始终 和多维数组很相似,一个特点是可以硬件加速 Tensors的初始化 有很多方式 直接给值 data = [[1,2],[3, ...

  10. 基于casbin的RBAC权限实践

    五一假期疫情封在家也没事做,就想来优化一下一个前端容器小项目 之前的TODOlist里面有一项是权限这块时隔2年了还一直没有动手 迟迟没搞主要还是我太懒了,哈哈 其实我一直想要找一个轻量级的权限通用方 ...