小白艰苦学习之路（记录学习历程——HTML篇）Day8

最新推荐文章于 2022-09-14 07:30:00 发布
最新推荐文章于 2022-09-14 07:30:00 发布
阅读量127 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TinkerHua/article/details/119677770
版权

注：Day7是Java简单算法练习，就不放上来啦。我更改了一下学习路线，所以以后的博客内容将会是HTML和Java的穿插学习！大家一起加油哦！

Day8（HTML基础）

初始HTML

什么是HTML

在这里插入图片描述

HTML发展史

在这里插入图片描述

HTML5的优势

在这里插入图片描述

W3C标准

在这里插入图片描述

常见的IDE

在这里插入图片描述

这里我用的是Hbuilde X

HTML的基本结构

在这里插入图片描述

网页基本信息

  • DOCTYPE声明：告诉浏览器，我们要使用什么规范
<!DOCTYPE html>

  • - **<title>标签**

  • - **<meta>标签**
基本标签 
<!-- DOCTYPE：告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>
<html>
	<!-- head标签代表网页头部 -->
	<head>
		<!-- meta表属性标签，用来描述我们网站的一些信息 -->
		<!-- meta一般用来做SEO -->
		<meta charset="utf-8" />
		<meta name="keywords" content="勇敢牛牛，不怕困难" />
		<meta name="description" content="来这个地方可以学习。"/>
		<!-- title网页标题 -->
		<title>我的第一个网页</title>
	</head>
	<!-- body台标网页主体 -->
	<body>
		Hello World!
	</body>
</html>

网页的基本标签

  • - 标题标签<h></h>
- 段落标签<p></p>
- 换行标签<br/>
- 水平线标签<hr/>
- 字体样式标签
  - 粗体：<b></b>
  - 斜体：<i></i>
  - 下划线：<u></u>

  • 注释和特殊符号

    - 空格：《&nbsp;》
- 大于：&gt;
- 小于：&lt;
- 版权所有：&copy;

图像标签

在这里插入图片描述

src：图片地址
相对地址（推荐使用），绝对地址
…/ 上一级目录

超链接标签及使用

链接标签

在这里插入图片描述

超链接

  • 页面间链接

    • 从一个页面链接到另一个页面 target:"_black"
    • 从一个页面自身链接到另一个页面 target:"_self"

  • 锚链接

    • 举例：用顶部进行标记；然后使用顶部进行跳转使用

  • 功能性链接

    • 邮箱链接：

      <a href="mailto:00000000@qq.com">点击联系我</a>

行内元素和块元素

  • 块元素（块标签）
    • 无论内容多少，该元素独占一行
    • （p、h1-h6）
  • 行内元素（行标签）
    • 内容撑开宽度，左右欧式行内元素的可以排在一行
    • （a.b.i…）

列表标签

  • 什么是列表

    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

  • 列表的分类

    - 无序列表<ol>    <li>  </li>    </ol>
- 有序列表<ul>    <li>  </li>    </ul>
- 定义列表<dl>    <dt>    <dd>  </dd>    </dt>    </dl>

表格标签

  • 为什么使用表格

    • 简单通用
    • 结构稳定

  • 基本标签

    • 单元格

    • 行

    • 列 clospan

    • 跨行 rowspan

    • 跨列

    • 表格 <table></table>
行 <tr></tr>

列 <td></td>
边框 border = "" (放在table里)

媒体元素

  • 视频元素 video

    • <video src = "视频路径" controls autopaly></video>

    • src：资源路径
      controls：播放进度条
      autopaly：自动播放

  • 音频元素 audio

    • <audio src = "音频路径" controls autopaly></audio>

    • src：资源路径
      controls：播放进度条
      autopaly：自动播放

页面结构分析

在这里插入图片描述

iframe内联框架

在这里插入图片描述

初识表单post和get提交

表单语法

在这里插入图片描述

<h1>注册</h1>
<!-- 表单 form
	 action：表单提交的位置，可以是网站，也可以是一个请求处理地址
	 method：提交方式 post get
			get方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效
			post方式提交：比较安全，可以传输大文件
	 -->
	 <form action="1.第一个网页.html" method="get">
		 <p>名字：<input type="text" name = "username" placeholder="请输入姓名" required /></p>
		 <p>密码：<input type="password" name="password" /></p>
		 <p>
		 	 <input type="submit" /><!-- 提交 -->
		 	 <input type="reset" /><!-- 重置 -->
		 </p>
	 </form>

表单元素格式

在这里插入图片描述

  • value = “小仙女” 初始值
  • maxlength = “10” 最长输入字符数量
  • size = “10” 本文框长度

单选框标签

注册

<!-- 单选框
			 input type = "radio"
			 value:单选框的值
			 name：表示组，若组不相同，则还是多选
			 checked:默认选中
			 -->
			 <p>性别：
				 <input type="radio" name="sex" value="boy" />男
				 <input type="radio" name="sex" value="girl" />女
			 </p>

按钮和多选框

多选框
<!-- 多选框
			 input type = "checkbox"
			 value：多选框的值
			 name：表示同一个组
			 checked:默认选中
			 -->
			 <p>性格：
			 <input type="checkbox" name="character" value="good" />好
			 <input type="checkbox" name="character" value="soft" />温柔
			 <input type="checkbox" name="character" value="strict" />严厉
			 </p>
按钮
 <!-- 按钮 button
			 button type="button" 普通按钮
			 input type="button" 普通按钮
			 input type="image" 图像按钮
			 input type="submit" 提交按钮
			 input type="reset" 重置按钮
			 -->
			 <p>按钮：
				 <button type="button" name="button1" value="按钮">按钮1</button>
				 <input type="button" name="button2" value="按钮" />
				 <input type="image" src="./img/7.png" />
			 </p>

下拉框 列表

下拉框
<!-- 下拉框 select
			 option:
			 selected:默认值
			 -->
			 <p>下拉框:
			 <select name="列表名称">
			 	<option value="选项的值">美女</option>
				<option value="选项的值" selected>仙女</option>
				<option value="选项的值">帅哥</option>
			 </select>
			 </p>
文本域
<!-- 文本域 textarea
			 cols="10" 列
			 rows="10" 行
			 -->
			 <p>反馈：
				 <textarea name = "textarea" cols="10" cols="10">
				 	文本内容
				 </textarea>
			 </p>
文件域
<!-- 文件域
			 input type="file"
			 name="files"
			 -->
			 <p>文件上传：
				 <input type="file" name="files" value="点击选择" />
			 </p>

搜索框滑块和简单验证

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

表单的应用

  • 隐藏域

    • hidden

  • 只读

    • value = “admin” readonly

  • 禁用

    • disabled

  • 增强鼠标可用性

<!-- 增强鼠标可用性 -->
			 <p>
				 <label for="mark">你来点点我</label>
				 <input type="text" id="mark" />
			 </p>

表单初级验证

  • 进行表单验证的原因
    • 安全
    • 减轻压力
  • 常用方式
    • placeholder 提示信息（提示文本框输入内容）
    • required 非空判断（表示元素不能为空）
    • patten 正则表达式

【全】最常用正则表达式！！！！_Daniel-CSDN博客

<!-- 自定义邮箱 -->
			 <p>自定义邮箱：
				 <input type="text" name="diyemile" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
			 </p>

HTML总结

在这里插入图片描述

花子柒
关注
100天精通Python丨基础知识篇 —— 01、C站最全Python标准库总结
独木不成林，单弦不成音。
06-29 51万+
❤粉丝福利：免费下载海量【PPT模板、简历模板、学习资料】https://app.yinxiang.com/fx/13ce6bbd-f36f-4e92-be53-92dd381ed729
Keras深度学习实战（34）——构建聊天机器人
盼小辉丶的博客
11-06 4979
随着自然语言处理技术的飞速发展以及互联网上对话语料的不断积累，聊天机器人取得了迅速的发展，得到了学术界的广泛关注，并且在现实世界中也得到了一定的应用。当前，聊天机器人可以分为检索式聊天机器人和生成式聊天机器人，而检索式聊天机器人由于其生成的回复流畅且计算资源消耗小，仍然是目前实际应用中聊天机器人的主要实现手段。本节中，我们将学习检索式聊天机器人的基本原理，并实现其中的关键核心技术。
Html学习记录
m0_51054563的博客
07-30 443
HTML (Hyper Text Markup Language) —— 超文本标记语言 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。 HTML 文档由嵌套的 HTML 元素构成。 HTML 提示：使用小写属性 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，
学习HTML经历记录01
m0_71324625的博客
08-31 231
web前端学习记录
日常学习记录 html篇
筱旭灬的博客
01-30 179
#html学习 注册页面案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <form action="#" method="post"...
HTML学习记录
m0_63064861的博客
08-28 150
HTML学习
html使用与学习记录
m0_70931358的博客
09-14 126
11.鱼与熊掌不可兼得，想清楚从长远看，哪个对自己更重要。 12.未雨绸缪。不要等到需要用了，才去做。凡事厚积而薄发。 13.给自己找各种理由偷懒，除了安慰自己，没啥用了。 14.环境会限制一个人的视野，你在一个等级的环境，遇见那个等级的人，处理那个等级的事，获取那个等级的资源。天外有天，人外有人。 15.优质资源永远稀缺。学校，工作，婚姻等等皆是如此。你能做的只是出色到配的上这种资源。 16.鸡汤会告诉你个
每天学习写论文——Day34 “摘要”和“总结”的区别？
01-08
问题的提出—— 别人阅读论文的核心部分是——摘要 引言 和 结论/总结 ，对应的英文是 abstract introduction conclusion~ 我觉得摘要就是要概括整篇文章的主要内容，它在论文中的作用就好比人求职时的简历。 摘要是...
毕业设计——基于监督学习的web入侵检测系统（0day收集器）.zip
07-15
毕业设计——基于监督学习的web入侵检测系统（0day收集器）
Keras深度学习实战（25）——使用skip-gram和CBOW模型构建单词向量
盼小辉丶的博客
09-14 4526
在学习了如何从零开始构建了一个用于计算单词向量的模型之后，我们在本节介绍了如何使用 gensim 库构建 skip-gram 和 CBOW 模型获取单词向量，从而得到了更加准确的单词向量。最后，为了克服数据集中句子数量太少而导致的模型鲁棒性较差的问题，我们介绍了如何使用预训练的单词向量执行向量算术。
html期末作业代码网页设计——个人生活记录设计(3页) 学生网站模板
qq_524614081的博客
04-19 2683
HTML5+CSS大作业——个人生活记录设计(3页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——个人生活记录设计(3页)一、作品展示二、
经济补偿金、赔偿金的核定及劳动合同解除后双方的义务.ppt
09-14
经济补偿金、赔偿金的核定及劳动合同解除后双方的义务.ppt
配电网分布式电源和储能选址定容 以配电网总成本最低为目标函数，其中包括年运行成本，设备维护折损成本、环境成本；以系统潮流运行为约
09-14
配电网分布式电源和储能选址定容 以配电网总成本最低为目标函数，其中包括年运行成本，设备维护折损成本、环境成本；以系统潮流运行为约束条件，采用粒子群算法求解，实现光伏、风电、储能设备的规划。 这是一个使用粒子群算法进行优化的程序。下面我将对程序进行详细的分析和解释。 首先，程序开始时加载了一些数据文件，包括光伏、风电和负荷的数据。然后，定义了一些参数，如蓄电池参数、迭代次数、种群大小、速度更新参数等。 接下来，程序进行了种群的初始化。使用随机数生成种群的初始位置，并初始化速度。然后，对种群中的每个个体进行潮流计算，并计算适应度。适应度的计算包括对电压、网损等进行评估，并考虑了一些约束条件，如储能容量、光伏容量等的限制。 接下来，程序进行了迭代优化过程。在每次迭代中，根据当前的速度和位置，更新粒子的速度和位置。然后，对更新后的粒子进行潮流计算，并计算适应度。如果个体的适应度优于个体历史最佳适应度，则更新个体历史最佳适应度和位置。如果个体的适应度优于全局最佳适应度，则更新全局最佳适应度和位置。 程序通过迭代优化过程不断更新粒子的速度和位置，直到达到指定的迭代次数。最后，程序输出优化结
Cpp-halcono-pencv互相转换
09-14
Cpp_halcon_opencv互相转换 python halcon_opencv图像变量互相转换 C++ halcon 和opencv 图像变量互相转换 VS2022工程 无需配置环境即可 使用绝对路径 无需配置 无需配置 无需配置 下载即可编译生成 仅限交流学习使用;仅限交流学习使用;仅限交流学习使用;
××部20xx年人员裁员分流方案表.xlsx
09-14
××部20xx年人员裁员分流方案表.xlsx
『人事流程图新』会前准备工作管理流程图.docx
09-14
『人事流程图新』会前准备工作管理流程图.docx
遗传算法优化频率抽样法非零点插入_GeneA.zip
09-14
遗传算法优化频率抽样法非零点插入_GeneA
基于ssm的商会管理系统设计与实现.docx
最新发布
09-14
基于ssm的商会管理系统设计与实现.docx
MATLAB的贪吃蛇系统GUI设计.zip
09-14
vscode
Python学习：Json与Csv数据存储实战——爬虫Day12
在本篇关于爬虫学习的文章中，主要关注的是数据存储技术中的JSON和CSV格式，以及如何在Python中处理这两种常见的数据交换格式。文章从JSON的定义和特点开始讲解，指出JSON是一种轻量级的数据交换格式，相较于XML，其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值