HTML5+CSS：

HTML中应用CSS的三种方法

一、内联

内联样式通过style属性直接套进HTML中去。

示例代码

  1. <pstylepstyle="color:red">text</p>

这将会是指定的段落变成红色。我们的建议是，HTML应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。

二、内部

内部样式服务于整个当前页面。在头标签head里面，样式标签style里包含当前页面的所有样式。

示例代码

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>CSSExample</title>
  6. <styletypestyletype="text/css">p{color:red;}a{color:blue;}</style>
  7. </head>
  8. <body>
  9. </body>
  10. </head>
  11. </html>

这将使这个页面的所有段落都是红色的，所有的连接都是蓝色的。与内联样式类似，同样不建议使用。

三、外部

外部样式为整个网站的多个页面服务。这是一个独立的CSS文档，简单的一个范例如下：

示例代码

  1. p{color:red;}a{color:blue;}

如果这个文档存为“web.css”的话，它可以这样跟HTML文档连接起来：

示例代码

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>CSSExample</title>
  6. <linkrellinkrel="stylesheet"type="text/css"href="web.css"/>
  7. </head>
  8. <body>
  9. </body>
  10. </head>
  11. </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的三种方法的更多相关文章

  1. json转js对象方法，JS对象转JSON方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. js调用.net后台事件，和后台调用前台等方法以及js调用服务器控件的方法

    http://blog.csdn.net/deepwishly/article/details/6670942  ajaxPro.dll基础教程(前台调用后台方法,后台调用前台方法) 1. javaS ...

  3. Chrome JS内存泄漏排查方法(Chrome Profiles)

     原文网址:http://blog.csdn.net/kaitiren/article/details/19974269 JS内存泄漏排查方法(Chrome Profiles)   Google Ch ...

  4. JS内存泄漏排查方法——Chrome Profiles

    一.概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件 ...

  5. JS内存泄漏排查方法-Chrome Profiles

    原文链接:http://caibaojian.com/chrome-profiles.html 一.概述 Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是 ...

  6. [转]JS内存泄漏排查方法(Chrome Profiles)

    Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文 ...

  7. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  8. root的方法大体上有以下三种

    root的方法大体上有以下三种一.手机软件安卓版直接root.这种方法不需要电脑的支持,也很安全.安卓版软件有:kingroot,360一键root,一键root大师,Towelroot,支持云roo ...

  9. 使用CSS、JS的几种方法

    引用CSS到html网页里的4种方法 1.行内式 在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用     <div style="widt ...

随机推荐

  1. Why Are Thread.stop, Thread.suspend, Thread.resume and Runtime.runFinalizersOnExit Deprecated ?

    Thread.stop, Thread.suspend, Thread.resume被标记为废弃的方法.在查看JDK的文档时,提到了下面的参考文章,先是英文版,接着是中文翻译. Why is Thre ...

  2. Codeforces Round #395 (Div. 2)（未完）

    2.2.2017 9:35~11:35 A - Taymyr is calling you 直接模拟 #include <iostream> #include <cstdio> ...

  3. SqlServer varchar数据中类似于1.1.1.1这种值的排序方法

    select * from 表名order by Convert(int,left(列名,charindex('.',列名+'.')-1)) asc, 列名asc charindex('.',列名)  ...

  4. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  5. typedef void(*Fun)(void);

    typedef void(*Fun)(void); 函数类似于数组,函数名就是它的首地址: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  6. LeetCode - 690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  7. Maven编译问题

    Maven构建的Project默认使用JDK1.5进行编译,要想使用JDK1.8进行编译,最好在项目的POM文件中加上以下的字段. <build> <plugins> < ...

  8. virtualbox命令行共享CentOS目录

    virtualbox命令行共享CentOS目录   1. 安装virtualbox增强工具 "右ctrl+c" 显示和隐藏virtualbox虚拟机的菜单栏. 在VirtualBo ...

  9. Ubantu16.04 redis安装

    通过FTP方式将redis的安装包从windows上传到linux上 解压命令:$sudo tar -zxf ~/Downloads/redis-3.2.7.tar.gz -C /usr/local ...

  10. hibernate的事务管理和session对象的详解

    //开启事务 transaction=session.beginTransaction(); 上面为开启事务 transaction.commit();这个为提交事务 从session对象中获取事务后 ...