HTML笔记-狂神

1. 初识HTML

什么是HTML？
Hyper Text Markup Language : 超文本标记语言

  • 超文本包括：文字、图片、音频、视频、动画等

目前使用的是HTML5，使用 W3C标准

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准语言（DOM、JavaScript）

2. 网页基本元素

HTML基本结构

  • 网页头部
  • 主体部分

网页基本信息

  • DOCTYPE声明：告诉浏览器，我们要使用什么规范
  • 标签 ：网页标题
  • 标签：描述性标签，用来描述网站的一些信息
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head><meta charset="UTF-8"><!--meta一般用来做SEO--><meta name="keyboards" content="Java"><meta name="description" content="学习Java"><!--网页标题--><title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
HelloWorld
</body>
</html>

3. 网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body>
<!--1、标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6><!--2、段落标签-->
<p>
这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段这是一整段
</p>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p><!--3、换行标签-->
<!--br、hr是自闭合标签，习惯上最好加/结尾-->
第一行 <br/>
第二行
<!--4、水平线标签-->
<hr/><!--5、字体样式标签-->
粗体：<stronge>I LOVE YOU </stronge>
斜体：<em>I LOVE YOU </em><hr/><!--6、特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：<br/>
大于号：&gt;      <br/>
小于号：&lt;     <br/>
版权符号：&copy;<!--7、注释-->
</body>
</html>

4. 图像标签

常见图像格式：

JPG
GIF
PNG
BMP：位图
…
语法：

<body>
<img src="path" alt="text" title="标题" width="x" height="y">
src：图像地址
alt：图像的替代文字（找不到该图片时，才会显示）
title：鼠标悬停提示文字
width:图像宽度
height:图像高度</body>

练习：新建放置图片的目录
在这里插入图片描述

<body>
<!--src:图片地址相对地址：../   1.html文件的上一级目录           (不推荐)绝对地址：C:\Users\15642\IdeaProjects\HTML\resources\image\1.JPG
-->
<img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></body>

5. 链接标签

文本超链接：点击文本进行跳转

图像超链接：点击图片进行跳转

语法：

<!--链接标签-->
<a href="path" target="目标窗口位置">链接文本或图像</a>
href：必填 ，表示要跳转到那个页面
target:表示窗口在哪里打开，默认是当前页面打开_blank：在新的标签页打开_self:在自己的网页中打开

练习：

<body><!--文字超链接-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a><br><!--图像超链接-->
<a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500">
</a></body>

锚链接：

  • 通过# 实现页面间的跳转
  • 跳转到另一个页面指定的位置

练习：

<body><!--锚链接1.需要一个标记2.然后跳转到标记3.使用 #
-->
<!--先设置一个标记-->
<a id="top">我是顶部</a><!--图片1-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--图片2-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--图片3-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--图片4-->
<p><a href="http://www.baidu.com"><img src="../resources/image/1.JPG" alt="顶上战争" title="路飞VS三大将" width="889" height="500"></a>
</p>
<!--也可以跳转到另一个页面的指定位置 : href="2.html#top"-->
<a href="#top">跳转到顶部</a></body>

功能性链接

<!--邮件链接：mailto-->
<a href="mailto:156420xxxx@qq.com">点击联系我！</a>

6. 行内元素和块元素

块元素

  • 无论内容多少，该元素独占一行
  • p标签、h1-h6…

行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排一行
  • a 标签、strong 标签、em 标签…

7. 列表

列表的分类：

  • 有序列表
  • 无序列表
  • 自定义列表
<body><!--有序列表-->
<ol><li>Java</li><li>python</li><li>运维</li>
</ol>
<!--无序列表-->
<ul><li>Java</li><li>python</li><li>运维</li>
</ul>
<!--自定义列表dl：标签dt:列表名称dd：列表内容
-->
<dl><dt>学科</dt><dd>Java</dd><dd>python</dd><dd>运维</dd><dt>位置</dt><dd>北京</dd><dd>珠海</dd>
</dl></body>

效果：
在这里插入图片描述

8. 表格

为什么使用表格？

  • 简单通用
  • 结构稳定

基本结构：

  • 单元格
  • 行 tr
  • 列 td
  • 跨行 rowspan
  • 跨列 colspan
<body>
<table border="1px"><!--加个边框--><tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr></table></body>

效果：
在这里插入图片描述

<table border="1px"><!--加个边框--><tr><!--让这个单元格跨两列--><td colspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><!--让这个单元格跨两行--><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-2</td><td>3-3</td><td>3-4</td></tr></table>

效果：
在这里插入图片描述

9. 媒体元素

视频元素：video

音频元素：audio

<!--媒体元素
视频：controls:滚动条autoplay：自动播放
-->
<video src="../resources/video/4.mp4" controls autoplay></video><audio src="../resources/audio/萤火虫和你.mp3" controls></audio>

10. 页面结构分析

在这里插入图片描述

<body>
<header><h2>网页头部</h2>
</header><section><h2>网页主体部分</h2>
</section><footer><h2>网页脚部</h2>
</footer>
</body>

11. iframe内联框架

语法：

<iframe src="path" frameborder="0" name="mainFrame"></iframe>引用页面地址                 框架标示名

<body>
<!--iframe内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&bvid=BV12J41137hu&cid=118499718&page=1"scrolling="no"border="0"frameborder="no"framespacing="0"allowfullscreen="true">
</iframe><iframe src="https://www.bilibili.com/" frameborder="1px" name="mainFrame" width="400px" height="100px"></iframe><!--通过a标签往iframe里加东西-->
<iframe src="" frameborder="1px" name="hello" width="400px" height="300px"></iframe>
<!--通过target属性绑定指定的iframe-->
<a href="https://www.bilibili.com/" target="hello">点击我跳转到B站</a></body>

12. 初识表单post和get提交

表单语法：

<!--初识表单post和get提交method:规定如何发送表单数据，常用值：：post、getget方式提交：可以在url中看到提交的信息post方式提交：比较安全，可以传输大文件action:表示向何处发送表单数据,可以是一个网站，或者一个请求处理地址
-->
<form method="get" action="2.基本标签.html"><!--文本输入框：text--><p>姓名：<input type="text" name="username"></p><!--密码框：password--><p>密码：<input type="password" name="password"></p><!--提交--><input type="submit"><!--重置--><input type="reset">
</form>

效果：
在这里插入图片描述
表单元素格式
在这里插入图片描述

13. 文本框和单选框

单选框：

<!--单选框标签：input type="radio"value：单选框的值name：表示组，name相同为一个组，即只能选择一个
-->
<radio><!--checked表示默认选中--><input type="radio" value="boy" name="sex" checked/>男<input type="radio" value="girl" name="sex"/>女
</radio>

多选框：

<!--多选框-->
<p> 爱好：<!--checked表示默认选中--><input type="checkbox" value="sleep" name="hobby" checked>睡觉<input type="checkbox" value="book" name="hobby">看书<input type="checkbox" value="swimming" name="hobby">游泳<input type="checkbox" value="write" name="hobby">写作</p>

14. 按钮和多选框

普通按钮：

<!--按钮-->
<p> 按钮：<input type="button" name="btn1" value="点击查看">
</p>

效果：
在这里插入图片描述
图片按钮：

<input type="image" name="bt2" src="../resources/image/1.jpg"><!--可以点击提交，相当于submit-->

下拉框：

<p>国家：<select name="country"><option value="china">中国</option><option value="us">美国</option><!--selected表示默认选中--><option value="ruishi" selected>瑞士</option></select>
</p>

15. 文本域和文件域

文本域：

<!--文本域-->
<p>反馈：<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

文件域：

<!--文件域-->
<input type="file" name="files">

16. 搜索框滑块和简单验证

<!--邮件验证-->
<p> 邮箱：<input type="email" name="email">
</p><p> URL：<input type="url" name="url">
</p><p> number：<input type="number" name="number" max="100" min="0" step="10">
</p><!--滑块：-->
<p>音量：<input type="range" name="voice" min="0" max="10">
</p><!--搜索框-->
<p>搜索：<input type="search" name="search">
</p>

17. 表单的应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
<body>只读：<p>姓名：<input type="text" name="username" value="lisa" readonly></p><p>禁用：<!--disabled可以放到任何地方，无法选择"男"--><input type="radio" value="boy" name="sex" disabled/>男<input type="radio" value="girl" name="sex"/>女</p><!--隐藏域：hidden，密码框不见了，但值依然在--><p>密码：<input type="password" name="password" hidden value="123456"></p></body>

增强鼠标的可用性：

<p>增强鼠标的可用性：<br><label for="mark">你点我试试！！</label><input type="text" id="mark">
</p>

点击文字，自动跳转到对应的输入框
在这里插入图片描述

18. 表单初级验证

思考：

  • 减轻服务器的压力
  • 安全性

常用方式：

  • placeholder 提示信息
  • required 元素不能为空，应用于所有的文本框中
  • pattern 正则表达式
<body><p>姓名：<input type="text" name="username" placeholder="请输入用户名"></p><p>姓名：<input type="text" name="username" placeholder="请输入用户名" required></p><p> 自定义邮箱：<input type="text" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p></body>

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

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

相关文章

Kafak - 单机/集群快速安装指北(3.x版本)

Kafak - 单机/集群快速安装指北(3.x版本)

文章目录 官方下载地址上传安装包解压安装包到指定目录修改解压包名为kafka修改config目录下的配置文件server.propertie配置环境变量其他机器同上 - 修改配置文件中的brokerid启动集群停止Kraft 方式部署集群----(不使用zookeeper) 官方下载地址 http://kafka.apache.org/dow…
阅读更多...
【ROS入门】机器人系统仿真——相关组件以及URDF集成Rviz

【ROS入门】机器人系统仿真——相关组件以及URDF集成Rviz

文章结构 相关组件URDF(Unified Robot Description Format)——创建机器人模型Gazebo——搭建仿真环境Rviz(ROS Visualization Tool)——显示机器人各种传感器感知到的环境信息 URDF集成RvizURDF相关语法robotlinkjoint URDF优化——xacro相关语法属性与算数运算宏文件包含 实操…
阅读更多...
工作：三菱伺服驱动器连接参数及其电机钢性参数配置与调整

工作：三菱伺服驱动器连接参数及其电机钢性参数配置与调整

工作&#xff1a;三菱伺服驱动器参数及电机钢性参数配置与调整 一、三菱PLC与伺服驱动器连接参数的设置 1. 伺服配置 单个JET伺服从站链接侧占用点数:Rx/Ry占用64点、RWw/RWr占用32点 图中配置了22个JET伺服从站&#xff0c;占用点数:Rx/Ry占用64222048‬点、RWw/RWr占用322…
阅读更多...
基于YOLOv8模型和UA-DETRAC数据集的车辆目标检测系统（PyTorch+Pyside6+YOLOv8模型）

基于YOLOv8模型和UA-DETRAC数据集的车辆目标检测系统（PyTorch+Pyside6+YOLOv8模型）

摘要&#xff1a;基于YOLOv8模型和UA-DETRAC数据集的车辆目标检测系统可用于日常生活中检测与定位汽车&#xff08;car&#xff09;、公共汽车&#xff08;bus&#xff09;、面包车&#xff08;vans&#xff09;等目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方…
阅读更多...
金融行业网络安全保护与三级等保合规实施方案

金融行业网络安全保护与三级等保合规实施方案

金融行业网络安全保护与三级等保合规实施方案旨在帮助金融机构实施符合三级等保标准的网络安全保护措施。以下是一个基本的实施方案概述&#xff1a; 评估和规划&#xff1a; 进行风险评估&#xff1a;评估网络系统的风险&#xff0c;确定安全威胁、弱点和潜在风险。 确定等级…
阅读更多...
Node学习笔记之MongoDB

Node学习笔记之MongoDB

一、简介 1.1 Mongodb 是什么 MongoDB 是一个基于分布式文件存储的数据库&#xff0c;官方地址 MongoDB: The Developer Data Platform | MongoDB 1.2 为什么选择 Mongodb 操作语法与 JavaScript 类似&#xff0c;容易上手&#xff0c;学习成本低 二、核心概念 Mongodb 中…
阅读更多...
css 三栏布局的实现？

css 三栏布局的实现？

目录 前言 用法 代码 理解 高质量图片 1. 左侧栏 - 导航菜单 2. 中间栏 - 主要内容 3. 右侧栏 - 小部件和广告 布局的响应式设计 三栏布局在前端页面设计中是一个常见的布局方式&#xff0c;通常包含左侧、中间和右侧三个部分。这种布局方式在多种场景中都很受欢迎&am…
阅读更多...
node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）

node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）

文章目录 ⭐前言⭐初始化项目⭐配置router目录自动扫描路由⭐swagger文件配置自动生成json文件⭐封装扫描目录路由加入swagger⭐配置项目入口总文件⭐运行效果⭐总结⭐结束⭐前言 大家好，我是yma16，本文分享关于node实战——搭建带swagger接口文档的后端koa项目（node后端就…
阅读更多...
使用Redis部署 PHP 留言板应用

使用Redis部署 PHP 留言板应用

使用Redis部署 PHP 留言板应用 启动 Redis 领导者&#xff08;Leader&#xff09;启动两个 Redis 跟随者&#xff08;Follower&#xff09;公开并查看前端服务清理 启动 Redis 数据库 创建 Redis Deployment apiVersion: apps/v1 kind: Deployment metadata:name: redis-le…
阅读更多...
机器学习之ROC与AUC

机器学习之ROC与AUC

文章目录 定义ROC曲线&#xff1a;AUC&#xff08;Area Under the ROC Curve&#xff09;&#xff1a; 定义 ROC&#xff08;Receiver Operating Characteristic&#xff09;曲线和AUC&#xff08;Area Under the ROC Curve&#xff09;是用于评估二分类模型性能的重要工具。 …
阅读更多...
kuaishou web端did注册激活 学习记录

kuaishou web端did注册激活 学习记录

快手web端 did 注册激活的流程大概如下&#xff1a; 1.访问web端的接口&#xff0c;主动触发滑块&#xff0c;拿到滑块信息 2.然后滑块验证did 获取captchaToken 3.携带captchaToken访问接口 4.最后校验web端的did 是否激活 最后激活以后的效果如下&#xff1a; 经过测试&…
阅读更多...
查找算法-斐波那契查找法（Fibonacci Search）

查找算法-斐波那契查找法（Fibonacci Search）

目录 查找算法-斐波那契查找法&#xff08;Fibonacci Search&#xff09; 1、说明 2、算法分析 3、C代码 查找算法-斐波那契查找法&#xff08;Fibonacci Search&#xff09; 1、说明 斐波那契查找法又称为斐氏查找法&#xff0c;此查找法和二分法一样都是以分割范围来进…
阅读更多...
有六家机器视觉公司今年11月份初放假到明年春节后，除夕不放假看住企业不跑路，不倒闭，明年大家日子会越来越甜

有六家机器视觉公司今年11月份初放假到明年春节后，除夕不放假看住企业不跑路，不倒闭，明年大家日子会越来越甜

不幸的消息一个接着一个&#xff0c;请大家注意下面的消息 我已经收到已经有6家机器视觉公司今年11月份初放假到明年春节后&#xff0c;他们真的没有订单了&#xff0c;其中4家宣布员工可以自行寻找工作&#xff0c;今年除夕不放假是经济下行经济考量吗&#xff1f;看住企业不…
阅读更多...
如何避免阿里云对象储存OSS被盗刷

如何避免阿里云对象储存OSS被盗刷

网站app图片的云端存储离不开对象存储oss,而最难为的问题就是app做的出名了&#xff0c;少不了同行的攻击&#xff0c;包含ddos&#xff0c;cc攻击以及oss外链被盗刷&#xff01; 防盗链功能通过设置Referer白名单以及是否允许空Referer&#xff0c;限制仅白名单中的域名可以访…
阅读更多...
OpenFeign实现分析、源码解析

OpenFeign实现分析、源码解析

什么是openfeign? 是springcloud全家桶的组件之一&#xff0c;其核心作用是为Rest API提供高效简洁的rpc调用方式。 为什么只定义接口而没有实现类&#xff1f; 源码解读&#xff08;省略&#xff09; 总结&#xff1a; 源码分析&#xff1a;如何发送http请求&#xff1f; …
阅读更多...
竞赛 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

竞赛 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **深度学习卫星遥感图像检测与识别 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐…
阅读更多...
vscode json文件添加注释报错

vscode json文件添加注释报错

在vscode中创建json文件&#xff0c;想要注释一波时&#xff0c;发现报了个错&#xff1a;Comments are not permitted in JSON. (521)&#xff0c;意思是JSON中不允许注释 以下为解决方法&#xff1a; 在vscode的右下角中找到这个&#xff0c;点击 在出现的弹窗中输入json wit…
阅读更多...
selenium4 元素定位

selenium4 元素定位

selenium4 9种元素定位 ID driver.find_element(By.ID,"kw")NAME driver.find_element(By.NAME,"tj_settingicon")CLASS_NAME driver.find_element(By.CLASS_NAME,"ipt_rec")TAG_NAME driver.find_element(By.TAG_NAME,"area")LINK_T…
阅读更多...
python time 模块

python time 模块

时间的三种格式time模块中的其他函数时间三种格式之间的转化 一&#xff0c;时间的三种模块 在python中对于时间的描述存在三种格式&#xff1a;1&#xff0c;时间戳&#xff0c;2&#xff0c;时间结构体 3&#xff0c;按某种格式形式展示的字符串 1,时间戳 import time pr…
阅读更多...
cola架构：有限状态机（FSM）源码分析

cola架构：有限状态机（FSM）源码分析

目录 0. cola状态机简述 1.cola状态机使用实例 2.cola状态机源码解析 2.1 语义模型源码 2.1.1 Condition和Action接口 2.1.2 State 2.1.3 Transition接口 2.1.4 StateMachine接口 2.2 Builder模式 2.2.1 StateMachine Builder模式 2.2.2 ExternalTransitionBuilder-…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023