Html简单介绍_<!doctype html><html lang="zh-cn"><head> <meta cha-优快云博客

本文链接：https://blog.youkuaiyun.com/FAQEW/article/details/146443478

HTML简单介绍

一、HTML文档基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎学习HTML！</h1>
    <p>这是一个段落。</p>
</body>
</html>

结构解析：

<!DOCTYPE html>：声明为HTML5文档 [14]
<html>：根元素，lang属性指定语言
<head>：包含元数据，如字符集和标题 [4]
<body>：页面可见内容容器

二、核心文本标签

标题标签

<h1>主标题</h1>
<h2>二级标题</h2>
<!-- 支持h1-h6 -->

段落与格式

<p>这是一个段落，<strong>强调文本</strong>和<em>斜体文本</em>。</p>
<span>行内文本容器</span>

预格式化文本

<pre>
  保留空格
  与换行
</pre>

三、多媒体与链接

图片标签

<img src="logo.png" alt="网站Logo" width="200">

超链接

<a href="https://example.com" target="_blank">新标签页打开</a>

HTML5音视频

<video controls>
    <source src="movie.mp4" type="video/mp4">
</video>
<audio src="music.mp3"></audio>

四、列表与表格

无序列表

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

有序列表

<ol type="A">
    <li>第一章</li>
    <li>第二章</li>
</ol>

表格结构

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

五、HTML5语义化标签

<header>网页头部</header>
<nav>导航菜单</nav>
<section>
    <article>独立文章内容</article>
    <aside>侧边栏内容</aside>
</section>
<footer>页脚信息</footer>

优势：

提升SEO优化
代码可读性更强

六、表单交互元素

<form action="/submit" method="post">
    <input type="text" placeholder="用户名" required>
    <input type="password" placeholder="密码">
    <input type="email" placeholder="邮箱">
    <textarea rows="4">多行文本</textarea>
    <select>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
    </select>
    <button type="submit">提交</button>
</form>