HTML5学习-Day2

上次讲到css样式的几种加载方式,后来又去查了下关于javascript的基本内容,这里稍微记录下笔记

认识完 css 后,当然要了解下 javaScript 这个相当于Android的逻辑处理部分的内容。

javaScript 是Html里面的逻辑代码部分,用于对Html中的一些数据进行处理

JavaScript使用方式

  • 内部使用,在HTML 内部通过 < script>定义 ,一般我们都会在< head>标签内定义

栗子

<script>
    alert("Test JavaScript");
</script>

  • 内联使用,在标签内部使用javascript代码

羞涩的栗子

<a href="javascript:alert(‘标签内部使用的哦‘)">点我!</a>
<a href="#" onClick="myf()">点我!!</a>

上面,第一种是直接在标签中使用javascript代码,第二种其实是调用现有的javascrpit写好的方法使用


  • 外联使用,在 < head>内部使用存放在外部的js文件内容

成熟的栗子

<head>
    <script src="xxx.js"></script>
</head>

src中的路径是你项目中js对应的存放路径


JavaScript的格式

说完javascript的导入使用方式,现在说下它的格式吧

  • 属性

    javaScript的属性比较单一, 不像其他语言,有什么Integer String Boolean 等等,JavaScript的属性只有 var 相当于 Android的 Object

注意事项: 在JavaScript中 var n = 1; 是可以省略掉 var 直接写 n = 1 来声明变量,但是 所有没有用var 来声明的对象都会被当做全局变量来使用。

尽量在变量前增加var声明,以确保变量不会被当成全局变量重复应用。

尤其是在存在递归调用的函数中,特别要注意用var声明循环变量,否则的话递归调用会因为变量被递归修改而产生意想不到的错误,很难调试和查找。

  • 方法

    javaScript 的 方法 都是以 function 开头 , 加一个方法名 有参数的话 加一个参数名即可,因为只有一个var类型,所以不用定义参数的类型,至于返回值,不需要特别的定义,无论有没有都不用去定义,有的话直接在方法中return

还是栗子

<script>
//javascript 方法构造
function show()
{
    var i = "soso";//声明一个方法内部的局部变量
    alert(i);//弹出dialog
    return false; //返回值
}
</script>

JavaScript的打印输出

一般开发的时候,我们都需要一些提示,所以需要代码对外输出一些内容作为参考提示,javaScript也有很多输出方式,这里我记录两种

  • 文档打印输出

    document.write方法

var mytext = "Hello again";
document.write(mytext);

这种方法是想页面中打印输出内容,缺点是会覆盖掉页面原来的内容


  • 控制台打印输出

    console输出,该输出有很多种方法类似Android的Log输出

    Console.log() 是最简单输出信息到 console 窗口的方法,除了console.log(),还支持多种不同的日志级别:debug、info、warn、error。

    console.log(“Log level”);

    console.debug(“Debug level”);

    console.info(“Info level”);

    console.warn(“Warn level”);

    console.error(“Error level”);

不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤:



javaScript 就告一段落吧 ,以上都是我学习过程中认识到的内容,可能会与大家认识有点点不同,毕竟我是初学,还请大家见谅

div 与 span

在布局的时候,认识到了div,看到网上很多demo都大量使用这玩意,所以我也好奇的去模仿了下,但是发现用起来还很别扭,仔细查阅才发现div有一些小特性

  • div本身默认的样式属性是独占一行的

由于这个小特性,导致我在使用多个div的时候出现了各自占据一行,完全没办法布局

解决方法

  • 修改div样式中布局方式为float

或者

  • 将div的display属性修改为 inline //在一排显示


与div独占一行的风格不一样的是span

  • span自适应其包裹内容的宽度

注意: 因为其自适应宽度的属性,部分CSS3样式对其无效,例如什么宽度的设置什么的.. 统统无效



设置div的时候 比较常见的问题是如何让div水平居中和垂直居中

  • 水平居中

    1. 首先让div的父标签设置text-align:center;样式
    2. 其次设置div的样式内容 margin-left:auto; margin-right:auto;
  • 垂直居中
    1. 设置div 的 line-height:高度值;
    2. 设置div 的 vertical-align:middle;


最后记录下,常用的一个事件方法,在android中布局也是最常用的

// 返回上一页
function back(){
    history.go(-1);
}

好了,今天的笔记就到这里 初学者奉上

时间: 2024-11-07 14:47:22

HTML5学习-Day2的相关文章

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/> 元素指的是从開始标签到结束标签的全部代码<