总所周知,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>
排版标签
<!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>
<!-- 图片属性 -->
小弟的女朋友![](1.jpg)小弟的女朋友
</body>
</html>
其中的属性效果如下图所示