HTML5学习-Day1

在公司开发Android也有一段时间了,近期公司又要开始新的项目,为此也弄了个开工大会,在会上就指出,希望我们手机端小组(Android,IOS)能够把HTML5这块也吃下,以前这块都是拜托Java小组的人去做的.. 而且Html5 在开发上也很方便,一次开发,多平台使用,间接的整合了Android和Ios

会后老大也对Html5稍微做了间接

其实HTML5 相对于 Android 可以是这样理解的

HTML5部分 —– layout.xml

CSS3部分 —– style.xml

JavaScript部分 —– Java逻辑代码

按照以上这种关联,倒是很好理解Html,似乎很容易学会,所以老大就给了我们几天的时间,让我们尽快熟悉html5并且上手制作页面。


开发工具选择

当然,开发第一步都是选择一个工具,Android我是用Eclipse,但是Html5明显不行,这工具不好用,在网上找了下, HBuilder 还不错,使用起来也简单,学习的话就直接使用这个就好了

这工具直接去官网下载就好了,地址是HBuilder官网

下载内容是个压缩包,解压就可以直接使用了,只需要注册个账号即可。


建立项目

这一步很简单,只要选择移动APP项目,空的模板即可

进入后我们先看下项目的结构

  • css文件夹

    这部分用来存放css样式的文件

  • img文件夹

    这部分用于存放一些图片资源

  • js文件夹

    这部分存放js文件

  • 项目根目录

    一般我们html页面就直接丢这里,当然,我初学就无所谓了,懒得去细分结构


这只是HBuilder 的默认文件结构,你也可以根据自己的喜好新建或删除这些目录,这不是固定的结构


manifest.json 配置文件

manifest.json 有点像是Android里面的清单配置文件,也是做一些系统的基本配置,Html5对移动APP的配置包含:

  • 应用信息
  • 传感器信息
  • 平台选择
  • 应用图标和启动图片设置
  • 第三方插件配置
  • 是否全屏的设置
  • 打包配置信息

这些信息在manifest.json 中都有相应的注释,相信都很好理解,这里只是做个笔记

css样式的选择器格式

学习的第一天,认识了css样式,发现它比android的style强大的地方在于,它有个标签选择器,通过这个设置,可以统一的管理一些标签

  • 标签选择器的使用方式

在标签中有三种方式定义,可以在css中使用样式

一,直接标签名,在css中使用标签名加{}来定义其样式

<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>hello world</title>
        <style type="text/css">
            body{
                background-color:red;
            }
        </style>
    </head>
    <body>
        This is a Test.
    </body>

</html>

其中body标签,就直接在css中对其定义了一个样式,属性为背景色为红色

二,class属性的定义,在css中使用 .class {}的方式定义其样式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>hello world</title>
        <style type="text/css">
            body{
                background-color:red;
            }
            .test{
                color: white;
            }
        </style>
    </head>

    <body>
        <p class="test">
            This is a Test.
        </p>
    </body>

</html>

我们在p标签内 定义一个class属性,取名为test,然后就可以在css中对class为test的所有标签进行一个定义,是所有class为test的标签 使用 . + class属性值 {}来定义

三,id定义,css对id使用 #id{}的方式来定义其样式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>hello world</title>
        <style type="text/css">
            body{
                background-color:red;
            }
            .test{
                color: white;
            }
            #pp{
                font-size: 40px;
            }
        </style>
    </head>

    <body>
        <p class="test" id="pp">
            This is a Test.
        </p>
    </body>

</html>

以上三种定义方式不仅仅可以单定义,还可以混合定义, 例如 层级标签,P标签内部的span标签 ,我们可以在css中 写 p span { xxx: xxx;} 混合使用的时候 中间加个空格就好了,这样能做很多区分混合的越多,定义的就越详细精准

注意事项:在定义这些样式的时候 id是唯一的属性,class可以重复,所以class的样式,只要class值一样的标签都能使用,而标签样式,是相同的标签都能使用,其中奥妙请自己领悟

  • 加载方式

    1.内部样式表加载,在< head> 头部通过 < style>定义

    举个栗子

<style type="text/css">
    body{
        background-color:red;
    }
</style>

该样式就是指 body标签内 背景颜色为红色



2.内联样式加载,直接在标签元素中使用 通过标签内的 style属性来定义

再举个栗子

<p style="color: red; margin-left: 20px;">
    This is a Test.
</p>

以上内容是 在 显示一段字体颜色为红色的与左边外边距相距20px位置的文本,内容为This is a Test



3.外部样式表,使用存放在外部文件内的css格式的文件内容,使用时 需要在< head>头部内 使用 < link>标签加载样式表

for一个栗子

<head>
    <link rel="stylesheet" type="text/css" href="xx.css" />
</head>

其中rel属性和type属性一般是如此固定写法,后面的href属性是你的css文件存放的路径,加载后就可以使用css中的样式内容了

内容不多,明天学习新的再上新的内容!

时间: 2024-10-24 21:18:38

HTML5学习-Day1的相关文章

HTML5 学习

1.details元素 details元素标识用户要求得到并且可以得到的细节信息,用于描述文档或文档某个部分的细节.它可以与summary元素配合使用.summary元素提供标题或图例.标题是可见的,用户点击标题时,会显示出细节信息,也就是details里面定义的信息. <details> <summary>HTML 5</summary> This document teaches you how to learn about HTML 5 </details&

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

html5学习资料

1.HTML5 学习网址 http://www.w3school.com.cn/html5/

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<