注册登录

HTML：标签基础_4

HTML区块

1、HTML可以通过<div>和<span>将元素组合起来

2、大多数HTML元素被定义为块级元素或内联元素


HTML块级元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）
实例: <h1>, <p>, <ul>, <table>


HTML 内联元素

内联元素在显示时通常不会以新行开始
实例: <b>, <td>, <a>, <img>


HTML<div>元素

1、<div>标签可以把文档分割为独立的、不同的部分，使用它可以标记区域，然后可以对其使用样式化等(使用class或id属性)

2、HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器，常用于组合块级元素，以便通过CSS来对这些元素进行格式化

3、<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行

4、如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性

5、<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据

注：
1、<div> 元素经常与CSS一起使用，用来布局网页

2、默认情况下，浏览器通常会在<div>元素前后放置一个换行符。然而可以通过使用CSS改变这种情况

3、HTML5中不支持align属性

例1：

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p style="color:red">这是一个在div元素中的文本。</p>
</div>
知识兔

​

注：

上面例子中div为父元素，h、p元素为子元素，如果h、p元素未特意设定样式，则其会继承父元素的样式(CSS继承特性)，如果子元素设定了专有样式，则会用自己的样式

例2：

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:800px">

    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
    </div>
    
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>Menu</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
     Content goes here
    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。
    </div>
</div>
</body>
</html>
知识兔

​

注：
<div>标签对给我的感觉就是：其作用就是将一些标签对整合起来(将一些标签对划到一起，一个装其他元素的容器)，然后使这个容器中的元素都显示一定的样式(有自己的专有样式除外)

示例解析

步骤1：先把基本的框架写出来

<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
<p>
    <b>Menu</b><br>
    HTML<br>
    CSS<br>
    JavaScript
</p>
<p>
    Content goes here
</p>
<p>
    该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。 
</p>
</body>
知识兔

注：使用上面的写法(使用p标签)，可以发现输出结果与预期的不一样，因此不能使用p标签(P标签会换行)

步骤2：修改基本框架

<body>
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>

<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript

Content goes here 
<p>
    该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。
</p>
</body>
知识兔

步骤3：对每个标签一次增加div标签并设置属性

<body>
<div id="header" style="background-color:#FFA500;">
  <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>Menu</b><br>
    HTML<br>
    CSS<br>
    JavaScript
</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
Content goes here
</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    <p>
        该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。
    </p>
</div>
</body>
知识兔

步骤4：对整个页面增加div标签并设置属性

<div id="container" style="width:800px">
....
</div>
知识兔

例2_1：使用列表实现布局

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>Main Title of Web Page</h1>
        </td>
    </tr>

    <tr>
        <td style="background-color:#FFD700;width:100px;">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </td>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
            Content goes here
        </td>
    </tr>

    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。
        </td>
    </tr>
</table>
</body>
</html>
知识兔

​

注：

1、这种写法感觉就是：把整个页面看成一个列表，依次去设置每一行、每一列的数据及其属性

2、虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的：表格不是布局工具

3、使用CSS最大的好处是，如果把CSS代码存放到外部样式表中，那么站点会更易于维护，通过编辑单一的文件，就可以改变所有页面的布局

4、由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）

HTML<span>元素

1、HTML<span>元素是内联(行内)元素，用于对文档中的行内元素进行组合。可用作文本的容器，可以对元素进行分组使它们以不同的样式显示

2、<span>元素也没有特定的含义

3、当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性

注：
1、<span>标签没有固定的格式表现。当对它应用样式时它才会产生视觉上的变化。如果不对<span>应用样式，那么<span>元素中的文本与其他文本不会任何视觉上的差异

2、<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

3、被<span>元素包含的文本，您可以使用CSS对它定义样式，或者使用JavaScript对它进行操作

4、可以为 span 应用id或class属性，这样既可以增加适当的语义，又便于对span应用样式

5、可以对同一个<span>元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素

例2：

<p>他的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
知识兔

​

例3：

<p class="tip"><span style="font-weight:bold;color:#ff9955;">提示：</span>... ... ...</p>
知识兔

​

注：
从上面例子可以看出，<span>标签对用于行内：对行内对元素进行分组使它们以不同的样式显示

HTML框架

1、<iframe>标签规定一个内联框架

2、一个内联框架被用来在当前HTML文档中嵌入另一个文档，通过使用框架，可以在同一个浏览器窗口中显示不止一个页面

iframe语法:  

<iframe src="URL"></iframe>
知识兔

注：
该URL指向不同的网页。将窗口内容显示为URL地址指向页面

 


Iframe属性：设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是可以指定其按比例显示 (如："80%")

例4：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe>

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>

</body>
</html>
知识兔

Iframe属性：移除边框

frameborder属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框

例5：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head> 
<body>

<iframe src="//www.w3cschool.cn/" width="500" height="500" frameborder="0">
 <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

</body>
</html>
知识兔

iframe：显示目录链接页面

iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性

例6：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool在线教程(w3cschool.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

<p><b>注意：</b> 因为a标签的 target 属性是名为iframe_a的iframe框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>
知识兔

iframe标准属性

属性  说明
class  规定元素的类名（classname） 
id 规定元素的唯一 id 
style规定元素的行内样式（inline style） 
title 规定元素的额外信息（可在工具提示中显示）

注：
1、可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器

2、提示：使用CSS为<iframe>（包括滚动条）定义样式

3、<iframe>标签主要用于那些多个网页的共有部分，如导航栏、广告栏等

 

 

HTML脚本

1、JavaScript是可插入HTML页面的编程代码

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

3、JavaScript 插入HTML页面后，可由所有的现代浏览器执行


HTML<script>标签

1、<script>标签用于定义客户端脚本，比如JavaScript

2、<script>元素既可包含脚本语句，也可通过src属性指向外部脚本文件

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

4、假如 <script> 元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<frameset>标签之后的脚本会被忽略

注：如果使用 "src" 属性，则<script>元素必须是空的

例7：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<script>
    document.write("Hello World!")
</script> 

</body>
</html>
知识兔

​

 

JavaScript可以直接在HTMl输出

例8：

<body>
<p>
    JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
</script>
<p>
    您只能在HTML输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
知识兔

​

JavaScript事件响应

例9：

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>
<p id="demo">
    JavaScript can react to events. Like the click of a button.
</p>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>
知识兔

​

注：

1、定义一个处理函数后，在按钮标签对中调用这个函数

2、函数通过id属性找到需要操作的标签对，按钮等通过onclik等属性找到需要调用的函数

JavaScript处理 HTML 样式

例10：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>

<h1>我的第一段 JavaScript</h1>
<p id="demo">
    JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>
知识兔

​

 

HTML<noscript>标签

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

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

3、只有在浏览器不支持脚本或者禁用脚本时，才会显示<noscript>元素中的内容

例11：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>

<script>
    document.write("Hello World!")
</script>

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代。</p>

</body>
</html>
知识兔

​

拓展

元素需要换行时可以使用换行标签(<br>)，也可以内嵌在块元素中(<p>)，但两者的行与行之间的间距不一致

例12：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>

<p>不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代。</p><br>
<a href="https://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a>

<p>不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代。</p>
<p>
    <a href="https://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a>
</p>

</body>
</html>
知识兔

​

计算机