day02-HTML5列表/表格/媒体元素/结构元素

0目录

  1. 补充知识点
  2. HTML5列表
  3. HTML5表格
  4. HTML5媒体元素
  5. HTML5结构元素

1.行内元素和块元素

行内元素:不独占一行,例如:<a>标签,strong标签,em标签

块级元素:独占一行,例如:<p>标签,h1-h6标签

2.HTML列表

列表定义

  1. 列表定义:列表是一种特别的对象集合
  2. 集合定义:集中在一起,再合二为一(聚集)
  3. 聚集定义:多个列(信息资源)排在一起
  4. 信息资源定义:一堆数据,可能是字符,可能是图片
  5. HTML5如何实现列表:三种方式:

无序列表、有序列表、(自)定义列表

无序列表:unorder

定义:没有顺序

HTML5(H5)代码结构:

    <body>
        <ul>
            <li>日本</li>
            <li>美国</li>
            <li>中国</li>
            
            <li>你</li>
            <li>我</li>
            <li>他</li>
        </ul>
    </body>

无序列表特性:

1.没有顺序,每个<li>标签独占一行(<li>块集元素)

2.默认的<li>标签前面有个实心小圆点

3.应用场景:常用在导航功能中

有序列表:order

定义:有顺序

代码结构:

    <body>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
        </ol>
    </body>

有序列表特性:

1.有顺序,每个<li>标签独占一行

2.默认的<li>标签前面有顺序标记

3.应用场景:一般用于试卷、问卷等

定义列表:

定义:定义某种关系(包含和被包含)

代码结构:

    <body>
        <dl>
            <dt>水果</dt><dd>苹果</dd><dd>香蕉</dd><dt>水果2</dt><dd>苹果2</dd><dd>香蕉2</dd>
        </dl>
    </body>

定义列表特性:

1.没有顺序,每个<dt>标签,<dd>独占一行(块元素)

2.默认没有标记

3.一般用于:存在包含和被包含的关系

三种类型的列表区别:

 

3.HTML5表格

表格:

1.定义:有行有列,多个单元格组成

2.表格缘由:可以清晰的将多个信息资源组合在一起,如果没有表格则会导致网站中的信息资源杂乱

表格语法结构:

table:表格标签名称(元素)

border:边界    1px:1像素

tr:  表格中的行标签

td:表格中的单元格标签(列标签)

一行一列:

加上表格框:

两行三列:

多行多列:

表格跨列:

2行横跨2列:

3行横跨2列:

综上代码得出结论:跨列多少和几行没有关系

表格跨行:

横跨两行:

 

实战:

 

表格跨行和跨列:

4.HTML5媒体元素

HTML5媒体元素应用场景:

一般应用与网站上的音频文件或视频文件

HTML5媒体元素标签的种类:

1.video视频元素(标签)    2.audio音频元素(标签)

video:

在demo002项目下新建video目录,视频复制到此目录中,编写代码,运行后播放

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
cd C:\Program Files\FlightGear fgfs --fg-root=C:\Program Files\FlightGear\data --aircraft=ufo --in-air --fdm=null --telnet=5501 --telnet=5502 --telnet=5503 --disable-ai-traffic --disable-real-weather-fetch --disable-random-objects --disable-terrasync --disable-clouds --disable-sound --disable-panel --disable-hud --disable-specular-highlight --timeofday=noon --prop:/sim/rendering/multi-sample-buffers=1 --prop:/sim/rendering/multi-samples=2 --prop:/sim/rendering/draw-mask-clouds=false --prop:/sim/rendering/draw-mask-terrain=true --prop:/sim/rendering/draw-mask-objects=true --prop:/sim/rendering/draw-mask-lights=true --prop:/sim/rendering/draw-mask-internal=true --prop:/sim/rendering/draw-mask-cockpit=true --prop:/sim/rendering/draw-mask-effects=true --prop:/sim/rendering/draw-mask-overlay=true --prop:/sim/rendering/draw-mask-world=true --prop:/sim/rendering/draw-mask-panel=true --prop:/sim/rendering/draw-mask-vr=true --prop:/sim/rendering/draw-mask-2d=true --prop:/sim/rendering/draw-mask-3d=true --prop:/sim/rendering/draw-mask-sky=true --prop:/sim/rendering/draw-mask-shadows=true --prop:/sim/rendering/draw-mask-cabin=true --prop:/sim/rendering/draw-mask-weather=true --prop:/sim/rendering/draw-mask-stereo=true --prop:/sim/rendering/draw-mask-internal-cockpit=true --prop:/sim/rendering/draw-mask-internal-windows=true --prop:/sim/rendering/draw-mask-internal-instruments=true --prop:/sim/rendering/draw-mask-internal-overlay=true --prop:/sim/rendering/draw-mask-internal-effects=true --prop:/sim/rendering/draw-mask-internal-lights=true --prop:/sim/rendering/draw-mask-internal-world=true --prop:/sim/rendering/draw-mask-internal-panel=true --prop:/sim/rendering/draw-mask-internal-3d=true --prop:/sim/rendering/draw-mask-internal-sky=true --prop:/sim/rendering/draw-mask-internal-cabin=true --prop:/sim/rendering/draw-mask-internal-weather=true --prop:/sim/rendering/draw-mask-internal-stereo=true --prop:/sim/rendering/draw-mask-internal-shadow=true --prop:/sim/rendering/draw-mask-internal-stall=true --prop:/sim/rendering/draw-mask-internal-aoa=true --prop:/sim/rendering/draw-mask-internal-thermal=false --prop:/sim/rendering/draw-mask-internal-ice=false --prop:/sim/rendering/draw-mask-internal-glass=true --prop:/sim/rendering/draw-mask-internal-dead=true --prop:/sim/rendering/draw-mask-internal-reflection=true程序显示错误unknown command-line option: enable-hud-2d怎么解决
05-10

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值