关于前端
总纲: HTML相当于人的骨骼, CSS相当于给人化妆, JS相当于让人的局部动起来.
01.HTML 入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML入门</title>
<!--
总纲: HTML相当于人的骨骼, CSS相当于给人化妆, JS相当于让人的局部动起来.
重点：CSS里面有个选择器、JS里面有个DOM对象
HTML简介:
概述:
全称叫Hyper Text Markup Language(超文本标记语言).
超文本: 比普通文本更强大, 里边可以放音频, 视频, 图片等.
标记语言:由标签组成的语言.
特点:
1. HTML语言是不区分大小写的, 为了阅读方便, 建议全部小写.
2. HTML文件的后缀名是.html 和 .htm, 前者是新的命名, 后者是旧的命名.
3. HTML语言是由标签组成的, 标签又分为: 闭合标签 和 自闭合标签.
<font size="7">我是字体标签</font> 闭合标签.
<br /> 自闭合标签.
4. 闭合标签由: 开始(开放)标签 和 结束(闭合)标签组成.
5. 标签可以有属性, 属性值要用引号括起来, 单双引号均可.
6. HTML的注释写法为:
7. HTMl的标准格式为:
<html>
<head>
<title></title>
<meta />
</head>
<body>
</body>
</html>
8. 如果涉及到标签嵌套了, 建议: 包裹嵌套, 不建议: 交叉嵌套.
常用标签:
基本标签:
<ul> 无序列表, 里边的每一项叫列表项, 用<li>表示.
<ol> 有序列表, 里边的每一项叫列表项, 用<li>表示.
<img> 图片标签, 常用属性: border, width, height, align, alt
<a> 超链接, 常用属性: href, target
<div> 块标签, 一般要结合CSS代码一起使用.
<h数字>
<br />
<hr />
<font>
<b> 加粗
<i> 斜体
<u> 下划线
<strong>
<table>
表单标签:
概述:
表单标签叫<form>, 写在里边的每一项叫: 表单项.
表单项分类:
1. 输入项.
格式:
<input type="输入项的类型" />
类型划分:
text
password
radio
checkbox
file
submit
reset
image
button
hidden
2. 文本输入域.
<textarea>
3. 下拉列表.
<select>
表单标签<form>的属性:
action: 表示页面数据提交到哪里(默认是当前页面)
method: 表示页面数据的提交方式.
get(默认): 提交的数据在URL地址栏中明文显示, 相对不安全, 效率稍微高一点, 提交数据有大小限制.
post: 提交的数据不会在URL地址栏中明文显示, 而是藏在请求体中, 相对安全, 效率稍微低一点, 提交数据理论上无大小限制.
使用表单标签时的细节:
1. 表单项标签必须写到表单标签中, 才可以被提交.
2. 表单项标签必须有name属性, 后台才可以接收.
-->
</head>
<body>
</body>
</html>
02.HTML的常用标签演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02.HTML的常用标签演示</title>
</head>
<body>
<!--这里写的是页面的"大白"部分, 即: 我们学的所有的标签都是写到这里的-->
<!--演示无序列表 type属性: circle(空心圆点), square(实心正方形), desc(实心圆点, 默认) <hr /> : 分割线 -->
<ul type="desc">
<li>飞机</li>
<li>高铁</li>
<li>轮船</li>
</ul>
<hr />
<!--演示有序列表 type属性: 数字(默认), 大小写字母, 大小写罗马数字-->
<ol type="I">
<li>鲱鱼罐头</li>
<li>臭鳜鱼</li>
<li>螺蛳粉</li>
<li>臭豆腐</li>
<li>臭豆腐</li>
</ol>
<hr />
<!--演示图片路径-->
<center>
<!-- <img src="../image/01.jpg" width="200px" height="300px" border="1px" alt="图片正在拼命加载中..."/> -->
<img src="../image/01.jpg" border="1px" alt="图片正在拼命加载中..."/>
</center>
<hr />
<!--超链接标签-->
<a href="http://www.baidu.com" target="_blank">我用双手, 成就你一生的梦想!</a>
<hr />
<div>我是块标签, 我独占一行, 我一般要结合CSS一起使用</div>
<div>我是块标签, 我独占一行, 我一般要结合CSS一起使用</div>
<div>我是块标签, 我独占一行, 我一般要结合CSS一起使用</div>
<hr />
<font>我是字体</font>
<font>我是字体</font>
<font>我是字体</font>
</body>
</html>
03.HTML的表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03.HTML的表单标签</title>
</head>
<!--<body background="../image/01.jpg">-->
<body>
<!--表单标签小案例: 模拟注册页面-->
<!--提交数据到内部页面-->
<form action="02.HTML的常用标签演示.html" method="get">
<!--提交数据到外部页面, 记得要写 http://-->
<!-- <form action="http://www.baidu.com">-->
账号:
<input type="text" name="username" placeholder="请录入您的账号"/> <br />
密码:
<input type="password" name="password" placeholder="请录入您的密码"/> <br />
性别:
<input type="radio"name="gender" value="male" checked>男
<input type="radio"name="gender" value="male">女 <br />
爱好:
<input type="checkbox"name="hobby" value="basketball" checked>篮球
<input type="checkbox"name="hobby" value="football" >足球
<input type="checkbox"name="hobby" value="deskball" checked>桌球
<input type="checkbox"name="hobby" value="pingpangball" >乒乓球 <br/>
上传头像:
<input type="file" name="myPicture" /> <br />
个人说明:
<textarea rows="5" cols="50">
</textarea> <br />
籍贯:
<select>
<option>--请选择--</option>
<option>广东省</option>
<option>广西省</option>
<option>河南省</option>
<option>河北省</option>
</select>
<br/>
<!--提交页面数据-->
<input type="submit" value="点我提交">
<input type="image" src="../image/02.jpg" width="100px" height="50px">
<input type="reset" value="点我重置">
<input type="button" value="我是普通按钮, 没有任何自带功能, 需要结合JS代码一起使用">
<input type="hidden" value="我是隐藏域, 里边的数据一般是给后台开发人员用的">
</form>
</body>
</html>
04.CSS入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS入门</title>
<!--
CSS简介:
概述:
全称叫Cascading Style Sheets(层叠样式表), 就是用来美化页面的.
分类:
行内样式:
格式:
style="属性名: 属性值; 属性名: 属性值;"
特点:
只针对于当前元素有效.
内部样式:
格式: 需要结合选择器使用
选择器名{
属性名: 属性值;
属性名: 属性值;
}
特点:
只针对于当前页面内的元素有效.
外部样式:
格式: 需要结合选择器使用
选择器名{
属性名=属性值;
属性名=属性值;
}
特点:
针对于当前项目内的所有的页面有效, 一般可以用来统一网站的风格.
CSS的选择器: 掌握
目的:
根据不同的条件, 选择不同的元素, 只有找到元素(就是HTML标签), 才能美化它.
常用选择器如下:
元素选择器:
格式:
元素名{
属性名=属性值;
属性名=属性值;
}
特点:
根据元素名匹配元素.
id选择器:
格式:
#选择器名{
属性名=属性值;
属性名=属性值;
}
特点:
根据元素的id属性匹配元素, 建议 id具有唯一性.
类选择器:
格式:
.选择器名{
属性名=属性值;
属性名=属性值;
}
特点:
根据元素的class属性匹配元素.
后代选择器:
格式:
选择器1 选择器2{
属性名=属性值;
属性名=属性值;
}
特点:
先匹配选择器1, 匹配上之后, 从中选择符合选择器2的元素.
不管是否是直接子级都要(儿子, 孙子, 重孙子都要)
子元素选择器:
格式:
选择器1>选择器2{
属性名=属性值;
属性名=属性值;
}
特点:
先匹配选择器1, 匹配上之后, 从中选择符合选择器2的元素.
只要直接的子级元素.
属性选择器:
格式:
选择器[属性1][属性2='属性值']{
属性名=属性值;
属性名=属性值;
}
特点:
根据元素的属性匹配的.
CSS的常用样式:
border: 表示边框, 格式如下:
border: 1px solid red; 1像素 单实线 红色
solid:单实线 double:双实线, dotted(虚线 .), dashed(虚线 -)
width: 宽度
height: 高度
font-size: 字体大小
text-decoration: none 取消超链接的下划线
-->
</head>
<body>
<div style="border: 1px dotted red; ">div111</div>
<div>div222</div>
<div style="border: 1px dashed red; ">div333</div>
</body>
</html>
05.css样式之内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<!--CSS样式-->
<style>
/*元素选择器, 即: 根据元素的名字(标签名)获取元素的*/
/*div{
border: 1px solid red;
}*/
/*id选择器, 即: 根据元素的id属性匹配元素, 建议 id具有唯一性.*/
/*#d1{
border: 1px solid red;
width: 200px;
height: 100px;
}*/
/*类选择器, 即: 根据元素的class属性匹配元素*/
/* .divClass{
border: 1px solid red;
width: 200px;
height: 100px;
}*/
/*后代选择器: 先匹配选择器1, 匹配上之后, 从中选择符合选择器2的元素. 不管是否是直接子级都要 */
div a{
font-size: 50px;
text-decoration: none;
}
/*子元素选择器: 先匹配选择器1, 匹配上之后, 从中选择符合选择器2的元素. 只要直接子级 */
/*div>a{
font-size: 50px;
}*/
/*属性选择器: 根据元素的属性匹配的*/
div[id="d2"][class]{
border: 1px solid red;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="d1">div111</div>
<div id="d2" class="divClass">div222</div>
<div id="d3" class="divClass">div333</div>
<hr/>
<div>
<a href="http://www.baidu.com">百度</a>
<font>
<a href="http://www.jd.com">京东</a>
</font>
</div>
</body>
</html>
06.css样式之外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!--引入外部CSS样式 relation: 关联 -->
<link rel="stylesheet" href="../css/my.css" />
</head>
<body>
<div>div111</div>
<div>div222</div>
<div>div333</div>
</body>
</html>
07.JS入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS入门</title>
<!--
JS简介:
概述:
全称叫JavaScript, 它是一门脚本语言, 也是一门弱类型语言, 主要是用来给页面增加动态功能的.
组成:
ECMAScript核心基础:
定义了整个JS的核心语法和基本对象.
BOM对象:
Browser Object Model, 浏览器对象模型, 即: 一个浏览器 = 一个BOM对象.
常用对象用: location, history
DOM对象: //必须掌握.
Document Object Model, 文档对象模型, 即: 一个HTML页面 = 一个DOM(树)对象
Js是把整个页面转成对应的一个DOM树结构, 然后通过管理该DOM树, 实现管理页面的目的.
JS的写法:
内部脚本:
直接写到页面的<script>标签中即可.
外部脚本:
写到模块下的js文件夹中, 新建js文件, 然后在里边编写, 最后在项目中引入该文件即可.
-->
<!--这里写的是JS的脚本文件: 内部脚本文件.-->
<!-- <script>
//JS中的函数
function tan() {
alert("小孩子家家的不要乱点, 好好学习, 将来更好的为人民服务!")
}
</script>-->
<!--引入外部js脚本文件-->
<script src="../js/my.js"></script>
</head>
<body>
<input type="button" value="点我有惊喜" onclick="tan()"/>
</body>
</html>
08.DOM树结构
09.提交数据方式
发送请求，获取数据。（String形式的html页面）：
原生态的JDK方式 get post
HttpClient方式 get post
Get方式：
提交数据到URL地址栏，相对不安全，效率高，提交数据有大小限制。
Post方式：
提交数据在请求体中，相对安全，效率低，提交数据大小理论上无限制。
问：什么是请求体呢？
答：它是Http协议的组成部分，Http协议是由 请求 和 响应 两部分组成。
请求：请求行、请求头、请求体（Get方式没有请求体）
响应：响应行、响应头、响应体
10.发送请求获取数据之 HttpClient对象的get方式
package com.itheima.demo02_httpclient;
import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
/*
案例: 演示 发送请求获取数据之 HttpClient对象的get方式 (掌握)
爬虫的步骤:
1. 明确首页URL.
2. 发送请求, 获取数据.
3. 解析数据.
4. 保存数据.
爬虫简介:
就是模拟浏览器向服务器发送请求, 并获取数据.
细节:
1. 使用HttpClient之前, 需要先导包.
2. 一个HttpClient对象 = 一个浏览器对象.
*/
public class Demo01 {
public static void main(String[] args) throws Exception {
//1. 明确首页URL.
String indexUrl = "http://www.itcast.cn";
//2. 发送请求, 获取数据.
//2.1 获取HttpClient对象, 即: 获取一个浏览器对象.
CloseableHttpClient httpClient = HttpClients.createDefault();
//2.2 创建HttpGet对象, 关联URL, 模拟: get请求.
HttpGet httpGet = new HttpGet(indexUrl);
//2.3 设置请求头, 即: 模拟何种浏览器.
//谷歌浏览器
httpGet.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36");
//2.4 通过HttpClient对象发送HttpGet对象, 获取 响应对象(包含: 响应行, 响应头, 响应体)
CloseableHttpResponse httpResponse = httpClient.execute(httpGet);
//2.5 从响应行中提出去响应状态码, 看其是否是200, 如果是表示响应成功, 我们在获取响应数据.
if (httpResponse.getStatusLine().getStatusCode() == 200) {
//2.6 获取响应头信息, 并打印. 这一步操作没有啥用, 就是给你看看, 我们能获取响应头信息.
/*Header[] headers = httpResponse.getAllHeaders();
for (Header header : headers) {
System.out.println(header);
}*/
//2.7 获取响应体数据, 并打印.
HttpEntity entity = httpResponse.getEntity();
//2.7.1 如果是图片, 音频等数据, 要通过IO流的方式获取.
//InputStream is = entity.getContent();
//2.7.2 如果是纯文本呢, 可以通过 EntityUtils#toString()方法快速获取.
String html = EntityUtils.toString(entity,"UTF-8"); //获取的就是字符串形式的html
System.out.println(html);
System.out.println("---------------------------");
//3. 解析数据.
Document dom = Jsoup.parse(html);
Elements liEles = dom.select(".ulon>li"); //所有的<li>标签
for (Element liEle : liEles) {
//liEle就是每一个标签
System.out.println(liEle.text());
}
}
//2.8 释放资源.
httpClient.close(); //关闭浏览器.
//4. 保存数据.
}
}
11.HttpClient方式发送请求, 获取数据之 post方式.
package com.itheima.demo01_httpclient;
import org.apache.http.HttpEntity;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;
import java.util.ArrayList;
/*
案例: HttpClient方式发送请求, 获取数据之 post方式.
爬虫的基本步骤:
1. 明确首页URL.
2. 发送请求, 获取数据.
方式1: 原生态JDK方式, get, post
方式2: HttpClient(浏览器对象)方式, get, post 掌握
3. 解析数据.
4. 释放资源.
HttpClient简介:
概述:
它是专门用来处理Http请求的对象, 可以把它当做一个 浏览器对象.
用之前需要先导包.
*/
public class Demo02 {
public static void main(String[] args) throws Exception {
//1. 明确首页URL.
String indexUrl = "http://www.itcast.cn";
//2. 发送请求, 获取数据.
//2.1 创建HttpClient对象, 模拟浏览器.
CloseableHttpClient httpClient = HttpClients.createDefault();
//2.2 创建HttpPost对象, 即: 请求对象, 封装所有的请求参数.
HttpPost httpPost = new HttpPost(indexUrl);
//2.3 设置请求头, 即: 模拟何种浏览器.
httpPost.setHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36");
//2.4. 设置请求体.
//2.4.1 创建集合对象, 用来记录: 请求体中的请求参数.
ArrayList<BasicNameValuePair> list = new ArrayList<>();
//2.4.2 添加请求参数对象到集合中.
list.add(new BasicNameValuePair("username", "admin01"));
list.add(new BasicNameValuePair("password", "pw111"));
//2.4.3 将封装有请求参数的集合 作为构造方法的参数, 获取: 具体的请求体对象.
UrlEncodedFormEntity requestEntity = new UrlEncodedFormEntity(list);
//2.4.4 设置请求体对象到 请求对象中.
httpPost.setEntity(requestEntity);
//2.5 发送请求, 获取数据, 获取的是响应对象(即: 包含所有的响应信息, 例如: 响应行, 响应头, 响应体
CloseableHttpResponse response = httpClient.execute(httpPost);
//2.6 从响应行中获取响应状态码, 并判断是否是200(表示响应成功)
if (response.getStatusLine().getStatusCode() == 200) {
//2.7 如果响应成功, 则从响应对象中获取 具体的响应体对象.
HttpEntity entity = response.getEntity();
//2.8 从响应体对象中获取具体的响应信息, 并操作.
String html = EntityUtils.toString(entity, "utf-8");
System.out.println(html);
}
//2.9 释放资源.
httpClient.close();
//3. 解析数据.
//4. 释放资源.
}
}
浙公网安备 33010602011771号