HTML学习总结

威桑

已于 2024-07-17 17:46:26 修改

阅读量868

点赞数 29

分类专栏：前端文章标签： html5 html

于 2024-05-29 15:52:59 首次发布

本文链接：https://blog.csdn.net/m0_74091159/article/details/139297324

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML（HyperText Markup Language）是构建网页的基本语言。无论你是一个完全的新手还是想要巩固基础，下面将带你深入理解HTML的核心概念和常见应用。

1. HTML简介

HTML是用来描述网页结构的标记语言。HTML使用标签（tags）来标记不同类型的内容，如文本、图片、链接等。每个标签都有特定的作用和属性，可以通过这些标签来创建复杂的网页布局。

2. HTML文档结构

一个标准的HTML文档包括以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型，告知浏览器当前使用的是HTML5。
<html>：根元素，包含整个HTML文档。
<head>：包含文档的元数据（如字符编码、标题、样式等）。
<body>：包含文档的主要内容。

3. 常用HTML标签

HTML标签分为块级元素和内联元素。块级元素通常独占一行，而内联元素与其他内容共行。

块级元素

<div>：常用于布局的容器。
<h1>至<h6>：标题标签，<h1>为最高级别标题。
<p>：段落标签。
<ul>和<ol>：无序列表和有序列表，配合<li>使用。

<div>
    <h1>这是一级标题</h1>
    <p>这是一个段落。</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
</div>

内联元素

<span>：用于文本的内联容器。
<a>：链接标签，使用href属性指定链接目标。
<img>：图像标签，使用src属性指定图片路径。

<p>这是一个包含<a href="https://www.example.com">链接</a>的段落。</p>
<img src="path/to/image.jpg" alt="描述文本">

4. 表单和输入

表单是用户与网页交互的重要方式。常用的表单元素包括：

<form>：表单容器，使用action属性指定提交目标。
<input>：输入字段，使用type属性指定类型，如text、email、password等。
<label>：标签，关联表单元素。
<textarea>：多行文本输入。
<button>：按钮，用于提交或重置表单。

<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>

5. 多媒体元素

HTML5引入了许多用于多媒体内容的新元素：

<audio>：音频标签。
<video>：视频标签。
<canvas>：绘图区域，用于渲染图形。

<audio controls>
    <source src="path/to/audio.mp3" type="audio/mpeg">
    你的浏览器不支持音频播放。
</audio>

<video width="320" height="240" controls>
    <source src="path/to/video.mp4" type="video/mp4">
    你的浏览器不支持视频播放。
</video>

6. HTML语义化

语义化是指使用有意义的标签来描述内容结构，以提高可读性和可访问性。

<header>：页眉，包含导航和标题。
<nav>：导航栏。
<section>：内容区块。
<article>：独立内容单元。
<footer>：页脚。

<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
</header>

<section>
    <article>
        <h2>文章标题</h2>
        <p>文章内容。</p>
    </article>
</section>

<footer>
    <p>版权所有 &copy; 2024</p>
</footer>