文本元素

标题

h1标题 (最重要)

h2标题

h3标题

h4标题

h5标题

h6标题 (最不重要)

                    
                        <h1>一级标题</h1>

                        <h2>二级标题</h2>

                        <h3>三级标题</h3>

段落和文本格式

这是一个段落。HTML中的段落使用<p>标签。

这是加粗文本，这是斜体文本，这是下划线文本，~~这是删除线文本~~。

这是_下标和^上标的例子。

这是小号文本，这是高亮文本。

这是短引用，

这是块引用，通常用于长引用内容。

这是代码片段，这是键盘输入，这是程序输出。

HTML是缩写示例。

2023年10月1日是时间元素。

                    
                        <p>这是一个段落。</p>

                        <strong>加粗文本</strong>

                        <em>斜体文本</em>

                        <code>代码片段</code>

分隔线和换行

这是一行文本。
这是使用了<br>标签后的换行。

上面是使用了<hr>标签的水平分隔线。

列表

无序列表

列表项1
列表项2
- 嵌套列表项1
- 嵌套列表项2
列表项3

                    
                        <ul>

                          <li>列表项1</li>

                          <li>列表项2</li>

                        </ul>

有序列表

第一项
第二项
1. 嵌套字母列表项A
2. 嵌套字母列表项B
第三项

                    
                        <ol>

                          <li>第一项</li>

                          <li>第二项</li>

                        </ol>

定义列表

HTML: 超文本标记语言
CSS: 层叠样式表

链接

基本链接

                    
                        <a href="https://www.example.com">示例链接</a>

                        <a href="#section-id">锚点链接</a>

                        <a href="mailto:email@example.com">邮件链接</a>

图像

基本图像

上面是一个占位图像，使用了src、alt、width和height属性。

带链接的图像

图像映射

                    
                        <img src="image.jpg" alt="描述文本" width="200" height="100">

                        <figure>

                          <img src="image.jpg" alt="描述">

                          <figcaption>图像标题</figcaption>

                        </figure>

figure和figcaption

表格

基本表格

学生成绩表
姓名	语文	数学	英语
张三	90	85	92
李四	88	90	87
平均分	89	87.5	89.5

                    
                        <table>

                          <tr>

                            <th>表头</th>

                            <td>单元格</td>

                          </tr>

                        </table>

复杂表格

姓名	成绩
姓名	语文	数学	英语
王五	92	88	95

表单

基本表单

个人信息

用户名:

密码:

邮箱:

年龄:

生日:

喜欢的颜色:

上传头像:

其他信息

性别: 男女

兴趣爱好: 运动音乐阅读

国家:

城市:

个人简介:

                    
                        <form action="/submit" method="post">

                          <label for="name">姓名:</label>

                          <input type="text" id="name" name="name">

                          <button type="submit">提交</button>

                        </form>

HTML5新增表单元素

音量:

搜索:

网址:

电话:

浏览器:

进度: 75%

存储空间: 6 out of 10

语义化元素

HTML5语义化标签

HTML5引入了许多语义化标签，使文档结构更清晰:

<header> - 页眉
<footer> - 页脚
<nav> - 导航栏
<main> - 主要内容
<article> - 独立内容
<section> - 文档章节
<aside> - 侧边栏内容
<figure> 和 <figcaption> - 图像和标题
<time> - 时间日期
<mark> - 高亮文本

                    
                        <header>...</header>

                        <nav>...</nav>

                        <main>

                          <article>...</article>

                        </main>

                        <footer>...</footer>

语义化布局示例

网站标题

文章标题

文章内容...

多媒体

音频

                    
                        <audio controls>

                          <source src="audio.mp3" type="audio/mpeg">

                          您的浏览器不支持音频元素。

                        </audio>

视频

                    
                        <video width="320" height="240" controls>

                          <source src="movie.mp4" type="video/mp4">

                          您的浏览器不支持视频元素。

                        </video>

嵌入内容

                    
                        <iframe src="https://example.com" width="300" height="200"></iframe>

                        <embed src="flash.swf" width="300" height="200">

                        <object data="pdf.pdf" width="300" height="200"></object>

其他HTML元素

div和span

div是一个块级容器元素，用于组织和样式化内容。

这是一个span元素的例子，它是一个内联容器。

details和summary

点击查看详情

这是一个可折叠的内容区域。点击summary元素可以展开或折叠内容。

模板元素

模板内容不会显示在页面上，但可以通过JavaScript使用。