HTML标签（元素）
2019-03-29 本文已影响259人
辽A丶孙悟空
一、HTML标签
- HTML标签由尖括号包围的关键词构成，比如<html>
- HTML标签有成对出现（双标签）的，也有单个出现（单标签）的。
- 例：
<p>Neuedu，你好！</p>（段落标签）
<br/>（换行标签）- HTML标签对中的第一个标签是开始标签，第二个标签是结束标签。
- HTML标签尽量使用小写，所有单个标签都会以/结束，不要忘记。
二、HTML属性
属性为HTML标签提供附加信息
- HTML标签可以拥有属性。属性提供了有关HTML元素的更多信息。
- 属性总是以名称/值得形式出现，比如：name = "value"
- 属性总是在HTML元素的开始标签中规定
- 始终为属性值加引号：双引号是最常用的，不过使用单引号也没问题。
三、HTML固定基本结构
代码解释说明：
- <!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年），DOCTYPE 用来链接一些 HTML 编写守则，有点像自动校正等。然而现在已经没有人关心这些，只是因为历史原因必须将它们保留，但没有实际作用。现在你只需要知道这些就可以。
- <html></html> — <html> 元素。这个元素包含了整个页面的内容，有时也被称作根元素。
- <head></head> — <head> 元素。这个元素放置的内容不是展现给用户的，而是包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
- <meta charset="utf-8"> — 这个元素指定了当前文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，我们没有任何理由再选用其他编码。
- <title></title> — <title> 元素。这个元素设置页面的标题，显示在浏览器标签页上，同时作为收藏网页的描述文字。
<body></body> — <body> 元素。这个元素包含期望让用户在访问页面时看到的内容，可以是文本、图像、视频、游戏、可播放的音轨或其他内容。
四、标题标签
- 标题是通过<h1> - <h6>等标签进行定义的。
- <h1>定义最大的标题，<h6>定义最小的标题。它是承兑出现的。
- 请确保标题标签只用于标题，不要为了产生粗体或大号文本而使用标题。搜索引擎使用标题为您的网页结构和内容编制索引。
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>
结果：
五、hr和p标签
- 段落（p）标签
<p>标签在HTML页面中创建段落，它是成对出现的。- 水平线（hr）标签
<hr>标签在HTML页面中创建水平线，它是单个出现的，使用水平线（<hr>标签）来分割文章中小结是一个办法。- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <p>段落1</p> <hr /> <p>段落2</p> <hr /> <p>段落3</p> <hr /> </body> </html>
结果：
六、换行、空格、注释
- 换行（br）标签
<br>:在HTML页面显示为换行，它是单个出现的。在HTML里没有换行的概念，所以换行都是由<p>标签和
标签来实现的。- 空格标签
:在HTML页面显示为空格。注释
七、图像（img）标签
- <img>标签用于在HTML页面中创建图像，它是单个出现的。<img>标签的常用属性如下：
- src:设定图像的存储位置。
- alt:为图像设定一串预备的可替换的文本，在浏览器无法加载图像时，浏览器将显示这个替代性的文本。
- width:设定图像宽度。（单位为像素：px）
- height:设定图像高度。（单位为像素：px）
- 代码：（图片正常显示）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <img src="img/大师兄.jpg" height="300" width="300" alt="大师兄去救师傅了"/> </body> </html>
结果：
- 代码：（图片没有正常显示）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试标题</title> </head> <body> <img src="img/大师兄1.jpg" height="300" width="300" alt="大师兄去救师傅了"/> </body> </html>
结果：
八、路径概念
- 路径
- 路径分为网络路径和硬盘物理路径。
- 我们普通网站在做链接都是网络路径（网络相对路径）。
- 网络路径分为：绝对路径和相对路径
- 相对路径：
- 同级别：直接写文件名
- 上级别：用../文件名
- 下级别：用 目录名/文件名
- 代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>路径测试</title> </head> <body> <img src="img/大师兄.jpg" width="240px" height="240px"/> <img src="D:/img/大师兄1.png" width="240px" height="240px"/> <img src="http://www.neuedu.com/themes/mecsolve/img/logo.png?v=20170721" width="240px" height="240px"/> </body> </html>
结果：
九、超链接（a）标签
HTML使用超链接与网络上的另一个文档相连，<a>标签用于在HTML页面中创建超链接。它是成对出现的。开始标签和结束标签之间的文字被作为连接来显示。<a>标签的常用属性如下：
- href：用于定位需要链接的文档。
- title：定义鼠标停留在链接上的提示信息。
- target：定义被链接的文档在何处显示。其常用的两个值如下：
- _self：在本窗口打开链接。
- _blank：在一个新的窗口打开链接。
注意：什么可以作为链接呢？（文本和图片都可以）- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试链接</title> </head> <body> <a href="https://www.baidu.com" title="可以直接到百度哦">点我！</a> </body> </html>
十、列表
列表分为有序列表和无序列表
- 有序是：<ol></ol>
- 有序是：<ul></ul>
- 列表项：<li></li>
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试列表</title> </head> <body> <ol> <li>Java</li> <li>Python</li> <li>UI</li> </ol> <ul> <li>Java</li> <li>Python</li> <li>UI</li> </ul> </body> </html>
结果：
十一、table标签
table标签
- HTML中用表格由<table>标签来定义。
- 每个表格均有若干行（由<tr>标签定义）
- 每行被分割为若干单元格（由<td>标签定义）
- 表头使用（由<th>标签定义）
- <td>元素中的内容为表格数据，可以包含文本、图片、列表、段落、水平线、表格等等任何元素。
table标签的常用属性
- <table>标签的cellspacing属性用来定义表格的间距。
- <table>标签的cellpadding属性用来定义表格的边距。
- <table>标签的width属性用来定义表格的宽度。
- <table>标签的height属性用来定义表格的高度。
- <table>标签的border属性用来定义表格的边框粗细。
- <table>标签的align属性用来定义表格在页面中的水平对齐方式。
十二、文本标签
- 物理文本标签（它们都是成对出现的）
- <b>加粗
- <i>倾斜
- <u>下划线
- 逻辑文本标记
- < <
- > >
- © 版权符号
- 特殊文本标记（它们都是成对出现的）
- <sub> 下角标
- <sup> 上角标
- <del> 删除线
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试文本</title> </head> <body> <b>加粗</b> <i>倾斜</i> <u>下划线</u> <u><i><b>文字</b></i></u> <hr> 哈哈 呵呵<br> <b>标记是进行字体加粗的标记<br> 版权所有 © Neuedu <hr> 水的分子式是H<sub>2</sub>O<br> 2<sup>3</sup> = 8<br> 赵四暴打了刘能一顿，这件事实在是<del>丧心病狂</del>干得漂亮 </body> </html>
结果：
