目录
标签分类
1、单|双标签
- 单标签在⾃身标签标识结束，主要应⽤场景为功能性标签 双标签：
- 双标签有成对的结束标识，主要应⽤场景为内容性标签。
2、⾏|块标签
- ⼜名内联标签，内联标签⾃身不具备宽⾼，通常同⾏显示 块标签：例：<b>, <td>, <a>, <img>，<span>
- ⼜名块级标签，块标签拥有⾃身宽⾼，通常独⾃占据⼀⾏。例：<h1>, <p>, <ul>, <table>，<div>
3、单⼀|组合标签
- 单⼀标签：单独出现，表示具体的功能或展示具体的内容。
- 组合标签：配合使⽤，才能产⽣相应的内容与效果。
<ruby> 拼⾳<rt>pinyin</rt> </ruby>
标题(h></h)
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> </body> </html>
注：
- 浏览器会自动地在标题的前后添加空行。
- 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
段落
段落是通过 <p> 标签定义的。
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> <p>This is a paragraph</p> <p>This is another paragraph</p> </body> </html>
注意：
- 浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
- 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）
- 段落折行（br /）
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> <p>This is a <br />paragraph</p> <p>This is <br />another paragraph</p> </body> </html>
- 分割线（hr/）----多用于段落之间的分割
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> <p>This is a paragraph</p> <hr /> <p>This is another paragraph</p> <hr /> </body> </html>
- 显示原文本文字 （pre >< /pre）
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> <pre>This is a paragraph</pre> <hr /> <p>This is another paragraph</p> <hr /> </body> </html>
section vs p
同为块标签，自动换行显示每一段，但是section不存在行距，p自带行距
注：section和P放在一起，p优先，使用行距
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> 111111 <section>section</section> 2222222222 <p>ppppppp</p> <section>section2222222</section> </body> </html>
文本
<!DOCTYPE html> <html lang="en"> <head> <title>定义文档标题</title> <!-- 字符编码，防止网页乱码 --> <meta charset="utf-8"> </head> <body> <i>i:斜体字</i> <em> em:斜体字，表示强调</em> <b>b:粗体字</b> <strong>strong:粗体字，表示强调(语⽓更强)</strong> <del>del:删除的⽂本 </del> <ins>ins:插⼊的⽂本</ins> <small>small:⼩号字体</small> <br/> <sub>sub:下标字</sub> <p>H<sub>2</sub>O</p> <sup>sup:上标字</sup> <p>x<sup>2</sup></sub></p> <!-- 中⽂注⾳，h5新增 --> <ruby> ruby:拼⾳<rt>rt:pinyin</rt> </ruby> </body> </html> </html>
容器（div and span）
-div
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div>- span
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
<p><span>some text.</span>some other text.</p>