测试猿告诉你HTML、CSS实战（一）
1.1HTML1.1.1研发团队分为前端开发、后端开发
前端：前后台系统页面的展示，UI交互页面
后端;无交互页面、主要是接口、数据库、服务器
前端开发(UI设计)：写页面设计，页面的排版
JavaScript(java描述语言)、PHP、html css
后端开发：复制后台业务逻辑，使用编程语言，C、C++、C#(读作C sharp)、Java、python、PHP(个人网页程序)、Go(是Google开发的一种静态强类型、编译型、并发型，并具有垃圾回收功能的编程语言)
前后端需要业务对接；
1.1.2HTML简介
HTML，即超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML是一种标记语言(markup language)，不是一种编程语言。是一种被用作www的信息表示语言，网页制作所必备。
★“超文本”指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
★目前公司web语言主要html5（简称H5）
1.1.3为什么学习HTML？ 为后面做UI自动化进行元素定位打下基础。
1.1.4html特点：
（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.8Hbuilder快捷键
新建一个项目：Ctrl+N 再按住W
新建一个HTML文件：Ctrl+N 再按住H
保存：Ctrl+S 删除一行：Ctrl+X 在浏览器中打开：Ctrl+R
联想出HTML页面的基本结构： 编辑界面输入 ！+tab
注释快捷键(注释的内容不会在网页上显示出来)：
选中后CTRL+/ 取消注释：ctrl+/
1.1.9HTML的基本格式<!DOCTYPE html> #文档的类型为html #开始
<html> #html #文档的开始
<head> #html文档的头部
<meta charset="UTF-8"> #html 文档的字符集格式为utf-8
<title></title> #html 文档的标题部分（标题头）
</head> 头部的结束
<body> #html文档的体部、页面的内容都会写在body当中 （体）
</body>#文档体部的结束
</html> #结尾
注意：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.2HTML中常用标签
1.2.1标题标签
<h1>......</h1>主体最大 <h6>......</h6>主体最小
输入方式一：h1+table键 输入方式二：<h1>+enter键
1.2.2段落标签
P标签表示一个段落： <p>......</p>
表示空格： 一个 表示空一格
注意点：
表示斜体： em 表示斜体： i 表示加颜色：font color：加什么颜色
<font color=“red”>百度一下</font>
表示字体加粗：strong和b
实现换行：br 中华人民共和国<br/>万岁
拓展知识：
s：删除线 u：下划线 hr/:分割线
1.2.3引用图片标签
红色字体都是属性，等号后面为属性值
格式：<img src="" alt="" />
引用本地图片：<img src="img.jpg" alt="" />,需要先把图片添加到img的路径下，然后加img的路径后面可加文字鼠标移到上面可以显示
1.2.4引用网页标签
直接引用网上图片：复制图片链接 直接引用网上图片<img src="网址" alt="" />
1.2.5引用链接标签
超链接标签:指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
1、链接标签<a href=""></a>覆盖原有页面直接在href后接网址
2、新开窗口在网址后面加target="_blank"
3、也可以加图片进行链接跳转 --图片加在a标签中间
4、死链接加#
1.2.6列表标签
列表标签：有序列表标签、无序列表标签
有序列表标签：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>
拓展知识：<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</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表示默认值
1.3CSS层叠样式表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标签
<style type="text/css">
h3{
color: blue;
}
</style>
◆ 通过外链的方式
<link rel="stylesheet" type="text/css" href="../css/test.css" />
例：<head>
<meta charset="UTF-8">
<title>层叠样式表</title>
<link rel="stylesheet" href="css/层叠样式表.css" />
</head>
<body>
<h1><p>中华人民共和国万岁！！！</p></h1>
<em><h3>世界大团结万岁</h3></em>
</body>
em{
color: red;
}
注意：距离</head>越近优先级越高，相当于被覆盖
1.3.3 组合选择器
<style type="text/css">
p,em{
color: aqua;}
</style>
例：<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.dcs29{
color: green;
}
</style>
</head>
<body>
<p class="dcs29">台湾回归</p>
<em>中国完全统一</em>
</body>
1.3.4伪类选择器：
<style type="text/css">
p {
color:aquamarine;
}
/*放置鼠标颜色会发生改变*/
p:hover{
color: red;
}
</style>
1.3.5id选择器（id选择器，id所对应的值前面要加#）
<style type="text/css">
#yy {
color: red;
}
</style>
1.3.6 标签选择器
<style type="text/css">
p {
color:aquamarine; }
</style>
1.3.7class选择器（class所对应的值前面要加.点）
<style type="text/css">
.kk {
color: blue;
}
</style>
1.3.8后代选择器（关联选择器）
<style type="text/css">
p em{
color:blue;
}
</style>
1.3.9字体样式
<style type="text/css">
em {
color: red;
font-size: 50px; /*字体大小*/
font-family: "微软雅黑"; /*字体*/
font-style: italic; /*斜体*/
font-weight: bold /*加粗*/
}
</style>
1.3.10文本样式
<style type="text/css">
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标签。
页:
[1]
