最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

9. html元素:div怎么用

HTML语言学习 林雍岷 176浏览

HTML <div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何影响,<div>标记使你可以将HTML元素的各个部分组合在一起,并使用CSS格式化它们。

div标签称为Division标签。div标签在HTML中用于对网页中的内容进行分割,例如(文本,图像,页眉,页脚,导航栏等)。div标签同时有开始<div>和关闭</div>标签。div是Web开发中最常用的标签,因为它可以帮助我们分离出网页中的数据,并且可以为网页中的特定数据或功能创建特定部分。

  • Div标签是块级别标签;
  • 这是一个通用的容器标签;
  • 它用于HTML的各种标签组。

div元素接受“流内容”,它是指可以出现在文档正文中的大多数元素。当没有其它合适的HTML元素要使用时,div才用作最后的手段。HTML5引入了许多代替div的新元素。 这些包括<article>,<aside>,<header>,和<footer>等。

div怎么用

<div>标签成对出现,内容必须写在开始(<div>)和结束(</div>)标签之间。<div>标记写为<div></div>,通用内容插入在开始标记和结束标记之间。

语法

<div>
一般内容在这里...
</div>

div可以解释为区块内容,用DIV标签包起来的东西大致如上内容,你可以用div将网页内容的各区块包起来, 再去做CSS排板,目前所有的主流浏览器都支持div标签。

div示例

标签基本用法

如上述语法代码所见,简单地将内容放在<div>标记中并不会真正起到任何作用,也不会改变内容的外观。它只是作为一个容器来保存所包含的内容。

See the Pen div-basic-tag-usage by Peter (@linyongmin) on CodePen.default

示例添加样式

使用<div>元素主要原因之一就是应用样式。你可以将样式应用于元素本身,或应用于元素中包含的任何元素。

css内联样式

可以使用内联样式设置div元素的样式,在内联样式中,可以通过“样式”属性添加样式。

See the Pen div-basic-tag-usage-inline-styles by Peter (@linyongmin) on CodePen.default

内嵌样式和外部样式

我们可以使用嵌入样式或外部样式表设置元素的样式。下面是一个使用嵌入样式并通过div标记的class属性应用它们的示例:

See the Pen div-basic-tag-usage-embedded-external-styles by Peter (@linyongmin) on CodePen.default

div嵌套

可以将<div>元素嵌套在内部,每个嵌套元素都可以应用不同的样式。

See the Pen div-basic-tag-nested-usage-styles by Peter (@linyongmin) on CodePen.default

div的属性

属性可以添加到HTML元素中,以提供有关该元素应如何出现或表现的更多信息。有三种属性可以添加到HTML标记中:特定元素的属性、全局属性和事件处理程序内容属性。<div>元素接受以下属性。

特定属性

以下表格显示特定于<div>标记或者元素的属性。

属性描述
None 

全局属性

以下属性是所有HTML5元素的标准属性。我们可以将这些属性与<div>标记以及所有其它HTML标记一起使用。

accesskey hidden itemtype
class id lang
contenteditable inert spellcheck
contextmenu itemid style
dir itemprop tabindex
draggable itemref title
dropzone itemscope translate

上述这些属性详细说明,请参见HTML5全局属性。

事件处理程序内容属性

事件处理程序内容属性使你能够从HTML中调用脚本,当某个“事件”发生时调用脚本,每个事件处理程序内容属性处理不同的事件。下面是标准的HTML5事件处理程序内容属性。你可以将这些元素与<div>元素以及任何其他HTML5元素一起使用。

onabort onended onmousewheel
oncancel onerror onpause
onblur onfocus onplay
oncanplay onformchange onplaying
oncanplaythrough onforminput onprogress
onchange oninput onratechange
onclick oninvalid onreadystatechange
oncontextmenu onkeydown onscroll
ondblclick onkeypress onseeked
ondrag onkeyup onseeking
ondragend onload onselect
ondragenter onloadeddata onshow
ondragexit onloadedmetadata onstalled
ondragleave onloadstart onsubmit
ondragover onmousedown onsuspend
ondragstart onmousemove ontimeupdate
ondrop onmouseout onvolumechange
ondurationchange onmouseover onwaiting
onemptied onmouseup

有关这些属性的完整说明,请参见HTML 5事件处理程序内容属性。

div元素在HTML4和HTML5之间的差异

在HTML 4.01文档中,<div>标签通常用于指定HTML文档的各个导航部分(例如,页眉,页脚,内容区域,侧边栏等)。

HTML 5规范引入了许多可以使用的新元素,而不是<div>元素。这些新元素的示例包括<article>、<aside>、<header>和<footer>,以及其它元素。

因此应将<div>元素用作扩展机制,仅当没有其它合适的HTML元素要使用时才使用。要查看有关这两个版本的更多详细信息,请参见HTML5 <div>标签和HTML4 <div>标签。

div的属性模板

下面是<div>标记的属性模板,包含该标记的所有可用属性(基于HTML5)。它们被分组为属性类型,每个类型由一个空格分隔。在许多情况下,你可能只需要一个或两个(如果有的话)属性,只需删除不需要的属性。

请注意,<div>元素实际上没有任何本地属性(即特定于该元素的属性),但是以下全局属性和事件处理程序可用于该元素(和所有其它HTML元素)。

<div 
 accesskey=""
 class=""
 contenteditable=""
 contextmenu=""
 dir=""
 draggable=""
 dropzone=""
 hidden=""
 id=""
 itemid=""
 itemprop=""
 itemref=""
 itemscope=""
 itemtype=""
 lang=""
 spellcheck=""
 style=""
 tabindex=""
 title=""
 translate=""

 onabort=""
 onautocomplete=""
 onautocompleteerror=""
 onblur=""
 oncancel=""
 oncanplay=""
 oncanplaythrough=""
 onchange=""
 onclick=""
 onclose=""
 oncontextmenu=""
 oncuechange=""
 ondblclick=""
 ondrag=""
 ondragend=""
 ondragenter=""
 ondragexit=""
 ondragleave=""
 ondragover=""
 ondragstart=""
 ondrop=""
 ondurationchange=""
 onemptied=""
 onended=""
 onerror=""
 onfocus=""
 oninput=""
 oninvalid=""
 onkeydown=""
 onkeypress=""
 onkeyup=""
 onload=""
 onloadeddata=""
 onloadedmetadata=""
 onloadstart=""
 onmousedown=""
 onmouseenter=""
 onmouseleave=""
 onmousemove=""
 onmouseout=""
 onmouseover=""
 onmouseup=""
 onmousewheel=""
 onpause=""
 onplay=""
 onplaying=""
 onprogress=""
 onratechange=""
 onreset=""
 onresize=""
 onscroll=""
 onseeked=""
 onseeking=""
 onselect=""
 onshow=""
 onsort=""
 onstalled=""
 onsubmit=""
 onsuspend=""
 ontimeupdate=""
 ontoggle=""
 onvolumechange=""
 onwaiting=""
>
</div>

转载请注明:林雍岷 » 9. html元素:div怎么用