HTML5 结构性标签 行内语义性标签

结构性标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旭宝爱吃鱼</title>
</head>
<body>
<!--文章-->
<article>
    <!--头部-->
    <header>
        <h1>旭宝爱吃鱼</h1>
        <h4>旭宝爱吃鱼</h4>
    </header>
    <!--章节-->
    <section>
        <h3>cxcxcx</h3>
        <p>cxcxcxcxcxcx</p>
        <p>cxcxcxcxcxcx</p>
    </section>
    <section>
        <h3>cxcxcx</h3>
        <p>cxcxcxcx</p>
    </section>
    <!--尾部-->
    <footer>
        <h5>cxcx</h5>
    </footer>
</article>
</body>
</html>

图片:

行内语义性标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <progress value="20" max="100"></progress>
   <!--本地音频视频见谅-->
   <audio src="source/music.m4a" controls="controls"></audio>
   <video src="source/BigBuck.m4v" controls="controls"></video>
</body>
</html>

图片:

时间: 2024-08-04 15:37:41

HTML5 结构性标签 行内语义性标签的相关文章

块级标签(行元素)和内联标签(行内元素)

块级标签 如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签. 块级标签的特点: 占据整行,自带换行效果.除了div以外,一般块级标签都会有内外边距,宽度和高度. 常见的块级标签: <h1-h6></h1-h6>,<p></p>,<div></div> 块元素标签示例: <!DOCTYPE html> <html lang="en"> <head> <meta

li标签行内元素高度及居中

<head> <title><title> <style type="text/css"> * { padding: 0px; margin: 0px; } li { list-style-type: none; width: 150px; float: left; line-height: 80px;/*行内元素不能设置高度,但可以设置行高*/ text-align: center;/*让li内的内容水平居中,行内元素默认垂直居中*/

css基础 display:inline 块级标签-&gt;行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证内容有点长,结论: 行内元素自身并没有行高这个属性,虽然设置可以设置行高,但是最终作用的地方并不是自身,而是其自身所在的行框盒子上!如果你不知道什么是行框盒子,建议你好好读读张大佬的<css世界>,这里我简单的画一画 如上如所示,我的结论是: 内联盒子没有行高这一属性,给它设置line-heigh

关于li标签行内显示的问题

在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&quo

好程序员web前端分享常见html5语义化标签

我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总结了一些常用的语义化标签,有空慢慢更新,欢迎大家补充 语义化HTML:用最恰当的HTML元素标记的内容. 优点:1 提升可访问性:  2 S-EO:   3 结构清晰,利于维护: (HTML5旧的行内元素都被归类为短语内容) 通用容器:div——块级通用容器:span——短语内容无语义容器. 如果语义不合适,也不要霸王硬上弓,=.. =老实的用div吧. < title></title>:简短.描

HTML5新增标签(新增27个标签,废弃16个标签)

1>结构性标签:负责web上下文结构的定义 article:文章主题内容 header:标记头部区域内容 footer:标记脚部区域内容 section:区域章节表述 nav:菜单导航,链接导航 2>级块性标签:完成web页面区域的划分,确保内容的有效分隔 aside:注记,贴士,侧栏,摘要,插入的引用作为补充主题的内容 figure:对多个元素组合并展示的元素,常与figcaption联合使用 code:表示一段代码块 dialog:人与人之间的对话,包含dt(说话者)和dd(说话者的内容)

HTML 5的革新——语义化标签(一) (转)

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局 嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标

HTML 5的革新——语义化标签

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局 嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标