HTML5的简介

时间:2022-09-08 00:22:01

前言:作为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的编写格式是键值对形式的,比如:

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

CSS的三种书写形式:

  • 1、行内样式:(内联样式),就是直接在标签内部添加样式,直接作用到当前样式
1
2
<p style="color: red; font-size:20px; background: #00f"></p>
弊端:只能作用于当前标签,对于多个重复的多个的,大量的重复的就不好了。
  • 2、页内样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 style="color: yellow">loaojhaljeoijfaojfaojf;al</p>
如果标签自己又设置了和样式标签有冲突的属性,代码会自动就近原则。
</body>
弊端:只能用在当前网页
  • 3、外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

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

1
2
3
4
5
div{
       color:red;
     font-size: 50px;
border: 1px
}

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

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

CSS选择器

CSS有两大核心:选择器、属性(学好CSS,只要学好这两个就好了)

代码格式就是:
1
2
3
4
5
选择器{
   属性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>

下面是选择器:

1
2
3
4
5
div{
   color:red;
     font-size: 20px;
border:5px;
}

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

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

类选择器:

1
2
3
4
5
<p class ="high">第一段文件</p>
<p>第二段文字</p> <div class ="high">div1</div>
<div>div2</div>
然后在CSS文件中:
1
2
3
.high{
       color: red;
}
这个标签是作用于class类标签属性是high的标签,所以会作用于"第一段文字"和"div"
总结:class标签就是可以把不同类的标签可以归为一个类class
注意
    类选择器开头要有"."符号哦
    类选择器的名字可以是标签中class属性字符串的一部分
        比如:.he类选择器名可以访问class = "woe he llo"的标签(注意要空格隔开的,不隔开(比如woehello)无用)
    "."是用来找class属性的,而"#"是用来找id属性的。

id选择器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head lang = "en">
     <meta charset="UTF-8">
       <title></title>
      <style>
         #rose {  
                        font-size: 50px;
         }
        </style>
</head>
<body>
    <div class="tom jerry" id="jack">11111</div>
     <p class="tom">2222</p>
        <a class="jerry" id="rose">222</a>
</body>
</html>
如果id="rose"的标签有两个,IDE会报错,浏览器运行无效。
和类标签选择器一样,Class通过.符号去选择,id选择器通过#符号去选择
#rose选择器表示查找并将这里面的属性设置到标签中id是rose的标签

群组选择器

  • 普通形式,神马标签都写上:
1
2
3
div , p , a {
   font-size:50px;
}         其实质意义上div,p,a三者是并列的。

再举一个并列选择器(或者):

1
2
3
div , .high{
       color: red;
};

作用:只要标签中有div或者有class=”high”或者是div和class=”high都有的都能设置

另外,如果要设置所有标签的设置,那么选择器名可以是符号 *

1
2
3
* {
    font-size: 50px;
}

复合(并且):

1
2
3
div.high{
      color: red;
}

还有就是需要同时符合三个条件,而且顺序不能乱:

1
2
3
div.high#jack{
  color: blue;
}

意思就是,必须既是div,而且是class属性有high,最后还要id为jack都满足的标签

后代选择器(之间空格):

1
2
3
div .tom {
     color: red;
}

就是找到div里面class=”tom”的所有子标签

如果是:

1
2
div p div span p{
}

就要找到div包含的p,这个p包含的div,这个div包含的span,这个span包含的p

然后根据后代又分为两种: 1、直接后代选择器,2、相邻兄弟选择器

1
2
div > p {
}

这里就是针对直接后代的,就是div包含的直接p标签,不是间接包含的标签

1
2
div + p {
}

相邻兄弟选择器,找到相邻的选择器

属性选择器:

1
2
3
4
div[name]{
}
div[name][id]{
}

CSS的优先级(从1~4优先级别越来越低):

1
2
3
4
5
6
7
8
带有 !important 的属性
在style属性中的样式
先比较选择器的优先级,优先级高的会覆盖优先级低的。
        针对性越强(范围越小)的选择器,优先级越高
    针对性越弱(范围越大)的选择器,优先级越低
    例子:<div class="hello" id="jack">hewelf</div>
   这里明显,id属性能够限定的标签最小,甚至对应的是一个标签。
如果优先级都相同,再比较选择器的先后顺序,后面的会覆盖前面的。
还有一种别人总结的经验:算权值
标签 1 类 10 id 100 然后求和计算css的选择器的权值   
CSS的注释是这样的 /* 内容 */
但是在CSS中//这样的注释是无用的。
1
2
HTML注释:
    <!-- 内容 -->
1
2
3
4
CSS标签用的冒号叫"伪类"
div:hover {
color: blue;
}hover表示鼠标悬浮在div标签上面的时候,会设置相关的属性,这里会让div标签内容变成蓝色

CSS选择器–伪类(了解):

HTML5的简介

HTML的输入框初识

...
<input placeholder="请输入用户名">这个就是在输入框内添加浅色的提示
...

Term和Alfred2的使用

HTML5的简介
iTerm和Alfred2的安装和使用笔记网址:http://www.cnblogs.com/goodboy-heyang/p/4909296.html

标签类型

根据显示的类型,主要分为3大类

块级标签

绝对独占一行的标签
随时设置自己的宽度和高度
(比如div、p、h1、h2、ul、li)

行内标签(内联标签)

多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(比如span、a、label)

行内-块级标签(内联-块级标签)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度(比如input、button) display:显示
比如:
       display:inline-block  行内-区块
      display:inline 行区
        display:block  块
使用示例,这里将默认是块级的div设置为行内:
<!DOCTYPE html>
<html>
<head lang="en">
          <meta charset="UTF-8">
       <title></title>
      <style>
         div{
             display: inline;
               }
        </style>
</head>
<body>
<div >hello</div>
<div >world</div>
</body>
</html>
这里实例原本div标签的hello和world是分别显示在两行的,各自独占一行,
然后因为div选择器设置display: inline;意思就是将div标签设置为行内标签,
那么会发现效果hello和world就都显示在一行里了。
1
2
display:inline-block
可以将内容设置为既是行内标签又是块级标签,这样你可以仅仅把div当做简单的容器就是了。
1
2
display:none就会让内容不显示,这个display相当于IOS里的show方法
visiblity:hidden 仅仅是看不到

百度首页

源码下载百度云备份链接: 百度首页实例 密码: yzyv

网页开发须知:
    工程项目文件目录
    css文件夹
        index.css
    script文件夹
    index.html
美工开发一般步骤:
    先在html.index内定好结构,类似IOS开发中的规划好UI布局,每一块放好一块内容。
    然后在index.css文件中根据html.index分好的块分别设置样式。
    然后就是慢慢调整,很耗费时间的。

bootstrap

1
2
3
4
5
这是网页前端最受欢迎的第三方框架
另外,如果要学习可以到网站 v3.bootcss.com
在下载的bootstrap框架中css/下的我们能用到的就是bootstrap.css和bootstrap.min.css,其他的可以删除。
bootstrap.css和bootstrap.min.css的区别就是min将内部的空格都去了,这样文件小了,就可以节省流量。
所以bootstrap.css叫开发版本,然后bootstrap.min.css叫上线版本

官方开发文档展示了很多模板代码使用样式

说白了,这个框架就是帮你封装了一堆漂亮的样式,然后你只要会用即可。
有一些图标被设计成字体,然后存储在fonts文件夹下的字体文件内,所以需要把整个fonts文件夹拷贝进工程根目录。
在使用图片文字的时候,如果要调整大小,要注意,因为是文字,所以直接用font-size属性设置值就对了。

JS核心语法

浏览器就是JS的运行平台,就好比IOS就是OC的运行平台。

JS的常见用途

HTML DOM操作(节点操作,比如添加、修改、删除节点)
给HTML网页增加动态功能,比如动画
事件处理,比如监听鼠标点击、鼠标滚动、键盘输入

JS的书写方式

1
2
3
4
5
6
7
1、JS代码写在双引号里面。
       <button onclice="alert(10);alert(99);">拍照</button>
     这段JS代码可以写在html的<body>标签里,效果
2、脚本中执行
  <scipt>
            console.log(100);
        </scipt>

另外,JS所有的变量都是用var,实例:var 变量名 = 变量值

数据类型

1
2
3
4
5
number 所有数字,比如小数/整数
object 所有类型 比如{}.[]
string 字符串类型,用双引号""或者单引号'',建议JS都用单引号
      原因示例:<body onclick ="alert('hello')"></body>如果hello用双引号,肯定会冲突的。
function 函数类型

定义函数

1
2
3
4
5
6
7
8
9
10
function 函数名(形参){
    //函数体
}
     函数定义注意,如果两个或者两个以上的函数函数名一样,后面的会直接覆盖前面的,
   没有重载的意义,就是直接的覆盖。最后使得只有最后一个函数有用或者会被调用。
    function sum(num1,num2,num3,num4){
             return num1 = num2 + num3 + num4;
}
        //会返回NaN = Not a Number
   console.log(sum(10,20));

函数实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
1.简单的示例:
var dog = {
age : 30;
run : function(){
          //this 相当于 OC里的self
               console.log(this.age + '岁的狗跑起来。');
  }
}
2.关于多个参数的示例:
function sum(){
    console.log(arguments);
}
//JS会把多个参数存储在一个默认的数组arguments里面
sum(2+2+12);//然后会打印出[2,2,12]
3.求和多个参数
function sum(){
       for (var i = 0,){
    }
}
//JS会把多个参数存储在一个默认的数组arguments里面
sum(2+2+12);//然后会打印出[2,2,12]
3.多个参数返回求和(可以把字符串数值和数值类型数值都能相加)
   <script>
       function sum(){
           var num = 0;
           for(var i = 0;i<arguments.length;i++){
               var temp = arguments[i];
               if (typeof temp == 'number'){
                   num += temp;
               }else if(typeof temp == 'string' &&  !isNaN(temp *= 1)){
                   num += temp;
               }
           }
           console.log(num);
       }
       sum('1',2,3,4,'hello');
   </script>
   4.看看函数的类型
   console.log(sum)//不要用sum()这个是调用函数了

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
最简单的对象
var dog = {};
然后添加属性:
var dog = {
     age : 20;
  name: 'rose';
};
console.log(dog.name);
然后要访问这个dog的属性的两种方法:
console.log(dog.age);//点访问属性
console.log(dog['age']);//字典访问属性
这里提一个易错点:dog[age]这样会得到age的变量值,然后再访问字典字,所以会出bug的。
下面讲讲对象的方法:
function temp(){
       console.log('跑起来');
}
var dog = {
       age : 20;
  run : temp;
};
当然把函数写成匿名函数,把函数直接封装在对象里面
var dog = {
     age : 20;
  run : function(){
           console.log(this.age + '岁的狗跑起来')
    }
}//如果this.age没有this的话,就会报错,JS明确必须要用this
dog.age = 40;
dog.run();
//函数也可以重新赋值或者叫覆盖
dog.run = function(){
console.log(this.age + '岁汪汪叫');
}

数组、字典都是对象类型

数组实例:

var array = [12,'dog',24,'jack',{
    name : 'wangcai'
},[],function(){
    console.log(10);
}];
array[array.length-1]();
 
 

HTML5的简介的更多相关文章

  1. 【HTML5】HTML5 WebSocket简介以及简单示例

    互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于1999年 ...

  2. HTML5标准简介

    最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比X ...

  3. HTML5 WebAudioAPI简介&lpar;一&rpar;

    一.常用对象 1.AudioContext对象 AudioContext是一个专门用于音频处理的接口,并且原理是讲AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经 ...

  4. 简介 jCanvas:当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  5. HTML5图形图像处理技术研究

    摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...

  6. HTML5 Web Storage -- 让Cookies看起来如此古老

    转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...

  7. HTML5 WebAudioAPI&lpar;四&rpar;--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  8. HTML5 WebAudioAPI&lpar;三&rpar;--绘制频谱图

    HTML <style> #canvas { background: black; } </style> <div class="container" ...

  9. HTML5 WebAudioAPI-实例&lpar;二&rpar;

    简单播放实例1: var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContex ...

随机推荐

  1. 学习了quartz&period;net2&period;0的心得

    由于项目中要运用到此调度方法,所以抽空学习了下,简单的用法可以掌握了 首先作为没有用过的人来说,怎么用呢? 于是百度了下原来先要下载 quartz.net2.0, 然后我就去下了个quartz.net ...

  2. C语言-两个库函数

    两个库函数 --1-- printf函数 1.1 printf 函数的介绍 1.2 格式控制字符串 1.3 %f输出精度的问题 1.4 printf 函数使用注意事项 --2-- scanf函数 2. ...

  3. java10-2 toString&lpar;&rpar;方法

    public String toString():返回该对象的字符串表示. Integer类下的一个静态方法: public static String toHexString(int i):把一个整 ...

  4. dev中如何对combox下拉框设置可消除属性以及ASPxGridView中金额,数量的显示,以及总计、grid中某行值

    下拉框属性关键:IncrementalFilteringMode="StartsWith" DropDownStyle="DropDown" ASPxGridV ...

  5. java集合--java&period;util&period;ConcurrentModificationException异常

    ConcurrentModificationException 异常:并发修改异常,当方法检测到对象的并发修改,但不允许这种修改时,抛出此异常.一个线程对collection集合迭代,另一个线程对Co ...

  6. 简单拨号器(Android)

    感受: 1.了解了intent中的action和Uri. 2.了解了向下一个活动传递数据. 3.了解了内容提供器. 4.了解自定义适配器. 4.其实T9拨号器和简单计算器原理一样.

  7. python&lowbar; 函数

    函数是啥? 函数能提高应用的模块性,和代码的重复利用率 函数特点? 1 代码块以 def 关键词开头,后接函数名和圆括号() 2 任何传入参数和自变量必须放在圆括号中间 3 函数以冒号开始,并且缩进 ...

  8. Jquery 选择器 特殊字符 转义字符

    1.Jquery   选择器 id包含特殊字符,加双斜线 \\ 例 <input type="text" id="dbo_HouseInfo.HouseResour ...

  9. wmsys&period;wm&lowbar;concat结果长度限制的问题

    转:http://bbs.csdn.net/topics/360059765 使用wmsys.wm_concat多列合成一列遇到问题ORA-22813: 操作数值超出系统的限制 官方文档解释是总长度超 ...

  10. delegate&lpar;&rpar; 事件绑定 事件委托

    定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...