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文档的头部

<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.2  HTML中常用标签

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.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标签

<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.5  id选择器(id选择器,id所对应的值前面要加#)

<style type="text/css">

#yy {

color: red;

}

</style>

1.3.6 标签选择器

<style type="text/css">

p {

color:aquamarine; }

</style>

1.3.7  class选择器(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标签。

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/ZHH-CY/p/16593713.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!