关于『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. nginx之配置文件公用抽取

    nginx之配置文件公用抽取 因为某些原因,需要同时部署同一应用两个不同分支的代码,而配置文件存在较大重复,因此有此篇. 最近构建的过程中遇到了一些跟nginx配置相关的问题,记录下. 简单说下构建的 ...

  2. 微信小程序拖动列表功能

    WXML部分 1 <view class="index"> 2 3 <!-- 数据展示区 --> 4 <scroll-view 5 class=&qu ...

  3. maven导入依赖了提示can't resolved

    maven导入依赖显红报错 网上有很多解决方案,我试过几个但是都不是很好用,推荐一个我自己一直在用的解决方案 在终端执行命令 mvn idea:idea 无法解析的原因基本上是因为包没下载完整,执行这 ...

  4. python——如何import包目录

    文件位置 文件所在位置包括 , 源根目录的位置 该文件位置(也可以叫相对位置). 导入包的时候会从文件位置进行查找,并导入. 导入包 1. 什么是包? pycharm中包的图片 其中文件夹上有个圆点的 ...

  5. PyQt5 基本语法(四)

    目录 2. 输入控件(一) 2.1 纯键盘 2.1.1 QLineEdit 2.1.1.1 描述 2.1.1.2 控件创建 2.1.1.3 输出模式 2.1.1.4 提示字符串 2.1.1.5 清空按 ...

  6. Java多线程与线程池技术

    一.序言 Java多线程编程线程池被广泛使用,甚至成为了标配. 线程池本质是池化技术的应用,和连接池类似,创建连接与关闭连接属于耗时操作,创建线程与销毁线程也属于重操作,为了提高效率,先提前创建好一批 ...

  7. Hystrix熔断初体验

    <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring ...

  8. netty系列之:netty中的核心MessageToMessage编码器

    目录 简介 框架简介 MessageToMessageEncoder MessageToMessageDecoder MessageToMessageCodec 总结 简介 在netty中我们需要传递 ...

  9. Java基础语法Day_06(面相对象和封装)

    第1节 描述类介绍与使用 day06_01_面向对象思想的概述 day06_02_面向对象思想的举例 day06_03_类和对象的关系 day06_04_类的定义 day06_05_对象的创建及其使用 ...

  10. 【导包】使用Sklearn构建Logistic回归分类器

    官方英文文档地址:http://scikit-learn.org/dev/modules/generated/sklearn.linear_model.LogisticRegression.html# ...