HTML

最新推荐文章于 2024-05-17 15:34:29 发布

随风雨散落天涯

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量805

点赞数 24

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/h______1/article/details/135374072

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html 简介

在这里插入图片描述

<.!DOCTYPE html .>声明为HTML5文档
<.html.> 元素是 HTML 页面的根元素
<.head> 元素包含了文档的元（meta）数据，如 <.meta charset=“utf-8”> 定义网页编码格式为 utf-8。
<.title> 元素描述了文档的标题
<.body> 元素包含了可见的页面内容
<.h1> 元素定义一个大标题
<.p> 元素定义一个段落

什么是HTML？

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言：HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <.html>
HTML 标签通常是成对出现的，比如 <.b> 和 <./b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<.p>这是一个段落。<./p>

Web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
在这里插入图片描述

HTML网页结构

下面是一个可视化的HTML页面结构：
在这里插入图片描述
只有 <.body> 区域 (白色部分) 才会在浏览器中显示

<!DOCTYPE> 声明

<.!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
在这里插入图片描述

HTML 基础

HTML 标题

HTML标题(Heading) 是通过<.h1>-<.h6>标签来定义的。从1~6逐渐减小
<.h1>这是一个标题<./h1>
<.h2>这是一个标题<./h2>
<.h3>这是一个标题<./h3>

HTML 段落

p标签是块级元素，前后默认都会加一个换行，通常用来显示一段文字。
<.p>这是一个段落。<./p>
<.p>这是另外一个段落。<./p>
在这里插入图片描述

HTML 链接

HTML链接是通过标签<.a>来定义的。
<.a href=“https://www.baidu.com”><./a>
提示：在href属性中指定链接的地址。

HTML 图像

HTML 图像是通过标签<.img> 来定义的。
<.img src=“/images/log.png” width=“259” height=“39” />
注意：图像的名称和尺寸是以属性的形式提供的。

HTML 元素

HTML文档由HTML元素定义。

HTML元素

开始标签	元素内容	结束标签
<.p>	这是一个段落	<./p>
<.a href=“default.htm”>	这是一个链接	<./a>
<.br>	换行

开始标签常被称为起始标签,结束标签常被称为闭合标签。

HTML 元素语法

html元素以开始标签起始
html元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些html元素具有空内容
空元素在开始标签中进行关闭
大多数html元素可拥有属性

嵌套的HTML 元素

大多数HTML元素可以嵌套（HTML元素可以包含其他HTML元素）。
HTML文档由相互嵌套的HTML元素组成。

HTML文档实例

<!DOCTYPE html>
<html>

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

</html>

以上实例包含了三个HTML元素。

HTML 空元素

没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。
<.br>就是没有关闭标签的空元素(<.br>标签定义换行)。
在XHTML、XML、以及未来版本的HTML中，所有元素都必须关闭。
在开始标签中添加斜杠，比如<.br/>，是关闭空元素的正确方法，HTML、XHTML、和XML都接受这种方式。

HTML 属性

属性是HTML元素提供的附加信息。

HTML属性

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”;

属性实例

HTML 链接由<.a>标签定义。链接的地址在href属性中指定：

<a href="http://www.runoob.com">这是一个链接</a>

HTML属性参考手册

查看完整的HTML属性列表：HTML标签参考手册
下面列出了适用于大多数HTML元素的属性：

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

更多标准属性说明：HTML标准属性参考手册

HTML 标题

在HTML文档中，标题很重要。

HTML 标题

标题是通过<.h1>-<.h6>标签进行定义的。
<,h1>定义最大的标题。<,h6>定义最小的标题。

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

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

标题很重要

请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<.hr>标签在html页面中创建水平线。
hr元素可用于分隔内容。

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

HTML 段落

HTML可以将文档分割成若干段落。

HTML 段落

段落是通过<.p>标签定义的。

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

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

不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确的将HTML显示出来：

<p>这是一个段落
<p>这是另一个段落

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注意：在未来的html版本中，不允许省略结束标签。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行，请使用<.br>标签:

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

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

HTML 文本格式化

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

HTML 格式化标签

HTML 使用标签<.b>(“bold”)与<.i>(“italic”) 对输出的文本进行格式。如：粗体or斜体
这些HTML标签被称为格式化标签。
通常标签 <.strong> 替换加粗标签 <.b> 来使用, <.em> 替换 <.i>标签使用。

然而，这些标签的含义是不同的：
<.b> 与<.i> 定义粗体或斜体文本。

<.strong> 或者 <.em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

HTML 文本格式化标签

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

HTML"计算机输出" 标签

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

HTML 引文、引用、及标签定义

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

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

HTML超链接（链接）

HTML使用标签< ,a>来设置超文本链接。
超链接可以是一个字，一个词，也可以是一副图像，您可以点击这些内容来跳转到新的文档或者当前文档的某个部分。当您把指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<.a>中使用了href属性来描述链接的地址。
默认情况下，链接将以一下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

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

HTML 链接语法

以下是HTML中创建链接的基本语法和属性：<.a>元素：创建链接的主要HTML元素是<,a>元素。<.a>元素具有以下属性：

href：指定链接目标的url，这是链接的最重要的属性。可以是另一个网页的url，文件的url，或者其他资源的url。
target：指定链接如何在浏览器中打开，常见的值包括_black（在新标签或窗口中打开链接）和_self(在当前标签或窗口中打开链接)
title：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
rel：指定与链接目标的关系，如nofollow，noopener等。

文本链接：最常见的链接就是文本链接，它使用<.a>元素将一段文本转化为可点击的链接，例如：

<a href="https://www.example.com">访问示例网站</a>

图像链接：您还可以使用图像作为链接。在这种情况下，<.a>元素包围着<.img>元素。例如：

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用<.a>元素定义一个标记，并使用#符号引用该标记，例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用download属性，例如：

<a href="document.pdf" download>下载文档</a>

HTML 头部

HTML <.head> 元素

<.head>元素包含了所有的头部标签元素。在<.head>元素中你可以插入脚本(scripts)，样式文件(CSS)，及各种meta信息。可以添加在头部区域的元素标签为：<.title>、<.style>、<.meta>、<.link>、<.script>、<.noscript>、<.base>。

HTML <.title>元素

<.title> 标签定义了不同文档的标题。
<.title> 在XHTML/HTML 文档中是必须的。
<.title>元素：

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

一个简单的html文档：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML <.base> 元素

<.base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="https://www.runoob.com/images/" target="_blank">
</head>

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

</body>
</html>

HTML <.link> 元素

<.link> 标签定义了文档与外部资源之间的关系。
<.link> 标签通常用于链接到样式表

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

HTML<.style> 元素

<.style> 标签定义了HTML 文档的样式文件引用地址。
在<.style> 元素中你可以直接添加样式来渲染HTML文档

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

HTML <.meta> 元素

meta标签描述了一些基本的元数据。
<.meta> 标签提供了元数据，元数据也不显示在页面上，但会被浏览器解析。
meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键字），或其他web服务。
<.meta>一般放置于<.head>区域

<.meta> 标签使用实例

为搜索引擎定义关键字：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者：

<meta name="author" content="Runoob">

每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="30">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
<body>

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

</body>
</html>

HTML<.script> 元素

<.script>标签用于加载脚本文件，如：javascript
<.script> 元素在以后的章节会详细描述。

HTML head 元素

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

HTML CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式

如何使用 CSS

CSS 是在HTML4开始使用的，是为了更好的渲染HTML元素而引入的。
CSS 可以通过以下方式添加到HTML中：

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

最好的方式是通过外部引用css文件。

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何css属性。以下实例显示出如何改变段落的颜色和左外边距。

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

学习更多样式，请访问CSS教程

内部样式表

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

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

外部样式表

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

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

HTML 图像

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

在HTML中，图像由<.img> 标签定义。
<.img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src指”source“。源属性的值是图像的URL地址。
定义图像的语法是：

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

URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像-Alt 属性

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

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像标签

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

HTML 表格

HTML 表格由<.table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行（由<.tr>标签定义），每行被分为若干个单元格（由<.td>标签定义），表格可以包含标题行（<.th>）用户定义列的标题。

tr：tr是table row 的缩写，表示表格的一行。
td：td是table data 的缩写，表示表格的数据单元格。
th：th是table header 的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

以下是一个简单的HTML 表格案例：

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

以上的表格实例代码中，<.table>元素表示整个表格，它包含两个主要部分：<.thread>和<.tbody>。

<.thread>用于定义表格的标题部分：在<.thread>中，使用<.th>元素定义列的标题，以上实例中列标题分为”列标题1“、”列标题2“、”列标题3“.
<.tbody> 用于定义表格的主体部分：在<.tbody> 中，使用<.tr> 元素定义行，并在每行中使用<.td> 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用<.th> 元素定义列标题，可以使其表格中以粗体显示，与普通单元格区分开来。
HTML 表格还可以具有其他部分，如<.tfoot>(表格页脚)和<.caption>(表格标题)，<.tfoot> 可用于在表格的底部定义摘要、统计信息等内容。<.caption> 可用于为整个表格定义标题。

HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。

HTML表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头

表格的表头使用<.th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本。

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

跨行/跨列的的表格单元格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</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>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

HTML 表格标签

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

HTML 列表

HTML 支持有序、无序和定义列表：

HTML 无序列表

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

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<.ol>标签。每个列表项始于<.li> 标签。
列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<.dl>标签开始。每个自定义列表项以<.dt> 开始。每个自定义列表项的定义以<.dd>开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML 列表标签

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

ul是unordered lists的缩写 (无序列表)

li是list item的缩写（列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写（导航列表）

tr是table row的缩写（表格中的一行）

th是table header cell的缩写（表格中的表头）

td是table data cell的缩写（表格中的一个单元格）

HTML 区块

HTML <.div>和<.span>

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

HTML 区块元素

大多数HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例：<.h1>、<.p>、<.ul>、<.table>

HTML 内联元素

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

HTML <.div> 元素

HTML <.div> 元素是块级元素，它可用于组合其他HTML 元素的容器。
<.div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与CSS一同使用，<.div> 元素可用于对大的内容块设置样式属性。
<.div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<.table> 元素进行文档布局不是表格的正确用法。<.table> 元素的作用是显示表格化的数据。

HTML <.span> 元素

HTML <.span> 元素是内联元素，可用作文本的容器
<.span> 元素也没有特定的含义。
当与CSS 一起使用时，<.span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

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

当涉及到 <.div> 和 <.span> 的区别时，以下几点是值得进一步明确的：

块级元素 vs. 行内元素：

<.div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<.span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
默认样式和布局：

<.div> 元素的默认样式为块级显示，会以块的形式占据可用空间。
<.span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。
嵌套关系：

<.div> 可以容纳其他块级元素和行内元素，包括其他的 <.div> 和 <.span> 元素。
<.span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。
总之，<.div> 用于创建页面结构和布局，而 <.span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。

HTML 布局

网页布局对改善网站的外观非常重要。
请慎重涉及您的网页布局。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用<.div> 或者<.table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

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

HTML 布局-使用<.div> 元素

div元素用于分组HTML 的块级元素。
下面的例子使用五个div元素来创建多列布局：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">

<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>菜单</b><br>
	HTML<br>
	CSS<br>
	JavaScript
</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
 
</div>
 
</body>
</html>

上面的HTML 代码会产生如下效果：
在这里插入图片描述

HTML 布局- 有用的提示

Tip：使用CSS 最大的好处是，如果把CSS 代码存放到外部样式表中，那么站点会更易于维护，通过编辑单一的文件，就可以改变所有页面的布局。
Tip：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板。

HTML 布局标签

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

HTML 表单

HTML 表单和输入

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到web服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的HTML 表单的例子：

<.form> 元素用于创建表单，action属性定义了表单数据提交的目标URL，method属性定义了提交数据的HTTP方法（这里使用的是post）
<.label> 元素用于为表单元素添加标签，提高可访问性。
<.input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type属性定义了输入框的类型，id属性用于关联<.label> 元素，name属性用于标识表单字段。
<.select> 元素用于创建下拉列表，而<.option> 元素用于定义下拉列表中的选项。

标签中的name属性：只有加了name属性的标签元素才会被提交到服务器。

实例：

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

HTML 表单

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

我们可以使用<.form> 标签来创建表单：

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签<.input>。
输入类型是由type属性定义。
接下来我们介绍几种常用的输入类型。

文本域（Text Fields）

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

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

注意：表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是20个字符。

密码字段

密码字段通过标签<.input type=“password”> 来定义：

<form>
Password: <input type="password" name="pwd">
</form>

注意：密码字段字符不会明文显示，而是以星号*或者圆点.代替。

单选按钮（Radio Buttons）

<.input type=“radio”> 标签定义了表单的单选框选项：

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框（CheckBoxes）

<,input type=“checkbox”>定义了复选框。
复选框可以选取一个或多个选项：

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮（Submit）

<.input type=“submit”> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器，表单的动作属性action定义了服务端的文件名。
action属性会对接收到的用户输入数据进行相关的处理：

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML 表单标签

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

HTML 框架

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

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的边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

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

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

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号定义，这个符号由红色、绿色和蓝色的值组成（RGB）
每个颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
十六进制值的写法为# 号后跟三个或六个十六进制字符。
三位数表示法：#RBG,转换为六位数表示为：#RRBBGG;

颜色	3位十六进制颜色值	6位十六进制颜色值	RGB
绿色	#0F0	#00FF00	rgb(0,255,0)

HTML 脚本

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

HTML <.script> 标签

<.script> 标签用于定义客户端脚本，比如 JavaScript。
<.script> 元素既可包含脚本语句，也可通过src属性指向外部脚本文件。
JavaScript最常用于图片操作、表单验证及动态内容更新。
实例：

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

HTML <.noscript> 标签

<.noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<.noscript> 元素可包含普通HTML 页面的body元素中能够找到的所有元素。
只有在浏览器不支持脚本或禁用脚本时，才会显示<.noscript> 元素中的内容：

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

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符可以使用字符实体来替换。

HTML 实体

在HTML 中，某些字符是预留的。
在HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确的显示预留字符，我们必须在HTML 源代码中使用字符实体。字符实体类似这样：

&entity_name;
或

&#entity_number;

如需显示小于号，我们必须这样写：&lt；或&#80；
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）

不间断空格

HTML 中常用的字符实体是不间断空格（&nbsp；）
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp；字符实体

HTML 字符实体

显示结果	描述	实体名称	实体编号
	空格	&nbsp；	&#160；
<	小于号	&lt；	&#60；
…	…	…	…

如果需要用其他的可自行搜索。

HTML URL

URL 是一个网页地址。
URL 可以由字母组成，如"runoob.com"，或互联网协议(ip)地址：192.69.20.34。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。
当您点击HTML页面中的某个链接时，对应的<.a> 标签指向万维网的一个地址。
一个统一资源定位器用于定位万维网上的文档.。
一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:

scheme://host.domain:port/path/filename

说明：

scheme-定义因特网服务的类型。最常见的类型是http
host-定义域主机（http的默认主机是www）
domain-定义英特网域名，比如：runoob.com
:port-定义主机上的端口号（http的默认端口是80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见的URL Scheme

以下是一些URL scheme：

scheme	访问	用于…
http	超文本传输协议	以http://开头的普通网页。不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换
ftp	文件传输协议	用于将文件下载或上传至网站
file		您计算机上的文件。

HTML -XHTML

XHTML 是以XML 格式编写的HTML。

什么是XHTML？

List item
List item

XHTML 指的是可扩展超文本标记语言

XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

为什么使用XHTML？

因特网上的很多页面包含了糟糕的HTML。
如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：

<html>
<head>
<meta charset="utf-8">
<title>这是一个不规范的 HTML</title>
<body>
<h1>不规范的 HTML
<p>这是一个段落
</body>

XML 是一种必须正确标记且格式良好的标记语言。

如果希望学习 XML，请阅读我们的 XML 教程。

今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。

所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

随风雨散落天涯

关注

24
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
HTML

HTML是用来描述网页的一种语言。HTML指的是超文本标记语言：HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签来描述网页HTML 文档包含了HTML标签及文本内容HTML文档也叫做web 页面标签描述<.abbr>定义缩写<.address>定义地址<.bdo>定义文字方向定义长的引用<.q>定义短的引用句<.cite>定义引用、引证<.dfn>定义一个定义项目。
复制链接

扫一扫

专栏目录