当前位置： 首页 > news >正文

1.0 html（1）

news 2026/5/23 15:42:20

html

一、基本介绍

1、定义：html是一种超文本标记语言，也是一种标识性语言（不是编程语言）

标记：记号（绰号）

超文本：就是页面内容可以包含图片、链接，音乐，视频等素材。

 2、为什么学习html？

（1）测试页面元素，了解页面页面元素（页面是html语言编写的）

（2）进行ui自动化需用到元素定位

3、html有哪些特点？

（1）简易性

（2）可拓展性

（3）平台无关性

（4）通用性

4、什么人员使用html？

（1）前端开发：

javascript  +html+css

H5=html5（html第5版本）  互相装换成web页面和app页面

前端开发的职责： 负责页面设计，页面排版(html)

后端开发:负责后台业务逻辑，使用编程语言，前后端需要业务对接(python)

（2）测试

定位元素，实现ui自动化

 5、html查看 方式？

（1）第一种方式：

fn+f12  或f12

（2）第二种方式

浏览器中====更多工具====开发者工具

6、如何查看元素？

f12+fn====点击小箭头=====在去点击自己要查看的元素

 7、切换web和app端模式（h5）

 =====================================

二、安装工具hbilder

（1）hbilder  编译器ide工具，是一个能编写html源码工具，也是一个开发工具；

（2）html就是我们被用做www的网址

（3）目前公司用web语言就html （h5）

javascript=js（简写）

（4）安装步骤：

a、百度中下载hbuilder 

b、解压：

 c.右键快捷桌面或直接打开

 e点击图标，启动，点击暂不登录

 f.打开界面，表示安装成功

 g、先建项目，在建一个html文件，在运行

（1）新建项目，file==右键==新建项目（快捷键ctrl+n+w）

 （2）编辑项目

 新建好的项目：在js在新建html文件

 （2）新建html文件

在js===右键====新建====html文件（快捷方式 ：ctrl+n+h）

 编辑html文件

（3）html基本格式（通过！+tab键联想出来）

页面基本格式：

 ================================

三、

html快捷键：

（1）ctrl+n+w  创建项目

（2）ctrl+n+h   创建html文件

（3）ctrl+s  保存）（未保存显示*号）

（4）ctrl+r  运行

（5）ctrl+z  撤回

（6）！+tab键  联想基本格式

（7）ctrl+/  注释和取消注释

（8）ctrl+鼠标滚轮，   字体方大和缩小

 ================================

四、认识标签

1、标题标签（h1--h6）

h1是最大的标签

h6是最小的标签

输入方式：

（1）h1+tab键

（2）h2+enter键

 2、段落标签（p标签）

 3、其他标签

 （1）&nbsp 空格
（2）em 标签表示斜体
（3）i 标签表示斜体
（4）br 表示换行
（5）b 标签表示加粗
（6） strong 标签表示加粗
（7）s 标签表示删除线
（8）u 标签 表示下划线
（9）font 颜色
（10）sub下标
（11）sup上标

===================================

4、表单标签


 

图片标签：

（1）引用本地图片

a .通过打开文件所在目录，存放图片

b、通过拖拽到img中图片

c.导入图片img     加上宽度，长度

案例：<img src="../img/山水画001.jpg" alt="" / width="100" height="100">

（2）引用网上图片

a.  网上图片的链接：

打开图片，右键=====复制（图片地址）======将复制的地址黏贴到src中

img链接：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F0a2186762369x2331905615b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656398879&t=4d9915d3b0119bcb081b464d77d2fc0e

b.通过查看图片的元素获取src

通过查看的图片====点击元素====查看src

===================================

链接标签

（1）定义：从一个网页指向另一个网页的目的地，这个目标可以是一个网页，也可以是相同上的位置，还可以是图片，一个文件，一个应用程序等；

（2）四种类型：

a.新连接覆盖原连接

b、新开一个窗口

c、图片连接

d、死链接

（3）链接用a标签

案例：

<!--<a href="https://www.baidu.com/">百度</a>-->

新连接覆盖原连接

案例2：

target="_blank"

<a href="https://www.baidu.com/" target="_blank">百度</a>

详解：
target=属性
（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点
（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；
（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；
（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；
（5）target=“_search” 表示将连接画面内容，搜索区装载的文档

案例3：

<a href="https://www.duoceshi.cn/rjcs/"><img src="../img/多测师图标.png"/></a>

案例4：

死链接：

<a href="#">多测师</a>

====================================

列表标签

1、有序列表

ol  表示有序列表  （order  lists  简称ol）

修改排序内容：a，A,1

快速生成有序列表

案例：ol*2>li*3

2、无序列表

ul   表示无序：  （unordered   lists  简写：ul）

无序类型:

(1)circle  空心圆点

（2）disc 实心圆点 （默认实心点）

（3）square实心方块

快速生无序列表

案例：ul*2>li*3

========================================

表格： table

（1）认识表中的一些常用单词

border 边距

align  格式  ‘ tenter’  对齐

cellspacing  单元格与单元格的距离

cellpadding 单元格与内容的距离

wedth  宽度

height  高度

tr 表示：行

th  表示：表头

td ：表示列

（2）输入table  +回车

 （3）编辑表格

 合并行：

rowspan=‘行数’

合并列：

colspan =“行数”

 案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="10" align="center" alcellspacing="2" cellpadding="2" width="200" height="200">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td >男</td>
<td>20</td>
</tr>
<tr>
<td>王五</td>
<td colspan="2">男</td>
</tr>
</table>
</body>
</html>

================================================

表单：

表单标签格式：form
action：开始网址

 method：get和post等等
表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等
用户名格式：text （明文）
密码格式：password （密文）
性别：radio 性别格式 性别是单选，单选类型是radio，注意name要加上sex
复选框：checkbox 

文本框：textarea
上传文件：file 

下拉选择框：select
button：按钮

 reset：重置
submit：提交

案例：

==================================================

css  

层叠样式

（1）定义：css是一种用来表现html或xml等文件样式的计算机语言。

（2）css 不仅可以静态的修饰网页，还可以配合各种动态对网页元素进行格式化；

（3）层叠样式表有两种方法：

第一种：在head中加上style属性

第二种：通过外链方式

在css中新建一个css文件，在css文件中写内容

在使用link 通过外链方式实现

（1）新建css文件，并且编辑

 ===========================

（1）id选择器

在id属性值前加#

（2）class选择器

在class属性值前加.

 (3) 标签选择器

 （4）组合选择器

 （5）伪类选择器

 （6）字体样式和文本样式

 =====================

作业：

1、

分类: 教学笔记 / 教学笔记二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="" cellspacing="" cellpadding="" bgcolor="red">
            <tr>
                <th></th>
                <th>学生登记报名表</th>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="" id="" /></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="" id="" /></td>
            </tr>
            <tr>
                <td>密码确认</td>
                <td><input type="password" name="" id="" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="" value="" />男
                    <input type="radio" name="sex" id="" value="" />女
                </td>
            </tr>
            <tr>
                <td>选择科目</td>
                <td>
                    <input type="checkbox" name="" id="" value="" />html
                    <input type="checkbox" name="" id="" value="" />python
                    <input type="checkbox" name="" id="" value="" />linux
                    <input type="checkbox" name="" id="" value="" />mysql
                </td>
            </tr>
            <tr>
                <td>选择学校</td>
                <td>
                    <br />
                    <select name="" id="">
                        <option value="">浙江大学</option>
                        <option value="">清华大学</option>
                        <option value="">北京大学</option>
                        <option value="">山东大学</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>选择文件</td>
                <td><input type="file" name="" id="" value="aa" /></td>
            </tr>
            <tr>
                <td></td>
                <td  >
                    <input type="reset" name="" id="" value="" />重置
                    <input type="submit" name="" id="" value="" />提交
                </td>
            </tr>
            
        </table>
        
    </body>
</html>

相关文章：

1.0 html（1）

html 一、基本介绍 1、定义&#xff1a;html是一种超文本标记语言&#xff0c;也是一种标识性语言&#xff08;不是编程语言&#xff09; 标记&#xff1a;记号&#xff08;绰号&#xff09; 超文本&#xff1a;就是页面内容可以包含图片、链接&#xff0c;音乐&#xff0c…...

编程日记 2024/3/27 9:09:42

基于SpringBoot和Leaflet的行政区划地图掩膜效果实战

目录 前言 一、掩膜小知识 1、GIS掩膜的实现原理 2、图层掩膜流程 二、使用插件 1、leaflet-mask介绍 2、核心代码解释 三、完整实例实现 1、后台逻辑实现 2、省级行政区划查询实现 3、行政区划定位及掩膜实现 4、成果展示 总结 前言 在之前的博客提过按空间矢量…...

编程日记 2024/3/27 9:08:41

【机器学习之---数学】马尔科夫链

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 马尔科夫 1. 概念 1.1 引言 马尔可夫链在许多领域都有应用&#xff0c;包括物理学、生物学、工程学、经济学和计算机科学等。在计算机科学中&#xff0…...

编程日记 2024/3/27 9:04:36

教程3_图像的轮廓

目录 目标 1. 特征矩 2、轮廓质心 3. 轮廓面积 4. 轮廓周长 5. 轮廓近似 6. 轮廓凸包 7. 边界矩形 7.1.直角矩形 7.2. 旋转矩形 8. 最小闭合圈 9. 拟合一个椭圆 10. 拟合直线 目标 在本文中&#xff0c;我们将学习 - 如何找到轮廓的不同特征&#xff0c;例如面积&…...

编程日记 2024/3/27 9:03:35

【Linux】-Linux下的编辑器Vim的模式命令大全及其自主配置方法

目录 1.简单了解vim 2.vim的模式 2.1命令模式 2.2插入模式 2.3底行模式 3.vim各模式下的命令集 3.1正常&#xff08;命令模式下&#xff09; 3.1.1光标定位命令 3.1.2 复制粘贴 3.1.3 删除 3.1.4 撤销 3.1.5大小写转换 3.1.6替换 「R」&#xff1a;替换光标所到之处的字符&…...

编程日记 2024/3/27 9:02:33

基于SpringBoot和Vue的车辆管理系统的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的车辆管理系统的设计与实现 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&#x1f…...

编程日记 2024/3/27 9:01:31

R折线图（自备）

目录 折线图基础 创建散点和折线图 复杂折现加图例 折线图柱状图 数据处理 进行差异检验 基础绘图折线 基础绘图箱线 进行合并 双轴柱状与折线图 数据 折线图基础 创建散点和折线图 rm(list ls()) opar <-par(no.readonlyTRUE)##自带orange数据集 par(mfrowc…...

编程日记 2024/3/27 9:00:30

web学习笔记（四十五）Node.js

目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3 node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3 向文件写入指定内容 2.4 创…...

编程日记 2024/3/27 8:59:28

基于Gabor滤波器的指纹图像识别，Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…...

编程日记 2024/3/27 8:45:12

55、Qt/事件机制相关学习20240326

一、代码实现设置闹钟&#xff0c;到时间后语音提醒用户。示意图如下&#xff1a; 代码&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), speecher(new QTextToSpeech(t…...

编程日记 2024/3/27 8:42:09

Clip Converter - 视频在线下载方法

Clip Converter - 视频在线下载方法 1. Video URL to Download2. Continue3. StartReferences YT to MP4 & MP3 Converter! https://www.clipconverter.cc/ Clip Converter is a free online media conversion application, which allows you to reocord, convert and do…...

编程日记 2024/3/27 8:39:06

【No.19】蓝桥杯简单数论上|模运算|快速幂|GCD|LCM|刷题统计|RSA解密|核桃的数量(C++)

简单数论 模运算 定义&#xff1a;模运算为 a 除以 m 的余数&#xff0c;记为 a mod m&#xff0c;有 a mod m a % m模运算是大数运算中的常用操作。如果一个数太大&#xff0c;无法直接输出&#xff0c;或者不需要直接输出&#xff0c;可以把它取模后&#xff0c;缩小数值再…...

编程日记 2024/3/27 8:36:03

区块链安全之DDoS防护的重要性及其实施策略

随着区块链技术的不断发展和广泛应用&#xff0c;其安全问题也日益凸显。其中&#xff0c;分布式拒绝服务(DDoS)攻击是对区块链网络稳定性和效率构成潜在威胁的重要因素之一。本文旨在深入探讨区块链为何需要采取DDoS高防措施&#xff0c;并提出相应的防护策略。 一、区块链面…...

编程日记 2024/3/27 8:32:59

使用Spark单机版环境

在Spark单机版环境中&#xff0c;可通过多种方式进行实战操作。首先&#xff0c;可使用特定算法或数学软件计算圆周率π&#xff0c;并通过SparkPi工具验证结果。其次&#xff0c;在交互式Scala版或Python版Spark Shell中&#xff0c;可以进行简单的计算、打印九九表等操作&…...

编程日记 2024/3/27 8:30:57

【分布式】——降级熔断限流

降级&熔断&限流 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记仓库&#x1f449;https://github.com/A-BigTree/tree-learning-notes 个人主页&#x1f449;https://www.abigtree.top ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点…...

编程日记 2024/3/27 8:29:56

代码随想录刷题笔记 Day 58 | 判断子序列 No.392 | 不同的子序列 No.115

文章目录 Day 5801. 判断子序列&#xff08;No. 392&#xff09;<1> 题目<2> 题解<3> 代码 02. 不同的子序列&#xff08;No. 115&#xff09;<1> 题目<2> 题解<3> 代码 Day 58 01. 判断子序列&#xff08;No. 392&#xff09; 题目链接…...

编程日记 2024/3/27 8:28:55

【C++11】thread线程库

【C11】thread线程库 目录 【C11】thread线程库thread类的简单介绍函数指针lambda表达式常用在线程中 线程函数参数join与detach利用RAII思想来自动回收线程 原子性操作库(atomic)atomic中的load函数&#xff1a;atomic中对变量进行原子操作的一些函数 CAS(Compare-And-Swap)无…...

编程日记 2024/3/27 8:27:54

【OpenStack】创建系统(VM)实例镜像及实例创建方法

【OpenStack】创建系统(VM)实例镜像及实例创建方法 目录 【OpenStack】创建系统(VM)实例镜像及实例创建方法创建计算镜像加载基本镜像预建镜像手动实例创建cloud-init 搭救使用 `cloud-init` 配置启动实例连接到您的新实例为实例分配 Floating IP创建SSH隧道结论推荐超级课程：…...

编程日记 2024/3/27 8:26:52

灵途科技助力家电智能创新

从智能家电到个护健康&#xff0c;科技无时无刻不在刷新我们对智慧生活的认知&#xff0c;我们也从未像今天这样近距离贴近智慧生活的朴素本质——传感技术。灵途科技专注光电感知技术&#xff0c;持续为智能家电客户提供成熟的全方位感知解决方案。步入发展第八年&#xff0c;…...

编程日记 2024/3/27 8:25:51

Flask python ：logging日志功能使用

logging日志的使用 一、了解flask日志1.1、Loggers记录器1.2、Handlers 处理器1.3、Formatters 格式化器 二、使用日志2.1、官网上的一个简单的示例2.2、基本配置2.3、具体使用示例2.4、运行 三、写在最后 一、了解flask日志 日志是一种非常重要的工具&#xff0c;可以帮助开发…...

编程日记 2024/3/27 8:24:50

麻雀AI助手Akagi：免费实时分析工具，5分钟提升雀魂游戏水平 [特殊字符]️

麻雀AI助手Akagi&#xff1a;免费实时分析工具&#xff0c;5分钟提升雀魂游戏水平 &#x1f004;️ 【免费下载链接】Akagi 支持雀魂、天鳳、麻雀一番街、天月麻將&#xff0c;能夠使用自定義的AI模型實時分析對局並給出建議&#xff0c;內建Mortal AI作為示例。 Supports Majs…...

编程新知 2026/5/23 15:17:46

BurpSuiteCN-Release：解锁中文安全测试的终极利器

BurpSuiteCN-Release&#xff1a;解锁中文安全测试的终极利器 【免费下载链接】BurpSuiteCN-Release BurpSuite汉化发布 项目地址: https://gitcode.com/gh_mirrors/bu/BurpSuiteCN-Release 你是否曾经面对Burp Suite满屏的英文界面感到力不从心&#xff1f;是否因为语…...

编程新知 2026/5/23 14:57:12

3步上手UI-TARS智能助手：让AI帮你自动化电脑和浏览器任务

3步上手UI-TARS智能助手&#xff1a;让AI帮你自动化电脑和浏览器任务 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-desktop…...

编程新知 2026/5/23 14:47:37

Lindy元数据驱动自动化：如何用1个Schema定义自动生成8类分析任务+监控看板

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Lindy元数据驱动自动化&#xff1a;核心理念与架构全景 Lindy元数据驱动自动化并非传统脚本编排的增强版&#xff0c;而是一种以“元数据即契约”为哲学基础的系统性范式。其核心理念在于&#xff1a;…...

编程新知 2026/5/23 13:24:47

Runtime不是跑kernel的——它是昇腾CANN里的执行层

前言 昇腾NPU上的算子是怎么跑起来的&#xff1f;有人说"runtime就是负责跑kernel的"&#xff0c;有人说"runtime管内存分配"&#xff0c;还有人说"runtime就是CUDA runtime的对应物"。这些答案都有对的地方&#xff0c;但都没说到根子上。 Ru…...

编程新知 2026/5/23 12:51:37

构建AI模型实时反馈回路：从概念漂移到持续进化

1. 项目概述&#xff1a;当AI模型不再“一锤定音”&#xff0c;而是持续呼吸、自我校准你有没有遇到过这样的情况&#xff1a;一个花了三个月调优的推荐模型&#xff0c;上线首周点击率提升12%&#xff0c;第二周开始缓慢下滑&#xff0c;到第四周几乎回到基线水平&#xff1f;…...

编程新知 2026/5/23 12:31:05

Keil编译器数据类型详解与嵌入式开发实践

1. 变量范围查询指南&#xff1a;Keil编译器数据类型详解 作为一名嵌入式开发老手&#xff0c;我深知在Keil环境下编程时&#xff0c;准确掌握各种数据类型的取值范围是多么重要。今天就来系统梳理C51/C166/C251编译器中的数据类型范围问题&#xff0c;这些经验都是我在实际项目…...

编程新知 2026/5/23 12:26:51

3分钟零基础入门：Forza Painter如何将任何图片变为专业车辆涂装

3分钟零基础入门&#xff1a;Forza Painter如何将任何图片变为专业车辆涂装 【免费下载链接】forza-painter Import images into Forza 项目地址: https://gitcode.com/gh_mirrors/fo/forza-painter 你是否曾为《极限竞速&#xff1a;地平线》系列游戏中复杂的车辆涂装设…...

编程新知 2026/5/23 11:42:43

拒绝盲从：从“上岸村”公考笔试机构推荐谈个性化备考路径

2026 年公考竞争持续升温&#xff0c;国考报名人数再创新高&#xff0c;考生群体日趋多元&#xff0c;需求正从 “有没有课上” 转向 “课程适配性与教学实效性”。行业正告别粗放式扩张&#xff0c;精细化深耕、价值化回归、场景化适配成为新的发展主线。在此背景下&#xff0…...

编程新知 2026/5/23 6:52:55

轮式机器人里程计误差分析与精度提升实战指南

1. 项目概述&#xff1a;从轮子转动到空间定位轮式移动机器人&#xff0c;无论是工厂里的AGV小车、仓库里的分拣机器人&#xff0c;还是家用的扫地机器人&#xff0c;它们要完成自主移动&#xff0c;第一个要回答的哲学问题就是&#xff1a;“我在哪&#xff1f;” 而里程计&am…...

编程新知 2026/5/23 5:46:39