html5结构元素,html5有哪些特性

一.列表元素

1.ul元素

　　 ul是一个无序列表。列表项之间没有顺序级别，它们通常是并列的，没有特定的顺序。

　　语法是：

　　Ul列表项目1/li li列表项目2/li li列表项目3/li./ul示例：

　　！type dochtmlhtmlhtmlheadmeta charset= utf-8 title元素用法/title/headbody ulli spring/lilililixia/lilililiqiu/Lili dong/Li/ul/body/html效果：

　　ul li标签中的每个元素前面都有圆点。

2.ol元素

　　 ol是有序列表，即具有有序顺序的列表。

　　格式是：

　　Ol列表项目1/Li Li列表项目2/Li Li列表项目3/li./ol示例：

　　！type dochtmlhtmlhtmlheadmeta charset= utf-8 使用title 1元素/title/headbodyoli苹果/lili香蕉/lili桔子/lili柠檬/li/ol/body/html效果：

　　在ol li标签中，每个元素前面都有一个数字。

　　3.dl元素

　　Dl是自定义列表，自定义列表的列表项前没有符号。

　　格式是：

　　Dt名词1/dt dd名词1解释1/dd dd名词1解释2/dd.dt名词2/dt dd名词2解释1/dd dd名词2解释2/dd/dl示例：

　　！type dochtmlhtmlhtmlheadmeta charset= utf-8 使用titledl元素/title/head byldt computer/dt！-定义术语和名词- dd大规模作战的机器/dd！-解释和描述名词- dd可以上网/dddd很高效/dd/dl/body/html效果：

　　4.列表的嵌套应用

　　！type dochtmlhtmlheadmeta charset= utf-8 使用title ol elements/title/head body H2 drinks/H2 ulli coffee ol Li latte/li Li mocha/Li/ol/Li茶ulli碧螺春/Li龙井/li/ul/li/ul/body/html效果：

二.结构元素

　　(此元素一般使用较少)

1.header元素

　　该元素可以包含通常放置在页面标题中的所有内容，通常用于放置整个页面的标题或页面内的内容块。

　　格式：

　　H1网页主题/h1./header2.nav元素

　　用于定义导航链接。这个元素可以将导航链接总结在一个区域，使页面的语义更加清晰。

　　格式：

　　nav lia href= # Home/a/lilia href= # 公司简介/a/lilia href= # 产品展示/a/lilia href= # 联系我们/a/li /ul/navnav元素通常用于以下情况：

　　传统导航栏侧栏导航页面导航页面导航页面导航3 .文章元素

　　Article元素代表文档、页面或应用程序的独立部分，与上下文无关，用于定义期刊、新闻或用户评论。

　　示例：

　　！类型dochtmlhtmlheadmeta charset= utf-8 标题文章元素的使用/title/Header/Header article Header 2h 1/H2/Header selection Header 2h 2 Section 1/h2/header/Section Header H2 Section 2/H2/Header/Section/article Header H2第2章/H2/Header/文章/正文/html效果：

　　4.侧元素

　　side元素用于定义当前页面或文章的附属信息部分。它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航栏和其他不同于主要内容的类似部分。

　　aside元素有两个主要用途：

　　包含在作为主要内容的article元素中的附属信息在article元素外部被用作页面或站点的全局附属信息部分。最常用的形式是侧边栏，内容可以是友情链接、广告单元等。5 .截面元素

　　Section元素用于阻止网站或应用程序中页面上的内容。section元素通常由内容和标题组成。

　　不要用section元素作为设置样式的页面容器，那是div的属性。如果article元素、aside元素或nav元素更适合使用，那么就不要使用section元素。不要使用section元素来定义没有标题的内容块。6 .页脚元素

　　footer元素用于定义页面或区域的底部，它可以包含通常放置在页面底部的所有内容。

三.分组元素

　　 1 .图元素和图标题元素

　　图元素用于定义独立的流内容(图像、图表、照片、代码等。)，一般指单个单位。图元素的内容应该与竹内有关，但如果删除，不会影响文档流程。figcaption元素用于为图片元素组添加标题。一个figcaption元素最多只能用在一个figure元素中，应该放在figure元素的第一个或最后一个子元素上。

　　2 . h组元素

　　Group元素用于将多个标题(主标题和副标题或子标题)组合成一个标题组，通常与h1~h6元素结合使用。

　　使用hgroup时，请注意以下几点：

　　如果只有一个title元素，不建议使用hgroup元素。当一个或多个标题和元素为时，建议使用hgroup元素作为标题元素。当标题包含子标题、章节或文章元素时，建议将hgroup元素和title元素存储在header元素容器中。示例：

　　！键入dochtmlhtmlhtmlheadmeta charset= utf-8 使用titlehgroup元素/title/headbydheader group P1我的个人网站/h1h2我的个人作品/h2/hgroup快乐每一天/p/header/body/html效果：

四.页面交互元素

　　 1 .细节元素和摘要元素

　　细节元素用于描述文档或文档一部分的细节。summary元素通常与details元素一起使用，作为details元素的第一个子元素，用于定义细节的标题。标题是可见的，当用户点击标题时，细节中的其他内容会被显示或隐藏。

　　示例：

　　！type dochtmlhtmlhtmlheadmeta charset= utf-8 标题详细信息和摘要元素的使用/title/headbody details摘要显示列表/摘要li列表1/lili列表2/Li/ul/details/body/html呈现：

　　点击“显示列表”有如下效果：

　　2 .进度元素

　　Progress元素用于指示任务的完成进度。

　　progress元素有两个常用的属性值：

　　值：已完成的工作量。马克斯：总共有多少工作？(value和max属性的值必须大于0，并且value的值应小于或等于max属性的值)

　　示例：

　　！type dochtmlhtmlhtmlheadmeta charset= utf-8 title progress元素用法/title/head body h1我的工作进度/h1 p progress value= 50 max= 100 /progress/p/body/html效果：

　　3 .仪表元件

　　仪表元素用于表示指定范围内的数值。比如显示硬盘容量或者某个候选人的投票人数比例等。

　　米元素有几个常用的属性。

　　解释属性high定义度量的值在哪个点定义为高值low定义度量的值在哪个点定义为低值max定义最大值，默认值为1 min定义最小值，默认值为0 optimum定义什么样的度量是最佳值value定义度量的值。

　　！type dochtmlhtmlhtmlheadmeta charset= utf-8 使用titlemeter元素/title/head body h1学生成绩列表/H1小红：仪表值= 65 min= 0 max= 100 low= 60 high= 80 title= 65分钟 optimum=10065/meterbr/肖明：仪表值= 80 min= 0 max= 100 low= 60 high= 80 title

　　5.文本层次的语义元素1 .时间元素

　　time元素用于定义事件或日期，可以用24小时来表示时间。

　　时间元素有两个属性：

　　Datetime:用于定义相应的时间或日期。该值是特定时间或特定日期。如果未定义该属性，则日期/时间由元素的内容给出。pubdate:用于定义time元素中的日期/时间是文档的发布日期。2 .标记元素

　　mark元素的主要作用是突出文本中的一些字符，以吸引用户的注意。

　　示例：

　　！type dochtmlhtmlheadmeta charset= utf-8 title mark元素用法/title/headbodyh3 apple /h3p我种下了一颗mark种子/mark，最后它长出了一颗mark果实/mark/p/body/html效果：

　　3 .引用元素

　　引用元素可以为文档引用的引用描述创建一个引号。一旦在文档中使用了此标记，此标记的文档内容将在页面上以斜体显示，以区别段落中的其他字符。

　　示例：

　　！type dochtmlhtmlheadmeta charset= utf-8 title cite元素用法/title/headbodyp也许越漂亮越脆弱，就像《盛夏》里的泡泡/pcite3354明小西《泡沫之夏》 /cite/body/html效果：

六.全局属性

　　 1 .可拖动属性

　　draggable属性用于定义元素是否可以被拖动。该属性有两个值：true和false。仅当true时，表示元素被选中后可以拖动，否则不能拖动。

　　格式：

　　H3元素拖动属性/H3文章drag= true 这些词可以拖动/文章可拖动图片img src= img/2021-01-17 (2)。png drag= true 2。拼写检查属性

　　Spellcheck属性主要针对input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true(默认值)和false。如果值为真，将检测输入框中的值；否则，不会被检测到。

　　示例：

　　！type dochtmlhtmlheadmeta charset= utf-8 titletspellcheck元素用法/title/head body H3输入框语法检测/h3pspellcheck属性值为true br/textareaspellcheck= true html 5/textareaspellcheck的属性值为false br/textareaspellcheck= false html 5/textareas/p/body/html effect:

　　3 .内容可编辑属性

　　contenteditable属性指定元素的内容是否可以编辑，但仅当该元素可以获得鼠标焦点并且其内容不是只读时。

　　示例：

　　！type dochtmlhtmlheadmeta charset= utf-8 使用title content editable elements/title/head body H3 editable list//h3ul content editable= true Li true lilist 1/Lili list 2/Lili list 3/Li/ul/body/html效果：

　　这就是这篇关于HTML5页面元素和属性分析的文章。更多相关的HTML5页面元素和属性，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。