写在开篇
如果您是一名运维开发工程师，将来想要打造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要求更严格的文档类型中应用单引号。在某些个别的状况下，比方属性值自身就含有双引号，那么您必须应用单引号
发表回复