14.前端html

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

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