极客笔记HTML5 – 语法
HTML5作为Web前端开发的重要标准，在设计网页的时候需要开发者遵循一定的规范和语法。本文将会介绍HTML5的常见语法和示例代码，帮助初学者更好地掌握这门技术。
HTML5基本结构
HTML5页面基本结构如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
其中，<!DOCTYPE html>是HTML5的文档类型声明，告诉浏览器这是一个HTML5页面。<html>开始和结束标签之间是页面的内容，<head>标签用于定义页面的头部信息，例如页面的标题、关键词、描述等。<body>标签用于定义页面的主体部分。
HTML5标签
HTML5提供了更丰富的标签，包括多媒体标签、表单标签等。以下是一些常用的HTML5标签及其示例代码。
多媒体标签
HTML5提供了多媒体标签，如 <video> 和 <audio> 标签，用于显示和播放视频和音频。
示例代码：
<!--视频标签-->
<video src="movie.mp4" controls></video>
<!--音频标签-->
<audio src="music.mp3" controls></audio>
src 属性是指向视频或音频文件的URL。controls 属性用于显示控制条。
表单标签
HTML5中的表单标签包括 <input>、<select>、<checkbox> 等。下面是一个简单的表单示例：
<form>
<label for="username">用户名</label>
<input type="text" name="username" id="username">
<label for="password">密码</label>
<input type="password" name="password" id="password">
<input type="submit" value="登录">
</form>
<form> 标签用于定义表单，<label> 标签用于定义字段名，<input> 标签用于定义表单输入项，<submit> 标签用于定义提交按钮。
语义化标签
HTML5中新增了一系列的语义化标签，如 <header>、<nav>、<section> 和 <footer> 等。这些标签用于更好地描述页面内容，提高了页面的可读性和可访问性。
示例代码：
<header>
<h1>这是页面标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">标签</a></li>
</ul>
</nav>
</header>
<section>
<h2>这是一篇文章</h2>
<p>文章内容...</p>
</section>
<footer>
版权信息...
</footer>
HTML5的特殊符号
在HTML中，有些符号是有特殊含义的，例如小于号 "<" 和大于号 ">"。为了在HTML中正确地显示这些符号，需要使用特殊的HTML实体。
以下是一些常用的HTML特殊符号和它们的实体：
| 符号 | 描述 | 实体 |
|---|---|---|
|
空格 | |
< |
小于号 | < |
> |
大于号 | > |
& |
&字符（和） | & |
© |
版权标识 | © |
HTML5标记的属性
HTML5标签的属性用于描述标签的特征和行为。以下是HTML5常用的标记属性和它们的说明：
class属性
class 属性用于指定标记的类名，可以用于CSS样式中对该类别样式进行修改。
示例代码：
<div class="wrapper">这是一个容器</div>
id属性
id 属性用于指定标记的唯一标识符，可以用于JS脚本中进行操作。
示例代码：
<div id="container">这是一个容器</div>
href属性
href 属性用于定义链接目标的URL。
示例代码：
<a href="http://www.baidu.com">百度</a>
src属性
src 属性用于定义图片、音频、视频等媒体文件的URL。
示例代码：
<img src="image.jpg" alt="图片">
<audio src="music.mp3" controls></audio>
alt属性
alt 属性用于定义图片的替代文本，用于当图片无法显示时显示的文本。
示例代码：
<img src="image.jpg" alt="图片">
width和height属性
width 属性和 height 属性用于定义图片和媒体文件的显示大小。注意，应该使用CSS样式代替这些属性。
示例代码：
<img src="image.jpg" alt="图片" width="100" height="100">
<video src="movie.mp4" width="640" height="480" controls></video>
HTML5的注释
在HTML5中，可以使用 <!-- 注释 --> 格式来添加注释。
示例代码：
<!-- 这是一个注释 -->
<div>这是一个元素</div>
注释可以用于注释代码的作用或更改日志等信息。
结论
HTML5的语法是前端开发人员必须掌握的基础，熟练掌握HTML5的语法可以设计出更好的网页，提升页面的效果和易用性。上面介绍了HTML5常见的基本结构、标记、属性和注释，初学者可以通过这些示例代码和说明更好地了解和学习HTML5。