先探讨一个问题:运维开发工程师是什么?所谓的运维、所谓的开发,到底怎么理解?到底是运维还是开发?笔者是不是可以这样去理解:只要开发跟运维领域相关的脚本、工具、产品,那么也都可以说是运维开发?假设这个理解是成立的,那么运维开发工程师平时只写一些零零散散的脚本,那算得上是运维开发工程师不?笔者认为算不上,顶多就是运维工程师,运维工程师对脚本(python、shell)的开发能力是必备的。那么运维开发工程师所需要掌握的技能要求是什么?笔者认为,应该具备打造运维工具、产品的能力,也就是全栈:运维技能+全栈开发技能=运维开发工程,而根本的目标是:研发运维领域相关工具、产品。所以,掌握的知识就需要更多,如:运维本身的技能、前端、后端、数据库、各种开发框架(web、分布式、事件驱动),虽然要学习的东西有很多,但只要持之以恒、坚持不懈、忍耐得住寂寞,就肯定能掌握必备技能。不要忘了,万丈高楼平地起,基础不牢,地动山摇。前端的技能是笔者薄弱点,所以决定先从前端技能开始复习巩固(虽然以前学习过)。当然除了复习巩固基础的(HTML、CSS、JavaScript),笔者也还会持续分享Vue.JS的相关技能知识。总而言之就是先把前端的开发技能给打牢固了。且前端技能的复习巩固路线还需要分阶段,目标拆解。废话不说!进入主题:本篇先复习巩固(讲解)最基础的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 段落是通过 <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>
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<title>微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>为什么起名彩虹运维技术栈社区</h1>
<pre>
彩虹
象征的寓意是美好、童话、幻想。彩虹在雨后才会出现,
说明所要追求的美丽,要在历经一定的挫折之后才能达到想要的目标或是美好的希望。
也是一种积极、健康的生活观、生活方式。
不经历风雨怎能见彩虹?
</pre>
</body>
</html>
<!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 属性中指定链接的地址。
<!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>
<!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>
<!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>
再讲解样式之前,先来个小前戏,CSS用途是什么?CSS是描述如何显示HTML元素的样式,这就是他的主要作用。那么在HTML中,还可以通过style属性来完成样式的修改,本篇做几个简单的例子。其实,在实际开发中,样式是专由CSS负责。也就是说HTML是内容,CSS是控制内容如何显示,比如颜色、字体、布局等等,实际开发中,内容和样式的控制是分离的。
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>
<!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>
<!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>
<!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>
<!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>
最常用的html标签巩固和复习完毕
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。