乐趣区

关于html:运维开发必备技能陪你分阶段巩固复习前端知识攻破前端技能防线

jiezi

写在开篇

先探讨一个问题：运维开发工程师是什么？所谓的运维、所谓的开发，到底怎么了解？到底是运维还是开发？笔者是不是能够这样去了解：只有开发跟运维畛域相干的脚本、工具、产品，那么也都能够说是运维开发？假如这个了解是成立的，那么运维开发工程师平时只写一些零零散散的脚本，那算得上是运维开发工程师不？笔者认为算不上，顶多就是运维工程师，运维工程师对脚本（python、shell）的开发能力是必备的。那么运维开发工程师所须要把握的技能要求是什么？笔者认为，应该具备打造运维工具、产品的能力，也就是全栈：运维技能 + 全栈开发技能 = 运维开发工程，而基本的指标是：研发运维畛域相干工具、产品。所以，把握的常识就须要更多，如：运维自身的技能、前端、后端、数据库、各种开发框架（web、分布式、事件驱动），尽管要学习的货色有很多，但只有坚持不懈、坚定不移、忍受得住寂寞，就必定能把握必备技能。不要忘了，万丈高楼平地起，根底不牢，地动山摇。前端的技能是笔者薄弱点，所以决定先从前端技能开始温习坚固（尽管以前学习过）。当然除了温习坚固根底的（HTML、CSS、JavaScript），笔者也还会继续分享 Vue.JS 的相干技能常识。总而言之就是先把前端的开发技能给打牢固了。且前端技能的温习坚固路线还须要分阶段，指标拆解。废话不说！进入主题：本篇先温习坚固（解说）最根底的 HTML。

html 文档

  • 阐明：

     所有 HTML 文档都必须以文档类型申明结尾: <!DOCTYPE html>。HTML 文档以 <html> 开始，以 </html> 完结。HTML 文档的可见局部位于 <body> 和 </body> 之间。

  • 案例：

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区 </title>
      <meta charset="utf-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
      <p> 这是彩虹运维技术栈社区，公众号 ID：TtrOpsStack</p>
  </body>
</html>

<!DOCTYPE> 申明

  • 阐明：

    <!DOCTYPE> 申明示意文档类型，并帮忙浏览器正确显示网页。它只呈现一次，在页面顶部（在任何 HTML 标记之前）。<!DOCTYPE> 申明不辨别大小写。<!DOCTYPE> 申明是 HTML5 网页:

  • 案例：

    <!DOCTYPE html>

HTML 题目

HTML 题目是要在网页上显示的题目或副标题。

  • 阐明：

    HTML 题目（Heading）是通过 <h1> 到 <h6> 等标签进行定义的。<h1> 定义最重要的题目。<h6> 定义不重要的题目。倡议：应该将 <h1> 用作主题目（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。

  • 案例：

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区 </title>
      <meta charset="utf-8" />
  </head>
  <body>
      <h1> 这是彩虹运维技术栈社区 </h1>
      <h2> 微信公众 ID（WeChat public ID）：TtrOpsStack</h2>
      <h2> 全称：Taste The Rainbow Operations Stack Community</h2>
      <h3> 简称：TtrOps Stack Community</h3>
      <h4> 意义：Taste The Rainbow Operations Stack Community（品尝彩虹运维技术栈社区）</h4>
      <h5>TTR（Taste The Rainbow），“TTR”是“Taste The Rainbow”的缩写，意思是“品尝彩虹”</h5>
      <h5> 彩虹象征的寓意是美妙、童话、空想。彩虹在雨后才会呈现，阐明所要谋求的漂亮，要在历经肯定的挫折之后能力达到想要的指标或是美妙的心愿。也是一种踊跃、衰弱的生活观、生存形式。不经验风雨怎能见彩虹？</h5>
  </body>
</html>

HTML 段落

能够把 HTML 文档宰割为若干段落。段落总是从新行开始，通常是一个文本块。

  • 阐明：

    HTML 段落是通过 <p> 标签来定义的。浏览器会主动地在段落的前后增加空行。（<p> 是块级元素）

  • 案例：

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区 </title>
      <meta charset="utf-8" />
  </head>
  <body>
      <h1> 这是彩虹运维技术栈社区 </h1>
      <p> 彩虹运维技术栈社区 </p>
      <p> 彩虹运维技术栈社区，微信公众 ID（WeChat public ID）：TtrOpsStack</p>
  </body>
</html>

  • 进一步分析 

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 为什么起名彩虹运维技术栈社区 </h1>
      <p>
          彩虹
          象征的寓意是美妙、童话、空想。彩虹在雨后才会呈现，阐明所要谋求的漂亮，要在历经肯定的挫折之后能力达到想要的指标或是美妙的心愿。也是一种踊跃、衰弱的生活观、生存形式。不经验风雨怎能见彩虹？</p>
  </body>
</html>

    上述代码的成果将显示在一行上

  • 成果如下:

  • 解决办法：应用 pre 元素 

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 为什么起名彩虹运维技术栈社区 </h1>
      <pre>
          彩虹
          象征的寓意是美妙、童话、空想。彩虹在雨后才会呈现，阐明所要谋求的漂亮，要在历经肯定的挫折之后能力达到想要的指标或是美妙的心愿。也是一种踊跃、衰弱的生活观、生存形式。不经验风雨怎能见彩虹？</pre>
  </body>
</html>

  • pre 元素的特点：

    HTML <pre> 元素定义事后格式化的文本。<pre> 元素中的文本以固定宽度字体显示（通常为 Courier），并保留空格和换行符:
  • 成果如下:

HTML 链接

  • 阐明：

    HTML 链接是通过 <a> 标签来定义的。

  • 案例：

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</title>
      <meta charset="utf-8" />
  </head>
  <body>
      <a href="https://mp.weixin.qq.com/s/wHt73NzYWv-M_pT5ANcKoQ"> 一文带你简略玩转 AlertManager 警报组件 </a>
  </body>
</html>

    在 href 属性中指定链接的地址。

HTML 图像

  • 阐明：

    HTML 图像是通过 <img> 标签进行定义的。图像的名称和尺寸是以属性的模式提供的：(src), (alt), width, and height

  • 案例：

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</title>
      <meta charset="utf-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 Logo</h1>
      <img src="./img/logo-wechat-id.jpg">
  </body>
</html>

HTML 水平线

  • 阐明：

    <hr> 标签定义 HTML 页面中的主题变动（比方话题的转移），并显示为一条水平线。留神：<hr> 标记是空标记，这意味着它没有完结标记。<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变动）:

  • 代码如下：

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
      <hr>
      <p title="彩虹运维技术栈社区"> 公众号 ID：TtrOpsStack</p>
  </body>
</html>
  • 成果如下:

HTML 换行符

  • 阐明:

    HTML <br> 元素定义换行符。留神：<br> 标记是空标记，这意味着它没有完结标记。如果您心愿在不产生一个新段落的状况下进行换行（新行），请应用 <br> 标签：

  • 代码如下：

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 为什么起名彩虹运维技术栈社区 </h1>
      <p> 彩虹 <br> 象征的寓意是美妙、童话、空想。彩虹在雨后才会呈现，阐明所要谋求的漂亮，要在历经肯定的挫折之后能力达到想要的指标或是美妙的心愿。<br> 也是一种踊跃、衰弱的生活观、生存形式。<br> 不经验风雨怎能见彩虹？</p>
  </body>
</html>
  • 成果如下:

HTML 款式（style 属性用于扭转 HTML 元素的款式）

再解说款式之前，先来个小前戏，CSS 用处是什么？CSS 是形容如何显示 HTML 元素的款式，这就是他的次要作用。那么在 HTML 中，还能够通过 style 属性来实现款式的批改，本篇做几个简略的例子。其实，在理论开发中，款式是专由 CSS 负责。也就是说 HTML 是内容，CSS 是管制内容如何显示，比方色彩、字体、布局等等，理论开发中，内容和款式的管制是拆散的。

  1. 小栗子：扭转字体色彩和大小

    设置 HTML 元素的款式，能够通过 style 属性实现。

style 属性语法：

<tagname style="property:value;">

留神：property 是 CSS 的属性，value 是 CSS 属性值。

  • 代码如下：

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
      <p style="color:red;"> 公众号 ID：TtrOpsStack</p>
      <p style="color:blue;"> 继续分享运维开发畛域常识、教训。</p>
      <p style="font-size:50px;"> 诚邀您的关注 </p>
  </body>
</html>
  • 成果如下：

  1. 小栗子：扭转背景色彩 

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
 <head>
     <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
     <meta charset="UTF-8" />
 </head>
 <body style="background-color:powderblue;">
     <h1> 彩虹运维技术栈社区 </h1>
     <p style="color:red;"> 公众号 ID：TtrOpsStack</p>
     <p style="color:blue;"> 继续分享运维开发畛域常识、教训。</p>
     <p style="font-size:50px;"> 诚邀您的关注 </p>
 </body>
</html>
  • 成果如下：

  1. 小栗子：扭转字体的款式 

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
 <head>
     <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
     <meta charset="UTF-8" />
 </head>
 <body style="background-color:powderblue;">
     <h1 style="font-family:verdana;"> 彩虹运维技术栈社区 </h1>
     <p style="font-family:courier;"> 公众号 ID：TtrOpsStack</p>
     <p style="font-family:courier;"> 继续分享运维开发畛域常识、教训。</p>
     <p style="font-size:50px;"> 诚邀您的关注 </p>
 </body>
</html>
  2. 成果如下：

  1. 小栗子：扭转字体尺寸

    CSS font-size 属性定义 HTML 元素的文本字体大小 

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
 <head>
     <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
     <meta charset="UTF-8" />
 </head>
 <body>
     <h1 style="font-size:300%;"> 彩虹运维技术栈社区 </h1>
     <p style="font-size:160%;"> 公众号 ID：TtrOpsStack</p>
     <p style="font-size:100%;"> 继续分享运维开发畛域常识、教训。</p>
     <p style="font-size:200%;"> 诚邀您的关注 </p>
 </body>
</html>
  2. 成果如下：

  1. 小栗子：文本对齐（使其居中）

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
 <head>
     <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
     <meta charset="UTF-8" />
 </head>
 <body>
     <h1 style="text-align:center;"> 彩虹运维技术栈社区 </h1>
     <p style="text-align:center;"> 公众号 ID：TtrOpsStack</p>
     <p style="text-align:center;"> 继续分享运维开发畛域常识、教训。</p>
     <p style="text-align:center;"> 诚邀您的关注 </p>
 </body>
</html>
  2. 成果如下：

写在最初

最罕用的 html 标签坚固和温习结束

  • 应用 style 属性设置 HTML 元素的款式
  • 应用 background-color 设置背景色
  • 应用 color 设置文本色彩
  • 应用 font-family 设置字体系列
  • 应用 font-size 设置字体大小

  • 应用 text-align 进行文本对齐

    本文转载于：https://mp.weixin.qq.com/s/53…

退出移动版