HTML5的简介 - WangZiChen_H5之家 - 中国HTML5教程资源分享第一站

前言：作为IOS开发工程师，终会接触到网页前端开发，甚至可能会有用HTML5开发IOS的app客户端的需求。比如现在上架的app就有比如理财类型的app有的就用HTML开发的，从理财类型的app需求上思考，用 HTML5确实是个不错的选择，利用了跨平台的同时，也考虑到了理财类型的app仅仅需要处理的是数据的业务逻辑，不存在较多的本地存储数据，而且涉及到的财务信息从安全性考虑数据基本都会存储在服务器端，是不可能用于存储在本地的，再加上HTML5对各种手机屏幕的尺寸适配性非常灵活，所以这一类app 用HTML5开发是非常正确的选择。不过本文涉及的内容是针对IOS工程师所需的知识内容，所以并没有涉及网页前端所有的开发细节。

HTML5简介 HTML5 - 简单 8年发展 - 标准 UI界面跨平台 - 写一份HTML5代码，这个界面就可以运行到任何手机平台运行平台 - 浏览器移动先行 - 以前的HTML(5以上的版本)都是运行在非手持设备运行的原生 - 比如手机自带的手机相册\打电话\拍照 >手机app的常见的开发模式：原生+HTML5 网页的基本组成一个有具体功能的完整的网页，一般由3部分组成 HTML 决定网页的具体内容和结构 CSS 代表网页的样式(美化网页最重要的一块内容) JavaScript 网页的交互效果，比如对用户鼠标事件作出响应 <HTML和CSS需要了解就好，因为需要掌握大量东西才好做CSS美工方面的东西> HTML编写什么是HTML? HyperText Markup Language 超文本标记语言其实就是文本，由浏览器负责将它解析成具体的网页内容前端开发工具： >sublime text ：拓展性非常强(安装各种插件)\颜色经典 >Dreamwaver : 美工(Adobe公司开发) >WebStorm : 自带了各种插件比如Nodejs grunt less >Eclipse : 主要开发Java程序 head一般放CSS和JS的，body一般放内容。 title一般放置描述性内容。常见的HTML的标签: 百度就能了解。 CSS编写什么是CSS？CSS的全称是Cascading Style Sheets，层叠样式表它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如：

color : red;
background-color : blue
font-size : 20px; 冒号左边的是属性名，冒号右边的是属性值

CSS的三种书写形式:

1、行内样式：(内联样式),就是直接在标签内部添加样式，直接作用到当前样式

1
2 <p></p>
弊端：只能作用于当前标签，对于多个重复的多个的，大量的重复的就不好了。

2、页内样式:

<head>
     <style>
         p{
                       color: red;
                    font: 40px;
                      background: orange;
            }这个就是指定p标签的样式CSS
   </style>
</head>
<body>
    <p>loaojhaljeoijfaojfaojf;al</p>
     <p>loaojhaljeoijfaojfaojf;al</p>
     <p>loaojhaljeoijfaojfaojf;al</p>
     这样这里所有的p标签的样式都会被上面的CSS样式所设定
      <p>loaojhaljeoijfaojfaojf;al</p>
如果标签自己又设置了和样式标签有冲突的属性，代码会自动就近原则。
</body>
弊端：只能用在当前网页

3、外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

为了能够作用到项目里的所有HTML文件，就有必要新建一个xxx.css文件：

div{
color:red;
font-size: 50px;
border: 1px
}

然后在需要设置CSS样式的网页上添加连接这个自定义CSS文件

<head>
     <link href="xxx.css" >
       rel是relation关系的意思
        href就是Hypertext Reference(超文本引用)的缩写
</head>
<body>
       <div>second</div>
</body>                                       三种方式没有优先级，如果要考虑优先，原则就是就近原则。

CSS选择器 CSS有两大核心：选择器、属性(学好CSS，只要学好这两个就好了) 代码格式就是：

选择器{
   属性1；
       属性2；
       。。。。。。
}

选择器使用实例1 选择器的作用：选择对应的标签，为之添加样式 div{ color:red; font-size: 20px; border:5px; } html中的某个标签： ... <body> <div>second</div> </body> ... 这个div标签选择器，会根据标签名找到对应标签<div>，然后把选择器里的属性设置到对应标签的内容上。这里就是把color：red;font-size:20px;border:5px;设置在second这个内容上选择器使用实例2

标签选择器：根据标签名找到标签

1
2 <div>div1</div>
<div>div2</div>

下面是选择器：

div{
color:red;
font-size: 20px;
border:5px;
}

因为两个标签的标签名都是div，所以选择器里的属性都会作用于div1和div2

下面讲讲不同类型的类选择器：

类选择器：