前端开发：（二）HTML基础

星光闪闪k

已于 2024-02-07 21:36:38 修改

阅读量958

点赞数 13

分类专栏： Java 前端文章标签：前端 html 架构后端 java

于 2024-02-06 11:43:04 首次发布

本文链接：https://blog.csdn.net/qq_35763697/article/details/136054267

版权

Java 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

1. 介绍HTML

1.1 HTML的定义和作用

HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页的结构和内容。它通过使用标签来描述文档的结构，使得浏览器能够正确地解释和显示页面。

1.2 HTML的发展历史

HTML的发展可以追溯到1990年代初，随着互联网的发展，HTML逐渐演变为不同的版本。从HTML 2.0到HTML5，每个版本都带来了新的特性和改进，以适应不断变化的互联网环境。

1.3 HTML5的新特性

HTML5引入了许多令人振奋的功能，包括语义化标签、新的表单元素、Web存储和离线应用等。这些特性不仅提升了开发者的工作效率，还改善了用户体验。

2. HTML基础

2.1 HTML文档的结构

一个标准的HTML文档包含<!DOCTYPE html>声明、<html>元素、<head>元素和<body>元素。

<!DOCTYPE html>
<html>
<head>
    <!-- head部分，包含页面的元信息、样式和脚本链接等 -->
</head>
<body>
    <!-- body部分，包含页面的主要内容 -->
</body>
</html>

2.2 HTML元素和标签

HTML元素是构建页面的基本单元，由开始标签、内容和结束标签组成。例如，<p>表示段落，<a>表示超链接。

2.3 HTML属性

HTML元素可以包含属性，属性提供了有关元素的额外信息。例如，<img>元素可以包含src属性，指定要显示的图像的路径。

2.4 HTML注释

通过注释，开发者可以在HTML代码中添加说明或临时禁用某部分代码，提高代码的可维护性。

3. HTML文档的结构

3.1 HTML文档的基本结构

HTML文档的基本结构已在上述介绍中提到，是确保页面正确渲染的关键。

3.2 head元素的作用和常用标签

<head>元素包含页面的元信息，如标题、字符集定义、样式表和脚本链接等。

<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <!-- 其他元信息和链接 -->
</head>

3.3 body元素的结构和常用标签

<body>元素包含页面的主要内容，可以包含标题、段落、列表、图像等。

<body>
    <h1>主标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片描述">
    <!-- 其他页面内容 -->
</body>

3.4 HTML文档的语法规范

遵循HTML的语法规范对于确保页面正确解析至关重要，包括正确使用标签、嵌套规则等。

4. 文本标签

4.1 标题标签

HTML提供了<h1>到<h6>共六个标题标签，用于定义标题的重要性，<h1>最高，<h6>最低。

<h1>主标题</h1>
<h2>副标题</h2>
<!-- 其他标题标签 -->

4.2 段落标签

段落由<p>标签定义，用于将文本组织成段落。

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

4.3 换行标签

<br>标签用于在文本中创建换行。

这是一行文本。<br>这是下一行文本。

4.4 注释标签

通过可以在HTML代码中添加注释。

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

5. 列表

5.1 有序列表（ol）

有序列表使用<ol>标签，包含<li>标签定义的列表项。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <!-- 其他列表项 -->
</ol>

5.2 无序列表（ul）

无序列表使用<ul>标签，同样包含<li>标签定义的列表项。

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <!-- 其他列表项 -->
</ul>

5.3 列表项（li）

<li>标签定义列表项，可以嵌套在有序或无序列表中。

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

6. 链接与超文本

6.1 超链接标签（a）

超链接使用<a>标签，通过href属性指定链接目标。

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

6.2 锚点标签（anchor）

锚点用于在同一页面内快速跳转，通过在目标位置添加id属性，再使用<a>标签指向该id。

<a href="#section2">跳转到第二部分</a>
...
<h2 id="section2">第二部分</h2>

6.3 相对路径和绝对路径

链接可以使用相对路径（相对于当前文件位置）或绝对路径（完整的URL路径）。

<!-- 相对路径 -->
<a href="images/pic.jpg">查看图片</a>

<!-- 绝对路径 -->
<a href="https://www.example.com/images/pic.jpg">查看图片</a>

7. 图像标签

7.1 图像标签（img）

<img>标签用于在页面中嵌入图像，通过src属性指定图像路径。

<img src="image.jpg" alt="示例图片">

7.2 图像路径和替代文本

良好的图像路径和替代文本有助于页面的可访问性和用户体验。

<img src="images/pic.jpg" alt="美丽的风景">

7.3 图像的尺寸和样式

通过width和height属性可以指定图像的尺寸，同时可以使用CSS样式调整图像的外观。

<img src="image.jpg" alt="示例图片" width="300" height="200" style="border: 1px solid #ccc;">

8. 表格标签

8.1 表格的基本结构

表格由<table>标签定义，包含<tr>（行）和<td>（数据）标签。

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

8.2 表头标签（thead）

表头使用<thead>标签定义，包含<th>标签作为列标题。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <!-- 表格数据 -->
    </tbody>
</table>

8.3 表格行标签（tr）

<tr>标签定义表格中的行。

<tr>
    <td>John</td>
    <td>25</td>
</tr>

8.4 表格数据标签（td）

<td>标签定义表格中的数据。

<td>25</td>

9. 表单标签

9.1 表单的创建和基本结构

表单通过<form>标签定义，包含输入框、下拉框、按钮等表单元素。

<form action="/submit" method="post">
    <!-- 表单元素 -->
</form>

9.2 输入框（input）

<input>标签用于创建文本框、密码框等输入元素。

<input type="text" name="username" placeholder="请输入用户名">

9.3 下拉框（select）

<select>标签定义下拉框，包含<option>标签作为选项。

<select name="country">
    <option value="us">美国</option>
    <option value="cn">中国</option>
</select>

9.4 按钮标签（button）

<button>标签定义按钮，可以用于提交表单或执行JavaScript函数。

<button type="submit">提交</button>

10. 多媒体标签

10.1 音频标签（audio）

<audio>标签用于嵌入音频文件，支持多种音频格式。

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
</audio>

10.2 视频标签（video）

<video>标签用于嵌入视频文件，同样支持多种视频格式。

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

10.3 嵌入标签（embed）

<embed>标签可用于嵌入其他媒体类型，如Flash动画。

<embed src="animation.swf" width="300" height="200">

11. HTML5新特性

11.1 语义化标签

HTML5引入了一系列语义化标签，如<article>、<section>、<header>、<footer>等，提高了页面的结构清晰性和可读性。

<article>
    <header>
        <h2>文章标题</h2>
    </header>
    <p>文章内容</p>
    <footer>发布日期：2024年02月06日</footer>
</article>

11.2 新的表单元素

HTML5新增了一些表单元素，如<input type="date">、<input type="email">、<input type="url">等，简化了表单输入的验证和展示。

<label for="birthdate">生日：</label>
<input type="date" id="birthdate" name="birthdate">

11.3 Web存储和离线应用

HTML5提供了本地存储和离线应用的支持，通过localStorage和service workers等技术，提升了Web应用的性能和用户体验。

// 使用localStorage存储数据
localStorage.setItem("username", "John Doe");

// 注册service worker以实现离线缓存
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
        console.log('Service Worker 注册成功:', registration);
    }).catch(function(error) {
        console.log('Service Worker 注册失败:', error);
    });
}

12. 响应式Web设计

12.1 移动优先设计理念

响应式设计采用“移动优先”原则，首先针对移动设备进行设计和优化，然后逐步适配更大的屏幕。

12.2 媒体查询（media queries）

使用媒体查询可以根据不同设备特性应用不同的样式，以实现响应式布局。

@media screen and (min-width: 768px) {
    /* 在宽度大于等于768px的屏幕上应用的样式 */
    body {
        font-size: 16px;
    }
}

12.3 viewport设置

通过设置<meta>标签的viewport属性，可以控制页面在移动设备上的显示效果。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

13. HTML元素的样式

13.1 内联样式

内联样式通过在HTML元素中使用style属性来定义，适用于个别元素的样式设置。

<p style="color: blue; font-size: 14px;">这是一个蓝色字体的段落。</p>

13.2 内部样式表

内部样式表嵌入在HTML文档的<style>标签内，适用于整个文档或单个页面的样式定义。

<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
        }
    </style>
</head>

13.3 外部样式表

外部样式表以.css文件存储，并通过<link>标签引入，适用于整个网站的样式共享。

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

14. HTML与CSS的交互

14.1 样式选择器

CSS选择器用于选择要应用样式的HTML元素，有多种类型的选择器，如类选择器、ID选择器、元素选择器等。

/* 类选择器 */
.my-class {
    color: red;
}

/* ID选择器 */
#my-id {
    font-size: 18px;
}

/* 元素选择器 */
p {
    margin: 10px;
}

14.2 CSS盒模型

CSS盒模型描述了元素在页面中的布局，包括内容、内边距、边框和外边距。

/* 盒模型属性设置 */
div {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px;
}

14.3 CSS布局

CSS布局通过使用float、position、flexbox和grid等属性，控制元素在页面中的位置和排列方式。

/* 使用flexbox布局 */
.container {
    display: flex;
    justify-content: space-between;
}

15. HTML语义化

15.1 语义化的概念

语义化是指通过HTML标签传达文档结构和内容的含义，使页面更具有可读性和可维护性。

15.2 为什么要使用语义化标签

使用语义化标签有助于搜索引擎优化（SEO）、提高网页的可访问性，以及使开发者更容易理解和维护代码。

15.3 实际应用中的语义化

例如，使用<header>、<nav>、<main>、<article>等标签可以清晰地定义页面的结构，而不仅仅依赖于<div>元素。

<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>