HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS:
HTML中应用CSS的三种方法
一、内联
内联样式通过style属性直接套进HTML中去。
示例代码
- <pstylepstyle="color:red">text</p>
这将会是指定的段落变成红色。我们的建议是,HTML应该是独立的、样式自由的文档,所以内联样式无论在什么情况下都应该尽量避免。
二、内部
内部样式服务于整个当前页面。在头标签head里面,样式标签style里包含当前页面的所有样式。
示例代码
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CSSExample</title>
- <styletypestyletype="text/css">p{color:red;}a{color:blue;}</style>
- </head>
- <body>
- </body>
- </head>
- </html>
这将使这个页面的所有段落都是红色的,所有的连接都是蓝色的。与内联样式类似,同样不建议使用。
三、外部
外部样式为整个网站的多个页面服务。这是一个独立的CSS文档,简单的一个范例如下:
示例代码
- p{color:red;}a{color:blue;}
如果这个文档存为“web.css”的话,它可以这样跟HTML文档连接起来:
示例代码
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>CSSExample</title>
- <linkrellinkrel="stylesheet"type="text/css"href="web.css"/>
- </head>
- <body>
- </body>
- </head>
- </html>
保存HTML文档,现在已经把HTML和CSS连接起来了,在你的html中就可以运用你在css文件中定义的css标签了。
HTML5+JavaScript:
HTML中应用JS的三种方法
一、Html5 页面中使用 <script> 标签容纳 JavaScript 代码;
1
2
3
|
<script> init(); </script> |
这里不仅可以调用任意位置的函数,而且可以声明变量,构建函数和对象等等。
二、Html5 页面中使用 <script src="xxx.js"></script> 引入同路径下的 xxx.js 文件中的 JavaScript 代码;
1
|
<script src= "js/main.js" ></script> |
注意这里的 main.js 是与当前 Html 页面文件同目录下的 js 子目录中的文件,使用时,确保相对路径正确,当然了,也可以使用绝对路径。
三、Html5 界面元素事件直接赋与一段 JavaScript 代码;
1
|
<input type= "button" name= "Button" value= "Button" onclick= "javascript:alert('测试')" > |
此处可参考javascript设置onclick
HTML5结合CSS的三种方法+结合JS的三种方法的更多相关文章
- json转js对象方法,JS对象转JSON方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法
http://blog.csdn.net/deepwishly/article/details/6670942 ajaxPro.dll基础教程(前台调用后台方法,后台调用前台方法) 1. javaS ...
- Chrome JS内存泄漏排查方法(Chrome Profiles)
原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles) Google Ch ...
- JS内存泄漏排查方法——Chrome Profiles
一.概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件 ...
- JS内存泄漏排查方法-Chrome Profiles
原文链接:http://caibaojian.com/chrome-profiles.html 一.概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是 ...
- [转]JS内存泄漏排查方法(Chrome Profiles)
Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文 ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- root的方法大体上有以下三种
root的方法大体上有以下三种一.手机软件安卓版直接root.这种方法不需要电脑的支持,也很安全.安卓版软件有:kingroot,360一键root,一键root大师,Towelroot,支持云roo ...
- 使用CSS、JS的几种方法
引用CSS到html网页里的4种方法 1.行内式 在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用 <div style="widt ...
随机推荐
- Mybatis使用过程问题总结
Mybatis配置文件 test语句问题 字符串比较问题 示例语句:<if test="isIbatis == 'Y'"></if> 问题:NumberEx ...
- CF585E. Present for Vitalik the Philatelist [容斥原理 !]
CF585E. Present for Vitalik the Philatelist 题意:\(n \le 5*10^5\) 数列 \(2 \le a_i \le 10^7\),对于每个数\(a\) ...
- CF781D Axel and Marston in Bitland [倍增 矩阵乘法 bitset]
Axel and Marston in Bitland 好开心第一次补$F$题虽然是$Div.2$ 题意: 一个有向图,每条边是$0$或$1$,要求按如下规则构造一个序列然后走: 第一个是$0$,每次 ...
- DNA序列组装(贪婪算法)
生物信息学原理作业第四弹:DNA序列组装(贪婪算法) 原理:生物信息学(孙啸) 大致思想: 1. 找到权值最大的边: 2. 除去以最大权值边的起始顶点为起始顶点的边: 3. 除去以最大权值边为终点为终 ...
- 一步一步从原理跟我学邮件收取及发送 12.telnet命令行收一封信pop3
本系列上一篇文章中我们就说到了,这一次我们要说 pop3 收信了.虽然我觉得应该先说完 mime 格式,不过估计大家已经不耐烦了 -- 怎么老在说发送啊?我们要看收取! 好吧,来啦,来啦!收取邮 ...
- C语言之prinf的用法
1. n换行字符 1).直接输出内容 printf("哈哈\n"); 2).带参数的输出 int i = 10 ; %d:输入控制符 printf ("%d\n" ...
- win10安装elementary os双系统
elementary os是ubuntu的一个分支,界面有点像苹果,比较漂亮.如图: 从已有的磁盘中划出一块空白分区,将elementary单独安装在这个分区里,这个分区需要比其他分区的剩余空间都要大 ...
- hive:框架理解
1. 什么是hive •Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. •本质是将HQL转换为MapReduce程序 2. 为什么 ...
- 转 Caffe学习系列(5):其它常用层及参数
本文讲解一些其它的常用层,包括:softmax_loss层,Inner Product层,accuracy层,reshape层和dropout层及其它们的参数配置. 1.softmax-loss so ...
- Unity引擎与C#脚本简介
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 由 QQ会员技术团队 发布在云+社区 1. Unity编辑器基础 从原理上讲,游戏开发就是将一系列变动的场景呈现在玩家面前,并根据玩家的输入 ...