HTML5结合CSS的三种方法+结合JS的三种方法

时间：2023-03-08 17:37:03

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

相关文章