前言
开发模式
在软件的使用过程中,有两种方式:
- C/S结构:Client/Server,通过安装的程序的客户端,将数据发送给服务端,服务端会响应相应的行为。(QQ/LOL)
- 前文的登录操作,使用就是Swing/SWT/RCP
- B/S结构:Browser/Server,通过浏览器的客户端,不需要安装程序,只是需要通过访问某个地址,就可以使用响应的程序,发送信息给服务端,服务端会响应相应的行为。(WebQQ/微信)
浏览器(显示内容)
世界主流的浏览器有哪些:谷歌浏览器(Chrome-必须安装)、IE、Safari、Firefox、Opera、Edge浏览器
前端开发工具
DreamWare、WebStrom、HBuilder、Visual Studio Code、记事本
HTML入门
一、概述
HTML是一种描述网页的语言,称为超文本标记语言,(注意:它不是编程语言),所谓标记语言就是提供了一套标记标签(知道这些标签的作用)。HTML就是使用标记标签来描述网页
运行环境:在浏览器中解释执行
标签:由尖括号括起来的关键词,HTML预先已经定义好了一些我们可以使用的标签。
<元素名称开始> 显示的“元素”内容-对标签 </元素名称结束>
<元素名称/> 单标签
网页:网页是网站的构成的基本元素,一个网站是由一个或者多个网页组成,网页其实就是一个文件(超文本标记语言格式),该文件的后缀名:html/htm
- 静态网页:网站内容是预先定义好的,每个看到的网页的内容都是一样
- 动态网页:取决于用户提供的参数,例如:每个人看到的购买网站的内容都是不一样
标签的演示案例
<h1>HTML预先定义好的标签,有预先设计好的显示样式</h1>
<yf06>符合标签的定义格式,浏览器能识别了该标签,但是没有预先设置的显示样式,那么就是显示默认样式</yf06>
WEB浏览器的作用,读取HTML文件(识别),并且以网页的形式显示出它们的内容。浏览器不会显示HTML的标签,而是通过使用标签来解释页面的内容
二、HTML骨架格式
<!DOCTYPE> <!-- HTML注释:定义HTML文档类型 -->
<html> <!-- HTML文件的根标签 -->
<head> <!-- HTML文件头部信息 -->
<title>网页的标题</title>
</head>
<body>
<h1>网页显示的内容</h1>
</body>
</html>
三.标签
1.概述
HTML标签:作用所有HTML中标签的根节点,一个页面中应该只有一个,最大标签
HEAD标签:文档头部标签,可以描述文档中属性、信息(标题等)
BOYD标签:文档主体,90%以上的标签都是写在body中的
(1)标签的分类
HTML文件是由很多的标签组成, 分为单标签和对标签
<元素名称开始> 显示的“元素”内容-对标签 </元素名称结束> :<h1> 内容 </h1>
<元素名称/> 单标签 : <br/>换行
(2)标签关系
- 嵌套关系(父子关系)
<body>
<h1>网页
<yf06>显示的</yf06>内容
</h1>
</body>
- 并列关系(兄弟关系)
<head></head>
<body></body>
(3)标签属性
属性类似于特性,例如手机的颜色、尺寸、重量等等都是手机属性。标签也有属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<p align="center" title="叶凡">
遮天
</p>
<p align='right' title='苏铭'>
求魔
</p>
<p align="left">
诛仙
</p>
</body>
</html>
- 一个标签可以拥有多个属性,必须写在开始标签中,位于元素名称的后面。
- 属性之间不区分前后顺序,标签名与属性、属性与属性之间使用至少一个空格分开
- 任何标签的属性有默认值,省略该属性,那么就是使用系统预先定义好的默认值。
- 采用键值对的格式
KEY=VALUE
,等号两端不要使用空格
2.head标签
<!DOCTYPE> <!-- HTML注释:定义HTML文档类型 -->
<html> <!-- HTML文件的根标签 -->
<head> <!-- HTML文件头部信息 -->
<meta charset="utf-8"><!-- meta 提供网页的页面元信息,设置网页的编码格式 -->
<title>网页的标题</title><!-- 设置网页的标题 -->
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="style.css"><!-- 定义文档与外部资源的关系,最常见引用CSS -->
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="logo.jpg">
<!-- 设置内部样式 -->
<style type="text/css">
</style>
<!-- 引入脚本文件,个人不推荐使用 -->
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<h1>网页显示的内容</h1>
</body>
</html>
标签学习
学习的标签都是写在body网页内容中的标签
一.排版标签
- (1)标题标签(熟记)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>西游记</h1>
<h2>西游记</h2>
<h3>西游记</h3>
<h4>西游记</h4>
<h5>西游记</h5>
<h6>西游记</h6>
<h7>西游记</h7>
<h8>西游记</h8>
</body>
</html>
页面当中经常使用到标题标签,HTML一共提供了6个等级标题标签,文字加粗并且换行,依照重要性字体大小递减。
面试考试的知识点:h1标签的使用,必须要慎重,h1标签尽量少用,一般情况下h1标签都是给logo使用,页面上不要动不动出现h1标签
- (2)段落标签(熟记):
单词缩写=>paragraph,
<p></p>
- (3)水平标签(了解):
<hr/> 单标签
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题</h1>
<p>2021-04-18 09:35:14 来源: 广播站</p>
<hr/>
<p>123</p>
<p>456</p>
</body>
</html>
上述案例,当浏览器进行标签解释执行的时候,就能知道哪个是标题、哪个是段落,有助于浏览器对代码的识别性比较好,让整个网页的内容有“语义”
对比代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="font-size: 20px;font-weight: bold;">标题</div>
<span>2020-04-18 09:35:14 来源: 广播站</span>
<hr/>
<div>jqk</div>
<div>123</div>
</body>
</html>
- (4)
<div></div> <span></span>
标签(重点)
这两个标签是没有任何语义的,是我们网页的布局主要使用的标签(css+div)
二.文本格式化标签(熟记)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本格式化标签</title>
</head>
<body>
<b>遮天:加粗</b><br/>
<strong>叶凡:加粗:重中之重</strong><br/>
<hr/>
<i>医生:斜体</i><br/>
<em>天使:斜体:重要</em>
<hr/>
<del>神墓:删除线</del><br/>
<del>39.00元</del>现在<strong>28.00元</strong>
<hr/>
<u>东皇:下划线</u><br/>
<ins>东皇:下划线</ins>
<hr/>
<span>H<sub>2</sub>O<sup>2</sup></span>
<hr/>
<span>归墟<small>归墟</small><big>归墟</big></span>
</body>
</html>
三.标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<p align="center" title="叶凡">
遮天
</p>
<p align='right' title='苏铭'>
求魔
</p>
<p align="left">
诛仙
</p>
</body>
</html>
- 一个标签可以拥有多个属性,必须写在开始标签中,位于元素名称的后面。
- 属性之间不区分前后顺序,标签名与属性、属性与属性之间使用至少一个空格分开
- 任何标签的属性有默认值,省略该属性,那么就是使用系统预先定义好的默认值。
- 采用键值对的格式
KEY=VALUE
,等号两端不要使用空格
学习CSS样式,属性尽量不要使用关于样式的属性
四.图像标签<img>
(重点)
图片路径问题:
- 绝对路径
-
<img src="E:\图片\壁纸\01.jpg" width="600px" title="好漂亮" border="3">
:不能用服务器的方式打开(图片无法显示) -
<img src="网页中复制图片地址">
:实际开发使用这种带协议的绝对路径
-
- 相对路径
- 同层直接写地址
- 若图片不在同层,
<img src="../images/author.jpg">
先返回上一层
图片属性:<img src="images/author.jpg" alt="图片失败的提示信息" title="鼠标悬停时的信息" style="width: 500px;" border="10">
background-size: 100%;/*图片自适应窗口大小*/
五.超链接<a>
(重点)
<a>:anchor 锚
,语法结构如下:
<a href="访问的资源的路径" target="资源显示的目标位置">元素内容</a>
<a href="访问的资源的路径">元素内容</a>
<a href="访问的资源的路径">嵌套其他的标签(元素内容)</a>
---
死连接:点击以后没有任何反映
1.超链接的分类
- (1)外部连接:需要从协议开始写
<a href="http://www.baidu.com" id="baidu">百度一下(有协议)</a><br/>
<a href="www.baidu.com">百度一下(没有,从当前目录开始查找)</a><br/>
- (2)内部连接:可以使用相对路径或者是据对路径
<a href="path/06.图片的路径问题.html">内部链接</a><br/>
<hr/>
2.target属性
<a href="http://www.baidu.com" target="_self">默认值(_self):当前页面打开</a><br/>
<a href="http://www.163.com" target="_blank">(_blank):在新窗口打开</a><br/>
<a href="http://www.126.com" target="_parent">(_parent):在父页面打开</a><br/>
<a href="http://www.123.com" target="_top">(_top):在最顶层页面打开</a><br/>
<a href="http://www.123.com" target="abc">(自定义目标位置):显示到对应的框架内,如果没有显示在新页面</a><br/>
3.访问资源
如果浏览器识别则在浏览器中打开,不识别就会提示下载(网页的下载功能实现)
<a href="attr/123.docx">浏览器无法识别,提示下载</a><br/>
<a href="attr/author.jpg">图片浏览打开,下载到本地则右键另存为</a><br/>
<a href="attr/aaa.pdf">pdf浏览器打开,下载到本地则右键另存为</a><br/>
4.控制所有的连接的打开方式
<!-- 代码中所有涉及target属性的值全部是_self,若在标签中设置了该属性其他的的值,则后者覆盖前者
<!-- head标签内进行设置 <base target="_blank">
<head>
<base target="_self"><!-- 代码中所有涉及target属性的值全部是_self,若在标签中设置了该属性其他的的值,则后者覆盖前者
<meta charset="UTF-8">
<title>yanshi</title>
</head>
-->
<a href="http://www.baidu.com" >
<img src="images/author.jpg">
</a><br/>
<a href="http://www.163.com">163.com</a><br/>
<a href="http://www.csdn.net">CSDN</a><br/>
死连接:配合JavaScript脚本一起使用
<a href="#baidu">这个不是死链接,有请求信息</a><br/>
<a href="javascript:;" onclick="javascript:alert('叶凡')">死连接写法---1</a><br/>
<a href="javascript:void(0);" ondblclick="javascript:alert('荒')">死连接写法---2</a>
六.列表(熟记)
列表可分为有序列表、无序列表(比较多)、自定义列表几种类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<h2>有序列表演示</h2>
<ol type="A" start="6"><!-- Order list:有序列表-->
<li>叶凡</li><!-- list-->
<li>荒</li>
<li>羽皇</li>
</ol>
<h2>无序列表演示</h2>
<ul><!-- UnOrder list:有序列表-->
<li>叶凡</li><!-- list-->
<li>荒</li>
<li>羽皇</li>
</ul>
<h2>自定义列表演示</h2>
<dl>
<dt>九天十地</dt>
<dd>荒</dd>
<dd>无终</dd>
<dt>遮天</dt>
<dd>叶</dd>
<dd>无始</dd>
</dl>
</body>
</html>
列表之间可以嵌套
七.表格(熟记)
最主要的作用就是为了显示各种数据,一个标准的表格的组成部分如下(关系型数据库就是一个表格)
表格结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<table border="2" style="width: 500px">
<caption><h2>图书记录</h2></caption>
<thead><!--table head :表头 -->
<tr><!--table row :一行-->
<th>世界</th><!--列名 -->
<th>主角</th>
<th>评星</th>
<th>操作</th>
</tr>
</thead>
<tbody><!-- table body 表格主体 不写有一些浏览器会自动生成 -->
<tr>
<td>九天十地</td><!--table data :表格数据 -->
<td>荒</td>
<td>五星</td>
<td>
<a href="javascript:;">编辑</a>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr>
<td>遮天</td><!--table data :表格数据 -->
<td>叶</td>
<td>五星</td>
<td>
<a href="javascript:;">编辑</a>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr>
<td>鸿蒙宇宙</td><!--table data :表格数据 -->
<td>林</td>
<td>五星</td>
<td>
<a href="javascript:;">编辑</a>
<a href="javascript:;">删除</a>
</td>
</tr>
</tbody>
<tfoot><!-- 表底 统计使用 -->
<tr>
<td>统计</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格的一些属性:对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<table border="2" style="width: 500px">
<thead>
<tr>
<th>世界</th>
<th>主角</th>
</tr>
</thead>
<tbody>
<tr height="300px" align="middle">
<td style="width: 300px">九天十地</td><!--水平居中 -->
<td valign="top">荒</td><!--水平居中 垂直居顶-->
</tr>
<tr valign="button">
<td >遮天</td><!--垂直居底 -->
<td align="right">叶</td><!--水平居右 垂直居底-->
</tr>
</tbody>
</table>
</body>
</html>
外边距:margin 内边距:padding
合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<table border="1" style="width: 500px;height: 300px" cellspacing="0"><!--cellspacing:单元格之间的距离 -->
<tbody>
<tr >
<td rowspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td><!-- 第2个 -->
<td></td>
</tr>
<tr >
<td></td>
<td colspan="2" rowspan="2"></td>
<td></td>
</tr>
<tr >
<td></td>
<td rowspan="2"></td>
</tr>
<tr >
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
八.表单(掌握)
表单的主要主要就是为了收集数据
A.表单标签和属性
<h1>表单标签属性</h1>
<form
action="处理表单数据的程序"
method="get|post"
enctype=""
target="提交目标位置,很少使用">
</form>
action="处理表单数据的程序"
enctype : application/x-www-form-urlencoded(默认值)
multipart/form-data : 将表单的数据转换二进制形式传输,一般针对于文件上传POST请求
method: GET:默认值,在HTTP协议下,默认传输数据的量级在1KB左右,数据会显示在地址栏
POST: 在Http协议下,默认传输数据的量级在1KB以上(大),数据不会显示在地址栏,但是我们通过工具也可以看到
target: 跟超链接的一样,很少使用
公共的属性:id/name
B.表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<h1>INPUT标签type属性</h1>
文本框:<input type="text"><br/>
密码框:<input type="password"><br/>
单选框:<input type="radio"><br/>
复选框:<input type="checkbox"><br/>
文件域:<input type="file"><br/>
多文件域:<input type="file" multiple><br/>
隐藏域:<input type="hidden"><br/>
<h1>按钮系列</h1>
自动提交按钮:<input type="submit"><br/>
等价写法:<button>提交按钮</button><br/>
重置按钮:<input type="reset"><br/>
等价写法:<button type="reset">重置按钮</button><br/>
普通按钮:<input type="button" value="普通按钮"><br/>
等价写法:<button type="button">普通按钮</button><br/>
<h1>其他控件</h1>
下拉列表:
<select>
<option>长春</option>
<option>吉林</option>
<option>白山</option>
</select><br/>
多选列表:
<select multiple>
<option>长春</option>
<option>吉林</option>
<option>白山</option>
</select><br/>
文本域:
<textarea rows="10" cols="40"></textarea><!--rows:行数 cols:宽度-->
</body>
</html>
新增控件
<h1>INPUT标签type属性</h1>
日期框:<input type="date"><br/>
颜色框:<input type="color"><br/>
email框:<input type="email"><br/>
数字框:<input type="number" min="0" max="99" step="9" value="0"><br/><!--min:最小值 step:每次增加9 value:默认值-->
数字框:<input type="range">
C.控件常用属性
id属性:是通用属性,每个控件都可以设置该属性,一个网页中最后ID的值是不重复的
name属性:是通用属性,在控件有name属性才能传递数据,十分十分重要
required属性:该控件必须有数据,也是控件的通用属性
placeholder属性:未写入数据是的默认提示信息
autofocus属性:光标自动聚焦该标签
value属性:默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<h1>控件常用属性</h1>
<form action="love.html">
<label>姓名:</label><input type="text" id="love" name="firstName" placeholder="请输入您的姓名" minlength="5" maxlength="10" required autofocus>
<hr/>
<label>年龄:</label><input type="number" name="age" min="18" max="60" value="18" >
<hr/>
<label>密码:</label><input type="password" name="pwd" placeholder="123456" minlength="6" maxlength="12" required>
<hr/>
<button>提交</button>
</form>
</body>
</html>
注意:要传递数据必须有name属性!
当鼠标点击label标签内容,光标却不自动聚焦时,用id和for标签进行关联便可解决
默认选中用checked或selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<h1>控件常用属性</h1>
<form action="love.html" method="get">
<span>姓名:</span>
<input type="text" name="userName" required placeholder="请输入您的姓名" autofocus>
<hr/>
<span>性别:</span>
<!-- value是实际传递的数据,男生是给客户端显示的数据 -->
<!-- name相同视为同一组数据,否则会出现即使男生也是女生的情况-->
<input type="radio" id="l1" name="sex" value="boy"> <label for="l1">男生</label>
<input type="radio" id="l2" name="sex" value="girl" checked="checked"><label for="l2">女生</label><!--checked:默认选中-->
<hr/>
<span>职业</span>
<select name="work" required>
<option value="">请选择职业</option>
<option selected>学生</option><!--selected:默认选中-->
<option value="1">程序猿</option>
<option value="2">自由职业者</option>
<option value="3">警察</option>
<option value="4">律师</option>
</select>
<hr/>
<span></span>
<span>爱好</span>
<label><input type="checkbox" name="hobby" value="music">音乐</label>
<label><input type="checkbox" name="hobby" value="basketball" checked>篮球</label>
<label><input type="checkbox" name="hobby" value="game">游戏</label>
<label><input type="checkbox" name="hobby" value="run" checked>跑步</label>
<hr/>
<hr/>
<button>提交</button>
</form>
</body>
</html>
D.只读与不可用区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<!-- 引入的logo图片 -->
<link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<form action="love.html" method="get">
<input type="text" name="roleName" value="叶凡">
<!-- 控件不能修改数据,有name属性可以提交数据 -->
<input type="text" name="bookName" value="遮天" readonly>
<!-- 控件不可用,无法提交数据 -->
<input type="text" name="girlFriendName" value="小月亮" disabled>
</form>
</body>
</html>
九.框架
在我们HTML中对于整个网页布局方式有三种方式(针对于程序员来说)
- 已经不推荐使用的:FrameSet标签对网页进行布局
- 后台管理系统中,常用的方式,iframe浮动框架
- DIV+CSS的方式(后台、前台都可以使用该方式i进行布局-又分几种方式)
A.frameset标签(已弃用)
不能和body标签共存,一般需要跟frame标签配合使用,基本上销声匿迹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--<body></body> 不能和body共存-->
<!-- rows 垂直分割 cols 水品分割 支持嵌套 -->
<frameset rows="10%,*,5%">
<frame src="commons/header.html">
<frameset cols="150,*" >
<frame src="commons/nav.html" noresize="0" >
<frame src="commons/content.html">
</frameset>
<frame src="commons/foot.html">
</frameset>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>
<a href="http://www.baidu.com">当前页面打开</a>
</li>
<li>
<a href="http://www.163.com" target="_blank">新页面打开</a>
</li>
<li>
<a href="http://www.sina.com" target="_parent">父页面打开</a>
</li>
<li>
<a href="http://www.csdn.net" target="abc">指定位置打开,是frame中的name属性</a>
</li>
</ul>
</body>
</html>
B.iframe标签
最大区别:可以和HTML标签共存
C.DIV+CSS
推荐的方式,前台后台都可以使用,DIV只是一个
块元素
,修饰它必须要学习CSS