前端开发 ：（二）HTML基础

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>

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

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

相关文章

StringBuilder类常用方法（Java）

StringBuilder类常用方法（Java）

StringBuilder类常用方法 StringBuilder 是 Java 中常用的字符串缓冲区类&#xff0c;适用于频繁修改字符串的场景。 1. append(): 将指定字符串、字符、布尔值或其他数据类型的表示追加到字符串缓冲区的末尾。 StringBuilder sb new StringBuilder("Hello"); sb.…
阅读更多...
微信小程序（三十七）选项点击高亮效果

微信小程序（三十七）选项点击高亮效果

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.选择性渲染类 2.以数字为需渲染内容&#xff08;数量&#xff09; 源码&#xff1a; index.wxml <view class"Area"><!-- {{activeNumindex?Active:}}是选择性添加类名进行渲染 -->&l…
阅读更多...
深兰科技“华佗”医用红外热像仪正式获批国家医疗器械二类证

深兰科技“华佗”医用红外热像仪正式获批国家医疗器械二类证

近日&#xff0c;深兰科技自主研发生产的医用红外热像仪&#xff0c;经国家食药监局严格审查&#xff0c;顺利通过了国家药品监督局的医疗器械产品认证&#xff0c;拿到了国家二类医疗器械注册证。这标志着深兰科技“华佗”医用红外热像仪的产品性能和质量均已达到国家标准&…
阅读更多...
nacos安装手册

nacos安装手册

1. 单机模式 1.1 准备安装介质 nacos-server-2.1.1.tar.gz1.2 环境准备 1台服务器安装JDK 1.8 1.3 解压 tar-zxvf nacos-server-2.1.1.tar.gz1.4 启动 进入解压的nacos目录&#xff0c;进入bin目录&#xff0c;运行&#xff1a; ./startup.sh -m standalone1.5 验证 na…
阅读更多...
互联网加竞赛 基于深度学习的行人重识别(person reid)

互联网加竞赛 基于深度学习的行人重识别(person reid)

文章目录 0 前言1 技术背景2 技术介绍3 重识别技术实现3.1 数据集3.2 Person REID3.2.1 算法原理3.2.2 算法流程图 4 实现效果5 部分代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的行人重识别 该项目较为新颖&#xff0c;适合…
阅读更多...
已解决：tpm2_createpriimay: command not found

已解决：tpm2_createpriimay: command not found

出现错误如下&#xff1a; ERROR: Could not change hierarchy for Owner. TPM Error:0x9a2 ERROR: Could not change hierarchy for Endorsement. TPM Error:0x9a2 ERROR: Could not change hierarchy for Lockout. TPM Error:0x98e ERROR: Unable to run tpm2_takeownership…
阅读更多...
【es】解决es报错failed to authenticate user [elastic]

【es】解决es报错failed to authenticate user [elastic]

【es】解决es报错failed to authenticate user [elastic] 1.背景 某天使用接口查询es数据时出现报错&#xff0c;没有返回数据。想到是测试环境的es因为没内存又挂了&#xff0c;于是上服务器重启服务。 但是重启后等待一段时间再次查询es&#xff0c;还是同样报错&#xff0…
阅读更多...
github使用问题汇总

github使用问题汇总

1. Permission denied 1.1. 问题描述 Permission denied (publickey). fatal: Could not read from remote repository. 1.2. 解决方法 生成公钥 ssh-keygen -t ed25519 -C "your_emailexample.com" 点击回车三次 Generating public/private ed25519 key pair. …
阅读更多...
无法获取auth_request返回的标头和状态码

无法获取auth_request返回的标头和状态码

这里写自定义目录标题 欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 我有以下测试nginx配置&#xff1a; user nginx; worker_processes auto;error_log /dev/stderr debug; pid /var/run/nginx.pid;events {worker_connections 1024; }http {include /et…
阅读更多...
02.02_111期_C++_模板笔记

02.02_111期_C++_模板笔记

使用函数模板 实现一个函数就可以起到上面三个函数才能起到的作用 当数据类型是int时&#xff0c;编译器生成一个函数&#xff0c;其形参类型都是int 当数据类型时double时&#xff0c;编译器生成一个函数&#xff0c;其形参类型都是double 在写入template<typename T>这…
阅读更多...
Idea:Idea导入Module、子Module的方式及其可能遇到的问题

Idea:Idea导入Module、子Module的方式及其可能遇到的问题

参考&#xff1a;https://blog.csdn.net/qjyws/article/details/127617536 1.父module的maven添加sub module xxx-module-xxx-api xxx-module-xxx-biz 2.project structure–>import module–>添加sub module 3.maven–>Reload project即可
阅读更多...
为什么大模型需要向量数据库？

为什么大模型需要向量数据库？

AIGC 时代万物都可以向量化&#xff0c;向量化是 LLM 大模型以及 Agent 应用的基础。 比如&#xff1a;爆火的 Google 大模型 Gemini 1.0 原生支持的多模态&#xff0c;在预训练的时候就是把文本、图片、音频、视频等多模态先进行 token 化&#xff0c;然后构建一维的“语言”…
阅读更多...
深掘开源安全需求，破解开源治理难题

深掘开源安全需求，破解开源治理难题

当下&#xff0c;中国金融科技行业在数字支付、数字信贷、金融风控等领域取得了很多创新成果&#xff0c;大幅提升了金融数字化和智能化水平&#xff0c;已经在金融科技的全球竞争中走在前列。 在此进程中&#xff0c;开源技术发挥了不可或缺的重要作用&#xff0c;根据我国金…
阅读更多...
MySQL视图和索引

MySQL视图和索引

一、视图 1.什么是视图 MySQL 视图&#xff08;View&#xff09;是一种虚拟存在的表&#xff0c;同真实表一样&#xff0c;视图也由列和行构成&#xff0c;但视图并不实际存在于数据库中。行和列的数据来自于定义视图的查询中所使用的表&#xff0c;并且还是在使用视图时动态…
阅读更多...
双非本科准备秋招（19.2）—— 设计模式之保护式暂停

双非本科准备秋招（19.2）—— 设计模式之保护式暂停

一、wait & notify wait能让线程进入waiting状态&#xff0c;这时候就需要比较一下和sleep的区别了。 sleep vs wait 1) sleep 是 Thread 方法&#xff0c;而 wait 是 Object 的方法 2) sleep 不需要强制和 synchronized 配合使用&#xff0c;但 wait 强制和 s…
阅读更多...
航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植

航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植

航芯ACM32G103开发板评测 06 1.28圆形屏幕 LVGL移植 软硬件平台 航芯ACM32G103开发板1.28寸圆形彩色TFT显示屏高清IPS 模块240X240 SPI接口 GC9A01驱动芯片LVGL V8.3.1源码 LVGL LVGL&#xff08;Light and Versatile Graphics Library&#xff09;是一个免费的开源图形库&…
阅读更多...
微信小程序实现吸顶、网格、瀑布流布局

微信小程序实现吸顶、网格、瀑布流布局

微信小程序开发通常是在webview模式下编写&#xff0c;但是对小程序的渲染性能有一定的追求&#xff0c;就需要使用Skyline模式进行渲染&#xff0c;同时在这种模式下有也有一些特殊的组件&#xff0c;可以轻松的实现想要的效果&#xff0c;本文将介绍在Skyline模式下如何实现吸…
阅读更多...
【iOS ARKit】人形提取

【iOS ARKit】人形提取

为解决人形分离和深度估计问题&#xff0c;ARKit 新增加了 Segmentation Buffer&#xff08;人体分隔缓冲区&#xff09;和Estimated Depth Data Buffer&#xff08;深度估计缓冲区&#xff09;两个缓冲区。人体分隔缓冲区作用类似于图形渲染管线中的 Stencil Buffer&#xff0…
阅读更多...
进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

进程状态 | 僵尸进程 | 孤儿进程 | 前台后台进程 | 守护进程

文章目录 1.进程的三种基本状态2.Linux中进程状态查看2.1.进程检测脚本2.2.各种状态查看 3.孤儿进程4.前台、后台、守护进程 1.进程的三种基本状态 进程的在系统当中是走走停停的&#xff0c;「运行 - 暂停 - 运行」的活动规律&#xff1b;进程在活动期间的三种状态&#xff1…
阅读更多...
【leetcode题解C++】450.删除二叉搜索树中的节点 and 669.修剪二叉搜索树 and 108.将有序数组转换为二叉搜索树

【leetcode题解C++】450.删除二叉搜索树中的节点 and 669.修剪二叉搜索树 and 108.将有序数组转换为二叉搜索树

450. 删除二叉搜索树中的节点 给定一个二叉搜索树的根节点 root 和一个值 key&#xff0c;删除二叉搜索树中的 key 对应的节点&#xff0c;并保证二叉搜索树的性质不变。返回二叉搜索树&#xff08;有可能被更新&#xff09;的根节点的引用。 一般来说&#xff0c;删除节点可…
阅读更多...
最新文章

Copyright @ 2022~2023