写在开篇

先探讨一个问题:运维开发工程师是什么?所谓的运维、所谓的开发,到底怎么了解?到底是运维还是开发?笔者是不是能够这样去了解:只有开发跟运维畛域相干的脚本、工具、产品,那么也都能够说是运维开发?假如这个了解是成立的,那么运维开发工程师平时只写一些零零散散的脚本,那算得上是运维开发工程师不?笔者认为算不上,顶多就是运维工程师,运维工程师对脚本(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...