前端 --- 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指向第二个节点…...
【天池课堂】零基础入门数据挖掘-课程汇总
写在前面： 如果你现在很迷茫，但是又对数据挖掘感兴趣，建议先看看以下两个视频直播，两位大佬亲身讲述自己和数据挖掘的前世今生。 《如何入门数据挖掘竞赛》 鱼遇雨欲语与余。天池明星选手，武汉大学硕士，天…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN，但是…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
IP如何挑？2025年海外专线IP如何购买？
你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...