Html学习之旅——常用标签01
2017-01-17 本文已影响0人
袋袋_Deken
总所周知，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>我只是替换符标签<和大于号>以及    这个空格符
</body>
</html>
其中font标签中的size属性默认只有1到7个登级，要想更大或者更小则需要配合css使用，后面的文字标签可以嵌套在font中使用也可以单独使用。
结果：
运行效果图
图片标签
图片标签
示例
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Deken前端学习 </title>
</head>
<body>
<!-- 图片属性 -->
小弟的女朋友小弟的女朋友
</body>
</html>
其中的属性效果如下图所示
运行效果
