Web开发——HTML基础(HTML CSS和HTML脚本)

1、HTML CSS

  通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

  举例1(本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化):

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         <style type="text/css">
 7             h1 {color: red}
 8             p {color: blue}
 9         </style>
10     </head>
11     
12     <body"> 
13         
14         <h1>Header 1</h1>
15         <p>A paragraph</p>
16     
17     </body>
18 </html>

  输出结果:

  举例2(没有下划线的链接):

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <p><a href="https://www.baidu.com" style="text-decoration:none" target="_blank">This is a link without underline.</a></p>
11     
12     </body>
13 </html>

  测试结果:This is a link without underline.

  举例3(链接到一个外部样式):

  JavaScript 使 HTML 页面具有更强的动态和交互性。

2、HTML script 元素

  <script> 标签用于定义客户端脚本,比如 JavaScript。

  script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

  必需的 type 属性规定脚本的 MIME 类型。

  JavaScript 最常用于图片操作、表单验证以及内容动态更新。

  下面的脚本会向浏览器输出“Hello World!”:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <script type="text/javascript">
11             document.write("<h1>Hello, world!</h1>")
12         </script>
13     
14     </body>
15 </html>

输出结果:

3、<noscript> 标签

  <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

  noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

  只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:

  举例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6     </head>
 7     
 8     <body"> 
 9         
10         <script type="text/javascript">
11             document.write("<h1>Hello, world!</h1>")
12         </script>
13         <noscript>Your browser does not support JavaScript!</noscript>
14     
15     </body>
16 </html>

猜你喜欢

转载自www.cnblogs.com/zyjhandsome/p/9782338.html