当前位置： 首页 > article >正文

Web开发（一）HTML5

article 2025/1/15 15:29:10

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.kler.cn/a/503762.html

相关文章：

  • Android 15应用适配指南：所有应用的行为变更
  • C#，入门教程(27)——应用程序（Application）的基础知识
  • RK3568-rk809rtc休眠唤醒
  • 泛目录和泛站有什么差别
  • 探秘 JMeter （Interleave Controller）交错控制器：解锁性能测试的隐藏密码
  • MySQL批量修改数据表编码及字符集为utf8mb4
  • Elasticsearch Python 客户端是否与自由线程 Python 兼容？
  • 关于2025年智能化招聘管理系统平台发展趋势
  • 单体 vs 微服务 怎么选?
  • springboot高校教室资源管理平台
  • 2501,wtl显示html
  • 基于springboot+vue的洪涝灾害应急信息管理系统设计与实现
  • 【蓝桥杯】Python算法——快速幂
  • Python文档生成利器 - Sphinx入门指南
  • 【JVM】深入了解Java虚拟机-------内存划分、类加载机制、垃圾回收机制
  • 【Uniapp-Vue3】页面生命周期onLoad和onReady
  • 语音合成的预训练模型
  • Linux Centos中安装多个JDK并且管理
  • 基于深度学习的视觉检测小项目（十三） 资源文件的生成和调用
  • 学习进程前的简单认知-体系结构与OS
  • Qt/C++进程间通信：QSharedMemory 使用详解（附演示Demo）
  • 刷题记录 回溯算法-10：93. 复原 IP 地址
  • 如何高效使用Adobe软件的组件功能
  • OpenCV实现彩色图像的直方图均衡化
  • riscv架构下linux4.15实现early打印
  • 《零基础Go语言算法实战》【题目 4-2】使用 Go 语言实现一个模拟栈数据结构操作的类 FrequencyStack