什么是web：
- 英文全称：WorldWideWeb
- 中文翻译全球广域网或万维网
- 表现形式为超文本，超媒体，超文本传输协议。（什么是超文本，超媒体呢，我们正常去访问一个网页时，可以通过点击图片，文字等，跳转到其他网页。超文本传输协议即为 https/http。）
web应用（又称B/S模式的应用）：以浏览器为载体进行运行的应用（其实就是网页），
基于保准的应用层协议：http, https。
B/S : Browser/server。浏览器和服务器的交互。
web应用的组成：1.web浏览器。 2.web服务器。
web服务器：
- web服务器（中间件）：Apache,IIs,Tomcat，Nginx等。
- web应用程序：PHP, Java，Python等。
- web数据库服务器（非常重要的东西）：Mysql，Oracle, Sqlsever等。
web应用基础：前端（浏览网页我们能看到的，并且可以交互的），后端（反之我们看不到的）。
前端：html,css,js(javascript)。html：相当于房子（毛坯房）。css：相当于墙纸等可以美化房子的东西。JS：相当于这个房子里有了智能的家居，比如扫地机器人等。
学习了这些东西有助于后面的渗透利用
html（超文本标记语言）：
- 设计网页。
- 由浏览器进行解释执行。
- 文件已.html为后缀。
学习准备：vscode。可以查看这篇文章 如何使用请自行查找。
这是创建好的，输入html:5回车/tab键，或者输入!回车。（我相信你们会选着后者）
输入点东西
输入完成后一定要保存。右键窗口，点击。
就会在浏览器运行
<!DOCTYPE html>
<!-- lang:language 语言 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- titile : 标题 网页标签上显示的内容 -->
<title>嗨喽</title>
</head>
<!-- body：主体 -->
<body>
<!-- 写完代码之后,记得保存:ctrl + s -->
<!-- 注释:是为了给开发人员来看的 -->
<!-- 被注释的内容不会被浏览器解析 -->
<!-- 在HTML中，使用 <> 这个就是标签 每一个标签都会有属性 -->
<!-- 注释的快捷书写方式(选中后):ctrl + / -->
你好前端! hello
</body>
</html>以下的代码，建议一定要实践。 <body>标签里写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- HTML常用标签 -->
<!-- 标题标签:h1~h6 没有h7-->
<!-- 标签的快捷书写方式: 标签名 + 回车 -->
<!-- h1 的字体最大，并且有加粗效果和换行。（毕竟是标题）-->
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<!-- 段落标签 : p -->
<p>今天星期四</p>
<p>明天星期五</p>
<p>再坚持两天</p>
<p>就是星期天</p>
<!-- 注意:写完代码一定要保存 ctrl + s -->
<!-- 运行代码时一定要刷新浏览器 -->
<!-- 普通文本标签:span 没有换行 -->
<!-- span可以跟css样式联合使用来给文本添加一些样式效果 -->
<span style="color:red;">普通文本</span>
span外的普通文本
<!-- 容器标签:div 默认换行-->
<!-- div + css 完成网页的布局与美化 自行运行查看-->
<div style="width:50px;height:60px;border:1px solid red;">容器</div>
hello
<!-- br:换行标签 -->
你好<br>
世界
<!-- 标签的分类: -->
<!-- 单标签:<标签名> -->
<!-- 双标签:<标签名></标签名> -->
<!-- 有序列表:ol>li ol:ordered list 有序列表-->
<!-- 为了代码的可读性/美观性,可以使用缩进的方式来增强代码的可读性 -->
<!-- 缩进是使用四个空格的方式,VSCode使用Tab键快捷缩进 -->
<!--大家可以试一下 ol>il*3 或者 ul>il*4 会有神奇的效果-->
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ol>
<!-- 无序列表:ul>li ul:unordered list 无序列表-->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<!-- 表格标签:table>tr>td -->
<!-- tr:行 -->
<!-- td:单元格 -->
<!-- 生成一个2行3列的表格 -->
<!-- border:边框线 -->
<!--快捷方式 table>tr*2>td*3 这种嵌套的标签都可以使用 -->
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
<!-- 超链接标签:a 点击进行跳转 -->
<!-- href="超链接跳转的地址" -->
<!-- target="设置跳转的网页打开的方式" -->
<!-- target="_self" : 跳转的网页会在当前标签页打开 -->
<!-- target="_blank" : 跳转的网页会在新的标签页打开 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com" target="_self">京东</a>
<a href="http://www.taobao.com" target="_blank">淘宝</a>
<!-- 图片引入标签:img -->
<!-- src="引入的图片地址" -->
<!-- width:设置宽度 -->
<!-- height:设置高度 -->
<!-- px:像素 -->
<!-- title:设置鼠标悬浮在图片上时显示的文本 -->
<!-- alt:设置图片加载失败时显示的文本 可以把下方的src里的URL改一下进行测试-->
<!-- <img width="200px" height="300px" title="美女" alt="图丢了..." src="https://ts1.cn.mm.bing.net/th/id/R-C.78fc100b0dfda99998d633633b54fff3?rik=5g4sc7a0roFN6w&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2017-07%2f19%2f19%2f201707191925169681-2240800.jpg&ehk=jLfAYrF3QL9oLX8uQSMq54h9q0O%2bGOPvktyGX1JVu8g%3d&risl=&pid=ImgRaw&r=0"> -->
<!-- <img src="1.jpg"> -->
<!-- 点击图片,完成跳转功能 -->
<a href="http://www.pinduoduo.com">
<img width="400px" height="600px" title="点击添加美女微信" src="https://img.zcool.cn/community/010e84554464720000019ae9c3ddc0.jpg@1280w_1l_2o_100sh.jpg">
</a>
<!-- 标签的嵌套:在双标签中书写其他的标签 -->
<div>
<p>
<a href="">
<img src="" alt="">
</a>
</p>
<span></span>
<p></p>
<div></div>
</div>
<!-- 实体字符/字符实体 -->
<!-- 在HTML中,使用 <> 包裹的内容会被当成标签来解析 那我们怎么输出 < , > 这俩个符号呢-->
<!-- < : < -->
<!-- > : > -->
<!-- 人民币 : ¥ -->
<!-- 版权符号 : © -->
<!-- 空格 : -->
<hello>
<br>
¥
<br>
©
<br>
你好 世界
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表单:form 收集用户的数据并传递给服务器 -->
<!-- action="表单提交的地址" 学了PHP后再说-->
<!-- method:规定表单提交的方式 常用的get（默认的）/post（更安全一些） -->
<!-- 文件上传时, enctype="multipart/form-data" -->
<form action="" method="">
<!-- 表单控件 -->
<!-- 文本输入框控件 -->
<!-- type="text":文本输入框 -->
<!-- name属性:向服务器端发送数据时,name的值就是发送数据的键名 -->
<!-- placeholder:占位符 起提示作用 会在输入框内显示-->
用户名:<input type="text" name="uname" placeholder="请输入用户名">
<br>
<!-- 密文输入框控件:type="password" -->
密码:<input type="password" name="upwd" placeholder="请输入密码">
<br>
<!-- 单选控件：type="radio" -->
<!-- 注意:一组单选必须设置相同的name属性值 -->
<!-- value属性:表单控件的值 为了在返回服务器知道我们选的什么-->
<!-- checked:设置单选或者复选默认被选中项 -->
<!-- 页面可能会存在缓存,导致默认选中效果出不来 -->
<!-- 使用ctrl + F5 强制刷新 清除页面缓存 -->
性别:
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="0" checked>保密
<br>
<!-- 复选控件 -->
<!-- 注意:一组复选框name属性值必须一致 -->
兴趣爱好:
<input type="checkbox" name="hobby" value="1">打游戏
<input type="checkbox" name="hobby" value="2">睡觉
<input type="checkbox" name="hobby" value="3">美食
<input type="checkbox" name="hobby" value="4" checked>躺着
<br>
<!-- 下拉菜单 -->
<!-- select>option -->
<!-- selected:设置下拉菜单项默认被选中效果 -->
<!--name 属性 返回服务器 做数据区分-->
城市:
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>广州</option>
<option value="4">深圳</option>
</select>
<br>
<!-- 文件上传控件: type="file" -->
上传文件:
<input type="file" name="pic">
<br>
<!-- 文本域:textarea -->
<!-- text:文本 -->
<!-- area:区域 -->
<!-- cols:设置文本域水平方向默认输入的最多字符数 -->
<!-- rows:设置文本域垂直方向默认输入的最多字符数 -->
评论:
<textarea name="comment" cols="30" rows="10"></textarea>
<br>
<!-- 提交按钮 -->
<!-- submit:提交 -->
<input type="submit" value="登录">
<!-- 重置按钮 -->
<!-- reset:重置 -->
<input type="reset" value="取消">
<!-- 普通按钮:没有功能,只具有按钮样式 -->
<!-- button:按钮 -->
<!-- value:设置按钮的显示文本 -->
<input type="button" value="注册">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- iframe:将外部的网页引入到当前网页中 -->
<!-- src="外部网站的地址" -->
<!-- width:设置宽度 如果为100% 代表与父元素的宽度一致 即为网页在屏幕中显示的大小-->
<!-- height:设置高度 网页高度不固定-->
<!-- frameborder:框架边框线 值为0,没有边框线,其他值代表有边框线 -->
<iframe width="100%" height="800px" src="http://www.tmooc.cn" frameborder="0"></iframe>
</body>
</html>css（选学）：
根据css在页面中呈现的方式不同， 有以下三种使用方式：
- 内联
- 内嵌
- 外链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 快捷注释方式:ctrl + / */
/* 2.内嵌式 在HTML文档中的head标签内嵌入style标签,设置css样式 */
p { /* 这里的p即为选中body中的p标签 */
color:aquamarine;
}
</style>
<!-- 3.外链式 : 将外部的css文件引入 创建一个以 .css 的文件后缀-->
<!-- href="外部css文件的地址" -->
<link rel="stylesheet" href="color.css">
</head>
<body>
<!-- 1.css的使用方式 : 内联式 直接在标签内书写css样式 在标签中加入style属性
style="color:red -->
<!-- style:样式 下边不光可以添加颜色，还可以添加字体大小，下划线等 这里这里只做了解，有兴趣自行查找学习-->
<!-- <span style="color:red;">span标签</span> -->
<!-- <p>段落标签</p> -->
<div>div标签</div>
</body>
</html>创建一个以.css 的文件后缀，即文件名于上面外链式引入的文件相同color.css
div {
color:blue;
}内容先告一段落了（后面的知识跑丢了）..........
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
