用户投稿HTML 标籤
上一篇提到了 HTML 的标準结构，接下来我们来讲组成 HTML 的重要部分 —— 标籤。
HTML 的标籤由 <、 >、 /， 及英文字母组合而成，被 <> 包起来的英文字母或单字为标籤名。常见的标籤为”双标籤”，也就是有起始标籤和结束标籤的标籤组。例如：<strong> 这是粗体 </strong>。除此之外也有少部分的标籤为单标籤，例如我们之后会讲到的 <br> 标籤就只有一个起始标籤。
起始标籤 (opening tag)：HTML 标籤只是用来表达 HTML 文件的结构和不同的语意，标籤本身不会被显示在页面上
<>中放入标籤名称，代表该元素的开始位置。结束标籤 (closing tag)：</>标籤名称前会有一个/，代表该元素的结束位置。<h1></h1>文字加粗、加大、佔整行文字段落 Paragraphs<p></p>自动换行、段落间空行换行标籤 Break<br>水平线 Horizontal Rules</hr>清单 List<ul><li></li></ul>、<ol><li></li></ol>分为有序清单和无序清单表格 Table<table></table>包含 thead、tbody 等表单 Form<form></form>文字标籤 Label<label></label>通常会搭配单、多选框出现输入 Input<input>有 text、radio、checkbox、submit 等多种 type下拉选单 Select<select><option></option></select>文字框 Textarea<textarea></textarea>文字超过框线範围自动换行、预设使用者可修改大小图片 Images<img>src 为必要属性音乐、影片<audio></audio>、<video></video>标题标籤 - headings
<h1></h1>，一般用于文章标题，共分为6个等级：h1 ~ h6。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <h1>h1 标题</h1> <h2>h2 标题</h2> <h3>h3 标题</h3> <h4>h4 标题</h4> <h5>h5 标题</h5> <h6>h6 标题</h6> </body></html>
文字段落 - paragraphs
<p></p>，用于大段的文字段落及文章、部落格等。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <p>所谓先有鸡还是先有蛋，关键是先有鸡还是先有蛋需要如何写。莫扎特有讲过一句名言，谁和我一样用功，谁就会和我一样成功。这启发了我，先有鸡还是先有蛋的意义其实就隐藏在我们的生活中，问题的关键究竟为何？经过上述讨论，为什么先有鸡还是先有蛋对我们来说这么重要？我们不得不面对一个非常尴尬的事实，那就是，孔丘曾经说过，三军可夺帅也，匹夫不可夺志也。带着这句话，我们还要更加慎重的审视这个问题：布尔沃曾经说过一句发人深省的话，要掌握书，莫被书掌握；要为生而读，莫为读而生。这不禁令我深思。先有鸡还是先有蛋，到底应该如何实现。</p> <p>你真的了解先有鸡还是先有蛋吗？所以说，生活中，若先有鸡还是先有蛋出现了，我们就不得不考虑它出现了的事实。了解清楚先有鸡还是先有蛋到底是一种怎麽样的存在，是解决一切问题的关键。这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。先有鸡还是先有蛋，发生了会如何，不发生又会如何。带着这些问题，我们来审视一下先有鸡还是先有蛋。一般来说，总结的来说，高尔基在不经意间这样说过，不要慨叹生活底痛苦！慨叹是弱者。这让我思索了许久，为什么是这样呢？</p> </body></html>
换行标籤 - break
<br>，当我们使用 “非独占一整行空间” 的标籤或不使用标籤直接写文字时，元素会自动接续上一个元素的位置进行排列，这时候就可以使用换行标籤来达到跳到下一行(Enter)的效果。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <a>这个有</a> <a>换行了吗</a> <a>那这个有</a><br> <a>换行了吗?</a> </body></html>
水平线 - horizontal rules
<hr>，预设就是一条长长的横线，通常用于分割标题及文章。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <a>后面有线吗</a> <hr> <a>好像有</a> </body></html>
列表 - list
用于网页中元素排列整齐规整的区域，分为无序清单 ( unordered list ) 和有序清单 ( ordered list )。
无序清单的结构为<ul><li></li></ul>，ul 是指整个 unordered 清单，而 li 则是 list 中的每一项无序清单的结构为 <ol><li></li></ol><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <ul> <li>列表</li> <li>列表</li> <li>列表</li> </ul> <ol> <li>列表</li> <li>列表</li> <li>列表</li> </ol> </body></html>
除了有序及无序列表外，HTML 也有自订义列表，特别的是他不只是一个清单的项目排列，而是项目+详细内容的组合。
自定义列表以 <dl> 为开始，包含多个列表项目<dt> 及详细内容 <dd>，例如：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>这是页面标题</title> </head> <body> <dl> <dt>美式咖啡</dt> <dd>美式、去冰、无糖</dd> <dt>超好喝奶茶</dt> <dd>半糖、热</dd> </dl> </body></html>
上一篇：[快速入门前端 2] HTML 架构和组成关係
下一篇：[快速入门前端 4] 什么是 HTML 标籤 (2) — 表格(Table) 和表单(Form)
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
