H T M L

最新推荐文章于 2024-09-05 23:16:39 发布
最新推荐文章于 2024-09-05 23:16:39 发布
阅读量1.5k 收藏 35
点赞数 38
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74226124/article/details/137738082
版权

HTML 元素

HTML 元素指的是从开始标签到结束标签的所有代码

开始标签（起始标签）元素内容结束标签（闭合标签）
<p>段落</p>
<a href = "">链接</a>
<br>换行标签

HTML 元素语法

  • 某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

HTML 空元素

  • HTML 空元素即为没有内容的 HTML 元素。
  • HTML 空元素应该在开始标签中关闭。
  • HTML 的一个空元素为 <br>（用于定义换行），<br> 元素就是没有关闭标签。
  • HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br />。

HTML 属性

  • HTML ​​元素​​可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性​​总是以名称/值对的形式出现

实例

<a href="">链接使用了 href 属性</a>

适用于大多数 HTML 元素的属性

属性描述
class为html元素定义一个或多个类名
id定义元素的唯一id
style规定元素的行内样式
title描述了元素的额外信息

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1>定义最大的标题。<h6> 定义最小的标题。

<h1>这是标题1</h1>

<h2>这是标题2</h2>

<h3>这是标题3</h3>

<h4>这是标题4</h4>

<h5>这是标题5</h5>

<h6>这是标题6</h6>

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

HTML 注释可以方便地用来帮助网页设计人员，提醒他们与程序相关的信息。

<!--这是一个注释-->

HTML 常用标签

标签描述
<html>定义 HTML 文档
<body>定义文档的主体
<h1> - <h6>定义 HTML 标题
<hr>定义水平线
<!--...-->定义注释

HTML 段落

<p>这是一个段落。</p>

注意：浏览器会自动地在先前的前后添加空行。（</p>是块级元素）

HTML 折行

在不产生一个新起点的情况下进行换行，请使用 <br /> 标签。

<br /> 标签定义为一个换行符，可以理解为简单的输入一个空行，而不是用来对内容进行拆分。

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

<p>这个<br>段落<br>演示了分行的效果</p>

标签描述
<p>定义一个段落
<br>插入单个折行（换行）

HTML 文本格式化

HTML 格式化标签

HTML 使用标签 <b>与 <i>对输出的文本进行格式，如：粗体 或 斜体

常用标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i> 标签使用。
然而，这些标签的含义是不同的：
<b> 与 <i> 确定义粗体或斜体文本。
< strong> 或者 <em> 意思着你要现在的文本是重要的，所以要突显出来。

<b>这个文本是加粗的</b>

<strong>这个文本是加粗的</strong>

<big>这个文本字体放大</big>

<em>这个文本是斜体的</em>

<i>这个文本是斜体的</i>

<small>这个文本是缩小的</small>

这个文本包含
<sub>下标</sub>

这个文本包含
<sup>上标</sup>

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

<code>计算机输出</code>

<kbd>键盘输入</kbd>

<tt>打字机文本</tt>

<samp>计算机代码样本</samp>

<var>计算机变量</var>

<address>
地址
</address>

<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

<p>段落 <q>引用</q> </p>

<p>文本 <del>删除文本</del> <ins>插入文本</ins>!</p>

HTML 格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

 

HTML "计算机输出" 标签

标签描述
<code><code><code><code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变化量
<pre>定义预测式文本

HTML 引文, 引用, 及标签指定义

标签描述
<abbr>定义缩小写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接，可以从一个页面指向另一个目的端的链接。

在标签 <a> 中使用了 href 属性来描述链接的地址。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定来显示

HTML 空链接

HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

<a href="#">链接文字</a>

HTML 链接语法

<a href="url">Link text</a>

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。

<a href="" target=""></a>

<a href="" target="_blank"></a>

提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

HTML 链接 - id 属性

id 属性可用于在一个 HTML 文档中创建书签标记。

提示: 书签是不以任何特殊的方式显示，在 HTML 文档中是不显示的，所以对于读者来说是隐藏的。

<!--在 HTML 文档中插入 ID-->
<a id="tips">Tips</a>
<!--在 HTML 文档中创建一个链接到(id="tips")-->
<a href="#tips">Tips</a>

更多实例

<!--图片链接-->
<p>创建图片链接:
<a href = ""><img src = "" alt = "" width = "" height = ""></a>
</p>

<p>无边框的图片链接:
<a href = ""><img border = "0" src = "" alt = "" width = "" height = ""></a>
</p>

<!--在当前页面链接到指定位置 如何使用书签-->
<p>
<a href="#C3">查看章节 3</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C3">章节 3</a></h2>
<p>这边显示该章节的内容……</p>

<!--跳出框架-->
<p>跳出框架</p> 
<a href="" target="_top">点击这里!</a> 

<!--创建电子邮件链接-->
<p>
这是一个电子邮件链接：
<a href="mailto:wangdangpeng@factzone.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

HTML 引用

HTML <q> 用于短的引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

<p>段落<q>引用</q></p>

用于长引用的 HTML <blockquote>

HTML <blockquote> 元素定义被引用的节。

浏览器通常会对 <blockquote> 元素进行缩进处理。

<p>段落</p>
<blockquote cite="">
</blockquote>

用于缩略词的 HTML <abbr>

HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<p><abbr title=""></abbr> </p>

用于定义的 HTML <dfn>

HTML <dfn> 元素定义项目或缩写的定义。 

1.如果设置了 <dfn> 元素的 title 属性，则定义项目

<p><dfn title=""></dfn> </p>

2.如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目

<p><dfn><abbr title=""></abbr></dfn> </p>

3.否则，<dfn> 文本内容即是项目，并且父元素包含定义

<p><dfn></dfn> </p>

用于联系信息的 HTML <address>

HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<address>
<br> 
<br>
<br>
<br>
</address>

用于著作标题的 HTML <cite>

HTML <cite> 元素定义著作的标题。

浏览器通常会以斜体显示 <cite> 元素。

<p><cite> </cite>  </p>

用于双向重写的 HTML <bdo>

HTML <bdo> 元素定义双流向覆盖。

<bdo> 元素用于覆盖当前文本方向：

<bdo dir="rtl"> </bdo>

HTML 引文、引用和定义元素

标签描述
<abbr>定义缩写或首字母缩略语。
<address>定义文档作者或拥有者的联系信息。
<bdo>定义文本方向。
<blockquote>定义从其他来源引用的节。
<dfn>定义项目或缩略词的定义。
<q>定义短的行内引用。
<cite>定义著作的标题。

HTML 注释

<!-- 在此处写注释 -->

注释：在开始标签中有一个惊叹号，但是结束标签中没有。

浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

您可以利用注释在 HTML 中放置通知和提醒信息。

HTML id

HTML ​id​ 属性用于 为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 id 的元素。

使用 id 属性

id​ 属性指定 HTML 元素的唯一 ID。 ​id​ 属性的值在 HTML 文档中必须是唯一的。

​id​ 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 ​id​ 名称。然后，在花括号 {} 中定义 CSS 属性。

<!DOCTYPE html>
<html>
<head>
<style>
#x 
{
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="x"> X </h1>

</body>
</html>

注释：id 名称对大小写敏感！

注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

<style>
/* 设置 id 为 "x" 的元素的样式 */
#x 
{
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置类名为 "y" 的所有元素的样式 */
.y
{
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- 拥有唯一 id 的元素 -->
<h1 id="x">X</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="y">Y1</h2>
<p></p>

<h2 class="y">Y2</h2>
<p></p>

<h2 class="y">Y3</h2>
<p></p>

通过 ID 和链接实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

如果页面很长，那么书签可能很有用。

要使用书签，您必须首先创建它，然后为它添加链接。

然后，当单击链接时，页面将滚动到带有书签的位置。

<!--id​ 属性创建书签-->
<h2 id="C3">第三章</h2>

<!--在同一张页面中，向这个书签添加一个链接-->
<a href="#C3">跳转到第三章</a>

在 JavaScript 中使用 id 属性

JavaScript 可以使用 ​getElementById()​ 方法访问拥有特定 id 的元素

<script>
function displayResult() 
{
  document.getElementById("x").innerHTML = "XX";
}
</script>

本章总结

  • id​ 属性用于为 HTML 元素指定唯一的 id
  • id​ 属性的值在 HTML 文档中必须是唯一的
  • CSS 和 JavaScript 可使用 ​id​ 属性来选取元素或设置特定元素的样式
  • id​ 属性的值区分大小写
  • id​ 属性还可用于创建 HTML 书签
  • JavaScript 可以使用 ​getElementById()​ 方法访问拥有特定 id 的元素

HTML 头部

HTML <head>
HTML 头部元素包含关于文档的概要信息。

实例

<!--使用 <title> 标签定义HTML文档的标题-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML</title>
</head>

<body>
<p>浏览器中包含body元素的内容。</p>
<p>浏览器的标题包含title元素的内容</p>
</body>

</html>
<!--使用 <base> 定义页面中所有链接默认的链接目标地址。-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML</title> 
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>

<body>
<img src="logo.png"> 注意这里我们设置了图片的相对地址。
能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，
所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> 
注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。
因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>
<!--使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML</title> 
<meta name="description" content="web教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="HTML">
<meta charset="UTF-8">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>

</body>
</html>

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

HTML <title> 元素

<title> 标签定义了不同文档的标题。

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

 

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

    <p></p>        

</body>                
</html>

HTML <base> 元素

<base> 标签描述了基础的链接地址/链接目标，该标签作为HTML文档中所有的链接 规定默认地址或默认目标（target）

<head>       

<base href="" target="_blank">      

</head>

HTML <link> 元素

<link> 标签确定了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表

<head>       

<link rel="stylesheet" type="text/css" href="style.css">        

</head>

HTML <style> 元素

<style> 标记定义了HTML文档的样式文件引用地址。

在<style>元素中你需要指定格式的文件来自流染HTML文件

<head>        
<style type="text/css">        
body 
{
    background-color:
}        
p 
{
    color:
}        
</style>        
</head>

HTML <meta> 元素

<meta> 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但对于机器是可读的。

<meta> 标签开始位置于 head 元素中。

元数据可用于浏览器，搜索引擎，或其他Web服务。

针对搜索引擎的关键词

一些搜索引擎使用元素的名称和内容属性来搜索您的页面。

<!--下面的元元素定义页面的描述-->
<meta name="description" content=" " />

<!--下面的元元素定义页面的关键词-->
<meta name="keywords" content=" " />

name 和 content 属性的作用是描述页面的内容。

HTML <script> 元素

<script> 标签用于加载脚本文件，如：JavaScript。

标签描述
<head>确定了文档的信息
<title>确定了文档的标题
<base>确定了页面链接标签的默认链接地址
<link>确定了一个文件和外部资源之间的关系
<meta>确定了HTML文档中的元数据
<script>确定了客户端的脚本文件
<style>确定了HTML文档的格式文件

HTML CSS

CSS 可以通过以下方式添加到 HTML 中：

  • 内联样式- HTML 中使用"style"属性
  • 内部样式表 - HTML 文档头部 <head> 区域使用 <style>元素 来包含 CSS
  • 外部引用 - 使用外部 CSS文件

内联式

<p style="color: ;margin-left: ;">这是一个段落。</p>

HTML样式实例 - 背景颜色

背景颜色属性（background-color）定义一个元素的背景颜色

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>HTML</title> 
</head>
<body style="background-color:white;">
    
    <h2 style="background-color:blue;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
    
</body>
</html>

HTML 样例 - 字体, 字体颜色 ，字体大小

font-family（字体），color（颜色），和 font-size（字体大小）属性来确定正确字体的样式

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>HTML</title> 
</head>
<body>
    
    <h1 style="font-family:verdana;">一个标题</h1>
    <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
    
</body>
</html>

HTML 样例实例 - 文本对齐方式

使用text-align（文字对齐）属性指定文本的水平与垂直对齐方式

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

    <h1 style="text-align:center;">居中对齐的标题</h1>

</body>
</html>

内部样式表

当单个文件需要特殊样式时，就可以使用内部样式表。你可以在<head>部分通过<style>标签确定内部样式表

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

    <style type="text/css">
        body 
        {
             background-color;
        }
        p 
        {
            color:;
        }
    </style>
</head> 
<body>
</body>
</html>

外部样式表

当样式需要被应用到很多页面的时候，外部样式将是理性的选择。使用外部样式，你就可以通过修改一个文件来修改改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

HTML 图像

使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt

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

    <h2>旅行</h2>
    <img border="0" src=" " alt=" " width="304" height="228">

</body>
</html>

实例

<!--如何在网页中显示图像-->
<img src="  " alt="" width="32" height="32"></p>

<img src="  " alt=" " width="48" height="48"></p>

HTML 图像- 图像标签（<img>）和源属性（Src）

在 HTML 中，图像由<img>标签定义。

<img>是空标签，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

HTML 图像- Alt属性

alt属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src=" " alt=" ">

HTML 图像- 设置图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素

<img src=" " alt=" " width="304" height="228">

设置图像边框

在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src=" " alt=" " border = "3">

设置图像对齐

默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src=" " alt=" " align="right">

实例

<!--如何使图片浮动至段落的左边或右边-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<p>
<img src=" " alt=" " style="float:left" width="32" height="32"> 图片浮动在这个文本的左边。
</p>

<p>
<img src=" " alt=" " style="float:right" width="32" height="32"> 图片浮动在这个文本的右边。
</p>

</body>
</html>
<!--如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>

<p> </p>

<img src=" " width="145" height="126" alt=" " usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt=" " href=" ">
  <area shape="circle" coords="90,58,3" target="_blank" alt=" " href=" ">
  <area shape="circle" coords="124,58,8" target="_blank" alt=" " href=" ">
</map>

</body>
</html>

HTML 图像标签

标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域

HTML 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
</body>
</html>

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。

使用边框属性border来显示一个带有边框的表格。

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

        <td>Row 1, cell 1</td>

        <td>Row 1, cell 2</td>

    </tr>
</table>
</body>
</html>

HTML 表格表头单元格

表格的表头单元格使用<th>标签进行定义。

表格的表头单元格属性主要是一些公共属性，如：align、dir、width、height。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
</body>
</html>

HTML 表格高度和宽度

在<table>标签中使用width（宽）和height（高）属性设置表格宽度和高度。
可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
<table border = "1" width = "400" height = "150">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>
</body>
</html>

HTML 表格背景

使用以下方法之一设置 HTML 表格的背景

  • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
  • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。
  • bordercolor属性 - 可以设置边框颜色。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
<table border = "1" bordercolor = "green" bgcolor = "yellow">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>
</body>
</html>

使用background属性需要提供图像 URL 地址

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

<table border = "1" bordercolor = "green" background = "/images/test.png">

    <tr>

        <th>Column 1</th>

        <th>Column 2</th>

        <th>Column 3</th>

    </tr>

</table>
 
</body>
</html>

HTML 表格空间

以下两个属性，用于调整 HTML 表格中单元格的空间：

  • cellspacing属性-定义表格单元格之间的空间
  • cellpadding属性-表示单元格边框与单元格内容之间的距离
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
<table border = "1" cellpadding = "5" cellspacing = "5">
    <tr>
        <th>Salary</th>
    </tr>
    <tr>
        <td>5000</td>
    </tr>
    <tr>
        <td>7000</td>
    </tr>
</table>
</body>
</html>

HTML 合并单元格

  • 如果要将两个或多个列合并为一个列，将使用colspan属性
  • 如果要合并两行或更多行，则将使用rowspan属性
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>
</body>
</html>

HTML 表格头部、主体、页脚

表格可以分为三个部分 - 头部，主体和页脚。每个页面保持相同，而正文是表格的主要内容持有者。

头部，主体和页脚的对应的三个标签：

  • <thead> - 创建单独的表头。
  • <tbody> - 表示表格的主体。
  • <tfoot> - 创建一个单独的表页脚。

表可以包含多个<tbody>元素以指示不同的页面。

注意：<thead>和<tfoot>标签应出现在<tbody>之前

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body> 
<table border = "1" width = "100%">
    <thead>
        <tr>
            <td colspan = "4">This is the head of the table</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan = "4">This is the foot of the table</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </tbody>         
</table>
</body>
</html>

HTML 表格的嵌套

可以在另一个表中使用一个表。可以使用<table>内的几乎所有标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编程狮(w3cschool.cn)</title>
</head>
<body> 
<table border = "1" width = "100%">
    <tr>
        <td>
            <table border = "1" width = "100%">
                <tr>
                    <th>Salary</th>
                </tr>
                <tr>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>7000</td>
                </tr>
            </table>
        </td>
    </tr>       
</table>
</body>
</html>

实例

<!--没有边框的表格-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>
<!--如何显示表格表头-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>55577854</td>
  <td>5557855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>55577854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>55577855</td>
</tr>
</table>

</body>
</html>
<!--带标题的表格-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>
<!--如何定义跨行或跨列的表格单元格-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
    <title>HTML</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>55577854</td>
  <td>55577855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>55577854</td>
</tr>
<tr>
  <td>55577855</td>
</tr>
</table>

</body>
</html>
<!--如何显示在不同的元素内显示元素-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>
<!--如何使用 Cell padding 来创建单元格内容与其边框之间的空白-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

HTML 表格标签

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

HTML 列表

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>
    <meta charset="UTF-8">
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
</body>
</html>

HTML 有序列表

有序列表使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>
    <meta charset="UTF-8">
</head>
<body>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
</body>
</html>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。  

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>
    <meta charset="UTF-8">
</head>
<body>
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>
</body>
</html>

实例

<!--不同类型的有序列表-->
<!DOCTYPE html>
<html>
<body>

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>
<!--不同类型的无序列表-->
<!DOCTYPE html>
<html>
<body>

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>
<!--如何嵌套列表-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>
<!--更复杂的嵌套列表-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶
        <ul>
          <li>中国</li>
          <li>非洲</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>
<!--一个定义列表-->
<!DOCTYPE html>
<html>
<body>

<h4>A Definition List:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

HTML 列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定义列表的描述

HTML 区块

HTML <div> 和<span>

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

HTML 区块元素

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

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

<div> 标签可以把文档分割为独立的、不同的部分。

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

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

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

HTML <span> 与元素

HTML <span> 元素是内联元素，可用作文本的容器

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

HTML 分组标签

标签描述
<div>定义了文档的区域，块级
<span>用来组合文档中的行内元素， 内联元素

<span>实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
</head>
<body>
    <p>我有一辆
    <span style="color:gold">黑色</span> 的
    <span style="font-size:20px">迈巴赫</span>和
    <span style="color:blue">保时捷</span>。
    </p> 
</body>
</html>

<div>实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
</head>
<body>
    <p>这是一些文本。</p>
    <div style="color:#00FFFF">
    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
    </div>
<p>这是一些文本。</p>
</body>
</html>

HTML 布局

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>        
    <meta charset="UTF-8">
</head>
<body>
    <div id="container" style="width:800px">
    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">网页的主标题</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;">
    内容就在这里</div>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright HTML</div>
    </div>
</body>
</html>

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式。

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

<!DOCTYPE html>
<html>
<head>
    <title>HTML</title>        
    <meta charset="utf-8">
</head>
<body>
<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
        <h1>网页的主标题</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;">
        内容就在这里</td>
    </tr>

    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
        Copyright  HTML</td>
    </tr>
</table>
</body>
</html>

HTML 布局标签

标签描述
<div>定义文档区块，块级
<span>定义 span，用来组合文档中的行内元素。

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签 <form> 来设置

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下

文本域

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
<form>
    姓名: <input type="text" name="firstname"><br>
    电话号码: <input type="text" name="lastname">
</form>
</body>
</html>

密码字段

密码字段通过标签 <input type="password"> 来定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
<form>
    密码: <input type="password" name="pwd">
</form>
</body>
</html>

单选按钮

<input type="radio"> 标签定义了表单单选框选项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
<form>
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>
</body>
</html>

复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
<form>
    <input type="checkbox" name="vehicle" value="Bike">我有自行车<br>
    <input type="checkbox" name="vehicle" value="Car">我有小车
</form>
</body>
</html>

提交按钮

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<body>
<form name="input" action="html_form_action.php" method="get">
    用户名: <input type="text" name="user">
    <input type="submit" value="提交">
</form>
</body>
</html>

实例

<!--如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表-->
<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
</select>
</form>

</body>
</html>
<!--如何创建一个简单的带有预选值的下拉列表-->
<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green" selected>Green</option>
<option value="white">White</option>
</select>
</form>

</body>
</html>
<!--如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>
<!--如何创建按钮。你可以对按钮上的文字进行自定义-->
<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

表单实例

<!--如何在数据周围绘制一个带标题的框-->
<!DOCTYPE html>
<html>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>
<!--如何向页面添加表单。此表单包含两个输入框和一个确认按钮-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<form action="/statics/demosource/demo-form.php" method="post">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>
<!--两个复选框和一个确认按钮-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML</title> 
</head>
<body>

<form action="/statics/demosource/demo-form.php" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>
<!--两个单选框和一个确认按钮-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<form action="/statics/demosource/demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>
<!--如何从表单发送电子邮件-->
<!DOCTYPE html>
<html>
<body>

<h3>Send e-mail to someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
send time:<br>
<select name=time>
<option  value="2022">2022</option></br>
<option value="2023">2023</option></br>
<option  value="2024">2024</option></br>
</select></br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

HTML 表单标签

标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldset>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>指定一个预先定义的输入控件选项列表
<keygen>定义了表单的密钥对生成器字段
<output>定义一个计算结果

HTML 框架

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

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL"></iframe>

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

Iframe - 设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 可以指定其按比例显示 (如："80%").

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

    <iframe src="" width="80%" height="80%"></iframe>

</body>
</html>

Iframe - 移除边框

frameborder属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框

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

    <iframe src=" " width="200" height="200" frameborder="0">
    </iframe>

</body>
</html>

使用 iframe 来显示目录链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性

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

    <iframe src=" " name="iframes"></iframe>
    <p><a href=" " target="iframes"> </a></p>
    
</body>
</html>

HTML iframe 标签

标签说明
<iframe>定义一个内联的 iframe

iframe 标准属性

属性说明
class规定元素的类名
id规定元素的唯一 id
style规定元素的行内样式
title规定元素的额外信息

HTML <frameset>标签

<frameset>标签在一个页面中设置一个或多个框架，用<frameset></frameset>代替了<body></body>，不能出现在body标签里。

<frameset>

<frame src=" ">

<frame src=" ">

</frameset>
  • frameset- 建立框架的标记，将在其中定义各个框架。
  • frame src- 指示框架显示内容URL地址。

<frameset> - 设置行列比例

<frameset>标签中我们使用rows设置行的占页面的百分比；cols设置列的所占百分比。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<frameset rows="20%,*">
    <frame src=" ">
    <frameset cols="30%,*">
        <frame src=" ">
        <frame src=" ">
    </frameset>
</frameset>
</html>

<frameset> - 设置边框

框架有一些边框线，大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。

注意：frameset和frameborder是相同的属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
    <frame src=" ">
    <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
        <frame src=" ">
        <frame src=" ">
    </frameset>
</frameset>
</html>
  • frameborder-设置边框， 0 值表示没有边框
  • border- 修改边框的粗细
  • framespacing- 修改边框的粗细

<frame> - 设置名字

<frame>标签中我们使用name属性命名每个框架，而不是内容页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>W3Cschool</title>
</head>
<frameset rows="20%,*">
    <frame name="title" src=" ">
    <frameset cols="30%,*">
        <frame name="menu" src=" ">
        <name="content" src=" ">
    </frameset>
</frameset>
</html>

<frame> - 设置滚动

<frame>标签中我们使用noresize设置禁止用户拖拉框架大小；scrolling用于设置滚动条是否显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
</head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
    <frame src=" " noresize scrolling="no">
    <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
        <frame src=" " scrolling="auto" noresize>
        <frame src=" " scrolling="yes" noresize>
    </frameset>
</frameset>
</html>
  • noresize- 不允许用户更改其尺寸。
  • scrolling- 设置滚动条是否显示。

HTML 脚本

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

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

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

HTML <script> 标签

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

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

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>HTML</title> 
</head>
<body>
    <script>
        document.write("Hello World!")
    </script> 
</body>
</html>

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

HTML<noscript> 标签

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

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

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

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

    <script>
        document.write("Hello World!")
    </script>
    <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

</body>
</html>

HTML 脚本标签

标签描述
<script>定义了客户端脚本
<noscript>定义了不支持脚本浏览器输出的文本

-仲谋-
关注
专栏目录
SVG 路径 ＜path＞ 格式指令解析M/L/H/V/C/S/Q/T/A/Z
小康师兄
06-07 2925
SVG 路径 格式指令解析M/L/H/V/C/S/Q/T/A/Z
N o v e m b e r 2 8 t h W e d n e s d a y
热门推荐
Lu_ming的专栏
11-30 6万+
I f   y o u   d e v e l o p   a n   a p p l i c a i o n   f o r   A p a c h e   p l a t f o r m ,   t h e r e   f o u r   c o r e   o b j e c t s   m u s t   b e   u n d e r s t o o d .     T h e   m
量化新手初识H-M模型
漫步量化
09-11 7532
H-M模型是什么？ H-M模型又称为双贝塔模型，是HenrikssonHenrikssonHenriksson和MertonMertonMerton（1997年诺贝尔经济学奖获得者）在1981年提出的一种与T-M模型相似的却更为简单的对选股和择时能力进行衡量的二项式参数检验模型。 H-M模型用于在基金业绩评估时对基金经理的时机选择能力和证券选择能力进行评价。 H-M模型的表达式 他们将择时...
【基金量化研究系列】基金绩效归因模型（三）——基于CAPM、T-M、H-M、C-L模型的基金绩效归因研究
Mikey_Sun的博客
06-03 2万+
文章目录1. 引言2. 模型介绍2.1 CAPM模型2.2 T-M模型2.3 H-M模型2.4 C-L模型2.5 H-M模型 V.S. C-L模型3. 实证分析3.1 数据选择3.2 python代码块3.3 输出结果与分析写在最后 1. 引言 在前一篇文章中，我们对某只基金的超额收益来源进行了分解，分解成了择时、择股与交互作用三个部分。详情请见：【基金量化研究系列】基金绩效归因模型（一）——Brinson多期归因模型简介。然而，Brinson多期归因模型在使用时需要使用每一个子周期的具体持仓信息（在各行
L-M算法
kittledeng的专栏
11-12 7347
最近深入学习了L-M（Levenberg-Marquardt）算法，感觉还是挺有意思的。帮我解决了 三阶指数拟合的问题。在METHODS FOR NON-LINEAR LEAST SQUARES PROBLEMS这本书里有详细的介绍。理论上该方法应该可以解决大多数非线性拟合的问题。下面是算法截图 部分代码如下： cal_func(x,t,y,func); // f=y-f(x,
casio计算机如何算函数,卡西欧计算器如何计算cth函数？
weixin_28674303的博客
07-28 2810
2015-08-29急需卡西欧9750计算器圆曲线坐标计算程序？(CASIO-4850)竖曲线标高计算程序--全线贯通(CASIO-4850)竖曲线标高计算程序1,加了水准点数据。2,加了竖曲线数据库(实现了全线贯通)3,加了测量仪器的选择功能4,能进行现场高程放样工作(能计算除了超高段以外的任意桩号的中桩及任意距离边桩高程)[SJG]------------------主程序E“LGP”:N“J...
k-anonimity、l-diversity 和 t-closeness
scuLVLV的博客
05-02 9996
k-anonimity、l-diversity 和 t-closeness
怎么使用html中的div元素画圆
wangyufei0815的博客
09-05 185
元素会呈现为一个直径为 100px 的蓝色圆形。属性的值，你可以改变圆的大小。的宽度和高度相等，并应用。
html,css学习记录
2301_79347603的博客
09-01 2164
html,css学习记录htmlcss盒子模型 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mykingdom</title> <link
前端知识HTML&CSS
w13114的博客
08-31 1336
前端知识
HTML语义化标签的重要性及常见错误
官方推荐
09-02 3365
HTML语义化标签的重要性及常见错误
VitePress 文件路由解析：从 Markdown 到 HTML 的映射艺术
软考鸭
09-05 299
VitePress 采用文件路由的方式，将 Markdown 文件的目录结构直接映射为生成的 HTML 页面的 URL 路径。这种设计使得网站的结构清晰易懂，同时也方便了内容的组织和维护。VitePress 的文件路由机制为文档网站的构建提供了一种直观且高效的方式。通过简单地组织和编写 Markdown 文件，你可以快速生成结构清晰、易于导航的静态网站。无论是个人博客、项目文档还是企业官网，VitePress 都是一个值得尝试的选择。
SpringBoot开发——结合Thymeleaf模板整合HTML
最新发布
bjzhang75的博客
09-05 767
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
【html】新建一个html并且在浏览器运行
qq_43720551的博客
09-02 398
想要运行上述代码，可以直接拖到浏览器里，但是为了实时地查看我们修改后的样式，可以使用 vscode 安装插件， Live Server。以下是一个简单的 HTML 小项目，展示一个包含标题、按钮和点击按钮后弹出提示框的基本页面。
前端面试题总结（HTML篇和CSS篇）
hyx_1225的博客
08-31 2582
BFC是一个独立渲染区域，它丝毫不会影响到外部元素BFC特性BFC内部元素是垂直排列的同一个BFC下margin会重叠计算BFC高度时会算上浮动元素BFC不会影响到外部元素BFC区域不会与float元素重叠如何创建BFCposition设为absolute或fixedfloat不为noneoverflow设置为hidden、autodisplay设置为inline-block或者inline-table或flexBFC的作用：解决margin的重叠问题。
vue3中vite基于vite-plugin-html的多入口打包
k0933的博客
08-30 390
1、安装vite-plugin-html。3、配置vite.config.js。
巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南
前端基地
08-30 946
本文深入阐释 HTML 列表，涵盖无序列表、容豁级标签、有序列表、定义列表及多级列表等。丰富讲解与实际案例紧密结合，助力新手快速上手，让经验丰富者也能收获实用知识与技巧。为网页创作之路注入新活力，快来开启精彩的学习之旅。
网站开发：HTML + CSS - CSS选择器
qq_51222843的博客
09-03 1312
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
HTML 基础知识详解与代码示例
weixin_63556308的博客
09-05 773
用于输出一些特殊的字符，因为有些特殊字符不能直接在网页中显示。默认情况下打开新网页时老网页会关闭，可使用。用于传递参数和数据，使用。
my如何与H T M L文件本地连接。
03-22
您可以使用以下代码将HTML文件与您的本地文件连接起来： ```html <!DOCTYPE html> <title>My Local HTML File</title> <h1>Welcome to my local HTML file!... <script src="myScript.js"></script> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值