likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 22

写在开篇

如果您是一名运维开发工程师,未来想要打造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> )。这些元素称为空元素。空元素没有结束标记!
  • 效果如下:

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

嵌套的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>
  • 效果如下:

陪你一起攻破前端,未来打造运维领域B/S架构产品。带你复习巩固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>
  • 效果如下:

陪你一起攻破前端,未来打造运维领域B/S架构产品。带你复习巩固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>
  • 效果如下:

陪你一起攻破前端,未来打造运维领域B/S架构产品。带你复习巩固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...