前端 --- HTML
1. HTML 结构
1.1 HTML 文件基本结构
<html><head><title>第一个html程序</title></head><body>hello world!</body>
</html>- html 标签是整个 html 文件的根标签(最顶层标签)
- head 标签中写页面的属性.
- body 标签中写的是页面上显示的内容
- title 标签中写的是页面的标题
- head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
- title 是 head 的子标签. head 是 title 的父标签.
- head 和 body 之间是兄弟关系.
标签之间的结构关系, 构成了一个 DOM 树
D: Document 文档 O: Object 对象 M: Model 模型
1.2 VsCode 中 使用 HTML 的快捷键
使用 ! + TAB 快速生成代码
<!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>Document</title>
</head>
<body></body>
</html>- <!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
- <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
- <meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
- content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).
2. HTML 常见标签
2.1 注释标签
<!-- 注释 -->
2.2 标题标签
有六个,从 h1 ~ h6,数字越大,则字体越小
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>2.3 段落标签
p标签表示一个段落
<p>第一段</p><p>第二段</p><p>第三段</p>2.4 换行标签
br 是一个单标签,不需要结束标志.<br/>是规范写法.
<p>第一段 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/>Velit delectus sint vero minus architecto, tempora in <br/>us voluptatibus quaerat nobis, veniam ea optio.</p>
| 描述 | 标记 |
|---|---|
| 加粗 | <strong>...</strong> <b>...</b> |
| 倾斜 | <em>...</em> <i>...</i> |
| 删除线 | <del>...</del> <s>...</s> |
| 下划线 | <ins>...</ins> <u>...</u> |
<strong>加粗1</strong><b>加粗2</b><em>倾斜1</em><i>倾斜2</i><del>删除线1</del><s>删除线2</s><ins>下划线1</ins><u>下划线2</u>
2.6 图片标签
img 标签 必须带有 src 属性, 表示图片的路径
img 标签的其他属性
- alt: 替换文本. 当图片不能正确显示的时候, 会显示一个替换的文字.
- title: 提示文本. 鼠标放到图片上, 就会有提示.
- width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
- border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="1.jpg"alt="hello" title="鬼灭之刃" width="1000px" hight="1300px" border="5px">
2.7 超链接标签
a 标签的属性
- href: 必须具备, 表示点击后会跳转到哪个页面.
- target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com" target="_block">baidu</a><a href="test3.html">test3</a><a href="#">###</a>2.8 表格标签
这些属性都要放到 table 标签中.
- align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
- border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
- cellpadding: 内容距离边框的距离, 默认 1 像素
- cellspacing: 单元格之间的距离. 默认为 2 像素
- width / height: 设置尺寸.
<table border="1" align="center" cellpadding='20' cellspacing='1' width='600' height='600'><tr><th>姓名</th><th>性别</th><th>成绩</th></tr><tr><td>张三</td><td>男</td><td>98</td></tr><tr><td>李四</td><td>女</td><td>97</td></tr></table>
合并单元格
- 跨行合并:
rowspan="n" - 跨列合并:
colspan="n"
<table border="1" align="center" cellpadding='20' cellspacing='1' width='600' height='600'><tr><th>姓名</th><th>性别</th><th>成绩</th></tr><tr><td>张三</td><td colspan = '2'>男</td></tr><tr><td>李四</td><td rowspan="2">女</td><td>97</td></tr><tr><td>王五</td><td>97</td></tr></table>
2.9 列表标签
<h3>无序列表</h3><ul><li>苹果</li><li>西瓜</li><li>香蕉</li></ul><h3>有序列表</h3><ol><li>星期一</li><li>星期二</li><li>星期三</li></ol><h3>自定义列表</h3><dl><dt>我的一天</dt><dd>吃饭</dd><dd>睡觉</dd><dd>打豆豆</dd></dl>
2.10 表单标签
分成两个部分:
- 表单域: 包含表单元素的区域. 重点是 form 标签.
- 表单控件: 输入框, 提交按钮等. 重点是 input 标签
form 标签
<form action="test.html">
... [form 的内容]
</form>input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
- value: input 中的默认值.
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度.
① 文本框
<form action=""><input type="text"></form>
② 密码框
<form action=""><input type="password"></form>
③ 单选框
注: 这里name属性相同,才能实现多选一
<form action=""><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</form>
④ 复选框
<form action=""><input type="checkbox"> 吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆</form>
⑤ 普通按钮
<form action=""><input type="button" value="这是一个按钮" onclick="alert('hello')"></form>
⑥ 提交按钮
<form action="http://www.baidu.com"><input type="submit" value="提交"></form>
⑦ 清空按钮
<form action="http://www.baidu.com"><input type="text"><input type="submit" value="提交"><input type="reset" value="清空"></form>
⑧ 选择文件
<form action=""><input type="file"></form>
2.11 label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
- for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label><input id="male" type="radio" name="sex">
2.12 select 标签
下拉菜单
- option 中定义 selected="selected"表示默认选中
<select><option>--请选择地址--</option><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option>广西</option><option>西藏</option></select>
2.13 textarea 标签
<textarea rows="3" cols="50"></textarea>
2.14 无语义标签: div & span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
<div><span>你好</span><span>你好</span><span>你好</span></div><div><span>中国</span><span>中国</span><span>中国</span></div>
2.15 HTML 中特殊字符
空格:
小于号: <
大于号: >
按位与: &
<h1>你好</h1><p> qeqeqwe eeqw eqeqwe </p><p>< ></p><p>&</p>
3. 综合案例
一个简易的个人简历
<!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>Document</title>
</head>
<body><h1>姓名某某某</h1><h2>基本信息</h2><img src="1.jpg" width="500" height="300"><p>求职意向: Java 开发工程师</p><p>联系电话: 157-2324-4444</p><p>邮箱: 12321312@qq.com</p><a href= "https://gitee.com/Wangzzzzzzzzzz/dashboard/projects">我的 gitee</a><br/><a href= "https://blog.csdn.net/wwzzzzzzzzzzzzz?spm=1000.2115.3001.5343">我的 博客</a><h2>教育背景</h2><ol><li>2006 ~ 2007 中国幼儿园</li><li>2007 ~ 2013 中国小学</li><li>2013 ~ 2016 中国初中</li><li>2016 ~ 2019 中国高中</li><li>2019 ~ 2023 中国大学</li></ol><h2>专业技能</h2><ul><li>熟练掌握 Java 语法</li><li>熟练掌握数据结构,例如链表,二叉树,哈希表登</li><li>熟练掌握操作系统原理,熟悉多线程编程,理解多线程安全问题</li><li>熟练掌握网络原理,熟悉网络编程,熟悉 TCP/IP 协议栈的基本原理</li><li>熟练掌握 MySQL 数据库,熟悉 SQL 语言,能够进行简单的增删改查操作,理解索引与事务的底层原理</li></ul><h2>我的项目</h2><ol><li><h3>留言墙</h3><p>开发时间: 2022年4月10日</p><p>功能介绍: <ul><li>支持留言发布</li><li>支持匿名留言</li></ul></p></li><li><h3>学习小助手</h3><p>开放时间: 2022年5月1日</p><p>功能介绍:<ul><li>支持错题检索</li><li>支持同学探讨</li></ul></p></li></ol><h2>个人评价</h2><p>在学校期间,学习优良</p>
</body>
</html>
一个简易的简历信息填写
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><table><form action=""><h1>请填写简历信息</h1><tr><td>姓名</td><td><input type="text"></td></tr><tr><td>性别</td><td><input id="male" type="radio" name="sex" checked="checked"><label for="male"><img src="male.png" width="15" height="15">男</label><input id="female" type="radio" name="sex"><label for="female"><img src="female.png" width="15" height="15">女</label></td></tr><tr><td>出生日期</td><td><select><option>--请选择年份--</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>--请选择日期--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option></select></td></tr><tr><td>就读学校</td><td><input type="text"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox" id="1"><label for="1">前端开发</label><input type="checkbox" id="2"><label for="2">后端开发</label><input type="checkbox" id="3"><label for="3">测试开发</label><input type="checkbox" id="4"><label for="4">运维开发</label></td></tr><tr><td>掌握的技能</td><td><textarea rows="3" cols="30"></textarea></td></tr><tr><td>项目经历</td><td><textarea rows="3" cols="30"></textarea></td></tr><tr><td></td><td><input type="radio" id="10"><label for="10">我已仔细阅读过公司的招聘要求</label></td></tr><tr><td></td><td><a href="http://www.baidu.com">查看我的状态</a></td></tr><tr><td></td><td><h3>请应聘者确认</h3><ul><li>以上信息真实有效</li><li>能够尽早去公司实习</li><li>能接受公司的加班文化</li></ul></td></tr><tr><td></td><td><input type="submit" value="提交"><input type="reset" value="清空"></td></tr></form></table>
</body>
</html>
相关文章：
前端 --- HTML
1. HTML 结构 1.1 HTML 文件基本结构 <html><head><title>第一个html程序</title></head><body>hello world!</body> </html> html 标签是整个 html 文件的根标签(最顶层标签)head 标签中写页面的属性.body 标签中写的是页…...
curl c++ 实现HTTP GET和POST请求
环境配置 curl //DV2020T环境下此步骤可省略 https://curl.se/download/ 笔者安装为7.85.0版本 ./configure --without-ssl make sudo make install sudo rm /usr/local/lib/curl 系统也有curl库，为防止冲突，删去编译好的curl库。 对以json数据的解析使…...
12、设计模式之代理模式（Proxy）
一、什么是代理模式 代理模式属于结构型设计模式。为其他对象提供一种代理以控制对这个对象的访问。 在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理对象可以在客户端和目标对象之间起到中介的作用。 二、分类 代理模式分为三类&#…...
springboot集成Quartz定时任务组件
文章目录 前言一、Quartz 是什么？下面是对 Java 中 Quartz 的主要概念的简单描述： 二、使用步骤总结 前言 平时开发中相信大家都经常用到定时任务吧，最近简单的就是直接使用Scheduled注解标注到方法上用注解的方式在项目运行时无法去对任务进…...
代码随想录算法训练营第38天—动态规划06 | ● 完全背包 ● *518. 零钱兑换 II ● 377. 组合总和 Ⅳ
完全背包 视频讲解：https://www.bilibili.com/video/BV1uK411o7c9 https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5%85%A8%E8%83%8C%E5%8C%85.html 题目描述：有n件物品和一个最多能…...
C语言每日一题（63）复写零
题目链接 力扣网 1089 复写零 题目描述 给你一个长度固定的整数数组 arr ，请你将该数组中出现的每个零都复写一遍，并将其余的元素向右平移。 注意：请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改，不…...
ElasticSearch聚合查询
数据准备 索引创建 PUT product {"mappings": {"properties": {"createtime": {"type": "date"},"desc": {"type": "text","fields": {"keyword": {"type": …...
【毕设级项目】基于AI技术的多功能消防机器人（完整工程资料源码）
基于AI技术的多功能消防机器人演示效果 竞赛-基于AI技术的多功能消防机器人视频演示 前言： 随着“自动化、智能化”成为数字时代发展的关键词，机器人逐步成为社会经济发展的重要主体之一，“机器换人”成为发展的全新趋势和时代潮流。在可预见…...
【一】【设计模式】类关系UML图
1. 继承（Generalization） 继承是对象间的一种层次关系，允许子类继承并扩展父类的功能。 UML线：带有空心箭头的直线，箭头指向基类（父类）。 class Parent {public void parentMethod() {System.…...
【DevOps基础篇】容器化架构基础设施监控方案
【DevOps基础篇】容器化架构基础设施监控方案 目录 【DevOps基础篇】容器化架构基础设施监控方案要监视什么不同监控系统方案比较1. Datadog2. Prometheus3. ELK（Elasticsearch、Logstash、Kibana）4. Sysdig5. 自行打造！如何选择总结推荐超级课程： Docker快速入门到精通 当…...
【QT】文件流操作(QTextStream/QDataStream)
文本流/数据流（二级制格式） 文本流 （依赖平台，不同平台可能乱码）涉及文件编码 #include <QTextStream>操作的都是基础数据类型：int float string //Image Qpoint QRect就不可以操作 需要下面的 …...
CentOS 7 devtoolset编译addressSanitizer版本失败的问题解决
在我的一个Cent OS7开发环境中，按https://yeyongjin.blog.csdn.net/article/details/134178420的方法升级GCC版本到8.3.1。 这两天，要用Google的addressSanitizer检验内存问题，加上编译参数后，却发现编译不通过。configure时直接退…...
ubuntu2004桌面系统英伟达显卡驱动安装方法
#如何查看显卡型号 lspci | grep -i vga#----output------ 01:00.0 VGA compatible controller: NVIDIA Corporation Device 1f06 (rev a1)根据 Device 后的 值 进入网站查询 pci-ids.ucw.cz/mods/PC/10de?actionhelp?helppci #根据显卡型号，下载对应系统的驱动…...
Java通过Excel批量上传数据！！！
一、首先在前端写一个上传功能。 <template><!-- 文件上传 --><el-upload class"upload-demo" drag action"" :on-change"onChange" :auto-upload"false"><el-icon class"el-icon--upload"><up…...
【PyQT/Pysider】控件背景渐变
默认渐变配色说明 background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(255, 178, 102, 255), stop:0.55 rgba(235, 148, 61, 255), stop:0.98 rgba(0, 0, 0, 255), stop:1 rgba(0, 0, 0, 0));这段样式表使用了qlineargradient函数来创建…...
ChatGPT-4 VS 文心一言4.0
在线体验 地址（含 gpt 3.5 / 4.0，文心 3.5 / 4.0）：https://chat.tool4j.com 点击访问 文心一言和ChatGPT-4都是非常强大的自然语言处理模型，它们都能够在对话系统和其他NLP应用中发挥巨大的作用。然而，它们…...
MYSQL------从概述到DQL
数据库（数据管理，数据存储的仓库） 数据库管理系统（操纵和管理数据库的大型软件） SQL是操作关系型的编程语言，是一套标准 MySQL下载安装完成以后，可以进行启动和停止操作，对于启动和停…...
MATLAB算法实战应用案例精讲-【图像处理】图像识别（基础篇）（二）
目录 数字图像处理基本知识 传统图像处理方法进行瑕疵检测 传统算法方向的选择...
Leetcode 3.12
leetcode hot 100 链表1.两两交换链表中的节点2.随机链表的复制3.排序链表 链表 1.两两交换链表中的节点 两两交换链表中的节点 1.必须要设置一个dummy (temp) 结点2.保存第二个节点3.先让第一个节点指向第三个节点4.再让第二个节点指向第一个节点5.最后让dummy指向第二个节点…...
【天池课堂】零基础入门数据挖掘-课程汇总
写在前面： 如果你现在很迷茫，但是又对数据挖掘感兴趣，建议先看看以下两个视频直播，两位大佬亲身讲述自己和数据挖掘的前世今生。 《如何入门数据挖掘竞赛》 鱼遇雨欲语与余。天池明星选手，武汉大学硕士，天…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...