HTML5是最新的HTML标准,它提供了许多新的元素和属性,使得网页设计更加灵活和强大,以下是一些常用的HTML5语法:
1、文档结构:HTML5的文档结构包括<!DOCTYPE html>
, <html>
, <head>
和<body>
等元素。<!DOCTYPE html>
声明了文档类型,<html>
元素包含了整个HTML文档的内容,<head>
元素包含了文档的元数据,如标题、字符集等,<body>
元素包含了文档的主体内容。
2、元数据:在<head>
元素中,可以使用<title>
元素定义文档的标题,使用<meta>
元素定义文档的元数据,如字符集、视口、描述等。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页</title> </head> <body> <!-- 网页内容 --> </body> </html>
3、文本格式化:HTML5提供了一些新的标签来格式化文本,如<h1>
到<h6>
表示标题级别,<p>
表示段落,<b>
表示粗体,<i>
表示斜体,<strong>
表示强调,<em>
表示斜体强调等。
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个简单的段落。</p> <b>这是粗体文本。</b> <i>这是斜体文本。</i> <strong>这是强调文本。</strong> <em>这是斜体强调文本。</em> </body> </html>
4、链接:HTML5提供了新的链接元素<a>
,可以创建超链接。
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1><a href="https://www.example.com">欢迎来到我的网页</a></h1> </body> </html>
5、图像:HTML5提供了新的图像元素<img>
,可以插入图像。
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1><img src="image.jpg" alt="我的图片"></h1> </body> </html>
6、列表:HTML5提供了新的列表元素<ul>
, <ol>
, <li>
, <dl>
, <dt>
, <dd>
,可以创建无序列表、有序列表、描述列表等。
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul></h1> <h1><ol><li>苹果</li><li>香蕉</li><li>橙子</li></ol></h1> <h1><dl><dt>水果</dt><dd>苹果</dd><dd>香蕉</dd><dd>橙子</dd></dl></h1> </body> </html>
7、表格:HTML5提供了新的表格元素<table>
, <tr>
, `<th