首页 / HTML / HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）

HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML结构元素是什么？HTML中各种结构元素的总结（纯文本），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6476字，纯文字阅读大概需要10分钟。

内容图文

在一个网页文档中会有各种不同元素的展现。每个元素都有其特定的位置，为了让这些元素规范起来，就需要由HTML中的结构元素确定。

<base>

功能说明：<base> 标签为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

标准属性：href、target

href：设置或获取页面中所有链接在鼠标单击链接到的URL

target：设置或获取目标内容要显示于哪个窗口或框架

_blank：在一个新的未命名的窗口载入文档

_self：在相同的框架或窗口中载入目标文档

_parent：把文档载入父窗口或包含了超链接引用的框架集

_top：把文档载入包含该超链接的窗口，取代任何当前正在窗口中显示的框架

<body>……</body>

功能说明：定义HTML文档的主体，body包含HTML文档的所有内容。

标准属性：id(元素唯一标识)、class(类名)、title(显示在工具提示中的文本)、style(行内样式定义)、dir(设置文本方向)、lang(设置语言码)、background(网页背景图像)、bgcolor(背景颜色)、text(设置文字颜色)、link(设置链接文字的颜色)、alink(设置链接时文字的颜色)、vlink(设置链接后文字的颜色)、leftmargin(左外边距)、topmargin(上外边距)、bgproperties(让背景图片不跟随网页滚动，它只有一个参数fixed)

以后出现相同属性的时候解释过后就不再进行说明

<p>……</p>

功能说明：定义一个文档的段落

标准属性：align、id、class、title、style、dir、lang

使用要点：使用p来换行，并分隔段落。p元素是块元素，需要关闭标签

<span>……</span>

功能说明：用来组合文档中的内联元素

标准属性：align、id、class、title、style、dir、lang

<p>……</p>

功能说明：定义文档中的分区或节

标准属性：align、id、class、title、style、dir、lang

使用要点：p元素是用来为HTML文档内大块的内容提供结构和背景元素

<br>

功能说明：插入一个换行符

标准属性：id、class、title、style

<caption>……</caption>

功能说明：定义一个表格标题

标准属性：align（对齐方式，包括left（左对齐）、right（右对齐）、top（顶端对齐）、bottom（底部对齐））、id、class、title、dir、lang

使用要点：caption元素应该是table元素的子对象，caption标签必须紧随table标签之后。只能对一个表格定义一个标题，通常标题居中于表格之上。

<col>

功能说明：为表格定义列属性值，定义的对象可以包括表格中的一个或多个列

标准属性：id、class、title、style、dir、lang

可选属性：align（水平对齐方式，包括right（右对齐）、left（左对齐）、center（居中）、justify（两端对齐））

span（定义<col>应当横跨的列数，默认值为1）

valign（垂直对齐方式，包括top(顶端对齐)、middle（垂直居中）、bottom(低端对齐)、baseline（基线对齐））

width（定义列的宽度）

colgroup

功能说明：定义表格列的分组

标准属性：id、class、 title、style、dir、lang

可选属性：align、span（定义col应当横跨的列数，默认值为1）、valign、width

使用要点：只有在table标签内部才是合法的，可以对列进行组合来进行相应的格式化

fieldset

功能说明：将表单内的相关元素分组

标准属性：id、class、title、style、dir、lang

使用要点：在字段集包含的文本和其他元素外面绘制方框

<legend>……</legend>

功能说明：可为fieldset定义一个标题

标准属性：id、class、title、style、dir、lang

使用要点：legend元素必须是fieldset内的第一个元素，此元素是内嵌元素，需要关闭标签

<iframe>……</iframe>

功能说明：创建包含外部文档的内联框架

标准属性：id、class、title、style

基本属性：name（定义内容页名称）、src（定义内容页URL）、frameborder（定义内容页的边框，取值为0/1，默认为1，0不显示边框，1在每个页面之间都显示边框）、marginwidth（定义框架中HTML文件显示的上下边界的宽度，默认值由浏览器决定）、marginheight（定义框架中HTML文件显示的左右边界的宽度，默认值由浏览器决定）、scrolling（定义是否有滚动条，取值yes/no/auto，默认值auto）、align、height、width

使用要点：iframe元素的作用相当于在一个文档中嵌入另一个文档，或者像一个漂浮的frame，创建内嵌漂浮框架，在iframe内容源文档，background-color或body元素的bgcolor标签属性必须设置为transparent。此元素是块元素，需要关闭标签

<dl>

</dl>

功能说明：dd定义在列表中的显示样式

dl定义列表的显示样式

dt定义列表中的项目

标准属性：id、class、title、style、dir、lang

使用要点：dd通常在列表中缩进显示，dd元素是块元素，需要关闭标签

dl元素是块元素，需要关闭标签

dt 元素是块元素，需要关闭标签

h1……h6

功能说明：定义文章的标题

标准属性：align、id、class、title、style、dir、lang

使用要点：<h1>定义最大的标题，<h6>定义最小的标题，需要关闭标签

<html>……</html>

功能说明：声明文档本身是一个HTML文档

标准属性：dir、lang

基本属性：common(一般属性)、xmlns(代表xml命名空间)、dir

<ins>……</ins>

功能说明：定义文档中已被插入的文本

标准属性：id、class、title、style、dir、lang

使用要点：ins和del标签配合使用，用来描述文档中的更新和修正

<del>……</del>

功能说明：定义文档中已被删除的文本

标准属性：id、class、title、style、dir、lang

<li>……</li>

功能说明：定义一个列表项目

标准属性：id、class、title、style、dir、lang

使用要点：li标签可用在有序列表<ol>和无序列表<ul>中

<ol>……</ol>

功能说明：定义有序列表

标准属性：id、class、title、style、dir、lang

<ul>……</ul>

功能说明：定义无序列表

标准属性：id、class、title、style、dir、lang

<table>……</table>

功能说明：定义表格的相关格式

标准属性：align、id、class、title、style、dir、lang

使用要点：用来显示数据，table是一个块元素，需要关闭标签

<th>……</th>

功能说明：定义表格内的表头单元格

标准属性：id、class、title、style、dir、lang

基本属性：common、abbr（代表表头的简写）、axis（对单元格在概念上分类）、colspan（一行跨越多列）、headers（连接表格的数据与表头）、rowspan（一列跨多行）、scope（定义行或列的表头）、align、valign

使用要点：th元素内部的文本通常会呈现为粗体

<tr>……</tr>

功能说明：在表格中定义一行

标准属性：id、class、title、style、dir、lang

基本属性：common、align、valign

<td>……</td>

功能说明：定义表格中的一个单元格

标准属性：id、class、title、style、dir、lang

tbody

功能说明：定义一段表格主体的格式

标准属性：id、class、title、style、dir、lang

使用要点：可以将表格分为一个单独的部分，可将表格中的一行或几行合成一组，但是在表格中最好没有tbody标签，不能从一个tbody跨越到另一个tbody中

tfoot

功能说明：定义表格脚注的格式

标准属性：id、class、title、style、dir、lang

使用要点：tfoot元素内包含的有效标签有td、tr、th，任何给定的table对象都只能定义一个tfoot。此元素需要关闭标签

thead

功能说明：定义表头的格式

标准属性：id、class、title、style、dir、lang

使用要点：thead内部必须拥有tr标签，此元素不会改变显示。如果使用thead、tfoot和tbody元素，就必须使用全部的元素。它们出现的次序是thead、tfoot、tbody。必须在table元素内部使用这些标签

内容总结

以上是互联网集市为您收集整理的HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）全部内容，希望文章能够帮你解决HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/391430.html

来源：【匿名】

【上一篇】如何来简述html的基本结构（附代码）【下一篇】PHP 和 HTML

更多 ►

【HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）】教程文章相关的互联网学习教程文章

基础复习之HTML （doctype、标签语义化、meta标签、块级元素与行内元素）【代码】

这段时间找实习看的眼花缭乱的，然后也被拒得落花流水，啊哈哈～还是写博客好玩儿～嘿嘿，下面正题一、doctype标准模式 (Full Standards Mode)接近标准模式 (Almost Standards Mode)混杂模式 (Quirks Mode)以上三种模式是浏览器在解析CSS时的三种工作模式，混杂模式是依据旧式的、非标准的CSS规则来渲染网页；标准模式则是遵循W3C标准去解析CSS的，接近标准模式与标准模式实际上差异并不大；关于Firefox中DTD与浏览器工作模式的详细...

html新增结构元素解析【代码】

本文主要帮助理解HTML5新增的article、section、aside、nav、time标签的使用场景。section表示页面上的区域，主要的目的是给文章分段等，section里必须包含标题。<section> <h1>标题</h1> <article>内容</article> </section>article表示页面上独立的区域，和section相比，article更注重自身的独立性。<article> <section><h1>标题</h1><p>内容</p> </section> </article>aside表示页面的附加内容，可以是文章的含义，链接等<artic...

HTML元素的ID和Name属性的区别

今天對 <a href="#13"></a> 有點疑惑，加上#表示一個錨，後面跟上13，就會跳到本頁面的13的位置，而這個13就是 Name屬性值。怎麼不是ID值呢？？？所以查了下ID 和Name的區別，特記錄最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。显然这个ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的...

html5-新布局元素header，footer

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>header/footer</title> <style type="text/css"> body{height: 708px} header{background: red;width: 100%;height: 10%} footer{background: red;width: 100%;height: 10%} #div0{width: 100%;height: 80%} #div1{width: 20%;height: 100%;float: left;background: #f0f0f0} #div2{width: 80%;height: ...

html元素的三大分类

顶级、块级、内联,html元素的三大分类如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.1. Top-level element 【顶级元素】: { html, body, frameset }包括html, body, frameset, 表现如Block-level element, 属于高级块级元素. 2. Block-level element 【块级元素】: { p, h1~h6, div, ul }顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div...

html 关于块级元素和行内元素

常用的行内元素要记住：a、span、img、input、lable、select、strong、textarea常用的块级元素要记住：div、h1~h6、dl、ul、ol例如在一个title中，有标题、有访问量、有更多，其中标题是用h4来控制，更多等是<a>链接，如果想要它们在一排，就要求设置h4的display:inline; 内联元素(inline element) * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用...

HTML5学习笔记（四）：H5中表单新增元素及改良【代码】

方便布局表单内容可以放在表单标签之外，这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下，只要指定元素适用于哪个表单即可，如下：1<form id="test" action="test.php" method="get">2<input form="test" type="text" name="name"/>3</form>4<input form="test" type="submit" value="确定"/>可指定提交按钮的目标及方法在HTML5之前，一个表单只能填写一个action及一个method，在HTML5中每个提交按钮都可...

html5 表单的新增元素【代码】

<form action="">    专业：<input type="text" list="subjects"> <br> <!-...

获取html上元素的真正坐标

使用HTML元素的style.left,style.top,style.width,style.height以及width,height属性，都不能获得元素的真正位置与大小，这些属性取出来的都是原来的设置值，例如<table id="table1" width="500">，那么通过document.getElementByIdx_x("table1").width取出来的值永远都是500，而不管这个表格是否已经被撑大了；同时，通过document.getElementByIdx_x("table1").style.left获得的值是空的，因为没有设置这个值。要取得HTML元素的真...

HTML5<article>元素

HTML5<article>元素用来定义页面文档的独立内容。实例：<article class="pageArticle"> <h2>article</h2> <header> <h2>article header</h2> </header> <aside> <h2>article aside</h2> </aside> <p>这个页面是我开始用html5进行布局的。</p> <footer>article footer</footer> </article> 元素' ref='nofollo...

HTML5 创建canvas元素示例代码

HTML5 创建canvas元素复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> <title>HTML5</title> <script type="text/javascript" charset = "utf-8">  function pageLoaded() { alert(‘HTML5 页面加载完毕!‘); } </script> </head> <body ...

web基础，用html元素制作web页面【代码】【图】

用div,form制作登录页面，尽可能做得漂亮。练习使用下拉列表选择框，无序列表，有序列表，定义列表。观察常用网页的HTML元素，在实际的应用场景中，用已学的标签模仿制作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login in</title> </head> <body> <div id="container" style="width:400px " > ...

HTML页面加载完后，根据内容调整<textarea>元素的高度

假如我的HTML中有一个textarea元素，我想在它加载完成后根据内容调整其高度。怎么做呢？1. 我定义的textarea元素如下<textarea class="form-control" type="text" name="value" id="value"placeholder="输入参数值"></textarea>注意： id = ‘value‘这里的关键问题是html加载完后会调用哪个函数，有以下两种方法：2.1 方法一：通过调用$(document).ready(function () {} )<script type="text/javascript">function get_text_rows(...

html中的行内元素和块级元素小结

一.首先我们总结下行内元素和块级元素有哪些：行内元素：<a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加粗<bdo>可覆盖默认的文本方向<big>大号字体加粗<br>换行<cite>引用进行定义<code>定义计算机代码文本<dfn>定义一个定义项目<em>定义为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像<input>输入框<kbd>定义键盘文本<label>标签为<input> 元素定义标注（标记）<q>定义短的引用<samp>定义样本...

新增html元素的使用

今天学习HTML5中新增元素的使用(Ⅰ)新增主体结构元素Section元素：用于对网站或应用程序中的内容进行分块。<section><h1></h1><p></p></section>Article标签定义外部内容。<article></article>Time元素的使用<p><time></time></p><p><time datetime=></time></p> Ⅱ（）新增非主体元素的使用Header：是一种具有引导和导航作用的元素，通常用来放置整个页面或者页面内一个内容快标题。也包含表格，表单和相关logo图片。<p id=”p1”...

首页 / HTML / HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）

HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）

内容导读

内容图文

colgroup

fieldset

h1……h6

tbody

tfoot

thead

内容总结

内容备注

内容手机端

【HTML结构元素是什么？HTML中各种结构元素的总结（纯文本）】教程文章相关的互联网学习教程文章

基础复习之HTML （doctype、标签语义化、meta标签、块级元素与行内元素）【代码】

html新增结构元素解析【代码】

HTML元素的ID和Name属性的区别

html5-新布局元素header，footer

html元素的三大分类

html 关于块级元素和行内元素

HTML5学习笔记（四）：H5中表单新增元素及改良【代码】

html5 表单的新增元素【代码】

获取html上元素的真正坐标

HTML5<article>元素

HTML5 创建canvas元素示例代码

web基础，用html元素制作web页面【代码】【图】

HTML页面加载完后，根据内容调整<textarea>元素的高度

html中的行内元素和块级元素小结

新增html元素的使用

HTML - 相关标签

元素 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程