从零开始学习HTML
HTML(超文本标记语言)是用于创建网页的标准标记语言。它描述了网页的结构,由一系列元素组成,这些元素告诉浏览器如何显示内容。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>你好,世界!</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>
HTML文档由以下基本部分组成:
<!DOCTYPE html>
声明文档类型,告诉浏览器这是一个HTML5文档。
<html></html>
HTML文档的根元素,包含所有其他元素。
<head></head>
包含文档的元信息,如标题、字符集等。
HTML元素由开始标签、内容和结束标签组成:
<tagname>内容</tagname>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落。</p>
第一行<br>第二行
属性提供了关于HTML元素的额外信息:
<tagname attribute="value">内容</tagname>
<p class="highlight" id="intro"
style="color: blue;"
title="这是一个提示">
带属性的段落
</p>
HTML提供了多种文本格式化标签:
<b>粗体文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
<strong>重要文本</strong>
<em>强调文本</em>
<small>小号文本</small>
<big>大号文本</big>
<mark>标记文本</mark>
<del>删除文本</del>
<ins>插入文本</ins>
HTML中的链接和图片是网页的基本元素:
<a href="https://www.example.com">
访问网站
</a>
<img src="image.jpg"
alt="图片描述"
width="300"
height="200">
HTML支持多种类型的列表:
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<dl>
<dt>术语</dt>
<dd>描述</dd>
</dl>
HTML表格用于展示结构化数据:
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
HTML表单用于收集用户输入:
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
HTML5引入了语义化标签,使网页结构更清晰:
<header>页头</header>
<nav>导航</nav>
<main>
<article>文章</article>
<section>区块</section>
</main>
<footer>页脚</footer>
<article>
<header>
<h1>文章标题</h1>
</header>
<section>
<p>文章内容</p>
</section>
<footer>
<p>作者信息</p>
</footer>
</article>
HTML5支持多种多媒体元素:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
<canvas id="myCanvas"
width="200" height="100">
</canvas>