一、HTML基本框架
二、块元素、行内元素与行内块元素
html有三种标签元素类型,分别是块元素、行内元素和行内块元素。
1.块元素
块元素的高度默认由内容撑开,可以设置宽和高,多个块标签默认从上至下排列,最典型的块标签div,多用于页面布局。
2.行内元素
不会自动换行,多个行内元素可在同一行,不能设置宽(width)和高(height)属性,宽和高默认由内容撑开,多个行内标签默认从左至右排列,一行排满再换行。
3.行内块元素
具有行内元素与块元素的特征,不会独占一行,可自定义宽高,默认排列方式从左至右。
常见行内元素:
< span > 、< a >、< strong > 、< b > 、< em > 、< l > 、< del > 、< u >
常见块元素:
< div > 、< h1>…< h6 >、< p > 、< table > 、< form > 、< ul > 、< ol > 、< dl > 、< tr > 、< body>
常见行内块元素:
< img/ > 、< input/ >、< td >
三种元素可以通过display属性转换:
(1)display:block,转换为块元素;
(2)display:inline,转换为行内元素;
(3)display:inline-block,转换为行内块元素。
另外,display的属性值还可以设置为none,让生成的元素根本没有框,这样,这个框及其所有内容就不再显示,不占用文档的空间。
标签的嵌套规范
(1)行内标签只能嵌套行内标签
(2)块标签可嵌套块标签、行内标签、行内块标签
(3)行内块标签可嵌套行内标签和行内块标签
注意:(1)由一些块标签不能嵌套块标签,如< hn > ,< caption >, < p >, < hr >, < dt >
在浏览器中,如果< p >标签内嵌套了< div >标签,会自动给< p >标签加上结束标签,< div >会产生一个新的行,如下代码:
<html><head></head><body><p>第一<div>我不叫喂</div></p></body></html>效果如下:
其实是代码变为:
<html><head></head><body><p>第一</p><div>我不叫喂</div></body></html>(2)特殊的行内元素a标签,它里面什么都能放,可以块元素行内元素和行内块元素,除了a标签自己不能放进去。
三、一些常用标签
标题标签h1~h6;
段落标签p;
hgroup标签;
斜体与强调标签em strong;
引用标签q blockquote;
换行标签br;
分割线标签hr;
del标签;
center标签;
div标签;
span标签。
(1)标题标签h1~h6.
标题标签的默认样式是自动加粗的;字体大小一级标题最大,六级最小;标题与标题之间有较大的间距 独占一行。
标题标签代表着一个标题,一级标题的语义最重,六级标题的语义最轻。
标题标签是块元素。
(6)
换行
注意,HTML代码是把换行当作空格。
无
:
显示结果
有
:
显示结果:
(2)
无
<\p>:
有
(3)hgroup标签主要作用是用来为标题分组,可以将一组相关的标题放到hgroup中。
<html><head></head><body><hgroup><h1>登高</h1><h2>杜甫</h2></hgroup></body></html>效果如下: