繁体

HTML入门教学 新手学习HTML快速入门教程

admin

目录

  1. 什么是HTML？
  2. HTML的基本结构
  3. 常用的HTML标签
    • 标题标签
    • 段落标签
    • 强调文本标签
    • 列表标签
    • 链接标签
    • 图像标签
  4. 表格和表单
  5. HTML中的CSS基础
  6. 实践练习

1. 什么是HTML？

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它使用标签（Tags）来定义网页的结构和内容。HTML文档被浏览器解析并显示为网页。

2. HTML的基本结构

一个基本的HTML文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到HTML的世界！</h1>
    <p>这是我的第一个HTML页面。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
  • <html>：根元素，包含整个HTML文档。
  • <head>：头部元素，包含文档的元数据，如字符集、标题等。
  • <body>：主体元素，包含文档的内容，如文本、图像、链接等。

3. 常用的HTML标签

标题标签

标题标签用于定义文档的标题，从<h1>到<h6>，数字越大，标题越小。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

段落标签<p>用于定义段落。

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

强调文本标签

  • <b>：加粗文本
  • <i>：斜体文本
  • <strong>：强调文本（通常显示为加粗）
  • <em>：强调文本（通常显示为斜体）
<p><b>加粗文本</b></p>
<p><i>斜体文本</i></p>
<p><strong>强调文本</strong></p>
<p><em>强调文本</em></p>

列表标签

  • 无序列表<ul>和列表项<li>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
  • 有序列表<ol>和列表项<li>
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

链接标签

链接标签<a>用于创建超链接。

<a href="https://www.example.com"> 点击这里访问示例网站</a>

图像标签

图像标签<img>用于嵌入图像。

<img src="image.jpg"  alt="描述图像的替代文本">

4. 表格和表单

表格

表格标签<table>用于创建表格。

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

表单

表单标签<form>用于收集用户输入。

<form action="/submit_form" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="提交">
</form>

5. HTML中的CSS基础

CSS（Cascading Style Sheets）用于控制HTML文档的外观和布局。可以通过以下方式引入CSS：

内联样式

<p style="color: red;">红色文本</p>

内部样式表

<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
        }
    </style>
</head>

外部样式表

<head>
    <link rel="stylesheet" href="styles.css"> 
</head>

6. 实践练习

练习1：创建一个简单的个人简介页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简介</title>
</head>
<body>
    <h1>关于我</h1>
    <p>你好！我是张三，一名软件工程师。</p>
    <h2>教育背景</h2>
    <ul>
        <li>本科 - 计算机科学与技术</li>
        <li>硕士 - 软件工程</li>
    </ul>
    <h2>技能</h2>
    <ul>
        <li>编程语言：Java, Python, JavaScript</li>
        <li>数据库：MySQL, PostgreSQL</li>
        <li>框架：Spring, Django</li>
    </ul>
    <h2>联系方式</h2>
    <p>Email: <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p> 
</body>
</html>

练习2：创建一个简单的表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>联系表单</title>
</head>
<body>
    <h1>联系我们</h1>
    <form action="/submit_form" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br><br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required><br><br>
        <label for="message">留言:</label><br>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

通过以上内容的学习，你应该能够掌握HTML的基础知识，并能够创建简单的网页。继续练习和探索，你会发现HTML的更多可能性。祝你学习愉快！

相关阅读

热门文章

最新更新