html作为超文本标记语言
<!-- 注释部分 --> <html> <head> <title> ... </title> </head> <body> ... </body> </html>
在网页中输入如:file://E:\example\test.html即可用浏览器运行查看html文件。
css样式是html的扩展,对页面风格更新时,只要更改css样式即可。css选择符有三种:html的标记符h1{},class选择符.am{}和id选择符#am{}
JS为一种嵌入在HTML中具有跨平台,安全性,基于对象和事件驱动的解释性编程脚本语言。JS脚本程序显示被嵌入到HTML文档中一同下载到客户端应用中,当浏览器读HTML文档时,就会解释执行并显示其中的元素,读取html文档并分辨其中元素的过程叫做解析。JS是一种基于对象,安全的(不允许访问本地硬盘),跨平台,动态的脚本语言。
<b>粗体 <i>斜体 <blink>闪烁 <sub>下标 <sup>上标 <address>地址格式 <pre>预设字体
2.水平标记<hr>
此元素不需要以结尾,它可以划出一条分割线。
3.列表标记元素
3.1无序列表 < ul >
3.2有序列表 < ol >
3.3定义式列表 < dl >
<ul> <li>无序列表 <li> </ul> <ol> <li>有序列表 <li> <ol> <dl> <dt>定义式列表 <dd> </dl>
< 在屏幕上< > 在屏幕上> & 在屏幕上& " 在屏幕上"
<a href="www.baidu.com"> 链接跳转网站 </a> <a href="#clients"> 链接跳转段落 </a> <img src="test.gif" alt="图片显示前的文字叙述"> 插入图像
<table border> <tr>行 <td>列</td> <td></td> </tr> </table>
<frameset rows="..."> <frameset cols="..."> <frameset src="..."> <frameset src="..."> </frameset> <frameset cols="..."> <frameset src="..."> <frameset src="..."> </frameset> </frameset>
新标签如下: canvas <canvas> 定义图形,基于js的绘图api 多媒体 <audio> 音频 <video> 视频 <source> 多媒体资源 <embed> 嵌入插件 <trace> 媒介规定外部文本轨道 表单 <datalist> 选项列表,与input配合使用 <keygen> 表单密钥对生成器字段 <output> 不同类型输出 语义与结构 <article> 侧边栏 <aside> 页面内痛之外的内容 <bdi> 设置一文本脱离父元素文本方向 <command> 命令按钮 <details> 描述文档细节 <dialog> 提示框 ...
文字样式属性 font-family 字体类型 font-size 字体大小(绝对大小:xx-small small medium large x-large xx-large 相对大小:large small) font-weight 字体粗细(normal bold bolder lighter 100-900) font-variant 字体变形(normal small-caps) font-style 字体效果(normal italic oblique)
颜色背景属性 color 定义前景色(color:red) background-color 定义背景色 background-image 定义背景图像url
css支持的常见单位 相对: em 相对字符高度(margin:4 em) ps 以像素为单位(font-size:16 px) 绝对: in 英寸(font-size:0.6 in) cm 厘米(font-size:0.6 cm) mm 毫米(font-size:6 mm) pt 点数(font-size:40 pt) pc 印刷单位(font-size:4 pc)
第一种直接在html标记中插入 <h1 style="color:red;text-align:center"> </h1> 第二种在html文档中定义内部样式表 <style type="text/css"> 选择符 a1,a2,...{ 样式属性1:属性值; 样式属性2:属性值; ... } </style> 第三种嵌入外部样式表 <style type="text/css"> @import url("外部样式文件名") </style> 第四种链接外部样式表 <link type="text/css" rel=stylesheet href="外部样式文件名">
<div>
,当使用css布局主要把他用在div标签上。方式一 <script language="javascript"> document.write("<h1> hello world! </h1>") </script> 方式二 <script src="test.js"> </script>
var array=new Array();
function 函数名(参数列表){ 函数体 }
JS事件:onClick onChange onFocus onBlur ... 如下:
<html> <head> <title>...</title> <script language="JavaScript"> function hello(){ alert("hello world"); } </script> </head> <body> <a href="test.html" onm ouseOver="hello()">悬停</a> </body> </html>
JS内置对象:
String,Math,Array,Date
String: String对象的属性只有一个length用来统计字符串的个数,String对象的方法还是比较多。
**Math:**这是一个静态对象,不需要创建实例就可以直接使用,如var num=Math.sqrt(9)
Math的属性和方法也很多。
**Array:**数组对象,若在创建数组时不给出数组元素个数,则数组大小在饮用数组时确定,数组下标从0开始。常用属性length,常用方法join()返回数组中所有元素连接而成的字符串,reverse()将数组元素逆转排列,sort()对数组重元素进行排序。
**Date:**主要用于对日期操作,没有属性但是有多种方法。
浏览器内置对象:
**Window:**下层有location history document等,其中最主要的是document对象。是内置对象中最顶层的对象,每个Window对象就是一个浏览器窗口。他有一些属性,还有一些方法,如alert()等控制浏览器窗口的方法。
document: Window对象下层中最主要的对象, 即HTML文档对象模型,有Window→document和其他对象,又有document→form对象和其他各种对象,form→各种标签。document对象主要用来设置当前下载的HTML文件中的基本数据和字符串的显示效果。
**location:**包含当前网页的url,可以设置当前网页的地址。
**hisrory:**包含以前访问网页的记录url,可以实现前进后退。
**form:**为document下层对象,为处理表单界面提供属性和方法。
JavaScript自定义对象
JS可以根据需要创建自定义对象。步骤:先定一个对象,创建带对象的实例。比如:
``` function 对象名称(属性列表){ this.属性1=参数1 this.属性2=参数2 ... this.方法1=函数1 this.方法2=函数2 ... } ```
对象定以后应用关键字new创建对象实例:
``` 对象实例名=new 对象名称(属性值列表) ```
简介:
JQuery我们平常用的时候就是一个js文件,它是一个JS函数库,极大的简化了JS编程。JQuery是很流行的JS框架,当然还有其他很多前端框架,可以操作文档对象,制作动画效果,事件处理等,JQuery还提供了API让开发者编写插件。
使用JQuery
可以先从网上下载JQuery,有压缩版和未压缩版的。
写法:<script type="text/javascript" src="jquery-版本号.js">
JQuery写法
JQuery语法是为html元素的选取编制的,可以对元素执行某些操作,一般形式为$(this).hide() 或者 $("p").hide() 或者 $(".test").hide() 或者 $("#test").hide()
如下:
``` <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }) }) </script> ```
后端基础见下一篇blog