HTML常用简单标签

标签分为单标签(空标签)与双标签(标准标签),双标签有一对:<起始标签></闭合标签>,单标签只有一个<标签名 />

• 单标签: <img /> <a /> <br /> <hr />
• 双标签:<p> <h> <strong> <b> <i> <em> <ul> <li> <ol> <dl>

从标签的占行也可以分为块级标签与行内标签,块级标签单独占一行,行内标签在一行中可以同时存在多个

• 块级标签特点：
  • 默认占据一整行
  • 块级标签设置宽高是有效的
  • 可以容纳其他的行内元素
• 行内标签特点：
  • 在一行上逐个展示
  • 行内元素设置宽高无效
  • 行内元素不能嵌套块级元素
• 行内块级标签特点：
  • 在一行上逐个展示
  • 设置宽高有效

---

常用的标签种类:

• <br /> 换行标签
  • <br>标签属于块级标签,一个<br>单独占一行
• <h1></h1> 标题标签(h1~h6)
  • 被标题标签包裹起来的内容会加粗加大,h1最大,h6最小,没有h7及其他h标签
  • 一般一个网页只存在一个<h1>标签
  • <h>标签属于块级元素,一个<h>标签单独占一行
• <p></p> 段落标签
  • 段落标签属于块级标签,被<p></p>标签包裹起来的内容另起一行,并且<p>标签后面的内容无论是块级还是行内标签,都另起一行
• <b> <strong> 文字加粗
  • <b> <strong>属于标准标签,是行内标签
• <i> <em> 文字倾斜
  • <i> <em>属于标准标签,是行内标签
• <hr /> 水平线标签
  • <hr />标签属于块级标签,一个<hr />就是一条分割线
• <a><a/> 超链接标签
  • <a href="http://www.baidu.com" target="_blank">百度一下，你就忘了</a>,<a>标签有个默认属性href,href的值可以是一个网址,也可以是一个锚点,点击<a>标签包裹的内容时会跳转到对应网址或锚点
  • target属性有两个值"_self"与"_blank",target属性可写可不写,不写时默认为"_self"
    • _self: 在本网页跳转到目标网页
    • _blank: 在新生成的标签页中跳转到目标网页,原网页不变
  • <a>标签也可以作为一个锚点使用,具体使用方法为:
    • <a name="mao">锚点</a> 先设置一个锚点,a标签内属性只有一个name.
    • 然后在这个网页的其他地方写入一个正常的<a>标签,标签内的href属性的值写"#mao"
    • 当鼠标点击后面这个a标签包裹的内容时,会自动跳转到上面设置的锚点的地方.
• <img /> 图片标签
  • <img src="img/11.jpg" width="200" height="100" title="小骆驼" alt="骆驼" /><img />标签有src width height title alt五个属性
    • src: 必选属性,指定该图片的路径
    • alt: 当该图片显示失败时对该图片的描述
    • width: 可选属性,设置图片的宽度,单位为px,当只设置了width属性时,图片的高度会根据原图片的比例自动缩放,从而使图片不变形
    • height: 可选属性,设置图片的高度,单位为px,当只设置了height属性时,图片的宽度会根据原图片的比例自动缩放,从而使图片不变形
    • title: 可选属性,鼠标移动到图片上显示的文字提示
  • <img />标签为空标签
  • <img />标签是行内标签
• <ul><li> 无序列表标签
  • <ul><li>无序列表一般一起嵌套出现
  • <ul type="disc"> ul标签有个type属性，用来设置该无序列表内的每一项列表前面的符号类型。
    • disc: 符号显示为实体圆心（默认值）
    • circle: 符号显示为空心圆
    • square: 符号显示为实体方心
    • none: 什么符号也没有

• <ol><li>有序列表
  • <ol><li>有序列表一般一起嵌套出现
  • <ol type="1"> ol标签有个type属性，用来设置该有序列表内的每一项列表前面的序号符号
    • 1: 使用数字作为列表序号（默认值）
    • A/a: 使用大写/小写字母作为列表序号
    • I/i: 使用大写/小写罗马数字作为列表序号
  • <ol type="1" start="4"> ol标签中还有一个start属性，strat="4"表示列表里的第一项从4开始

• <dl><dt><dd>定义列表
  • 
    

• <span></span> span标签，行内标签
  • 本身没有任何效果，通常用来方便提取文本文字的某些内容，方便操作某些文字
  • 你在<span style="color: red;">春天</span>回来，我从<span style="color: red;">春天</span>离开。
    • 被span标签包裹起来的文字可以单独设置颜色等信息
• <div></div> div标签，块级标签
  • 本身没有任何效果，通常使用div标签来划分页面，方便后期处理
  • div标签中可以包含本身或任何其他标签