HTML5 第六章

B站《前端Web开发HTML5+CSS3+移动web视频教程,前端web入门首选黑马程序员》

第一天的课程

一、hr元素

1.定义

<hr> 标签用于在 HTML 页面中创建一条水平分隔线。

二、video元素

1.定义

<video> 标签定义视频,比如电影片段或其他视频流。

2.属性
3.支持格式说明

三、audio元素

1.定义

<audio> 标签定义声音,比如音乐或其他音频流。

2.属性
3.支持格式说明

#### 第一天课程案例

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <title>魏无羡简历</title>
        <meta charset=""utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1.0">

    </head>
    <body>
        <h1>魏婴</h1>
        <hr>
        <p>魏婴,字无羡。鬼道创始者,人称夷陵老祖。丰神俊朗,潇洒不羁。身形纤长,身着黑衣,腰间佩笛,笛尾悬穗。</p>
        <img alt="魏无羡图片" src="https://bkimg.cdn.bcebos.com/pic/4d086e061d950a7b02081fb5ae9b75d9f2d3572c6325?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080" height="400px">
        
        <h3>主要经历</h3>
        <p>温氏作乱期间修得鬼道归来,射日之征中杀敌数千。因保护无辜之人受百家敌视。在百家围剿中因百鬼反噬而死。十三年后被献舍而得以重生。后再与蓝忘机结伴而行,两人互通心意,终成眷属。</p>

        <h3>主要技能</h3>
        <p>佩剑随便,法器陈情。法宝召阴旗。正统仙剑,剑鞘古朴,剑身雪白笔直。
            胜在轻灵奇巧,弱在力量不足。御剑飞行,打怪兽,切西瓜。鬼笛陈情,威名远扬。
            笛身漆黑光亮,笛尾系着鲜红的穗子。
            笛声有如天人之音。笛声御尸
            纵鬼兵鬼将如千军万马。</p>

        <h3>奖项荣誉</h3>
        <p><strong>国风合伙人</strong>:中国科举博物馆拥有悠久的历史和丰富的文化底蕴。跨界推出虚拟偶像魏无羡来担任"国风合伙人",传统文化和二次元IP共同发力,深层挖掘文创市场,多样化开发IP价值。而虚拟偶像魏无羡推广传承传统文化的同时,也使这个人物形象有了新的意义和文化厚度。传统文化中善良仁爱的品德、持重内敛的气度和豁达的人生态度,都可以被这一虚拟形象一一展现。同样年少轻狂,同样内心温暖、向往美好,魏无羡令当代年轻人更有代入感。</p>
        <video type="video/mp4" src="https://www.bilibili.com/video/BV14S4219778?t=4.6" autoplay muted
        
        
        controls>360度绕婴式打法</video>
    </body>
</html>
效果图
相关推荐
wangruofeng1 小时前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng1 小时前
给前端开发者的 100 个设计参考网站
前端·设计
星栈4 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技4 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569155 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马7 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng8 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding9 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
鶴哥只手遮天9 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron
FungLeo11 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构