【测开学习】--HTML

最新推荐文章于 2023-12-22 09:11:04 发布
最新推荐文章于 2023-12-22 09:11:04 发布
阅读量451 收藏
点赞数 1
分类专栏： 测开学习 文章标签： HTML 测试工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43788952/article/details/120211281
版权
本文介绍了HTML的基础知识，包括计算机数据计量单位、二进制、计算机组成部分、五大浏览器等。详细讲解了HTML的骨架标签，如标题、段落、超链接、图片等，并探讨了网站的访问过程，包括URL、HTTP协议、DNS解析和客户端与服务器端的概念。此外，还阐述了HTML表单元素的使用，如input、select和textarea。
摘要由CSDN通过智能技术生成

【测开学习】--HTML

计算机数据计量单位

1B（字节：bytes ） = 8b（比特：bit 位，人为规定的最小计量单位 ）
1KB = 1024B
1MB（兆） = 1024KB
1GB = 1024MB
1TB = 1024GB
1PB = 1024TB
作业：
1、换算10MB =10240 KB
2、换算1GB =1024 MB
3、换算10GB =10240 MB

二进制中0和1

二进制是一种数学进制，只有0和1二个基数，计算机底层里用到的就是二进制。
高电位、高电压1、逻辑真true，低电位、低电压、0、逻辑假false

计算机组成部分

计算机硬件组成：
1.输入设备：给计算机提供数据。例如：键盘 鼠标…
2.输出设备：将计算机处理后的数据展示出来。例如：屏幕 音响…
3.计算器+控制器： 中央处理器( cpu )
4.存储器：分为内存和外存，对数据进行管理
在这里插入图片描述
计算机软件组成：
计算机软件系统由操作系统软件+应用软件组成。

常见的操作系统软件：
1.图形化桌面操作系统软件：Windows、MacOS、Linux
2. 移动设备操作系统：Android( 底层也是一款小型的Linux )、 iOS等
3. 服务器操作系统：Linux(开源、稳定、免费) 、windows server(微软，收费)
4. 嵌入式操作系统：Linux–pda、各种盒子

五大浏览器

IE、谷歌、火狐、欧朋、苹果
内核：核心技术
在这里插入图片描述

JPG PNG GIF格式特点

  1. .jpg: 颜色信息比较丰富的一种图片格式
  2. .png: 可以支持透明的一种图片格式
  3. .gif: 支持动图，占用体积小，色彩表现力不如前两者

DOS命令

DOS命令：计算机术语，是指DOS操作系统的命令，是一种面向磁盘的操作命令，主要包括目录操作类命令、磁盘操作类命令、文件操作类命令和其它命令；DOS命令需要在DOS窗口中进行操作。
常用DOS命令：
1、ping 网址 查看当前电脑和目标电脑之间的网络连接情况（ms代表毫秒，1000ms毫秒 = 1s秒）
2、ipconfig -all 查看当前电脑的网卡信息
3、切换盘符： 盘符名: 注意：符号是冒号，必须是英文状态
4、dir 查看当前目录结构，用列表展示出来
5、上下键：快速翻看之前写过的命令
6、cd 目录/文件夹 切换到这个目录/文件夹中
7、cd … 返回上一级目录/文件夹
8、cd / 返回当前盘符的根目录/根文件夹

网站的访问过程

URL：统一资源定位符，常说的网页网址
URL格式： 协议://主机地址/路径
HTTP协议：超文本传输协议，规定了浏览器和服务器之间通信的规则
域名：又称网域，好处是方便记忆
IP地址：每台电脑连上互联网都会被分配到一个不重复的ip地址数字串，好像门牌号一样
所有的域名有一个相对应的IP地址，并且可以把URL中域名替换成IP地址
理解：
https://www.baidu.com/ 等同于URL
www.baidu.com 等同于域名
180.101.49.11 等同于URL中域名替换为IP地址
在这里插入图片描述
DNS：域名系统，用于把域名转换为对应的IP地址。域名解析就是由域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。
hosts：电脑中的一个文件而已，这个文件中的内容是ip地址和域名之间的对应关系的表，当输入网址的时候，优先查看hosts中有无对应内容，有就打开自己电脑的中的数据，没有才会去互联网上去查找数据
hosts文件位置： C:\Windows\System32\drivers\etc

客户端和服务器端

客户端（Client）：又称为用户端，是指与服务器相对应，为客户提供服务的程序。比如：用户使用的浏览器、桌面应用程序、APP等。
服务器端（Server）：是指网络中能对其它机器提供某些服务的计算机系统。
HTTP请求：客户端向服务器端发送基于HTTP协议的请求
HTTP响应：服务器对客户端对请求做出的反应，返回客户端所需要的数据
在这里插入图片描述

网站的访问过程

  1. 在浏览器中输入URL
  2. 需要通过解析，去找到相应的IP
  3. 查找IP首先会从本地的hosts文件开始，如果找不到则去DNS服务器查找
  4. 如果DNS帮我们找到了目标的IP，我们先发送一个测试的请求，通过之后再发送正式请求
  5. 服务器接收到正式的请求之后，它还需要进行验证。如果验证通过，则去帮我们找到当次请求想要的文件
  6. 服务器开始处理我们的想要的文件，在这个过程中有可能会用到数据库中的数据
  7. 当服务器将文件处理毕之后再通过http协议还给浏览器，此时浏览器就用自已的渲染引擎来进行渲染展示

HTML简介

  1. HTML 是用来描述网页的一种语言。
  2. HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  3. HTML 不是一种编程语言，而是一种标记语言 (markup language) ，标记语言是一套标记标签 (markup tag)
  4. HTML 使用标签来描述网页

HTML骨架标签

<!DOCTYPE html>  
<!--用于声明当前的文档类型是html-->
<html>
	<!--根标签-->
	<head>
		<!--网页的头部-->
		<meta charset="UTF-8">
		<!--定义网页的编码标准,国际编码-->
		<title>成长</title>
		<!--网页标题标签-->
	</head>
	<body>
		<!--网页主体标签-->
	</body>
</html>

基本的HTML标签

HTML标题：h1到h6分六级，依次减小效果，每个标题都是独占一行空间

	<h1>成长Growth</h1>
	<h2>挫折setback</h2>
	<h3>勇气courage</h3>
	<h4>友情friendship</h4>
	<h5>爱情love</h5>
	<h6>成功win</h6>

在这里插入图片描述

HTML段落：P标签定义–标签语义化

<p>岁月总叫人成长,却从不指明方向</p>
	<p>人之所以痛苦，在于追求错误的东西</p>

在这里插入图片描述

HTML超链接：通过 a 标签进行定义的，在 href 属性中指定链接的地址。

<!--打开线上的网站: href属性对应的属性值应该设置成带有http://-->
	♥&nbsp;&nbsp;&nbsp;<a href="http://www.baidu.com">进入幸福世界</a>
	<!--打开本地的页面,只需要把目标文件和当前文件放在同一个目录中，在href属性中写目标文件的名字即可-->
	<br />
	☞&nbsp;&nbsp;&nbsp;<a href="two.html">进入遗忘时空</a>
	<!--新窗口打开链接：默认超链接都是在当前窗口打开，如果想在新窗口打开，需要添加target属性-->
	<br />
	❀&nbsp;&nbsp;&nbsp;<a href="two.html" target="_blank">跳转至遗忘时空</a>
	<!--空链接：暂时不知道点击之后跳转到哪里，使用空链接占位,当知道具体要跳转的位置后，再回来更改即可-->
	<br />
	🚀&nbsp;&nbsp;&nbsp;<a href="#">准备穿越</a>

在这里插入图片描述

HTML图片：通过 img 标签进行定义

	<img src="街道.jpg" width="1000" height="500" title="别挨着我!!!" alt="暗夜的写字楼"/>
	<!--
		1. src：用来指定当前想要引入的图片位置，也叫路径 
		2. title：用来定义鼠标悬停到图片上方时的提示文字
		3. alt：当图片由于某些原因无法正常加载显示的时候，才会显示 alt 里的文字
		4. width：用来定义图片的宽度 
		5. height：用来定义图片的高度 
		6. 如果只设置宽度或高度中的一个，另外的一个就会按着原图的比例自动缩放
	-->

HTML音频标签：audio，video

<audio src="留有声 - 寂寞沙洲冷.mp3" controls="controls"></audio>
<br />
<video src="视频.mp4" width="1000" controls="controls"></video>

HTML布局标签：当没有任何语义的时候，就可以使用div或span来进行内容的包裹，目的是后期css代码可以找到对应标签中的内容来设置样式

div：块级元素；独占一行
span：是内联元素，可用作文本的容器，该元素也没有特定的含义；可以一行放置多个

	<div>成长</div>
	<div>挫折</div>
	<div>勇气</div>
	<span>友情</span>
	<span>爱情</span>
	<span>成功</span>

在这里插入图片描述
HTML文字标签：
b和strong都可以实现加粗效果，后者有特别强调语义
i和em都可以实现倾斜效果，后者有一般强调语义
s和del都可以实现删除线效果，前者即将被后者替代(W3C联盟组织：指定语法规则)
在这里插入图片描述

	<div><b>成长</b></div>
	<div><strong>挫折</strong></div>
	<div><i>勇气</i></div>
	<span><em>友情</em></span>
	<span><del>爱情</del></span>
	<span><s>成功</s></span>

HTML表单标签

表单就是在web网页上用来收集用户输入数据，并将数据提交到后台的一个HTML代码段；表单可以包含许多不同类型的表单元素，比如：输入框、单选框、复选框、提交按钮等等

form标签：所有的表单元素必须要放在一个form标签中，表单标签里面就是所有用户填写的表单数据

<form action="" method="get">	
		<!--
		action：把表单数据提交给哪一个后台程序去处理		
		method：传递数据时候的方式方法，post代表隐式提交数据；get明文传送数据
		-->
</form>

input标签的type类型：
type=“text” 普通的输入框
type=”password” 密码框
type=“radio” 单选框
注：在一组单选按钮中，同时只能选中其中的一个；name的属性值相同，即为一组元素
type=“checkbox” 多选框、复选框
checked=“checked” 此属性可以表达默认选中状态

<!--文本输入标签：提供文本输入功能，并且是单行输入-->
	收获爱情的人：<input type="text" placeholder="请输入姓名"  />
	<br />
	<!--密码输入标签：输入的内容会被做掩码处理，一般显示为星号或实心圆-->
	<!--autofocus="autofocus" 代表光标优先显示-->
	开启爱情密钥：<input type="password" placeholder="请输入密钥" autofocus="autofocus"/>
	<br />
	<input type="radio" name="sex" id="run"  />
	<!--点击字体即可来回切换-->
	<label for="run">牵手奔跑</label>
	<input type="radio" name="sex" id="abandon" checked="checked"  />
	<label for="abandon">转身离去</label>
	<br />
	<!--多选框-->
	<input type="checkbox" id="11" />
	<label for="11">坚强再来</label>
	<input type="checkbox" id="22" />
	<label for="22">妥协投降</label>
	<input type="checkbox" id="33" />
	<label for="33">越挫越勇</label>
	<br />

在这里插入图片描述

select元素定义下拉列表 ；option元素定义下拉列表的选项
selected=“selected” 下拉菜单的默认选中
textarea文本域标签：可以输入多行文本内容
按钮标签：
type=“button” 普通按钮，需要js配合才能实现其它效果
type=“reset” 重置按钮，点击后可以让表单数据恢复默认值
type=“submit” 提交按钮，点击后可以让表单提交给指定后台处理
value属性设置按钮身上的文字

<!--下拉框-->
	行进的方向：
	<select name="">
		<option value="">大海</option>
		<option value="">岛屿</option>
		<option value="" selected="selected">天空</option>
	</select>
	<br />
	<!--可拖拽禁用-->
		<style type="text/css">
			textarea{resize: none;}
		</style>
	梦想：
	<!--row行(宽) col列(长)-->
	<!--autofocus 光标自动锁定-->
	<textarea name="" id="" cols="20" rows="5" placeholder="有多少梦想?" >	
	
	</textarea>
	
	<br />
	行为一：<input type="button" value="亲你一口" />
	<br />
	行为二：<input type="reset" value="抱你一下" />
	<br />
	行为三：<input type="submit" value="拍你一下" />

在这里插入图片描述

列表标签：
无序列表：ul嵌套若干li，每个li就是一个选项
有序列表：ol嵌套若干li，每个li就是一个选项

<!--无序列表-->
	<ul>
		<li>做好自己</li>
		<li>爱好自己</li>
		<li>呵护别人</li>
	</ul>
	<!--有序列表-->
	
	<ol>
		<li>去牵手</li>
		<li>去吃饭</li>
		<li>去游玩</li>
	</ol>

在这里插入图片描述

资源路径：相对路径和绝对路径
相对路径：相对于当前html文件去找其它资源的方式：
同级查找：当前html和目标在同一级目录中；语法：直接写资源的名字即可
img src=“t1.gif” alt=""
上级查找：当前html和目标在上级目录中；语法：…/写资源的名字即可
img src="…/t1.gif" alt=""
下级查找：当前html和目标在下级目录中；语法：文件夹名/写资源的名字
img src=“tu/t1.gif” alt=""
绝对路径：资源在电脑中的具体位置：
img src="F:\测试课程\直播课03\tu2\t1.gif"

在这里插入图片描述

不合格的engineer
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GLM-4本地部署的实战教程
herosunly的博客
06-05 9万+
本文主要介绍了GLM-4-9B本地部署的实战教程，希望对学习和使用大模型的同学们有所帮助。 文章目录 1. 前言 2. 配置环境 2.1 安装虚拟环境 2.2 安装依赖库 2.3 下载模型文件 3. 运行glm-4-9b-chat
基于SDN环境下的DDoS异常攻击的检测与缓解--实验
需要远程指导仿真实验、代码有问题的，请后台私信或者关注公众号
11-14 6350
基于SDN环境下的DDoS异常攻击的检测与缓解--实验
目标检测---教你利用yolov5训练自己的目标检测模型
热门推荐
didiaopao的博客
08-29 61万+
1项目的克隆和必要的环境依赖 1.1项目的克隆 YOLOv5的代码是开源的，因此我们可以从github上克隆其源码。不得不说GitHub的确是全球最大的男性交友网站，里面的人个个都是人才，yolov5发布才一年左右的时间，YOLOv5就已经更新了5个分支了，分别是yolov5.1-yolov5.5分支。该项目就是利用的yolov5.5分支来作为讲解。 首先打开yolov5的github的https://github.com/ultralytics/yolov5/tree...
《异常检测——从经典算法到深度学习》3 基于One-Class SVM的异常检测算法
Smileyan's blog
05-26 1万+
3. 基于 One-Class SVM 的异常检测算法 此篇主要介绍以下内容： One-Class SVM 算法概述 One-Class SVM 算法应用实例 小结 3.1 One-Class SVM 算法概述 SVM (Support Vector Machines)： 支持向量机是一类按监督学习方式对数据进行二元分类的广义线性分类器，其决策边界是对学习样本求解的最大边距超平面。 —— 百度百科 One-Class SVM： One-Class SVM是一种无监督算法，它学习用于新颖性(novel
深度学习-缺陷检测
JIN JI 2013.12.24
08-23 2万+
  数据库-- GRIMA database http://dmery.ing.puc.cl/index.php/material/gdxray/ steel surface defects -- Micro surface defect database faculty.neu.edu.cn/me/songkc/vision-based_SIS_Steel.html faculty....
风尚前端学习-网页HTML引入element-ui库
03-10 5080
风尚前端学习-网页HTML引入element-ui库
深度学习&故障诊断初学者 - 学习路线
m0_47410750的博客
04-27 5万+
针对初学者，一头雾水，不知如何学习，本文给出了一个学习路线 Python学习 - 打好编程基础 https://www.bilibili.com/video/BV1vA411b7Rn?spm_id_from=333.337.search-card.all.click B站免费课程 学到P49 建议时长 2周 深度学习理论 - 浅浅理解神经网络 https://www.bilibili.com/video/BV1FT4y1E74V?p=41 建议时长 2周...............
Pytest和Allure测试框架-超详细版+实战
qq_42610167的博客
09-23 10万+
文章目录一：pytest的介绍，安装，框架结构，执行方式1，特点2，安装3， pytest的框架结构4，执行方式二：Pytest -断言、跳过及运行1，Pytest -断言、跳过及运行2，mark中的skip(跳过)3，mark中的xfail(失败)4,使用自定义标记mark只执行部分用例5,文件名类名方法执行部分用例6,-k 组合调用执行部分用例三， Pytest -fixture1.　如下： ...
[Python从零到壹] 十三.机器学习之聚类算法四万字总结全网首发（K-Means、BIRCH、树状聚类、MeanShift）
杨秀璋的专栏
07-06 1万+
欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇、大数据分析20篇、图像识别30篇、人工智能40篇、Python安全20篇、其他技巧10篇。您的关注、点赞和转发就是对秀璋最大的支持，知识无价人有情，希望
sentinel-3卫星测高学习资料整理
qq_32649321的博客
11-11 2513
无
深度学习之目标检测--Pytorch实战
需要远程指导仿真实验、代码有问题的，请后台私信或者关注公众号
01-18 8749
只需要能看懂python代码，就能最快入门深度学习---目标检测。目标检测简单的玩玩儿还行，模型调优，调参，还需要一定的数学功底。通过代码来实现卷积，池化，非线性激活，正则化，归一化，能让人减少对大量数学公式的敬畏，手写神经网络也是考研复试中上机考试的压轴题，掌握搭建神经网络和如何训练模型是需要掌握的基础的
机器学习实战----使用Python和Scikit-Learn构建简单分类器
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
12-22 6845
今天我们将学习使用Python和Scikit-Learn创建一个简单的文本分类器来识别垃圾邮件。我们将先介绍数据集，并通过可视化和数据预处理方式更好地理解数据集。接着，我们将选择一个算法并使用训练集拟合它。最后，我们将评估该分类器并使用新数据进行预测。
华为智慧城市成功案例集
08-29
华为智慧城市成功案例集
小程序-仁怀酱酒宝：酒类商城模板（源码）.zip
最新发布
08-29
小程序-仁怀酱酒宝：酒类商城模板（源码）.zip
剑雅真题G类雅思官方指南OG剑雅真题G类雅思官方指南OG
08-29
剑雅真题G类雅思官方指南OG剑雅真题G类雅思官方指南OG提取方式是百度网盘分享地址
基于微信小程序的点餐系统的设计设计与实现.docx
08-29
基于微信小程序的点餐系统的设计设计与实现.docx
lesson47-RNN原理.zip
08-29
深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT
机器学习知识教程.ppt
08-29
内容概要：本资源深入探讨了机器学习的基础概念、发展历程、学习系统的特点以及多种学习方法。通过具体的示例和算法案例，引导读者理解机器学习的核心原理和应用实践，涵盖了从机械式学习到基于解释的归纳学习等不同层次的学习策略。 适合人群：适合计算机科学、人工智能、数据科学等专业的在校学生，以及对机器学习感兴趣的研发人员和行业从业者。特别适合那些希望建立扎实机器学习理论基础并了解其应用的研究者和开发者。 能学到什么： 1. 机器学习的定义、重要性和在人工智能中的核心地位。 2. 机器学习的发展历史，包括热烈时期、冷静时期、复兴时期和蓬勃发展时期。 3. 机器学习系统的组成要素、特征和基本模型。 4. 机器学习的分类方法，包括按学习策略、知识表示方法和应用领域等。 5. 各种机器学习策略，如机械学习、传授学习、演绎学习、归纳学习、类比学习和基于解释的学习。 6. 双空间模型和变型空间法在示例学习中的应用，以及决策树算法的原理和构建过程。 阅读建议：此资源不仅涵盖了机器学习的基础理论知识，还包含了丰富的示例和练习，帮助读者更好地理解和掌握机器学习的关键概念和技术。在学习的过程中，建议读者结合实际
mt.exe
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值