Web开发（一）HTML5

Web开发（一）HTML5

写在前面

参考黑马程序员前端Web教程做的笔记，主要是想后面自己搭建网页玩。

这部分是前端HTML5+CSS3+移动web视频教程的HTML5部分。主要涉及到HTML的基础语法。

HTML基础

标签定义

HTML定义

HTML(HyperText Markup Language)，即超文本标记语言。

超文本：链接

标记：标签，带尖括号的文本。

image-20250112165358466

标签语法定义如下，但凡需要包裹内容的就是双标签，只有几个是单标签。

image-20250112170719026

基本骨架

在vscode中按!后配合Enter/Tab可以快速生成

image-20250112171004109

如下所示。image-20250112171447904

标签的关系

包括父子关系（嵌套关系）、兄弟关系（并列关系）。

如下所示，head和body就是兄弟关系，外面的html和内层head、body属于父子关系。

image-20250112194823051

注释

<!-- 注释内容 -->

标题标签

标题标签同typora自带的六级标题一样。标题标签会自动换行。一般来说h1标签在一个网页只用一次，用来放新闻标签或网页logo。

image-20250112195737929

段落标签

顾名思义，用于写文字的一段。

image-20250112195925735

image-20250112200311135

换行和水平线标签

这两个都是单标签。

image-20250112200629509

换行中，浏览器不会识别代码中的Enter换行。因为不管是一个间隙还是多个间隙，浏览器可以识别为1个空格。如果要多个空格，就得输入&nbsp;

&nbsp; 是 HTML 中的一个特殊字符实体（Entity），表示"不换行空格"（Non-Breaking Space）。它有以下几个主要作用：

  1. 插入空格：在 HTML 中，多个连续的普通空格会被浏览器解析为一个空格，而&nbsp; 可以强制插入一个空格。

  2. 保持不换行：它可以防止文本在这个位置换行。

示例结果如下：

    <!-- 使用普通空格 -->第一行内容 第二行内容<br><!-- 使用&nbsp; -->第一行内容&nbsp;第二行内容<br><!-- 使用多个&nbsp;可以创建更大的间距 -->第一行内容&nbsp;&nbsp;&nbsp;第二行内容

image-20250112201135040

文本格式化标签

image-20250112201633152

通常用strong、em、ins、del标签写文本格式化标签（而不是b,i,u,s）。

em：emphasis

ins：insert

del：delete

b：bold，即粗体

i：italic，即斜体

u：underline，即下划线

s：strike-through，指的是穿过文本的删除线。

image-20250112201801148

图像标签

图片的URL存放图片的位置，

image-20250112202959413

vscode自带alt参数，alt是图片的替换文字，当图片显示错误时显示alt的文字。

image-20250112203223168

主要用到alt参数和title参数。

image-20250112203716125

另外还有width和height属性，但它们通常通过CSS得到。如果指定width（height），浏览器会等比例缩放height（width）。image-20250112203628806

路径指定，友情链接也属于绝对路径的应用。本地一般用相对路径。

image-20250112204659946

超链接标签

image-20250112215415510

点击后跳转到其他页面，为双标签。如下所示，href中写目标网页地址

<a href="">跳转文字描述</a>

用target="_blank"可以选择新窗口打开。

image-20250112215058312

在开发初期，不知道超链接的跳转地址，href属性值写#，来表示空链接，不会跳转。

<a href="#">空链接</a>

音频、视频标签

音频标签

音频在默认情况下不会自动播放。

image-20250112215843777

control用于显示音频控制面板。**在HTML5中，如果属性名和属性值完全一样，那么可以简写为一个单词。**即下两者是等价的。

(1)controls = "controls"
(2)controls

image-20250112220116756

对于loop、autoplay同样可以简写为一个单词。但是即使设置了autoplay属性，仍然无法播放，因为浏览器一般禁用自动播放功能。

image-20250112220610895

视频标签

image-20250112220716321

autoplay需要配合muted属性设置才能生效。否则不会自动播放。

image-20250112220941834

综合案例1——个人简介

整体目标与代码

思路如下，从上到下，先整体后局部。

image-20250112224524807

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1><strong>尤雨溪</strong></h1><hr><p>尤雨溪，前端框架<a href="#">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的<a href="#">JavaScript</a>项目，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p><img src="cat.gif" alt="一只猫的gif" title="一只猫的gif"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong> ，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，<ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。</ins></p><p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>
小tips

一段的文字过长，可以用alt+z快捷键换行，方便观看。

image-20250112222942895

如果要在段落中插入超链接，可以在光标后先打一个空格，这样就可以有vscode的编译提示。

image-20250112223142402

综合案例2——Vue简介

image-20250112231502990

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue简介</title>
</head>
<body><h1>Vue.js</h1><p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./test1_cv.html" target="_blank">尤雨溪</a></p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。<video src="./vue.mp4" controls></video></p>    
</body>
</html>

HTML进阶语法

列表

一般来说，无序列表用的最多。

image-20250113094311893

无序列表

注意事项

  1. ul标签中只能包裹li标签，无法包裹如段落p其他标签
  2. li标签中可以包裹任何内容。
  3. ul：unorder list

image-20250113094427438

image-20250113094732888

有序列表

ol：ordered list

image-20250113094948715

定义列表

dl：define list

dt：define title

dd：define detail

image-20250113095443181

1736733240509

表格

与Excel表格类似。

tr（table row）

th（table headline）

td（table data）

image-20250113100218490

image-20250113100137526

表格的结构，这儿的thead、tbody是给浏览器看的，目的是代码优化，浏览器更好识别内容。

image-20250113100352705

image-20250113100635054

合并单元格

image-20250113101820051

跨行合并例子image-20250113101948011

跨列合并例子

image-20250113102050759

不能跨结构标签（thead，tbody，tfoot）合并，即不能合并tbody中的“李四”和tfoot中的“总结”。

image-20250113102147288

表单

定义

image-20250113102403997

input标签
基础

input为单标签

image-20250113102524068

image-20250113103108802

占位文本

用于提示信息。

image-20250113103217147

image-20250113103426937

单选框radio

image-20250113103906459

image-20250113103712944

设置默认选择“checked”，会默认选择对应单选框。

image-20250113103813856

上传多个文件

image-20250113103938364

image-20250113104037101

多选框checkbox

image-20250113104205882

image-20250113104245842

下拉菜单

image-20250113104802766

image-20250113105011266

文本域

默认的col和row不用html设计，而是后面用css设计。

image-20250113105231976

image-20250113105439897

这里应该在前面的方括号后面添加placeholder=“请输入评论”，否则会和用户输入混淆。image-20250113105752705

label标签

image-20250113110006513

label有两种方法

image-20250113110332551

完整写法代码示例

image-20250113110201326

简易写法示例

image-20250113110305947

按钮button

默认type属性为submit

image-20250113111842573

需要定义form标签，来定义表单区域。

image-20250113112158335

无语义的布局标签

image-20250113112544573

div一般称为大盒子，span称为小盒子。

image-20250113112734677

使用示例，三个红框都是用div标签隔出来的。

image-20250113112904659

字符实体

lt：less than

gt：greater than

中文字符大小的空格字符：&emsp;

image-20250113114104546

image-20250113114330458

综合案例1——体育新闻列表

对应实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体育新闻列表</title>
</head>
<body><ul><li><img src="./img/1.jpg" alt="主帅安东尼奥回西班牙休假 国青抵达海口进行隔离"><h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3></li><li><img src="./img/2.jpg" alt="梅州主帅：申花有强有力的教练组 球员体能水平高"><h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3></li><li><img src="./img/3.jpg" alt="马德兴:00后球员将首登亚洲舞台 调整心态才务实"><h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3></li></ul>
</body>
</html>

综合案例2——注册信息

完成示例：

image-20250113140250395

这儿的确认密码和密码相同是通过js确认的，现在只需要设计出样式即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册信息</title>
</head>
<body><h1>注册信息</h1><form action=""><h2>个人信息</h2><label>姓名：</label><input type="text" placeholder="请输入真实姓名"><br><br><label>密码：</label><input type = "password" placeholder="请输入密码"><br><br><label>确认密码：</label><input type = "password" placeholder="请再次输入密码"><br><br><label>性别：</label><label><input type="radio" name="gender">男</label><label><input type="radio" name="gender" checked>女</label><br><br><label>居住城市：</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select><h2>教育经历</h2><label>最高学历：</label><select><option>本科</option><option selected>硕士</option><option>博士</option><option>大专</option></select><br><br><label>学校名称：</label><input type="text"><br><br><label>所学专业：</label><input type="text"><br><br><label>在校时间：</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option></select><h2>工作经历</h2><label>公司名称：</label><input type="text"><br><br><label>工作描述：</label><br><textarea placeholder="请输入工作描述"></textarea><br><br><label><input type="checkbox">已阅读并同意以下协议:</label><br><ul><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><br><br><button>免费注册</button><button type="reset">重新填写</button></form></body>
</html>

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

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

相关文章

MATLAB学习笔记目录

MATLAB学习笔记目录

MATLAB学习笔记-生成纯音并保存-CSDN博客 MATLAB学习笔记-各种格式之间的转换 - 知乎 MATLAB学习笔记-胞组&#xff08;cell array&#xff09;转换为矩阵&#xff0c;cell2mat_matlab如何把元胞数组改为矩阵-CSDN博客MATLAB学习笔记-判断数组、结构体、数值、字符串是否相同…
阅读更多...
Java-数据结构-栈与队列(常考面试题与单调栈)

Java-数据结构-栈与队列(常考面试题与单调栈)

在上一篇的学习中&#xff0c;我们学习了栈和队列的基本知识&#xff0c;以及它们对应都有哪些方法&#xff0c;在什么应用场景下如何使用&#xff0c;并且还对它们进行了模拟实现&#xff0c;而其实对于栈和队列的相关知识还远不止于此&#xff0c;而今天我们就对栈与队列进行…
阅读更多...
JSON.stringify（res，null，2）的含义

JSON.stringify（res，null，2）的含义

JSON.stringify(res, null, 2) 是 JavaScript 中将对象转换为 JSON 字符串的方法&#xff0c;具体说明如下&#xff1a; 参数解释 res&#xff1a;要转换的对象。它可以是 JavaScript 中的任意类型&#xff0c;如对象、数组、字符串、数字等。例如&#xff0c;{name: "K…
阅读更多...
Spring 项目 基于 Tomcat容器进行部署

Spring 项目 基于 Tomcat容器进行部署

文章目录 一、前置知识二、本地Idea运行Spring项目1. 将写好的 Spring 项目先打包成 war 包2. 查看项目工件&#xff08;Artifact&#xff09;是否存在3. 配置 Tomcat3.1 添加一个本地 Tomcat 容器3.2 将项目部署到 Tomcat 4. 运行项目 三、基于 Tomcat 部署及多实例部署1. Spr…
阅读更多...
usbredir学习

usbredir学习

文章目录 背景典型场景编译usbredirparserusbredirfilterusbredirparser/usbredirproto usbredirhostusbredirect/usbredirtestclient参考 背景 usbredir 是一种用于通过网络转发 USB 设备流量的网络协议。它也是一个软件包的名称&#xff0c;该软件包提供了一个解析库、一个 …
阅读更多...
ESXI 安装教程(3) ---​vCenter Server 安装

ESXI 安装教程(3) ---​vCenter Server 安装

不涉及复杂的操作此项可不安装 1.镜像加载到虚拟光盘 对应的网盘文件 2.打开文件路径 双击运行文件installer.exe 3.调整安装语言 4.点击安装 5. 6. 证书,有效问题导致此提示,非专业网络管理人员,不知道如何处理,此处点是即可 证书有效开始时间是安装时间8小时 证书有效结束…
阅读更多...
【初识扫盲】逆概率加权

【初识扫盲】逆概率加权

我们正在处理一个存在缺失数据的回归模型&#xff0c;并且希望采用一种非参数的逆概率加权方法来调整估计&#xff0c;以应对这种缺失数据的情况。 首先&#xff0c;我们需要明确问题的背景。我们有样本 { ( Y i , X i , r i ) : i 1 , … , n } \left\{\left(Y_i, \boldsym…
阅读更多...
极客说｜Azure AI Agent Service 结合 AutoGen/Semantic Kernel 构建多智能体解决⽅案

极客说｜Azure AI Agent Service 结合 AutoGen/Semantic Kernel 构建多智能体解决⽅案

作者&#xff1a;卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏&#xff0c;我们邀请来自微软以及技术社区专家&#xff0c;带来最前沿的技术干货与实践经验。在这里&#xff0c;您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&am…
阅读更多...
【集成学习】Boosting算法详解

【集成学习】Boosting算法详解

文章目录 1. 集成学习概述2. Boosting算法详解3. Gradient Boosting算法详解3.1 基本思想3.2 公式推导 4. Python实现 1. 集成学习概述 集成学习&#xff08;Ensemble Learning&#xff09;是一种通过结合多个模型的预测结果来提高整体预测性能的技术。相比于单个模型&#xf…
阅读更多...
小米vela系统(基于开源nuttx内核)——如何使用信号量进行PV操作

小米vela系统(基于开源nuttx内核)——如何使用信号量进行PV操作

如何使用信号量进行PV操作 前言信号量1. 信号量简介2. NuttX中信号量的创建与使用2.1 Nuttx信号量的初始化和销毁2.2 信号量的等待和发布 3. 信号量的实际应用&#xff1a;下载任务示例3.1 实际代码3.2 代码说明3.3 执行说明 4. 信号量的优势与应用场景5. 常见应用场景&#xf…
阅读更多...
CMake学习笔记（2）

CMake学习笔记（2）

1. 嵌套的CMake 如果项目很大&#xff0c;或者项目中有很多的源码目录&#xff0c;在通过CMake管理项目的时候如果只使用一个CMakeLists.txt&#xff0c;那么这个文件相对会比较复杂&#xff0c;有一种化繁为简的方式就是给每个源码目录都添加一个CMakeLists.txt文件&#xff…
阅读更多...
旅游网站设计与实现

旅游网站设计与实现

文末附有完整项目代码 在当今数字化时代&#xff0c;旅游网站成为人们获取旅游信息的重要途径。本文将详细介绍旅游网站的设计与实现&#xff0c;让你轻松了解其中的技术奥秘&#xff01; 一、项目背景 随着社会经济的发展&#xff0c;人们对精神消费愈发重视&#xff0c;旅游…
阅读更多...
【C++】size_t究竟是什么？全面解析与深入拓展

【C++】size_t究竟是什么？全面解析与深入拓展

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;一、什么是size_t&#xff1f;为什么需要size_t&#xff1f; &#x1f4af;二、size_t的特性与用途1. size_t是无符号类型示例&#xff1a; 2. size_t的跨平台适应性示例对…
阅读更多...
【物流管理系统 - IDEAJavaSwingMySQL】基于Java实现的物流管理系统导入IDEA教程

【物流管理系统 - IDEAJavaSwingMySQL】基于Java实现的物流管理系统导入IDEA教程

有问题请留言或私信 步骤 下载项目源码&#xff1a;项目源码 解压项目源码到本地 打开IDEA 左上角&#xff1a;文件 → 新建 → 来自现有源代码的项目 找到解压在本地的项目源代码文件&#xff0c;点击确定&#xff0c;根据图示步骤继续导入项目 查看项目目录&#xff…
阅读更多...
ssh2-sftp-client和ssh2配合使用js脚本快速部署项目到服务器

ssh2-sftp-client和ssh2配合使用js脚本快速部署项目到服务器

有时候因为服务器不能实现github或者gitlab的自动部署服务&#xff0c;所以就需要使用脚本来实现自动部署&#xff0c;可以省时省力&#xff0c;一劳永逸。这里就使用ssh2-sftp-client和ssh2来实现&#xff0c;即便是需要sudo权限&#xff0c;也是可以的。 1.先将本地打包后的…
阅读更多...
深度解析Linux中的调试器gdb/cgdb的使用

深度解析Linux中的调试器gdb/cgdb的使用

Linux下我们编译好的代码&#xff0c;无法直接调试 gcc/g默认的工作模式是realse模式 程序要调试的话&#xff0c;必须是debug模式&#xff0c;也就是说编译的时候要加-g选项 gdb携带调试信息的exe 我们现在在文件夹里面创建一个文件lesson11 里面创建一个累加的代码&…
阅读更多...
【Maui】动态菜单实现（绑定数据视图）

【Maui】动态菜单实现（绑定数据视图）

前言 .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。 使用 .NET MAUI&#xff0c;可从单个共享代码库开发可在 Android、iOS、macOS 和 Windows 上运行的应用。 .NET MAUI 是一款开放源代码应用&#xff0c;是 X…
阅读更多...
Bash语言的语法糖

Bash语言的语法糖

Bash语言的语法糖 引言 在现代编程语言中&#xff0c;“语法糖”是一个非常常见的术语&#xff0c;它指的是那些使代码更加易读、易写的语法特性。尽管这些特性并不改变语言的功能&#xff0c;但它们能显著提升开发者的编程体验。在众多编程语言中&#xff0c;Bash&#xff0…
阅读更多...
linux---Nginx详细教程（包含安装，网站部署）

linux---Nginx详细教程（包含安装，网站部署）

Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;也可以用作邮件代理服务器&#xff0c;其以占有内存少、并发能力强、稳定性高、丰富的功能集、低系统资源消耗而闻名。以下是对Nginx的详细教程&#xff1a; 一、Nginx简介 Nginx由俄罗斯人开发&#xff0c;第一个公开版…
阅读更多...
RNN之：LSTM 长短期记忆模型-结构-理论详解-及实战（Matlab向）

RNN之：LSTM 长短期记忆模型-结构-理论详解-及实战（Matlab向）

0.前言 递归&#xff01;循环神经网络Recurrent Neural Network 循环神经网络&#xff08;又称递归神经网络&#xff0c;Recurrent Neural Network&#xff0c;RNN&#xff09;。是一种用于处理序列数据的神经网络结构&#xff0c;具有记忆功能&#xff0c;能够捕捉序列中的时…
阅读更多...
最新文章

Copyright @ 2022~2023