HTML零基础教程（超详细）

news2024/11/16 9:48:11

一、什么是HTML

HTML，全称超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。它通过一系列标签来定义网页的结构、内容和格式。HTML文档是由HTML元素构成的文本文件，这些元素包括标题、段落、图片、链接、列表以及其他内容。浏览器读取HTML文档，并将其渲染成可视化网页。

HTML的基本结构通常包含以下几个部分：
1. `<!DOCTYPE html>`：声明文档类型，告诉浏览器这是HTML5文档。
2. `<html>`：根元素，所有其他的HTML元素都包含在它之内。
3. `<head>`：包含了如文档的标题、链接到样式表、脚本和元数据等信息。
4. `<body>`：包含了可见的页面内容，如文本、图片、链接、视频等。

HTML标签通常成对出现，一个开始标签（如`<p>`）和一个结束标签（如`</p >`），它们之间的内容会被浏览器解析为特定的元素。例如，段落标签`<p>`用于定义文本的段落。

HTML的最新版本是HTML5，它引入了更多的语义化标签（如`<article>`, `<section>`, `<nav>`等），增强了表单元素，并支持多媒体（如视频和音频）以及图形（如`<canvas>`）。

二、HTML入门

1. 标签又称元素，是HTML的基本组成单位

标签分为：双标签与单标签（绝大多数都是双标签）。

标签名不区分大小写，但推荐小写，因为小写更规范。

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 -->
    <title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body>
    <h1>欢迎来到我的网页</h1> <!-- 主标题 -->
    <p>这是我的第一个 HTML 页面！</p> <!-- 段落 -->
</body>
</html>

效果展示

<h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>

2.段落和文本格式化

使用 <p> 标签创建段落，使用其他标签格式化文本。

<p>这是一个段落。</p>
<p><strong>这是加粗文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p><u>这是下划线文本。</u></p>

效果展示

3. 列表

可以使用无序列表和有序列表。

<ul> <!-- 无序列表 -->
    <li>项目 1</li>
    <li>项目 2</li>
</ul>

<ol> <!-- 有序列表 -->
    <li>第一项</li>
    <li>第二项</li>
</ol>

效果展示

4. 超链接和图像

使用 <a> 标签创建链接，比如我们访问百度

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 -->
    <title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">访问示例网站</a> <!-- target="_blank" 在新窗口打开 -->

</body>
</html>

点击访问示例网站进入百度

5.图像

使用 <img> 标签插入图像

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 -->
    <title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body>
    <img src="/Path_test/beaa0418c666182dae2f40357e99ac0f.jpg" alt="" width="300" height="200"> <!-- src 为图像路径，alt 为替代文字 -->
// 使用width和height设置图片的大小
</body>
</html>

6. 表单

表单用于收集用户输入

<form>：定义表单。
<label>：为输入框提供标签。
<input>：用于用户输入的字段。
required 属性表示该字段为必填。

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 -->
    <title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body>
    <form action="/submit" method="POST"> <!-- action 指定表单提交的 URL -->
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required> <!-- 文本输入 -->
        
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required> <!-- 电子邮件输入 -->
        
        <input type="submit" value="提交"> <!-- 提交按钮 -->
    </form>    
</body>
</html>

7.语义元素

这些元素提供了更清晰的文档结构，有助于 SEO 和可访问性。

<header>头部内容</header>
<nav>导航链接</nav>
<article>文章内容</article>
<aside>侧边栏内容</aside>
<footer>页脚内容</footer>

希望这个模块对你学习 HTML 有所帮助！如果你有任何问题，欢迎随时提问。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2120206.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！