html5标记分为3类:1、块级元素,其特点为能够设置宽高、可以自动换行、margin和padding的上下左右均对其有效;2、行内元素,其特点为无法设置宽高、不会自动换行;3、行内块元素,其特点为能够设置宽高、不会自动换行。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
HTML5中的标记分为块级元素、行内元素、行内块元素。
行内元素:
-
无法设置宽高。
-
margin上下无效,只有左右有效果;padding都有效果,会撑大空间。
-
box-sizing:border-box;
无效,因为该属性针对盒模型。 -
不会自动换行
块级元素:
-
能够设置宽高
-
margin和padding的上下左右均对其有效
-
可以自动换行
-
多个块状元素标签写在一起,默认排列方式为从上至下
-
可以使用
margin:0 auto
居中对齐
行内块元素:
-
不会自动换行
-
能够设置宽高
-
默认排列方式为从左到右
-
可以使用
text-align:center
使内容相对于父盒子水平居中对齐,例如img标签,可以使用text-align:center
相对父盒子居中对齐 -
margin:0 auto
无效 -
水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器解析会将其解析成一个空格。
但标签的类型是可以转换的
-
display:inline
: 转换为行内元素 -
display:linline-block
转换为行内块元素 -
display:block
转换为块级元素
掌握元素类别。现将学过的标签分类如下:
1、块级元素
标题<h></h>
有序列表<ol><li></li></ol>
无序列表<ul><li></li></ul>
定义列表<dl></dl>
段落标签<p></p>
预格式文本<pre></pre>
大段引用<blockquote></blockquote>
小段引用<q></q>
划分区块<div></div>
定义<figure></figure>
音频<audio></audio>
视频<video></video>
表格<table></table>
表单<form></form>
添加一条直线 <hr>
装载独立文章<article>
定义文档章节<section>
定义非正文内容<aside>
页眉<header>
页脚<footer>
导航链接部分<nav>
为文档或 section 定义联系信息<address>
制作更小字号的文本<small>
下标文本<sub>
上标文本<sup>
2、行内元素
标签类型代码书写
超链接<a></a>
倾斜<em></em>;<i></i>
加粗</strong></strong>;<b></b>
缩写<abbr></abbr>
跨越多个字符<span></span>
获取用户输入<input>
创建下拉列表<select>
创建多行文本框<textarea>
定义控件标注<lable>
3、行内块元素
标签类型代码书写
图片<img />
内联框架<iframe></iframe>
推荐教程:《html视频教程》