14.前端html

news/2024/9/20 6:58:42/文章来源:https://www.cnblogs.com/fujintao/p/18337222

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上标

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

图片标签:

(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

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索未来之境:揭秘元宇宙(Metaverse)

在科技与想象的交界,一个名为“元宇宙”(Metaverse)的概念正逐渐从科幻走入现实,预示着人类交互与体验的全新纪元。元宇宙不仅是技术的飞跃,更是未来生活方式的蓝图,它模糊了虚拟与现实的界限,开启了无限可能。本文将深入剖析元宇宙的定义、关键技术、现有形态、应用前景…

使易语言工具展示扩展组件

版权木有,侵权不究,欢迎转载

5G CPE SC100:5G时代的旗舰级无线路由器

作为星创易联CPE无线路由器SC100的产品经理,我很高兴能够与大家分享这款产品的特点和使用体验。经过我们团队的不懈努力,SC100终于面世,它集多项领先技术于一身,定位高端市场,希望能给用户带来极致的上网体验。下面就让我从硬件规格、无线性能、接口丰富程度、指示灯设计、便携…

成品库存周转率报表(一)

一、每日库存结存到表单《历史库存信息》 生成历史库存 每日库存存储 二、报表逻辑 组织=供应链中心,仓库=成品仓,区间可选,可单独搜索某物料(1)库存数取自《历史库存信息》(2) 期初库存为起始日期的查询库存,期末库存为结束日期的查询库存(3)平均库存数量=(期初库存…

无限制报表制作,节省费用的新选择

许多企业在报表制作上投入了大量资金,使用各种收费软件,往往只能满足基本需求,且操作复杂,让人感到无比头疼。不过最近我发现之前一直在做数据大屏的山海鲸可视化,现在新增了报表功能,不仅各种功能都可以免费使用,而且不像其他一些报表软件一样会有许多限制,本人亲自体…

Tiny XSS Payloads 微型XSS代码

项目地址 GitHub: https://github.com/terjanq/Tiny-XSS-Payloads 网站地址 https://tinyxss.terjanq.me 截图 payload列表 当前有效载荷 <!-- 如果你控制URL --> <svg/onload=eval(``+URL)> <!-- 仅在反射型跨站脚本攻击(Reflected XSS)场景下有效 --> &…

CMAKE 《多模块例子》

概述生成sort\calc的静态库,并生成app1.exe app2.exe目录结构CMakeLists.txt 位置以及配置 根CMakeLists.txt cmake_minimum_required(VERSION 3.15) project(mulitiple_modules) set(CMAKE_CXX_STANDARD 17) # define variables # LIBPATH 库存储位置 set(LIBPATH ${PROJECT_…

2021-工业互联网内部预选-Crypto_crackCipher

Crypto_crackCipher 考点:RSA、共模攻击、小明文攻击 #题目 n: 3193467051524313537654449477780016781874168088948235747604366410155226384696590270906268756094936294755374972352472143574789695791249214719304367176275827392855787492563778812812523498909705462158…

使用ossfs将Bucket挂载到统信UOS系统本地目录

目录简介功能原理运行环境安装ossfs安装依赖源码下载执行脚本编译安装安装验证ECS挂载OSS配置账号访问信息创建挂载目录挂载单个bucket挂载多个bucket指定挂载bucket和路径卸载OSS 简介 对于那些需要直接读写本地文件的应用程序,ossfs 提供了一种方便的解决方案,使应用程序在…

Pixel Aligned Language Models论文阅读笔记

Motivation & Abs 近年来,大语言模型在视觉方面取得了极大的进步,但其如何完成定位任务(如word grounding等)仍然不清楚。本文旨在设计一种模型能够将一系列点/边界框作为输入或者输出。当模型接受定位信息作为输入时,可以进行以定位为condition的captioning。当生成位…

Pytorch笔记|小土堆|P1-5

Pytorch环境安装及配置 1、创建conda环境,名为pytorch conda create -n pytorch python=3.10 2、在任务管理器的性能中确认显卡,是否支持CUDA。其次,确认显卡驱动,cuda9.2支持396.26以上的驱动,可以在命令行使用 nvidia-smi 来看自己驱动是否满足要求,如果低于396.26,可…

Cortex-M3初探

关于Cortex-M3初探索目录寄存器组R0-R12:通用寄存器R13:两个堆栈指针 SPR14:连接寄存器 LRR15:程序计数寄存器 PC特殊功能寄存器xPSR寄存器PRIMASK寄存器FAULTMASK寄存器BASEPRI寄存器CONTROL寄存器操作模式与特权级别用户级切换为特权级的流程内建的嵌套向量中断控制器 NV…