day42 html
前端
什么是前端
任何与用户直接打交道的操作界面,都是可以称之为前端
eg:电脑界面 手机界面 平板界面
什么是后端
真正的幕后操作者
为什么要学前端
1.技多不压身
2.全栈工程师(前后端都得会)
web服务的本质
请求 响应
浏览器输入网址 回车会发生什么事情
1.朝着指定的服务器地址发送请求
2.服务端接收请求 并处理
3.返回相应的响应
4.浏览器接收并渲染出好看的页面给用户看
请求方式:
1.get请求
朝服务器要资源 eg:输入www.baidu.com
2.post请求
朝服务端提交数据 eg:登录功能
HTTP协议
什么是HTTP协议
超文本传输协议
什么用
规定了服务端与浏览器数据传输的数据格式
四大特性
1.基于TCP/IP作用于应用层之上的协议
2.基于请求响应
请求对应响应
3.无状态
不保存客户端状态,无论来多少次都当初见
4.无连接
对应的一种是长连接 用websocket 做聊天室的时候会用得到
数据格式
请求格式:
请求首行(请求方式 协议版本)
请求头(一大堆k:v键值对)
/r/n
请求体(敏感信息 密码 身份证号)
响应格式:
响应首行(响应方式 协议版本)
响应头(一大堆k:v键值对)
/r/n
响应体(给用户看的数据)
响应状态码
用数字表达一串文字的要表达的意思
1xx:服务端已经成功接收到了你的请求,正在处理,你可以继续提交其他的数据
2xx:服务端成功响应了相应数据
3xx:重定向
4xx:(404请求资源不存在)(403当前不符合某些条件 无法正常访问)
5xx:服务器内部错误(500)
HTML
什么是HTML
超文本标记语言
文件的后缀名:
文件的后缀名是给人看的,对于计算机来说 全都是二进制,之所以不同的后缀名有不同的功能,那是我们程序员认为制定的
HTML的注释
我们在搭建页面的时候,通常会利用注释来划分区域
HTML的文档结构
<html>
<head></head> #不是给人看的 是给浏览器看的
<body></body> #body内的代码才是给人看的
</html>
标签的分类1:
1.双标签(h1,a)
2.自闭合标签(img)
<h1>hello</h1>
<a href='https://wwww.baidu.com'>click me</a>
<img src='http://img5.imgtn.bdimg.com/it/u=268421633,928848426&fm=26&gp=0.jpg'>
head内常用标签
title 定义网页标题
style 内部支持写css代码
link 引入外部CSS样式文件
script 内部可以直接写js代码也可以引入外部js文件
meta 定义网页原信息
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端第一天</title>
<style>
h1 {
color: aqua;
}
</style>
<link rel="stylesheet" href="diyigecsswenjian.css">
<script>
alert('hello baby)
</script>
<!--<stript src="第一个js.js"></stript>-->
</head>
<body>
<h1>
旦夕之间,情知对于生命的千般流转,尽须付与无尽的忍爱。深情即是一桩悲剧,必得以死来句读。你真是一个今人欢喜的人,你的杯不应该为我而空。
</h1>
<h2>书里说 生命中许多事情 沉重婉转至不可说 </h2>
</body>
</html>
body内常用标签
h1~h6 标题标签
p 段落标签 一个p就是一行内容
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是H1</h1>
<h2>我是H2</h2>
<h3>我是H3</h3>
<h4>我是H4</h4>
<h5>我是H5</h5>
<h6>我是H6</h6>
我是正常文本
<p>段落标签 一个p就是一行内容</p>
<s>删除线</s>
<b>加粗</b>
<u>下划线</u>
<i>斜体</i>
<br>
<hr>
</body>
</html>
body内特殊符号
  空格
& &
¥ ¥
> >
< <
© ©
® ®
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>一二三四 二二三四</p>
<p>一二三四&二二三四</p>
<p>一二三四¥二二三四</p>
<p>一二三四>二二三四</p>
<p>一二三四<二二三四</p>
<p>一二三四©二二三四</p>
<p>一二三四®二二三四</p>
</body>
</html>
标签的分类2:
1.块级标签 h1~h6 p br hr div
独占一行
1.块儿级标签内可以嵌套其他块级和行内标签
2.注意:p标签虽然是块级标签,但是他的内部不能嵌套任何块级标签,只能嵌套行内标签(*****************************************************************************)
2.行内标签 s i u b span
内部文本多大就占多大 行内标签不能嵌套行内标签和块级标签
标签属性
id 就类似于是身份证号,每个标签都应该有id值,并且在同一个HTML文档中,标签的id不能重复
class 类属性 有点类似于面向对象的继承 class='c1 c2 c3' 这个标签就会拥有c1 c2 c3 的所有样式
body内重要的标签
div 块标签 一块区域,可以往这块区域内填写任何内容
span 行内标签
div和span都是前期构建网页的基本骨架
a 链接标签
1.跳转功能 href参数控制跳转的地址
这个地址如果在你的机器上没有点击过默认是蓝色,只要点击过一次后就会变成紫色
a标签默认是当前窗口跳转,可以指定新建窗口打开
target='_self' #当前窗口跳转
target='_blank' #新建窗口打开
2.锚点功能
给a标签设置id值,然后另一个a标签在href中书写对应的a标签Id值,点击即可跳转到对应的位置
img 图片标签
src
1.图片地址,网上的地址也可以是你的本地图片地址
2.url(网址) 自动朝该地址发送get请求,获取图片资源
alt
当前图片加载不出来的时候,展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数,只需要设置一个就可以,默认是等比例缩放,两个都调整的话图片就会失真
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<div>div
<div>div
<div>
div
</div>
</div>
</div>
<a href="https://www.sogo.com" target="_blank">点我点我</a>
<a href="" id="a1">文章开头</a>
<div style="background-color: aqua;height: 1000px"></div>
<a href="#a1">回到文章开头</a>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=769339638,2645864133&fm=26&gp=0.jpg" alt="加载不出来" title="崩三图片" width="500">
</body>
</html>
列表标签
无序列表
ul
li
type参数
disc(实现圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
有序列表(了解)
ol
li
type参数
1 数字列表,默认值
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
标题列表(了解)
dl
dt 小标题
dd 小章节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="none">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol type="A">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>
</html>
表格标签
展示数据 一般都用到表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is_delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
<tr>
<td>jason</td>
<td>123</td>
<td>study</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>