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. Zookeeper启动时报8080端口被占用

    zookeeper启动时报8080 端口被占用,导致启动失败.特别是服务器上部署了tomcat服务时需要注意. 通过查看zookeeper的官方文档,发现有3种解决途径: (1)删除jetty. (2 ...

  2. cdcqの省选膜你赛

    cdcqの省选膜你赛 比赛当天因为在杠hnoi2016的大数据结构没有参加,今天补了一下.挺好玩的虽然不看一句话题意的话真的卡读题 此生无悔入东方,来世愿生幻想乡 2651. 新史「新幻想史 -现代史 ...

  3. BZOJ 3669: [Noi2014]魔法森林 [LCT Kruskal | SPFA]

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,…,n,边标号为 1,2,3,…, ...

  4. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

  5. laravel框架基础知识点

    一.数据库:DB    1.db查    DB::table('msg')->where('id','>',$id)->get()       查询单行    DB::table(' ...

  6. 在 ASP.NET Core 项目中实现小写的路由URL

    在 ASP.NET MVC 早期版本中,我们可以通过在应用的 RegisterRoutes 方法中设置 routes.LowercaseUrls = true ; 来将页面的 URL 链接转小写.在 ...

  7. 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

    我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...

  8. Ｃ#中ASCII码学习心得

    1.利用调用ASCIIEncoding类来实现各种转换.如简单个ACS码和int转换. ***利用(int)ASCIIEncoding类对象.GetBytes(character)[0]得到整数: p ...

  9. SpringBoot中关于Mybatis使用的三个问题

    SpringBoot中关于Mybatis使用的三个问题 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/8495453.html 原本是要讲讲PostgreSQL ...

  10. Pymongo一些常见需求(陆续补充)

    总结一下最近包括之前遇到的一些pymongo操作的问题. #需求1: 搜索文档数组里边是否存在某元素 数据: data1 = { '_id': xxxxxxxxxxxxxx, 'dataList': ...