Web开发（一）HTML5

news2025/1/15 3:59:51

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.coloradmin.cn/o/2276789.html

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

相关文章

RabbitMQ 的工作模式

RabbitMQ 的工作模式

目录 工作模式 Simple&#xff08;简单模式&#xff09; Work Queue&#xff08;工作队列&#xff09; Publish/Subscribe&#xff08;发布/订阅&#xff09; Exchange&#xff08;交换机&#xff09; Routing&#xff08;路由模式&#xff09; Topics&#xff08;通配…
阅读更多...
备战蓝桥杯：树的存储与遍历（dfs和bfs）

备战蓝桥杯：树的存储与遍历（dfs和bfs）

树的概念 树的逻辑结构是树形结构&#xff0c;和我们之前的线性结构又不太一样了&#xff0c;是一种一对多的关系 树的结点分为根节点&#xff0c;叶子结点&#xff08;没有分支的结点&#xff09; 以及分支结点 从上往下看&#xff0c;每个结点都有0个或多个后继 从下往上…
阅读更多...
超大规模分类（三）：KNN softmax

超大规模分类（三）：KNN softmax

传统的分类损失计算输入数据和每个类别中心的距离&#xff0c;来优化模型的训练。KNN softmax通过选择和输入数据最相关的top-K个类别&#xff0c;仅计算输入数据和top-K个类别中心的距离&#xff0c;以减小计算量。 KNN softmax首次诞生于达摩院机器智能技术实验室发表的SIGKD…
阅读更多...
ubuntu官方软件包网站 字体设置

ubuntu官方软件包网站 字体设置

在https://ubuntu.pkgs.org/22.04/ubuntu-universe-amd64/xl2tpd_1.3.16-1_amd64.deb.html搜索找到需要的软件后&#xff0c;点击&#xff0c;下滑&#xff0c; 即可在Links和Download找到相关链接&#xff0c;下载即可&#xff0c; 但是找不到ros的安装包&#xff0c; 字体设…
阅读更多...
项目实战——使用python脚本完成指定OTA或者其他功能的自动化断电上电测试

项目实战——使用python脚本完成指定OTA或者其他功能的自动化断电上电测试

前言 在嵌入式设备的OTA场景测试和其他断电上电测试过程中&#xff0c;有的场景发生在夜晚或者随时可能发生&#xff0c;这个时候不可能24h人工盯着&#xff0c;需要自动化抓取串口日志处罚断电上电操作。 下面的python脚本可以实现自动抓取串口指定关键词&#xff0c;然后触发…
阅读更多...
电脑分辨率调到为多少最佳？电脑分辨率最佳设置

电脑分辨率调到为多少最佳？电脑分辨率最佳设置

电脑分辨率是指电脑屏幕上显示的像素点的数量&#xff0c;通常用水平和垂直方向的像素点数来表示&#xff0c;例如19201080。像素点越多&#xff0c;显示的内容就越清晰&#xff0c;但也会占用更多的系统资源和电力。那么多电脑分辨率多少最佳&#xff1f;以及电脑分辨率如何调…
阅读更多...
代码随想录算法【Day20】

代码随想录算法【Day20】

Day20 二叉搜索树 235. 二叉搜索树的最近公共祖先 理解只要当前节点的值在p和q节点的值的中间&#xff0c;那这个值就是最近的公共祖先&#xff0c;绝对不是次近的&#xff0c;这个题就好做了。 递归法 二叉搜索树本身是有序的&#xff0c;所以不涉及到前中后序的遍历 cl…
阅读更多...
【SpringBoot】@Value 没有注入预期的值

【SpringBoot】@Value 没有注入预期的值

问题复现 在装配对象成员属性时&#xff0c;我们常常会使用 Autowired 来装配。但是&#xff0c;有时候我们也使用 Value 进行装配。不过这两种注解使用风格不同&#xff0c;使用 Autowired 一般都不会设置属性值&#xff0c;而 Value 必须指定一个字符串值&#xff0c;因为其…
阅读更多...
车联网安全 -- 数字证书到底证明了什么？

车联网安全 -- 数字证书到底证明了什么？

在车联网安全--TLS握手过程详解里面&#xff0c;我们了解到握手时&#xff0c;Server会向Client发送Server Certificate&#xff0c;用于证明自己的身份合法&#xff0c;为什么会有这一步呢&#xff1f; 我们回顾一下数字签名的过程&#xff1a; Bob将使用自己的公钥对“Hello…
阅读更多...
Elasticsarch：使用全文搜索在 ES|QL 中进行过滤 - 8.17

Elasticsarch：使用全文搜索在 ES|QL 中进行过滤 - 8.17

8.17 在 ES|QL 中引入了 match 和 qstr 函数&#xff0c;可用于执行全文过滤。本文介绍了它们的作用、使用方法、与现有文本过滤方法的区别、当前的限制以及未来的改进。 ES|QL 现在包含全文函数&#xff0c;可用于使用文本查询过滤数据。我们将回顾可用的文本过滤方法&#xf…
阅读更多...
【HTML+CSS+JS+VUE】web前端教程-31-css3新特性

【HTML+CSS+JS+VUE】web前端教程-31-css3新特性

圆角 div{width: 100px;height: 100px;background-color: saddlebrown;border-radius: 5px;}阴影 div{width: 200px;height: 100px;background-color: saddlebrown;margin: 0 auto;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);}
阅读更多...
Spring Boot 项目自定义加解密实现配置文件的加密

Spring Boot 项目自定义加解密实现配置文件的加密

在Spring Boot项目中&#xff0c; 可以结合Jasypt 快速实现对配置文件中的部分属性进行加密。 完整的介绍参照&#xff1a; Spring Boot Jasypt 实现application.yml 属性加密的快速示例 但是作为一个技术强迫症&#xff0c;总是想着从底层开始实现属性的加解密&#xff0c;…
阅读更多...
若依前后端分离项目部署（使用docker）

若依前后端分离项目部署（使用docker）

文章目录 一、搭建后端1.1 搭建流程&#xff1a;1.2 后端零件:1.2.1 mysql容器创建&#xff1a;1.2.2 redis容器创建&#xff1a;1.2.3 Dockerfile内容&#xff1a;1.2.4 构建项目镜像&#xff1a;1.2.5 创建后端容器&#xff1a; 二、前端搭建&#xff1a;2.1 搭建流程&#x…
阅读更多...
Vue2+OpenLayers使用Overlay实现点击获取当前经纬度信息（提供Gitee源码）

Vue2+OpenLayers使用Overlay实现点击获取当前经纬度信息（提供Gitee源码）

目录 一、案例截图 二、安装OpenLayers库 三、代码实现 关键参数&#xff1a; 实现思路&#xff1a; 核心代码&#xff1a; 完整代码&#xff1a; 四、Gitee源码 一、案例截图 二、安装OpenLayers库 npm install ol 三、代码实现 覆盖物&#xff08;Overlay&#xf…
阅读更多...
Oracle 终止正在执行的SQL

Oracle 终止正在执行的SQL

目录 一. 背景二. 操作简介三. 投入数据四. 效果展示 一. 背景 项目中要求进行性能测试&#xff0c;需要向指定的表中投入几百万条数据。 在数据投入的过程中发现投入的数据不对&#xff0c;需要紧急停止SQL的执行。 二. 操作简介 &#x1f449;需要DBA权限&#x1f448; ⏹…
阅读更多...
Oopsie【hack the box】

Oopsie【hack the box】

Oopsie 解题流程 文件上传 首先开启机器后&#xff0c;我们先使用 nmap -sC -SV来扫描一下IP地址&#xff1a; -sC&#xff1a;使用 Nmap 的默认脚本扫描&#xff08;通常是 NSE 脚本&#xff0c;Nmap Scripting Engine&#xff09;。这个选项会自动执行一系列常见的脚本&am…
阅读更多...
V少JS基础班之第四弹

V少JS基础班之第四弹

一、 前言 第四弹内容是操作符。 本章结束。第一个月的内容就完成了&#xff0c; 是一个节点。 下个月我们就要开始函数的学习了。 我们学习完函数之后。很多概念就可以跟大家补充说明了。 OK&#xff0c;那我们就开始本周的操作符学习 本系列为一周一更&#xff0c;计划历时6…
阅读更多...
【STM32-学习笔记-7-】USART串口通信

【STM32-学习笔记-7-】USART串口通信

文章目录 USART串口通信Ⅰ、硬件电路Ⅱ、常见的电平标准Ⅲ、串口参数及时序Ⅳ、STM32的USART简介数据帧起始位侦测数据采样波特率发生器 Ⅴ、USART函数介绍Ⅵ、USART_InitTypeDef结构体参数1、USART_BaudRate2、USART_WordLength3、USART_StopBits4、USART_Parity5、USART_Mode…
阅读更多...
Docker 安装开源的IT资产管理系统Snipe-IT

Docker 安装开源的IT资产管理系统Snipe-IT

一、安装 1、创建docker-compose.yaml version: 3services:snipeit:container_name: snipeitimage: snipe/snipe-it:v6.1.2restart: alwaysports:- "8000:80"volumes:- ./logs:/var/www/html/storage/logsdepends_on:- mysqlenv_file:- .env.dockernetworks:- snip…
阅读更多...
达梦8-DMSQL程序设计学习笔记1-DMSQL程序简介

达梦8-DMSQL程序设计学习笔记1-DMSQL程序简介

1、DMSQL程序简介 DMSQL程序是达梦数据库对标准SQL语言的扩展&#xff0c;是一种过程化SQL语言。在DMSQL程序中&#xff0c;包括一整套数据类型、条件结构、循环结构和异常处理结构等&#xff0c;DMSQL程序中可以执行SQL语句&#xff0c;SQL语句中也可以使用DMSQL函数。 DMSQ…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023