zoukankan      html  css  js  c++  java
  • HTML5结合CSS的三种方法+结合JS的三种方法

    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
    12.  

    保存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

  • 相关阅读:
    编程之道——高内聚低耦合
    虚拟机的安装
    Tomcat的安装与配置
    Spring(十)--Advisor顾问
    Spring(九)--通知
    Spring(八)-- 代理设计模式
    Spring(七)--Spring JDBC
    Spring(六)--Spring配置文件之间的关系
    Spring(五)--autowire自动装配和spel
    Spring(四)--bean的属性赋值
  • 原文地址:https://www.cnblogs.com/wsg25/p/7619929.html
Copyright © 2011-2022 走看看