乐趣区

关于html:陪你一起攻破前端未来打造运维领域BS架构产品带你复习巩固HTML常用的元素和属性看这篇就够了

jiezi

写在开篇

如果您是一名运维开发工程师，将来想要打造 B / S 架构产品，那么前端必须得攻破，笔者会和你一起保持，请追随我的步调一起登程吧！

本篇带你一起温习坚固 HTML 罕用的元素和 HTML 属性，记住，所有的 HTML 文档是由 HTML 元素定义的，且 HTML 属性是 HTML 元素提供的附加信息。

HTML 元素有哪些？

HTML 元素指的是从开始标签（start tag）到完结标签（end tag）的所有代码。

  • 代码如下:

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</title>
      <meta charset="utf-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区公众号 ID：TtrOpsStack</h1>
      <br>
      <p> 咱们会继续分享原创技术文章 </p>
  </body>
</html>

  • 阐明：

     如：开始标签是 <h1>，两头是内容，完结标签是 </h1>，特地阐明：某些 HTML 元素没有内容 (如 <br>)。这些元素称为空元素。空元素没有完结标记！
  • 成果如下:

嵌套的 HTML 元素

  • 阐明：

     大多数 HTML 元素能够嵌套（能够蕴含其余 HTML 元素）。HTML 文档由嵌套的 HTML 元素形成。上面的示例蕴含四个 HTML 元素 (<html>, <body>, <h1> , <p>):

  • 小栗子 

    <!DOCTYPE html>
<html>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
      <p> 公账号 ID：TtrOpsStack</p>
  </body>
</html>

  • 小栗子解析 

    <html> 元素定义了整个 HTML 文档。它有一个开始标签 <html>，以及一个完结标签 </html>。在 <html> 元素外部还有其余元素：<body>:

  • 代码如下:

    <!DOCTYPE html>
<html>
  <head>
      <title> 彩虹运维技术栈社区 </title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
      <p> 公账号 ID：TtrOpsStack</p>
  </body>
</html>

  • 阐明:

    <body> 元素定义了 HTML 文档的主体。它有一个开始标签 <body>，以及一个完结标签 </body>。在 <body> 元素外部还有两个其余元素：<h1> 和 
<p>:

  • 代码如下:

    <!DOCTYPE html>
<html>
  <head>
      <title> 彩虹运维技术栈社区 </title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
      <p> 公账号 ID：TtrOpsStack</p>
  </body>
</html>

  • 阐明：

    <h1> 元素定义题目。它有一个开始标签 <h1>，以及一个完结标签 </h1>:

  • 代码如下:

    <!doctype html>
<html>
  <head>
      <title>TtrOpsStack</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1> 彩虹运维技术栈社区 </h1>
  </body>
</html>

  • 阐明：

    <p> 元素定义段落。它有一个开始标签 <p>，以及一个完结标签 </p>:

  • 代码如下：

    <!DOCTYPE html>
<html>
  <head>
      <title></title>
      <meta charset="UTF-8"/>
  </head>
  <body>
      <p> 公账号 ID：TtrOpsStack</p>
  </body>
</html>

HTML 空元素

  • 阐明：

     没有内容的 HTML 元素被称为空元素。空元素是在开始标签中敞开的。<br> 就是没有敞开标签的空元素:

  • 代码如下：

    <!DOCTYPE html>
<html>
  <head >
      <title> 彩虹运维技术栈社区，公众号 ID：TtrOpsStack</title>
      <meta charset="utf-8" />
  </head>
  <body>
      <p> 这是 <br> 彩虹运维技术栈社区。<br> 公众号 ID：TtrOpsStack</p>
  </body>
</html>

HTML 属性

什么是 HTML 属性？

  • HTML 元素能够设置属性
  • 属性能够在元素中增加附加信息
  • 属性个别形容于开始标签
  • 属性总是以名称 / 值对的模式呈现，比方：name=”value”

href 属性

  • 阐明：

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

  • 代码如下:

    <!DOCTYPE html>
<html>
  <head>
      <title> 彩虹运维技术栈社区 -TtrOpsStack</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <a href="https://mp.weixin.qq.com/s/Zjdes2iHZ4rdpQayoWPVWQ"> 重磅！DIY 的 Prometheus 主备计划，全网惟一。生产未上，测试后行。</a>
  </body>
</html>

src 属性

  • 阐明：

    <img> 标签用于在 HTML 页面中嵌入图像。src 属性指定要显示的图像的门路：

  • 代码如下：

    <!DOCTYPE html>
<html>
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1>TtrOpsStack 的 Logo</h1>
      <img src="img/logo-wechat-id.jpg">
  </body>
</html>

有两种办法能够在 src 属性中指定 URL：

  1. 相对 URL：链接到另一个网站上的一个图像。

留神: 内部图像可能受版权保护。如果你没有失去应用它的许可，你可能违反了版权法。此外，您无法控制内部图像；它可能会忽然被删除或更改。

  1. 绝对 URL：链接到网站中托管的图像。在这里，URL 不包含域名。如果 URL 结尾没有斜杠，它将绝对于以后页面。比方: src=”logo-wechat-id.jpg”. 如果 URL 以斜杠结尾，它将是绝对于以后域名的。Example: src=”/images/logo-wechat-id.jpg”.

留神: 应用绝对 URL 简直总是最好的。如果您更改域，它们将不会中断。

width 和 height 属性

  • 阐明：

    <img> 标签还应蕴含 width 和 
height 属性，该属性指定图像的宽度和高度（以像素为单位）：

  • 代码如下:

    <!DOCTYPE html>
<html>
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1>TtrOpsStack 的 Logo</h1>
      <img src="img/logo-wechat-id.jpg" width="200" height="200">
  </body>
</html>
  • 成果如下:

alt 属性

  • 阐明：

     如果因为某种原因无奈显示图像，则 <img> 标签的 alt 属性指定图像的备用文本。这可能是因为连贯速度慢，或者 src 属性中的谬误，或者如果用户浏览器异样。

  • 代码如下：

    <!DOCTYPE html>
<html>
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <h1>TtrOpsStack 的 Logo</h1>
      <img src="imga/logo-wechat-id.jpg" width="200" height="200" alt="图片缺失">
  </body>
</html>
  • 成果如下：

style 属性

  • 阐明 

    style 属性用于设置款式，如色彩、字体、大小等。

  • 代码如下:

    <!DOCTYPE html>
<html>
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <p style="color:red;"> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</p>
  </body>
</html>

    元素中的内容字体就会变成红色

lang 属性

  • 阐明：

     在 <html> 标记中蕴含 lang 属性，以申明网页的语言。这是为了帮忙搜索引擎和浏览器。以下示例指定国家代码为中文：

  • 代码如下：

    <!DOCTYPE html>
<html lang="zh">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <p style="color:red;"> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</p>
  </body>
</html>

  • 上述代码，要害的中央是：

    <html lang="zh">

  • 进一步分析：

     国家代码也能够增加到 lang 属性中。前两个字符定义 HTML 页面的语言，后两个字符定义国家。以下示例指定中文为语言，国家为中国：

  • 代码如下:

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <p style="color:red;"> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</p>
  </body>
</html>

    zh-Hans-CN 是最新版本规范，其实也还是能够临时持续应用：zh-CN 的写法。

title 属性

  • 阐明：

    title 属性 定义无关元素的一些额定信息。当您将鼠标移到元素上时，title 属性的值将显示提醒：

  • 代码如下：

    <!DOCTYPE html>
<html lang="zh-Hans-CN">
  <head>
      <title> 微信公众号 ID:TtrOpsStack(彩虹运维技术栈社区)</title>
      <meta charset="UTF-8" />
  </head>
  <body>
      <p title="公众号 ID：TtrOpsStack"> 彩虹运维技术栈社区 </p>
  </body>
</html>
  • 成果如下：

写在最初

  1. HTML 标签对大小写不敏感，例如：

    HTML 标签不辨别大小写: <P> 等同 <p>。万维网联盟（W3C）在 HTML 4 中举荐应用小写，而在将来 (X)HTML 版本中强制应用小写。
  2. HTML 元素语法总结
  3. HTML 元素以开始标签起始
  4. HTML 元素以完结标签终止
  5. 元素的内容是开始标签与完结标签之间的内容
  6. 某些 HTML 元素具备空内容（empty content）
  7. 空元素在开始标签中进行敞开（以开始标签的完结而完结）
  8. 大多数 HTML 元素可领有属性
  9. 属性和属性值对大小写不敏。title 等同 TITLE，然而倡议始终应用小写属性，不过,W3C 倡议在 HTML 中应用小写属性，对于更严格的文档类型（如 XHTML）要求应用小写属性。
  10. 属性值应该始终被包含在引号内。双引号是最罕用的，不过应用单引号也没有问题。然而，W3C 倡议在 HTML 中应用单引号，并对 XHTML 要求更严格的文档类型中应用单引号。在某些个别的状况下，比方属性值自身就含有双引号，那么您必须应用单引号

本篇转载于：https://mp.weixin.qq.com/s/ES…

退出移动版