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

1.0 html（1）

news 文章来源：https://blog.csdn.net/u011583645/article/details/136946427 2025/5/23 7:38:39

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

ethers.js：sign(签名)

Signers 在ethers中Signer是以太坊账户的抽象&#xff0c;可以用来签名消息和交易&#xff0c;如将签名的交易发送到以太坊网络以执行状态更改的操作。 npm install ethers5.4.0// 引入 import { ethers } from ethers签名 this.provider new ethers.providers.Web3Provider(…...

编程日记 2024/3/27 8:23:49

使用npm i进行admin依赖安装的时候出现问题

提示&#xff1a; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/string-width failed, reason: certificate has expired 切换淘宝源到http或者更换其他国内镜像 npm config set registry http:/…...

编程日记 2024/3/27 8:21:47

【Python笔记-FastAPI】定时任务实现（APScheduler）

目录 一、常见触发器 (一) DateTrigger (二) IntervalTrigger (三) CronTrigger (四) CombinationTrigger 二、代码示例 (一) task_scheduler.py (二) client.py 三、调用说明 (一) 注册任务 (二) 查询任务 (三) 删除任务 实现功能： 定时任务注册、修改、删除、查…...

编程日记 2024/3/27 8:18:44

『Apisix入门篇』从零到一掌握Apache APISIX：架构解析与实战指南

&#x1f4e3;读完这篇文章里你能收获到&#xff1a; &#x1f310; 深入Apache APISIX架构&#xff1a; 从Nginx到OpenResty&#xff0c;再到etcd&#xff0c;一站式掌握云原生API网关的构建精髓&#xff0c;领略其层次化设计的魅力。 &#x1f50c; 核心组件全解析&#xff…...

编程日记 2024/3/27 8:15:40

easyExcel大数据量导出oom

easyExcel大数据量导出 异常信息 com.alibaba.excel.exception.ExcelGenerateException: java.lang.OutOfMemoryError: GC overhead limit exceededat com.alibaba.excel.write.ExcelBuilderImpl.fill(ExcelBuilderImpl.java:84)at com.alibaba.excel.ExcelWriter.fill(Excel…...

编程日记 2024/3/27 8:14:38

react native上传二进制图片、视频的方法

react native获取本地图片我用的react-native-image-picker&#xff0c;但是它只能获取图片路径&#xff0c;以及base64的图片&#xff0c;不能获取到binary二进制形式的。 一开始我是让后端改造接口&#xff0c;把原本传binary的改成了base64&#xff0c;可是&#xff0c;躲得…...

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

JVM之堆

堆的核心概述 一个JVM实例只存在一个堆内存&#xff0c;堆也是内存管理的核心区域。 Java堆区在JVM启动的时候即被创建&#xff0c;其空间大小也就确定了。是JVM管理的最大一块内存空间。 堆内存的大小是可以调节的。 《JVM虚拟机规范》规定&#xff0c;堆可以处于物理上不连…...

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

R语言实现——网状 Meta 分析

近来年&#xff0c;网状 Meta 分析相关研究不断涌现&#xff0c;此类研究不但能发表在国内各大核心期刊上&#xff0c;还能在SCI期刊甚至医学4大刊上看到其身影。随手在pubmed上面一搜索&#xff0c;就能得到一万多篇相关文献。俨然成为医学文献研究的“大杀器”&#xff01; P…...

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

Java项目：77 springboot母婴商城

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本课题后端使用SpringBoot Spring Cloud框架&#xff0c;前端采用html&#xff0c;JQuery&#xff0c;JS&#xff0c;DIVCSS技术进行编程&…...

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

【排序算法】深入解析快速排序（霍尔法三指针法挖坑法优化随机选key中位数法小区间法非递归版本）

文章目录 &#x1f4dd;快速排序&#x1f320;霍尔法&#x1f309;三指针法&#x1f320;挖坑法✏️优化快速排序 &#x1f320;随机选key&#x1f309;三位数取中 &#x1f320;小区间选择走插入&#xff0c;可以减少90%左右的递归&#x1f309; 快速排序改非递归版本&#x1…...

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