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. BZOJ 3809: Gty的二逼妹子序列 & 3236: [Ahoi2013]作业 [莫队]

    题意: 询问区间权值在$[a,b]$范围内种类数和个数 莫队 权值分块维护种类数和个数$O(1)-O(\sqrt{N})$ #include <iostream> #include < ...

  2. BZOJ 1937: [Shoi2004]Mst 最小生成树 [二分图最大权匹配]

    传送门 题意: 给一张无向图和一棵生成树,改变一些边的权值使生成树为最小生成树,代价为改变权值和的绝对值,求最小代价 线性规划的形式: $Min\quad \sum\limits_{i=1}^{m} ...

  3. u-boot核心初始化

    异常向量表:异常:因为内部或者外部的一些事件,导致处理器停下正在处理的工作,转而去处理这些发生的事件.ARM Architecture Reference Manual p54页.7种异常的类型:Re ...

  4. FastStone Capture的使用

    FastStone Capture的使用 FastStone Capture是一款精简而优秀的图像处理软件,在工作中会经常用到.我在本地安装了FastStone Capture 8.4版本 (提取码: ...

  5. ps色彩范围抠章

    1.在photoshop打开需要抠公章的图像文件2.使用椭圆形选区工具,ALT+SHIFT+鼠标左键,选择章的范围 2.CTRL+J,复制图层,得到图层1,隐藏背景 3.CTRL+L,调整色阶,拖动两 ...

  6. 跟面向对象卯上了，看看ES6的“类”

    上回我们说到ES5的面向对象,以及被大家公认的最佳的寄生组合式继承.时代在进步,在ES6中对于面向对象这个大boss理所应当地进行了一次大改,从原先那种比较长的写法转变为"小清新" ...

  7. 解决java.lang.IllegalStateException: BeanFactory not initialized or already closed - call 'refresh' before accessing beans via the ApplicationContext这个问题

    今天在运行别人的SSH项目时,遇到了这个问题 严重: Exception sending context initialized event to listener instance of class ...

  8. Nuget发布自己的DLL

          首先说明背景,在asp.net core开发中,使用了Oracle,Oracle官方发布了一个新的sdk用于连接数据库,但是asp.net core有个特性,就是不支持直接引用dll,也就 ...

  9. 危化品速查APP--Android Project

    开发环境 Android studio 2.3.1 功能描述 集成多种查询方式,查看本地数据库中危险化学品的信息: 按照中文拼音和英文首字母,对化学品进行查询: 按照UN号或者CAS号查询相应的化学品 ...

  10. 深度学习优化算法Momentum RMSprop Adam

    一.Momentum 1. 计算dw.db. 2. 定义v_db.v_dw \[ v_{dw}=\beta v_{dw}+(1-\beta)dw \] \[ v_{db}=\beta v_{db}+( ...