前端html篇：HTTP协议、HTML简介、head及body内常见标签符号、列表标签、表格标签

2022.4.22前端之html

前端简介
HTTP简介
HTTP协议
HTML简介（以下内容都是）
head内常见标签(html)
body内基本标签(html)
body内特殊符号(html)
body内常见标签(html)
标签的两大重要参数(html)
列表标签(html)
表格标签(html)

一、前端简介

1、前端、后端

前端：任何和用户打交道的界面都可以称之为前端

eg：淘宝页面、游戏页面、操作页面等

后端：不直接与用户打交道的用于执行真正业务逻辑的代码

eg：python代码、java代码、c++代码等

2、前端学习路径

目前我们只学习核心知识，后面自己钻研

知识脉络：HTML、CSS、JavaScript、jQuery（框架）、Bootstrap（框架）

前端三剑客：HTML、CSS、JavaScript（目前学习内容）

类比说明：

HTML：网页的骨架

CSS：网页的样式

JavaScript：网页的动态效果

二、HTTP简介

引入：可以充当客户端的有哪些？

（1）自己写的python代码（TCP客户端）

（2）别人写的浏览器（cs架构与bs架构：bs本质也是cs）

问题：目前写的TCP服务端浏览器不识别数据

解决：统一标准>>>HTTP协议

HTTP协议：

规定了服务器与浏览器之间的数据交互格式及其他事项

（1）如果服务端遵循HTTP协议，就可以被浏览器正常访问并展示内容

（2）如果服务端不遵循HTTP协议，浏览器就不会正常访问和展示，但是不影响服务端

（3）如果这个应用特别火爆，那么完全可以让用户下载专属的客户端（app）

三、HTTP协议

1、四大特性

（1）基于请求、响应

服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应

（2）基于TCP/IP作用于应用层之上的协议

应用层协议：HTTP、HTTPS、FTP...

（3）无状态

服务端不保存客户端状态（纵使见她千百遍，仍然当她如初见）

（4）无链接

不保持客户端于服务端之间的链接导通

补充：websocket（长连接），主要用于加好友聊天等业务

2、数据格式

请求格式：

即客户端给服务端发送消息应该遵循的数据格式

（1）请求首行（请求方法，请求地址，协议版本）

（2）请求头（一大堆k：v键值对，客户端类型，客户端ip地址，请求编码，cookie...）

（3）换行，不能省略

（4）请求体（所谓的body体、post、put等请求真正携带的数据，携带敏感数据：密码、身份证号...），不是一致都有

"""
b'GET / HTTP/1.1\r\n  请求首行
Host: 127.0.0.1:8080\r\n  请求头
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n 换行
请求体
'
"""

响应格式：

即服务端给客户发消息应该遵循的数据格式

（1）响应首行（响应状态码，协议版本，响应状态短语）

（2）响应头（一大堆k：v键值对，响应编码格式、cookie）

（3）换行，不能省略

（4）响应体（html，json，xml等，给浏览器展示给用户看的页面内容）

3、响应状态码

就是使用数字来表示某种含义

1XX: 服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX: 200 OK  表示请求成功 服务端给出了响应
3XX: 301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX: 403请求不合法(权限不够)	404请求资源不存在
5XX: 都是服务端错误  与客户端无关(代码bug、机房炸了...)

一般在工作中还会自定义状态码，因为默认的可能不够用，自定义状态码一般是从10000开始。

ps：在公司写后端也需要给前端提供一个手册（eg：聚合数据）

四、HTML简介

先看一段HTML语法的代码：

<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>
# 上述语法就是HTML，用于构建网业的骨架（所有网页都是由HTML组成）

1、存放HTML代码的文件后缀名

一般都是.html

2、HTML：超文本标记语言

没有任何逻辑，固定搭配。所见即所得

3、HTML文档结构

<html>
<head>给浏览器看的数据</head>
<body>给用户看的数据</body>
</html>

4、HTML标签的分类

# 双标签：有头有尾，内容写在中间
<h1>...</h1>
<html>...</html>
# 自闭和标签：单标签
<img/>                  # 一般都有特殊功能

5、HTML注释语法

<!--单行注释-->
<!--
多行注释
-->
# html由于标签非常多，所以可以通过注释区分页面区域

6、补充

1.如何打开html标签
（1）查找并右键选择打开方式：html文件内右键>>Open in>>Browser>>...
（2）pycharm快捷方式（重要）：html文件内容区右上方浏览器图标

2.html标签没有缩进概念
之所以缩进是习惯了，更加美观而已

3.在pycharm中的html文件内编写标签快捷方法
只需要写表名名称即可，按tab键自动补全

4.在pycharm中的html文件内注释的快捷键
也是:  ctrl + ?

五、head内常见标签（html）

head标签内编写的标签一般都是给浏览器识别的

# title标签			控制网页小标题
<title>最大线上赌场</title>

# style标签			内部支持编写css代码
 <style>
        h1 {
            color: greenyellow;
        }
    </style>

# link标签			引入外部css文件
 <link rel="stylesheet" href="mycss.css">

# script标签		内部支持编写js代码 也可以通过src属性引入外部js文件
<script>
    alert(123)
</script>

# meta标签			功能非常多
  				# keywords:搜索引擎查询关键字
    			# description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""

六、body内基本标签（html）

# 1.标题系列: h1~h6(1到6级标题)
    <h1>111</h1>
    <h2>111</h2>
    <h3>111</h3>
    <h4>111</h4>
    <h5>111</h5>
    <h6>111</h6>
    
# 2.字体系列
    <i>斜体</i>
    <b>加粗</b>
    <u>下划线</u>
    <s>删除线</s>
    
# 3.文本段落： <p></p>
	<p>何处望神州 满眼风光北固楼</p>
    
# 4.其他
	hr	水平分割线
	br	换行符

七、body内特殊符号（html）

&nbsp;		空格
&gt;		大于号
&lt;		小于号
&amp;		&符号(and)
&yen;		羊角符(￥)
&copy;		版权	
&reg;		商标(®)

八、body内常见标签（html）

标签类别：

块级标签：h1~h6, p, div

默认独占浏览器一行内

行内标签：s, i, u, b, span

自身内部文本多大就占多大

标签嵌套原则：

标签之间支持嵌套（最好是布局类相关标签参与）

块级标签可以嵌套任意标签

不属于布局标签的块级标签不建议嵌套块级标签

行内标签只能嵌套行内标签

1、布局标签

div
span
  # 页面的编写首先就是先用布局标签占位 之后填充内容即可

2、图片标签

img
    src			图片路径
    title		鼠标悬浮自动展示提示信息
    alt	  	     当图片无法正常展示自动提示的信息
    height 	     自定义图片高度
    width        自定义图片宽度
    # height和width调整一个另外一个自适应调节 单位是px(像素)

<img src="https://img2.baidu.com/it/u=573794301,797215540&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500" 
alt="" 
title="好看吗">

3、链接标签

a

# href可以写网址：<a href='网址'>'点我跳转'</a>
eg: <a href="https://www.sogo.com">click me</a>
# href也可写标签id值：
<a href='页面上某个标签id值'>'点我跳转'</a> 

# target： 控制是否当前页跳转
eg: <a href="https://www.baidu.com" target="_blank">点我跳转</a>  # 默认_self当前页，_blank新建页

九、标签的两大重要参数（html）

1.id
应用：类似于身份证号，同一个html页面上标签的id值不允许重复
作用：用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)

2.class
应用：类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

十、列表标签（html）

# 无序列表
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
"""
无序列表是使用频率最高的列表标签
	页面上只有是有规则排列的横向或者竖向内容,几乎使用的都是无序列表
"""
用户展示层效果模拟：
    * 001
    * 002
    * 003
    * 004
    * 005

十一、表格标签（html）

关键字：table

<table>  <!--表格关键字字段-->

    <thead>  <!--表头字段-->
        <tr>  <!--tr表示一行-->
            <th>编号</th>  <!--th加粗文本-->
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>  
    
    <tbody>  <!--表单数据-->
        <tr>
            <td>1</td>  <!--td普通文本-->
            <td>jason</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>tony</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>kevin</td>
            <td>38</td>
        </tr>
    </tbody> 
</table>

posted @ 2022-04-22 22:09 马氵寿阅读(331) 评论(0) 收藏举报

刷新页面返回顶部