Html学习之旅——常用标签01

作者: 袋袋_Deken | 来源:发表于2017-01-17 10:11 被阅读0次

    总所周知,html5成为时下越来越火的语言,因为一次编程可以同时运行到Android和IOS上。百度百科给出的定义为:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。早在2014年便开始发布了,随着不断的完善,目前基本可以替代商城类的APP,鉴于此,给Android以及Ios开发工程师的影响会越来越大,再随着微信小程序(2017年1月份)的推出,更加对移动手机开发造成压力,很多创业公司为了缩小成本,很是青睐HTML5以及微信小程序,故而学习这些语言成为了一个必要,作为Android工程师的我们假如把这些语言都学会了是不是很开心呀,下面是我学习html的过程:

    由于html的标签繁多,比较难以记忆,而我个人比较喜欢图片,故而多用思维导图帮助辅助记忆

    第一天学习的内容

    基本准备

    开头了解

    以下为整html文件的结构:

    <! DOCTYPE   html>
      <html>
      <head>
         <title></title>
      </head>
      <body>
      </body>
    </html>
    

    排版标签

    思维导图01
    <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
    <head>                 
    <title>Deken前端学习 </title>
    </head>
    <body>
      <!-- 段落标签,添加中心属性 -->
      <p  align="center" >Deken的Html学习</p>
      <p>简书博客:http://www.jianshu.com/u/f13ffb05148f</p>
      <!-- 换行符<br>-->
      生命如此美好,你需要用微笑点亮。<br>永远相信美好的事情即将发生!
      <!--这是分割线-->
      <hr>
      <!--这是pre格式化标签 将里面文字的格式全部保留-->
      <pre>
        静夜思
        床前明月光
        疑是地上霜
        举头望明月
        低头思故乡</pre>
      <!--这是整体居中标签内容全部居中显示-->
      <center>
      <pre>
        静夜思
        床前明月光
        疑是地上霜
        举头望明月
        低头思故乡
      </pre>
    </center>
    </html>
    

    其中align为位置属性,标签内部的内容在浏览器中的位置。

    结果:
    运行截图

    文字标签

    常用的文字标签

    示例:

    <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
    <head>                 
      <title>Deken前端学习 </title>
    </head>
    
    <body>
      <!-- 六个级别的标题 -->
      <h1>小弟</h1>
      <h2>小弟</h2>
      <h3>小弟</h3>
      <h4>小弟</h4>
      <h5>小弟</h5>
      <h6>小弟</h6>
      <!-- font 标签 其中有size face color 等属性-->
      <font size="3" face="幼圆">解决<font size="6" color="red">焦虑</font>的最好方法就是行动。</font><br>
      <!-- font 标签 内部<strong>-->
      <br><font ><strong>谷歌的小弟是大神</strong></font>
      <br><font ><b>有心课堂传递的不只是技术</b></font>
    
      <!-- font标签 文本斜体-->
      <br><br><font ><em>这里是文本斜体01</em></font>
      <br><font ><i>这里是文本斜体02</i></font>
    
      <!-- font标签 删除线标签-->
      <br><br><font ><del>这里是删除线标签01</del></font>
      <br><font ><s>这里是删除线标签02</s></font>
    
      <!-- font标签 下划线标签-->
      <br><br><font ><ins>这里是下划线标签01</ins></font>
      <br><u>这里是下划线标签02</u>
    
      <!-- 替换符标签-->
      <br><br>我只是替换符标签&lt和大于号&gt以及&nbsp&nbsp&nbsp&nbsp这个空格符
    </body>
    </html>
    

    其中font标签中的size属性默认只有1到7个登级,要想更大或者更小则需要配合css使用,后面的文字标签可以嵌套在font中使用也可以单独使用。

    结果:
    运行效果图

    图片标签

    图片标签
    示例
      <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
    <head>                 
      <title>Deken前端学习 </title>
    </head>
    
    <body>
        <!-- 图片属性 -->
        小弟的女朋友![](1.jpg)小弟的女朋友
    </body>
    </html>
    

    其中的属性效果如下图所示

    运行效果

    相关文章

      网友评论

        本文标题:Html学习之旅——常用标签01

        本文链接:https://www.haomeiwen.com/subject/pcepbttx.html