51Testing软件测试论坛

标题: 测试猿告诉你HTML、CSS实战（一） [打印本页]

作者: 草帽路飞UU 时间: 2022-9-7 16:12
标题: 测试猿告诉你HTML、CSS实战（一）

1.1 HTML

1.1.1 研发团队分为前端开发、后端开发

前端：前后台系统页面的展示，UI交互页面

后端;无交互页面、主要是接口、数据库、服务器

前端开发(UI设计)：写页面设计，页面的排版

JavaScript(java描述语言)、PHP、html css

后端开发：复制后台业务逻辑，使用编程语言，C、C++、C#(读作C sharp)、Java、python、PHP(个人网页程序)、Go(是Google开发的一种静态强类型、编译型、并发型，并具有垃圾回收功能的编程语言)

前后端需要业务对接；

1.1.2 HTML简介

HTML，即超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML是一种标记语言(markup language)，不是一种编程语言。是一种被用作www的信息表示语言，网页制作所必备。

★“超文本”指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

★目前公司web语言主要html5（简称H5）

1.1.3 为什么学习HTML？

为后面做UI自动化进行元素定位打下基础。

1.1.4 html特点：

（1）简易性（2）可拓展性（3）平台无关性（4）通用性

1.1.5 面试题：

◆一般后端的开发语言是什么？ Java

◆Java的开发框架有哪些？

spring boot 、SSM、SSH、spring cloud、Eclipse

◆Python的开发框架有哪些？ flask、jango

1.1.6 前端开发工具： Hbuilder、vscode、webstorm

1.1.7 前端页面一般用什么框架？JavaScript

1.1.8 Hbuilder快捷键

新建一个项目：Ctrl+N 再按住W

新建一个HTML文件：Ctrl+N 再按住H

保存：Ctrl+S 删除一行：Ctrl+X 在浏览器中打开：Ctrl+R

联想出HTML页面的基本结构：编辑界面输入！+tab

注释快捷键(注释的内容不会在网页上显示出来)：

选中后CTRL+/ 取消注释：ctrl+/

1.1.9 HTML的基本格式

<!DOCTYPE html> #文档的类型为html #开始

<html> #html #文档的开始

<head> #html文档的头部

<title></title> #html 文档的标题部分（标题头）

</head> 头部的结束

<body> #html文档的体部、页面的内容都会写在body当中（体）

</body> #文档体部的结束

</html> #结尾

[attach]142636[/attach]

注意：html的基本格式如果删除了，按（！+table 键联想出html基本格式）

声明：

1.<!doctype html>声明html5文件，必须是html文档的第一行，在<html>标签之前;

2.<html>、</html>是文档开始和结束的标记,是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body);

3.<head>、</head>定义HTML文档开头部分,内容不会在浏览器窗口显示,包含文档元（meta）数据，配置信息等，是给浏览器看的;

4.<title>、</title>定义了网页标题，在浏览器标题栏显示（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）;

5.<body>、</body>之间的内容是可见的网页主体内容;

注意：中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码;有些浏览器是gbk，需手动设置为 <meta charset="gbk"

1.2 HTML中常用标签

1.2.1 标题标签

<h1>......</h1> 主体最大 <h6>......</h6> 主体最小

输入方式一：h1+table键输入方式二：<h1> +enter键

1.2.2 段落标签

P标签表示一个段落： <p>......</p>

表示空格：一个表示空一格

注意点：

[attach]142637[/attach]

表示斜体： em 表示斜体： i

表示加颜色：font color：加什么颜色

表示字体加粗：strong和b

实现换行：br 中华人民共和国<br/>万岁

拓展知识：

s：删除线 u：下划线 hr/: 分割线

1.2.3 引用图片标签

红色字体都是属性，等号后面为属性值

格式：<img src="" alt="" />

引用本地图片：<img src="img.jpg" alt="" />,需要先把图片添加到img的路径下，然后加img的路径后面可加文字鼠标移到上面可以显示

[attach]142638[/attach]

1.2.4 引用网页标签

直接引用网上图片：复制图片链接直接引用网上图片<img src="网址" alt="" />

[attach]142639[/attach]

1.2.5 引用链接标签

超链接标签:指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

1、链接标签<a href=""></a>覆盖原有页面直接在href后接网址

2、新开窗口在网址后面加target="_blank"

3、也可以加图片进行链接跳转 --图片加在a标签中间

4、死链接加#

[attach]142640[/attach]

[attach]142641[/attach]

1.2.6 列表标签

列表标签：有序列表标签、无序列表标签

[attach]142642[/attach]

有序列表标签：ol是“ordered lists”的缩写，是有序列表的意思。ol标签与li列表项配合使用可定义了一个有序列表，列表排序以数

字来显示，语法为“<ol><li>...</li></ol>”

type属性：

　　disc（实心圆点，默认值） circle（空心圆圈）

　　square（实心方块） none（无样式）

快速编写列表标签： ol>li>ol>li*3 再按tab

无序列表：ul 是 Unordered List（无序列表）的缩写。

语法：<ul><li></li></ul>

[attach]142643[/attach]

拓展知识：<dl>

</dl>

1.2.7 表格标签

表格标签：主要由行与列组成。

tr 代表HTML表格中的一行 td 代表HTML表格中的一列border 表格边框边距

cellspacing 单元格与单元格之间的间距

cellpadding 单元格与内容之间的间距。内边距（内边框和内容的距离）

height加高 width加宽，像素百分比.（最好通过css来设置长宽）

align=”center” 居中

★快速生成表格标签：

示例：快速生成3行2列的快捷键

table>tr*3>td*2 按住tab键

★表格跨行和表格跨列

colspan=""：单元格竖跨多少行，即合并几列

rowspan=""：单元格横跨多少列，即合并几行

1.2.8 表单标签

表单标签:主要用来收集用户输入信息。如:登入、注册、搜索商品等

表单标签格式： <form> </form> 开始网址：action method：get和post等 P标签是段落标签

用户名格式：text(明文) 密码格式：password（密文）

复选框：checkbox 文本框：textarea 上传文件：file

选择框：select 按钮：button 重置：reset 注册：submit

性别：radio性别格式性别是单选，单选类型是radio，注意name要加上sex，不然会出现同时可以选择2个radio的bug，加checked表示默认值

[attach]142644[/attach]

[attach]142645[/attach]

[attach]142646[/attach]

[attach]142647[/attach]

[attach]142648[/attach]

1.3 CSS层叠样式表

1.3.1 定义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对

网页各元素进行格式化。

1.3.2 层叠样式表的基本格式：

◆ 在标签中加style属性，style就是css样式代码

<p style="color: red;">深圳多测师技术有限公司</p>

◆ 在head中加style样式

在head中编写style属性，作用于所有的h3标签

h3{

color: blue;

}

</style>

[attach]142649[/attach]

◆ 通过外链的方式

例：<head>

<title>层叠样式表</title>

</head>

<body>

<h1><p>中华人民共和国万岁！！！</p></h1>

<em><h3>世界大团结万岁</h3></em>

</body>

em{

color: red;

}

注意：距离</head>越近优先级越高，相当于被覆盖

1.3.3 组合选择器

p,em{

color: aqua;}

</style>

例：<head>

<title>组合选择器</title>

.dcs29{

color: green;

}

</style>

</head>

<body>

<em>中国完全统一</em>

</body>

1.3.4 伪类选择器：

p {

color:aquamarine;

}

/*放置鼠标颜色会发生改变*/

p:hover{

color: red;

}

</style>

1.3.5 id选择器（id选择器，id所对应的值前面要加#）

#yy {

color: red;

}

</style>

1.3.6 标签选择器

p {

color:aquamarine; }

</style>

1.3.7 class选择器（class所对应的值前面要加.点）

.kk {

color: blue;

}

</style>

1.3.8 后代选择器（关联选择器）

p em{

color:blue;

}

</style>

1.3.9 字体样式

em {

color: red;

font-size: 50px; /*字体大小*/

font-family: "微软雅黑"; /*字体*/

font-style: italic; /*斜体*/

font-weight: bold /*加粗*/

}

</style>

1.3.10 文本样式

p {

text-decoration: underline; /*下划线*/

/*text-align: center; /*文本内容居中*/

/*text-align: left; /*文本左居中*/

/*text-align: right; /*文本右居中*/

line-height: 30px; /*文本内容之间的行高*/

cursor: pointer; /*实现鼠标移动到具体内容上鼠标形状变为手状*/

}

</style>

1.4 hbuilder的快捷键

Ctrl+s 保存

ctrl+z 撤销

英文感叹号+tab键联想

Ctrl+n+h 创建一个HTML文件

Ctrl+r 把HTML文件在谷歌浏览器中显示出来

h1+tab键可以联想整个开始标签和结束标签

h1+enter键可以联想整个开始标签和结束标签

Ctrl+/ 快速注释不能用#号注释

1.5 拓展:不在课程范围):div标签和span标签

★div标签和span标签两个标签没有特别的样式,<div>xxxx</div>，<span>xxx</span>这是两个标签最大的特点，可以通过CSS来控制,网站中多数是他们;

★div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现;

★span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现;

1.6 拓展：块级元素与行内元素的区别

块级元素，是另起一行开始渲染的元素，行内元素则不需另起一行。单独在网页中插入这两个元素，不会对页面产生任何的影响；这两个元素是专门为定义CSS样式而生的；

◆块级标签：p、h1--h6、hr、div

◆内联标签：b、i、u、s

★注意：

标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素;div是可以包含div的;

★p标签比较特殊，不能包含块级标签，p标签也不能包含p标签;可以试一下p标签套p标签，f12你会发现三个p标签。

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)