Iframe、css、js
这里只讲css和js在html里怎么使用,不详细讲解。
Iframe内联样式标签
iframe 用于在网页内显示网页。
添加 iframe 的语法
<iframe src="URL"></iframe>URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
JavaScript 使 HTML 页面更具动态性和交互性
HTML <script> 标签
HTML
<script>
标签用于定义客户端脚本(JavaScript)。
<script>
元素即可包含脚本语句,也可通过src
属性指向外部脚本文件。JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
如需选取 HTML 元素,JavaScript 最常用
document.getElementById()
方法。这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!":
<script> 标签
在 HTML 中,JavaScript 代码必须位于 <script>
与 </script>
标签之间。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body>
或 <head>
部分中,或兼而有之。
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
外部脚本
脚本可放置与外部文件中:
外部文件:myScript.js
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在 <script>
标签的 src
(source) 属性中设置脚本的名称:
<script src="myScript.js"></script>
CSS
如何使用样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
</head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>