二、HTML 速览——常用标签的使用及演示

1.文本

• 与markdown等标记语言一样，HTML源码中多个空格在浏览器显示时只显示一个空格，需显示多个空格可在源码中敲入多个 “   ” 即可。
• 从中可证实，HTML的本文段落格式等通常由各标签定义，这也是文本标记的含义。

段落文本标签

标签	英文全称	作用	例子(点击图片查看)
<h2>	header	标题，h1标签通常存网页logo
<p>	paragraph	标签包裹的内容自成一段，有换行作用
<span>	span	行内分隔，例如给部分文本设置颜色
<div>	division	区块分隔，常与 CSS 一起使用，用来布局网页。
<br>	break	单标签，直接将文本换行
<hr>	horizontal rule	设置水平线

文本格式化标签

标签	英文全称	作用	例子(点击图片查看)
<strong>	strong	加粗文本
<em>	emphasized	强调文本
<cite>	<cite>	引用作品的标题
<sup>	superscripted	上标
<sub>	subscripted	下表

2.列表

标签	英文全称	作用	例子(点击图片查看)
<ol>	ordered list	有序列表
<ul>	unordered list	无序列表
<li>	list item	列表项
标签 li 时容器级标签，可以存放任意内容。

自定义列表

标签	英文全称	作用	例子(点击图片查看)
<dl>	definition list	自定义一个列表结构
<dt>	definiton term	定义列表的主题
<dd>	definiton description	定义解释项
标签 dt dd 都是容器级，可以存放任意内容。

3.表格

标签	英文全称	作用	例子(点击图片查看)
<table>	table	定义表格结构
<tr>	table rows	定义表格的行
<th>	table head	定义表格的表头
<td>	table dock	定义表格的单元格
合并单元格：属性 rowspan、colspan。例：<td rowspan="跨度的列数">

表格分区

标签	作用
caption	定义表格的主题
thead	定义表格的头部
tbody	定义表格的主体

4.表单

input标签

标签	属性	例子(点击图片查看)
<input type="text">	单行文本框 value：设置默认文本 placeholder：设置占位文本
<input type="password">	密码文本框 value：设置默认文本 placeholder：设置占位文本
<input type="radio">	单选按钮 name：相同name属性的按钮互斥 checked=“checked”设置默认选中 label标签包裹input标签扩大按钮点击范围
<input type="checkbox">	复选按钮 name：相同name属性的为同一组 checked=“checked”设置默认选中 label标签包裹input标签扩大按钮点击范围
<input type="image">	图片点击按钮 src="图片路径" alt="图片按钮"(图片路径无效时显示)
<input type="file">	文件上传
<input type="button">	按钮
input 标签参考手册

textarea标签

标签	属性	例子(点击图片查看)
<textarea>	cols="30"：每行显示区域(单位为字节) rows="10"： placeholder="占位文本"

下拉菜单

标签	属性	例子(点击图片查看)
select>option	selected="selected"：默认选中

5.图片

标签	属性	例子(点击图片查看)
<img>	src：图片相对路径或网络图片url alt：alternative，图片无效时替换为文字 title：鼠标移到图片上显示提示

6.链接

标签	属性	例子(点击图片查看)
<a>	a 全称 anchor href：hypertext reference，链接地址 外部链接：href="https:www.baidu.com" 内部链接：href="其他页面.html" 锚点链接：href="#锚点" target：目标窗口的打开方式 _self：默认方式，即在当前窗口打开链接 _blank：在新的空白窗口中打开链接 _top：在顶层框架中打开链接 _parent：在当前框架的上一层里打开链接

HTML标签全称对照表

标签	英文全称	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block   quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition   description	定义描述
del	delete	删除
div	division	分隔
dl	definition   list	定义列表
dt	definition   term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal   rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list   item	列表项目
ol	ordered   list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered   list	不排序列表
var	variable	变量
部分图片截取自菜鸟教程