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
|
<input type= "button" name= "Button" value= "Button" onclick= "javascript:alert('测试')" > |
此处可参考 javascript设置onclick