iOS转前端之HTML基础知识学习

来源：互联网发布：java object 锁编辑：程序博客网时间：2024/05/21 10:12

写在开头

如今的iOS开发就业形势很严峻，怎么说呢？一句话就是想招个靠谱的很难，想找到工作也很难。有人说现在学iOS开发，就相当于1949年加入国民党。哈哈，当然这只是来搞笑的。之前在知乎看到有人提问：”iOS开发真的这么难就业吗？”其实对于这个问题，我想他内在的含义是：“请问现在 iOS 是不是还和以前一样随便学一下就能找到工作？”说实话，最重要的还是看一个人的学习能力，你要知道我们不可能在混一门语言混一辈子，哪天苹果要是倒闭了，岂不是完蛋了（当然目前看还是很有前景的）。做为一个程序猿，学习能力必不可少，会多门语言肯定是利大于弊的，这样以后在跳槽的时候才能更自信的出牛逼，哈哈。在精通一两门语言的前提下，可以横向扩展延伸，要知道语言大部分都是想通的，上手应该很快，但如果深入学习，还是要花很多功夫的。

为什么选择前端？

第一，前端现在也是非常火，完全有种当年iOS的势头，而且这段时间下来，对于我们有编程基础的人来说学起来并不难，而且JS的语法像极了Switf，基本看一眼就会了(不，应该是Switf借鉴了JS)。第二，JS语言很强大，RN，Weex这些框架跨三端，想想一套代码三端运行感觉很吊的样子。第三，前端与iOS的交互在日常开发经常遇到，有很大帮助。

好了，废话不多说，开始我们的前端之旅吧！！！

首先，前端主要有三块，HTML负责基本架构，就相当于毛坯房；CSS负责整体的样式和布局，就相当于对房子进行装修；而JS主要负责交互函数，就相当于人住进房子跟房子进行互动。我们先从最简单的HTML来说起。

下面我的介绍大部分会以代码为主，都是有注释的，看起来也很方便。毕竟take is cheap, show me the code~

先从输出Hello World开始吧

<!--根标签--><html><!--头部:配置性的信息-->   <head>     <meta charset="UTF-8">     <title>HTML学习</title>   </head><!--身体(主要内容)-->   <body>       你好,世界!   </body></html>

单从HTML来说，最终的是标签，标签的种类非常多，一般掌握一些常用的就可以，其他的用到再去查（Google，百度）

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>常见的标签</title></head><body>  <!--h标签 标题标签-->  <h1>11111111111111111</h1>  <h2>11111111111111111</h2>  <h3>11111111111111111</h3>  <h4>11111111111111111</h4>  <h5>11111111111111111</h5>  <h6>11111111111111111</h6>  <!--div标签:很纯洁的容器-->  <div>22222222222222222222222  </div>  <div>22222222222222222222222</div>  <input placeholder="请输入姓名">  <br>  <input value="测试1">  <br>  <input type="color">  <br>  <input type="radio">  <br>  <input type="checkbox">  <br>  <input type="date">  <br>  <div>      <div>          4444444444444444      </div>  </div>  <!--横线标签-->  <hr>  <!--表单标签-->  <input placeholder="请输入姓名">  <br>  <input value="测试2">  <br>  <input type="color">  <br>  <input type="radio">  <br>  <input type="checkbox">  <br>  <input type="date">  <br><!--段落标签-->  <p>wedewdheuwdheiwhdeiuwhuiewfuhif</p>  <p>15151514651121115511212121212</p><!--超链接标签-->   <a href="http://baidu.com" target="_blank">百度一下,你就知道</a><!--图像标签    相对路径 本地的资源    绝对路径: http:// ftp:// file://-->   <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" width="200" height="150">   <img src="images/img_01.jpg" alt="风光"><!--列表标签-->    <ul>       <li>111111</li>       <li>222222</li>       <li>333333</li>    </ul>   <hr><!--换行标签-->  <br></body></html>

下面是一些段落方面的标签，在新闻类和图书方便的网页上经常见到：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>库克破局迎新生，主推ipad pro，市场是否能如愿？</title></head><body><!--文章-->  <article>      <!--头部-->      <header>          <h1>库克破局迎新生，主推ipad pro，市场是否能如愿？</h1>          <h4>iPad 苹果 智能硬件 分类 :互联网</h4>      </header>      <!--中间主要内容-->      <section>          <h3>但苹果真的是沿着这样的趋势在没落吗？</h3>          <p>的确，从公司经营与产品创新两个角度来看，库克应当委以一个地道精明商人的称誉，而乔布斯要冠以却是完美的天才产品经理盛誉。既然出发点和追求的落脚点不同，分别以产品创新和商业经营为主导的两条不同分叉理念上衍生的产品文化，自然相差甚远，形成的落差也在所难免，不必在意纠结。</p>      </section>      <section>          <h3>库克以商人的身姿迎合市场，以破局者的段位迎接新生。</h3>          <p>为了拥抱市场需求，他打破了乔布斯始终强调的3.5英寸显示屏最佳苹果屏，换上了大众广为喜爱的4英寸、4.7英寸、5.5寸等屏幕，虽然在产品的外观打造上缺少较为革命性的突破，但在辅助性的产品智能操作上却是不断地推陈出新。</p>          <p>正所谓不破不立，破就要根除彻底，且要标新立异。作为新一代的苹果公司领袖，库克正在用自己的所信奉的商业准则清洗深烙着乔布斯个人印记的苹果宗教文化，毕竟再也难有谁能够成为第二个乔布斯，这个苹果的时代属于他，所以他必须成为自己。为此，从商业化出发，库克完成了苹果帝国为更好地掠夺占有市场的最大利润，开始了他从小屏到大屏布局的战略谋划。</p>      </section>      <!--尾部-->      <footer>          <p>下一篇:周鸿祎做机心结被阻，撕逼酷派，望置之死地而后生</p>      </footer>  </article></body></html>

下面是HTML5中增加的一些标签：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><!--  src 和 href的区别: src是引用资源(不可缺少), href仅仅就是引用  src -> <script></script>、<img>   href  ->  <link>、<a></a> --><!--进度条--><progress value="30" max="100"></progress><!--音频--><audio src="source/music.m4a" controls="controls"></audio><!--视频--><video src="source/BigBuck.m4v" controls="controls"></video></body></html>

HTML标签类型

HTML有N多标签，根据显示的类型，主要可以分为3大类

一、块级标签
独占一行的标签

能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

二、行内标签（内联标签）

多个行内标签能同时显示在一行

宽度和高度取决于内容的尺寸（比如span、a、label）

三、行内-块级标签（内联-块级标签）

多个行内-块级标签可以显示在同一行

能随时设置宽度和高度（比如input、button）

下面看一个例子：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        div{            background-color: red;            width: 300px;            height: 30px;            /*隐藏*/            /*display: none;*/            /*变成块级标签*/            /*display: inline;*/            /*变成行内-块级标签*/            /*display: inline-block;*/        }        p{            background-color: green;            width: 150px;            height: 40px;            /*display: none;*/            /*变成块级标签*/            /*display: inline;*/        }        span{            background-color: yellowgreen;            width: 500px;            height: 250px;            /*让标签变成块级标签*/            /*display: block;*/            /*变成行内-块级标签*/            display: inline-block;        }        input{            width: 500px;            height: 130px;            /*display: block;*/            /*display: inline;*/        }        button{            width: 250px;            height: 38px;        }    </style></head><body> <!--块级标签-->  <div>11111111111111</div>  <div>11111111111111</div>  <p>222222222222222</p>  <!--行内标签-->  <span>222222222</span>  <span>222222222</span>  <br>  <!--行内-块级标签-->  <input value="我是MT">  <button>我是MJ</button></body></html>

CSS中有个display属性，能修改标签的显示类型

none：隐藏标签

block：让标签变为块级标签

inline：让标签变为行内标签

inline-block：让标签变为行内-块级标签（内联-块级标签）

大概介绍的就这么多，其他的看到可以去网上查。传送门最终的还是要自己多敲几遍，更好理解。

还有几点要说的：

一、编程工具：个人用的是WebStorm，其他例如：HBuilder、IDE都是很不错的。

二、调试：网页当然是在浏览器上调试，一般我会使用Google的Chrome，Safari也是极好的，一般的应该都可以，右键菜单点击检查元素，这个页面上的代码可以很直观的看到，可以看看一些大型网站别的代码是怎么写的，对学习很有帮助。

好了，咱们下篇见。

阅读全文

0 0