HTML基础简略教程

HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。以下是一个简略的 HTML 教程,介绍了 HTML 的基本结构和常用标签。

基本结构

HTML 文档的基本结构如下:

html

复制代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>标题</title>

</head>

<body>

    <h1>欢迎使用 HTML</h1>

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

</body>

</html>

常用标签

1. 标题标签

用于定义六个不同级别的标题,<h1> 是最高级别,<h6> 是最低级别。

html

复制代码

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

2. 段落标签

用于定义段落。

html

复制代码

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

3. 链接标签

用于创建超链接。

html

复制代码

<a href="https://www.example.com">这是一个链接</a>

4. 图片标签

用于在网页中嵌入图像。

html

复制代码

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

5. 列表标签

无序列表

html

复制代码

<ul>

    <li>项目一</li>

    <li>项目二</li>

    <li>项目三</li>

</ul>

有序列表

html

复制代码

<ol> 

    <li>第一项</li>

    <li>第二项</li>

    <li>第三项</li>

</ol>

6. 表格标签

用于创建表格。

html

复制代码

<table>

    <tr>

        <th>表头1</th>

        <th>表头2</th>

    </tr>

    <tr>

        <td>数据1</td>

        <td>数据2</td>

    </tr>

</table>

7. 表单标签

用于创建用户输入表单。

html

复制代码

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

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

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

    <input type="submit" value="提交">

</form>

8. div 和 span 标签

div 标签

用于定义文档中的块级区域。

html

复制代码

<div>

    <h2>这是一个 div 块</h2>

    <p>块级元素可以包含段落、标题、表格等。</p>

</div>

span 标签

用于定义文档中的行内区域。

html

复制代码

<p>这是一段包含 <span>行内元素</span> 的文本。</p>

9. 注释

用于在 HTML 文档中添加注释。

html

复制代码

<!-- 这是一个注释 -->

10. 元数据标签

用于在 <head> 部分包含元数据。

html

复制代码

<meta charset="UTF-8">

<meta name="description" content="这是一个描述">

<meta name="keywords" content="HTML, CSS, JavaScript">

11. 内嵌 CSS 和 JavaScript

内嵌 CSS

html

复制代码

<style>

    body {

        background-color: lightblue;

    }

    h1 {

        color: navy; margin-left: 20px;

    }

</style>

内嵌 JavaScript

html

复制代码

<script>

    function greet() {

        alert("Hello, World!");

    }

</script>

这是一个简略的 HTML 教程,涵盖了 HTML 的基本结构和常用标签。

  • 12
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值