HTML5-基础知识点
HTML5是HTML的最新标准,它在原有的基础上增加了很多新特性,比如画布(Canvas)、视频(Video)和音频(Audio)播放等。下面是一些HTML5的基础知识点和示例代码:
- 文档类型声明:HTML5的文档类型声明与HTML4不同,更简洁。
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
- 语言属性:可以设置在
<html>
标签中,指定页面内容的语言。
<html lang="en">
- 元数据元素:
<meta>
标签可以用来提供元数据。
<meta charset="UTF-8">
- 视频元素:HTML5引入了
<video>
标签用于嵌入视频。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
- 画布元素:HTML5引入了
<canvas>
标签用于绘图。
<canvas id="myCanvas" width="200" height="100">
您的浏览器不支持Canvas。
</canvas>
- 音频元素:HTML5引入了
<audio>
标签用于嵌入音频。
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
- 新的表单输入类型:HTML5提供了许多新的表单输入类型。
<form>
姓名:<input type="text" name="name"><br>
生日:<input type="date" name="bday">
<input type="submit">
</form>
- 新的元素:如
<header>
,<nav>
,<section>
,<article>
,<aside>
,<footer>
等,有利于SEO和代码结构化。
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li>主页</li>
<li>关于</li>
</ul>
</nav>
<section>
<h2>最新新闻</h2>
<article>
<h3>新闻标题</h3>
<p>新闻内容...</p>
</article>
</section>
<aside>
侧边栏内容...
</aside>
<footer>
<p>版权所有 © 2023</p>
</footer>
这些是HTML5的一些基础知识点和示例代码,HTML5还有很多其他的特性和用法,需要根据实际开发需求学习和使用。
评论已关闭