HTML5结合CSS的三种方法+结合JS的三种方法
Posted 景寓6号
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
|
|
此处可参考 javascript设置onclick
以上是关于HTML5结合CSS的三种方法+结合JS的三种方法的主要内容，如果未能解决你的问题，请参考以下文章