行内元素:仅仅包裹内容的元素
a标签:超链接标签,双标签
href:指定打开的页面;锚点;
target:用于指定在哪个窗口打开href标签属性指定的页面,常用属性值有_self 、_blank 等;
<a href="http://www.baidu.com" target="_blank">百度一下</a>
img标签:图片标签,单标签
src:设置图片路径;
alt:设置图片不存在时替代文本,该属性的显示效果与浏览器以及浏览器版本有关;
height和width:设置图片的高度和宽度,单位为像素或%;
title:设定鼠标移到元素上时显示的信息;
注意:
1.任何标签都有title属性,它不是img标签特有的;
2.img标签中src和alt标签属性不能省略;
<img src="img/favicon.ico" title="熊掌" alt="熊掌"/>
span标签:常用于组合文档中的行内元素,双标签
注意:
1.span标签没有固定的格式表现,只有对它应用CSS样式时才会产生视觉上的变化;
2.推荐使用 <span> 来组合行内元素,以便通过样式来格式化它们:
说明:如果span标签没有CSS样式,那么span标签中的文本与前面文本没有任何视觉上的差异;span标签的定义方便了通过CSS样式格式化标签内的内容。
<span>span</span>
块级元素:占满整个父类标签的元素
div标签:常用于文档中分区,双标签
p标签:段落标签,双标签
常用属性:
align:设定文本显示的位置,属性值如下:
值 | 描述 |
left | 把文本排列到左边。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
注意:不建议使用align标签属性,推荐使用text-align样式属性代替,该样式属性常用值如下:
值 | 描述 |
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 从父元素继承 text-align 属性的值。注:IE(包括 IE8)不支持该属性值。 |
<p style="text-align: center;">段落标签</p>
hn标签:标题标签,双标签,n的值为1~6,其中<h1></h1> 定义最大的标题;<h6></h6> 定义最小的标题
常用标签属性:
align:设定文本显示的位置,但不建议使用该align属性,推荐使用text-align样式代替,其使用方法和值参见p标签。
<h1 style="text-align: center;">标题标签1</h1>
<h6 style="text-align: center;">标题标签6</h6>
ol标签:有序列表标签,双标签
常用标签属性:
1.type:指定ol子标签li的编号类型,其属性值有:
值 | 描述 |
1 | 数字,默认值 |
A | 大写字母 |
a | 小写字母 |
I | 大写罗马数字 |
i | 小写罗马数字 |
2.start:指定ol子标签li序号起始点,默认为1,必须为整形数字。
3.reversed:HTML5新增标签属性,用于设定列表顺序为降序,其属性值为reversed
注意:type和start标签属性在HTML4.01有兼容性问题。
<ol type="A">
<li>小说</li>
<li>文艺
<ol type="a">
<li>文学</li>
<li>传记</li>
<li>艺术</li>
<li>摄影</li>
</ol>
</li>
<li>励志/成功
<ol type="a">
<li>职场</li>
<li>成功</li>
<li>人际</li>
<li>心灵修养</li>
</ol>
</li>
<li>童书
<ol type="a">
<li>0-2
<ol type="i">
<li>数字</li>
<li>图形</li>
<li>图画</li>
</ol>
</li>
<li>3-6</li>
<li>7-10</li>
<li>11-14</li>
</ol>
</li>
<li>生活</li>
ul标签:无序列表标签,双标签
常用标签属性:
type:指定ul子标签li的编号类型,其属性值有:
值 | 描述 |
disc | 实心圆,默认值 |
square | 实心方块 |
circle | 空心圆 |
<ul>
<li>小说</li>
<li>文艺
<ul>
<li>文学</li>
<li>传记</li>
<li>艺术</li>
<li>摄影</li>
</ul>
</li>
<li>励志/成功
<ul>
<li>职场</li>
<li>成功</li>
<li>人际</li>
<li>心灵修养</li>
</ul>
</li>
<li>童书
<ul>
<li>0-2
<ul>
<li>数字</li>
<li>图形</li>
<li>图画</li>
</ul>
</li>
<li>3-6</li>
<li>7-10</li>
<li>11-14</li>
</ul>
</li>
<li>生活</li>