陪你一起攻破前端，未来打造运维领域B/S架构产品.带你复习巩固HTML常用的元素和属性，看这篇就够了.
导读：写在开篇如果您是一名运维开发工程师，未来想要打造B/S架构产品，那么前端必须得攻破，笔者会和你一起坚持，请跟随我的步伐一起出发吧！本篇带你一起复习巩固HTML常用的元素和HTML属性，记住，所有的HTML文档是由HTML元素定义的，且HTM...
写在开篇
如果您是一名运维开发工程师，未来想要打造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：
- 绝对URL：链接到另一个网站上的一个图像。
注意: 外部图像可能受版权保护。如果你没有得到使用它的许可，你可能违反了版权法。此外，您无法控制外部图像；它可能会突然被删除或更改。
- 相对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>
- 效果如下：
写在最后
- HTML标签对大小写不敏感，例如：
HTML 标签不区分大小写: P>
等同 p>
。
万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。- HTML元素语法总结
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
- 属性和属性值对大小写不敏。title 等同 TITLE，但是建议始终使用小写属性，不过,W3C建议在HTML中使用小写属性，对于更严格的文档类型（如XHTML）要求使用小写属性。
- 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。但是，W3C建议在HTML中使用单引号，并对XHTML要求更严格的文档类型中使用单引号。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 陪你一起攻破前端，未来打造运维领域B/S架构产品.带你复习巩固HTML常用的元素和属性，看这篇就够了.
本文地址： https://pptw.com/jishu/297178.html