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

1.0 html（1）

news 2025/11/5 22:53:12

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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/8/6 22:35:04

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/10/29 16:55:33

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/4 7:17:15

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/10/31 20:50:53

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/11/2 23:49:00

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/10/16 22:41:12

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/29 10:54:34

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/10/18 3:53:21

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2025/10/30 0:01:02

DAY 45 超大力王爱学Python

来自超大力王的友情提示&#xff1a;在用tensordoard的时候一定一定要用绝对位置&#xff0c;例如&#xff1a;tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾&#xff1a; tensorboard的发展历史和原理tens…...

编程新知 2025/11/4 13:53:57