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 />标签是行内标签
- <img src="img/11.jpg" width="200" height="100" title="小骆驼" alt="骆驼" /><img />标签有src width height title alt五个属性
- <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标签中可以包含本身或任何其他标签