1.0 html(1)

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/491587.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OC 技术 苹果内购

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

RHCE 补充:判断服务状态

内容补充&#xff1a;判断服务状态 systemctl 命令 系统控制管理命令工具 常用指令 1、启动 systemctl start 程序名 若要启动多个程序名&#xff0c;使用空格隔开&#xff0c;下同 2、重启&#xff1a;类似主机先断电再启动的一个状态 systemctl restart 程序名 3、停…

Spring Cloud 八:微服务架构中的数据管理

Spring Cloud 一&#xff1a;Spring Cloud 简介 Spring Cloud 二&#xff1a;核心组件解析 Spring Cloud 三&#xff1a;API网关深入探索与实战应用 Spring Cloud 四&#xff1a;微服务治理与安全 Spring Cloud 五&#xff1a;Spring Cloud与持续集成/持续部署&#xff08;CI/C…

图论最短路径以及floyd算法的MATLAB实现

图论是数学的一个分支&#xff0c;起源于18世纪。1736年&#xff0c;数学家欧拉通过解决“哥尼斯堡七桥问题”&#xff0c;将问题抽象成点和线的关系&#xff0c;并通过理论分析得出结论&#xff0c;这个过程标志着图论的产生&#xff0c;欧拉也因此被称为“图论之父”。图论研…

机器人机械手加装SycoTec 4060 ER-S电主轴高精密铣削加工

随着科技的不断发展&#xff0c;机器人技术正逐渐渗透到各个领域&#xff0c;展现出前所未有的潜力和应用价值。作为机器人技术的核心组成部分之一&#xff0c;机器人机械手以其高精度、高效率和高稳定性的优势&#xff0c;在机械加工、装配、检测等领域中发挥着举足轻重的作用…

利用RWKV-Runner初步感受一下ai的世界

最近又听到群里的高手在讨论RWKV-Runner&#xff0c;于是没忍住&#xff0c;就想试试&#xff0c;没想到第一关就卡住了。 从群里大咖上传的RWKV-Runner_windows_x64.exe文件开始吧&#xff0c;又找了个虚拟机&#xff0c;直接放在桌面上运行一下&#xff0c;结果就跳出一堆文…

Java框架安全篇--Shiro-550漏洞

Java框架安全篇--Shiro-550漏洞 Shiro反序列化源码可以提取&#xff1a; https://codeload.github.com/apache/shiro/zip/shiro-root-1.2.4 JAVA反序列化就不说了&#xff0c;可以参考前面文章 https://blog.csdn.net/m0_63138919/article/details/136751184 初始Apache Sh…

安科瑞智慧安全用电综合解决方案

概述 智慧用电管理云平台是智慧城市建设的延伸成果&#xff0c;将电力物联网技术与云平台的大数据分析功能相结合&#xff0c;实现用电信息的可视化管理&#xff0c;可帮助用户实现安全用电&#xff0c;节约用电&#xff0c;可靠用电。平台支持web&#xff0c;app&#xff0c;微…

智慧交通(代码实现案例)

1.项目简介 目标: 了解智慧交通项目的架构知道智慧交通项目中的模块能够完成智慧交通项目的环境搭建 该项目是智慧交通项目&#xff0c;通过该项目掌握计算机视觉的方法在交通领域的相关应用&#xff0c;包括车道线检测的方法&#xff0c;多目标车辆追踪及流量统计方法&#…

1.4.1 着色器

着色器&#xff08;Shader&#xff09;是运行在GPU上的小程序&#xff0c;这些小程序为图形渲染管线的某个特定部分而运行&#xff0c;从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。 一、着色器类QOpenGLShaderProgram QOpenGLShaderProgram是Qt中对着…

thinkadmin 新版安装步骤

1.通过 Composer 安装: ( 推荐方式,默认只安装 admin 模块 ) ### 创建项目( 需要在英文目录下面执行 ) composer create-project zoujingli/thinkadmin### 进入项目根目录 cd thinkadmin### 数据库初始化并安装 ### 默认使用 Sqlite 数据库,若使用其他数据库请按第二步修…

I.MX6ULL_Linux_驱动篇(57)linux Regmap API驱动

我们在前面学习 I2C 和 SPI 驱动的时候&#xff0c;针对 I2C 和 SPI 设备寄存器的操作都是通过相关的 API 函数进行操作的。这样 Linux 内核中就会充斥着大量的重复、冗余代码&#xff0c;但是这些本质上都是对寄存器的操作&#xff0c;所以为了方便内核开发人员统一访问 I2C/S…

当当狸智能激光雕刻机 多种材质自由雕刻,轻松打造独一无二的作品

提及“激光雕刻”&#xff0c;大多数人的印象一般都是&#xff1a;笨重巨大、价格昂贵、操作复杂、使用门槛较高、调试难度大...不是普通人能够随意操作的&#xff0c;让人望尘莫及。 而小米有品上新的这台「当当狸桌面智能激光雕刻机L1」&#xff0c;将超乎你的想象&#xff…

ABAP - 上传文件模板到SMW0,并从SMW0上下载模板

upload file template to SMW0 and download the template from it 首先上传文件到tcode SMW0 选择新建后,输入文件名和描述,再选择想要上传的文件 上传完成后: 在表WWWPARAMS, WWWDATA里就会有信息存进去 然后就可以程序里写代码了: 屏幕上的效果:

界面控件DevExpress WinForms/WPF v23.2 - 电子表格支持表单控件

DevExpress WinForm拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜任…

yolov9报错:AttributeError: ‘list‘ object has no attribute ‘view‘的两种解决方法

1. 报错问题 In loss_tal.py: pred_distri, pred_scores torch.cat([xi.view(feats[0].shape[0], self.no, -1) for xi in feats], 2).split( (self.reg_max * 4, self.nc), 1) The error is as follows&#xff1a; AttributeError: list object has no attribute vie…

5.递归分治——1.递归与函数调用

程序运行 指令 指令的划分以函数为单位&#xff0c;调用函数本质上是使用call指令将pc指针移动到被调用的函数函数调用完成&#xff0c;需要使用return返回&#xff0c;本质是pc移回调用函数位置 数据 函数调用时&#xff0c;在堆栈区域要申请一片栈帧&#xff0c;函数的局…

linux用户管理命令2

useradd可以创建用户&#xff0c;其执行具体表现为在home文件夹下创建对应文件 那么有了useradd添加用户&#xff0c;自然有passwd添加用户密码 userdel可以删除用户&#xff0c;其中-r命令删除用户及其文件&#xff0c;-f命令可以强制删除用户&#xff0c;即使用户当前正在登录…

LeetCode 面试经典150题 205.同构字符串

题目&#xff1a; 给定两个字符串 s 和 t &#xff0c;判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t &#xff0c;那么这两个字符串是同构的。 每个出现的字符都应当映射到另一个字符&#xff0c;同时不改变字符的顺序。不同字符不能映射到同一个字…

【MATLAB源码-第16期】基于matlab的MSK定是同步仿真,采用gardner算法和锁相环。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 **锁相环&#xff08;PLL&#xff09;** 是一种控制系统&#xff0c;用于将一个参考信号的相位与一个输入信号的相位同步。它在许多领域中都有应用&#xff0c;如通信、无线电、音频、视频和计算机系统。锁相环通常由以下几个…