运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。

写在开篇

先探讨一个问题:运维开发工程师是什么?所谓的运维、所谓的开发,到底怎么理解?到底是运维还是开发?笔者是不是可以这样去理解:只要开发跟运维领域相关的脚本、工具、产品,那么也都可以说是运维开发?假设这个理解是成立的,那么运维开发工程师平时只写一些零零散散的脚本,那算得上是运维开发工程师不?笔者认为算不上,顶多就是运维工程师,运维工程师对脚本(python、shell)的开发能力是必备的。那么运维开发工程师所需要掌握的技能要求是什么?笔者认为,应该具备打造运维工具、产品的能力,也就是全栈:运维技能+全栈开发技能=运维开发工程,而根本的目标是:研发运维领域相关工具、产品。所以,掌握的知识就需要更多,如:运维本身的技能、前端、后端、数据库、各种开发框架(web、分布式、事件驱动),虽然要学习的东西有很多,但只要持之以恒、坚持不懈、忍耐得住寂寞,就肯定能掌握必备技能。不要忘了,万丈高楼平地起,基础不牢,地动山摇。前端的技能是笔者薄弱点,所以决定先从前端技能开始复习巩固(虽然以前学习过)。当然除了复习巩固基础的(HTML、CSS、JavaScript),笔者也还会持续分享Vue.JS的相关技能知识。总而言之就是先把前端的开发技能给打牢固了。且前端技能的复习巩固路线还需要分阶段,目标拆解。废话不说!进入主题:本篇先复习巩固(讲解)最基础的HTML。

html文档

  • 说明:

    所有 HTML 文档都必须以文档类型声明开头: 。 HTML 文档以  开始,以  结束。 HTML 文档的可见部分位于  和  之间。
  • 案例:

    
    
      
          彩虹运维技术栈社区
          
      
      
          

    彩虹运维技术栈社区

    这是彩虹运维技术栈社区,公众号ID:TtrOpsStack

声明

  • 说明:

     声明表示文档类型,并帮助浏览器正确显示网页。
    它只出现一次,在页面顶部(在任何HTML标记之前)。
     声明不区分大小写。
     声明是 HTML5 网页:
  • 案例:

HTML 标题

HTML 标题是要在网页上显示的标题或副标题。
  • 说明:

    HTML 标题(Heading)是通过 

    等标签进行定义的。

    定义最重要的标题。

    定义不重要的标题。 建议:应该将

    用作主标题(最重要的),其后是

    (次重要的),再其次是

    ,以此类推。

  • 案例:

    
    
      
          彩虹运维技术栈社区
          
      
      
          

    这是彩虹运维技术栈社区

    微信公众ID(WeChat public ID):TtrOpsStack

    全称:Taste The Rainbow Operations Stack Community

    简称:TtrOps Stack Community

    意义:Taste The Rainbow Operations Stack Community (品味彩虹运维技术栈社区)

    TTR(Taste The Rainbow),“TTR”是“Taste The Rainbow”的缩写,意思是“品味彩虹”
    彩虹象征的寓意是美好、童话、幻想。彩虹在雨后才会出现,说明所要追求的美丽,要在历经一定的挫折之后才能达到想要的目标或是美好的希望。也是一种积极、健康的生活观、生活方式。不经历风雨怎能见彩虹?

HTML 段落

可以把 HTML 文档分割为若干段落。段落总是从新行开始,通常是一个文本块。
  • 说明:

    HTML 段落是通过 

    标签来定义的。 浏览器会自动地在段落的前后添加空行。(

    是块级元素)

  • 案例:

    
    
      
          彩虹运维技术栈社区
          
      
      
          

    这是彩虹运维技术栈社区

    彩虹运维技术栈社区

    彩虹运维技术栈社区,微信公众ID(WeChat public ID):TtrOpsStack

  • 进一步剖析

    
    
      
          微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
          
      
      
          

    为什么起名彩虹运维技术栈社区

    彩虹 象征的寓意是美好、童话、幻想。彩虹在雨后才会出现, 说明所要追求的美丽,要在历经一定的挫折之后才能达到想要的目标或是美好的希望。 也是一种积极、健康的生活观、生活方式。 不经历风雨怎能见彩虹?

    上述代码的效果将显示在一行上
  • 效果如下:

image.png

  • 解决办法:使用pre元素

    
    
      
          微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
          
      
      
          

    为什么起名彩虹运维技术栈社区

              彩虹
              象征的寓意是美好、童话、幻想。彩虹在雨后才会出现,
              说明所要追求的美丽,要在历经一定的挫折之后才能达到想要的目标或是美好的希望。
              也是一种积极、健康的生活观、生活方式。
              不经历风雨怎能见彩虹?
          
  • pre元素的特点:

    HTML 
     元素定义预先格式化的文本。
    
     元素中的文本以固定宽度字体显示(通常为 Courier),并保留空格和换行符:
  • 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第1张图片

HTML 链接

HTML图像

  • 说明:

    HTML 图像是通过  标签进行定义的。
    图像的名称和尺寸是以属性的形式提供的: (src), (alt), width, and height
  • 案例:

    
    
      
          彩虹运维技术栈社区,公众号ID:TtrOpsStack
          
      
      
          

    彩虹运维技术栈社区Logo

HTML 水平线

  • 说明:


    标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。 注意:
    标记是空标记,这意味着它没有结束标记。
    元素被用来分隔 HTML 页面中的内容(或者定义一个变化):
  • 代码如下:

    
    
      
          微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
          
      
      
          

    彩虹运维技术栈社区


    公众号ID:TtrOpsStack

  • 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第2张图片

HTML 换行符

  • 说明:

    HTML 
    元素定义换行符。 注意:
    标记是空标记,这意味着它没有结束标记。 如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
    标签:
  • 代码如下:

    
    
      
          微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
          
      
      
          

    为什么起名彩虹运维技术栈社区

    彩虹
    象征的寓意是美好、童话、幻想。彩虹在雨后才会出现,说明所要追求的美丽,要在历经一定的挫折之后才能达到想要的目标或是美好的希望。
    也是一种积极、健康的生活观、生活方式。
    不经历风雨怎能见彩虹?

  • 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第3张图片

HTML样式(style属性用于改变HTML元素的样式)

再讲解样式之前,先来个小前戏,CSS用途是什么?CSS是描述如何显示HTML元素的样式,这就是他的主要作用。那么在HTML中,还可以通过style属性来完成样式的修改,本篇做几个简单的例子。其实,在实际开发中,样式是专由CSS负责。也就是说HTML是内容,CSS是控制内容如何显示,比如颜色、字体、布局等等,实际开发中,内容和样式的控制是分离的。
  1. 小栗子:改变字体颜色和大小

    设置 HTML 元素的样式,可以通过 style 属性完成。

style属性语法:

注意:property是CSS的属性,value是CSS属性值。
  • 代码如下:

    
    
      
          微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
          
      
      
          

    彩虹运维技术栈社区

    公众号ID:TtrOpsStack

    持续分享运维开发领域知识、经验。

    诚邀您的关注

  • 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第4张图片

  1. 小栗子:改变背景颜色

    
    
     
         微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
         
     
     
         

    彩虹运维技术栈社区

    公众号ID:TtrOpsStack

    持续分享运维开发领域知识、经验。

    诚邀您的关注

  • 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第5张图片

  1. 小栗子:改变字体的样式

    
    
     
         微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
         
     
     
         

    彩虹运维技术栈社区

    公众号ID:TtrOpsStack

    持续分享运维开发领域知识、经验。

    诚邀您的关注

  2. 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第6张图片

  1. 小栗子:改变字体尺寸

    CSS font-size 属性定义 HTML 元素的文本字体大小
    
    
     
         微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
         
     
     
         

    彩虹运维技术栈社区

    公众号ID:TtrOpsStack

    持续分享运维开发领域知识、经验。

    诚邀您的关注

  2. 效果如下:

运维开发必备技能!陪你分阶段巩固复习前端知识,攻破前端技能防线。_第7张图片

  1. 小栗子:文本对齐(使其居中)

    
    
     
         微信公众号ID:TtrOpsStack(彩虹运维技术栈社区)
         
     
     
         

    彩虹运维技术栈社区

    公众号ID:TtrOpsStack

    持续分享运维开发领域知识、经验。

    诚邀您的关注

  2. 效果如下:

image.png

写在最后

最常用的html标签巩固和复习完毕
  • 使用 style 属性设置HTML元素的样式
  • 使用 background-color 设置背景色
  • 使用 color 设置文本颜色
  • 使用 font-family 设置字体系列
  • 使用 font-size 设置字体大小
  • 使用 text-align 进行文本对齐

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

你可能感兴趣的:(html)