目录
标签分类
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>