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

    总所周知,html5成为时下越来越火的语言,因为一次编程可以同时运行到Android和IOS上。百度百科给出的定义...

  • Html学习之旅——常用标签02

    超链接标签 示例 其中href为超链的属性,name算是一个公共的属性,为了表示当前标签 运行结果 运行结果上如所...

  • Html学习之旅——常用标签03

    表格标签 示例1 效果图: 示例2: 效果图: 表单标签 示例 效果图 提交表单之后的效果 框架标签 示例 效果图...

  • 03-HTML常用标签

    typora-copy-images-to: media 第01阶段.前端基础.HTML常用标签 学习目标 理解:...

  • 全部 html + 相关 css 汇总

    以下是常用html+相关css全部汇总: # 01html标签 ``` html标签 是组成网页的骨架 区域划分作...

  • html常用标签01

    标题标签 段落标签 换行标签 文本格式化标签加粗标签 倾斜标签 删除标签 下滑线标签

  • html入门级常用标签

    html入门级常用标签 html的格式规范 html中常用的标签 html中常用标签有a、form、input、b...

  • day01 html常用标签的使用

    day01 关于html常用标签的使用 * 什么是html? - HyperText Markup Languag...

  • 前端技能总结

    目前已学习的内容 HTML HTML常用标签 HTML语义化 HTML5新增标签 CSS CSS语法 CSS选择器...

  • HTML笔记-- 其他常用标签

    HTML笔记-- 其他常用标签 标签(空格分隔): HTML html中其他常用标签: b:加粗 s:删除线 u:...

网友评论

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

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