前端HTML

目录

前端简介

'''
强调：前端 和数据库学习的时候跟python没有关系
前端的学习是非常简单的 但是也很枯燥 没有太多的逻辑
数据库的学习有点难度 但是主要还是以记忆为主 大量练习也能掌握
'''
# 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架构'''
# 问题
	我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据

# 推导
	不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理
  最佳的解决措施是统一规定一个标准>>>:HTTP协议

# HTTP协议
	规定了服务端与浏览器之间的数据交互格式及其他事项
"""
  如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容
  如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端
  	如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)
"""

HTTP协议

# 1.四大特性
1.基于请求、响应
	服务端永远不会主动给客户端发消息 必须是客户端线请求  服务端在被动响应
2.基于TCP/IP作用于应用层之上的协议
	应用层协议：HTTP HTTPS FTP
3.无状态
	服务端不保存客户端状态（纵使见他千百变 我都当她如初见）
4.短链接
	不保持客户端与服务端之间裂解导通
    	补充：websocket（长连接）主要用于加好友聊天等业务

# 2.数据格式
	请求格式:客户端给服务端发送消息应该遵循的数据格式
  	1.请求首行(请求方法 协议版本)
    2.请求头(一大堆k:v键值对)
    3.(换行不能省略)
    4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有
    
  响应格式:服务端给客户端发送消息应该遵循的数据格式
    1.响应首行(响应状态码 协议版本)
    2.响应头(一大堆k:v键值对)
    3.(换行不能省略)
    4.响应体(给浏览器展示给用户看的页面内容)
    
# 3.响应状态码
用数字来表示一串中文意思（简化理解）
1xx：服务端成功收到你的数据 这在处理 你可以等待或者继续发送
2xx；200 ok 表示请求成功 服务端给出了响应
3xx：301\302 表示重定向（即页面自动跳转）
4xx：403请求不合法（权限不足）  404 请求资源不存在
5xx：都是服务端错误，与客户端没有关系
在工作中还会自定义状态码(因为默认的不够)
  自定义状态码一般都是从10000开始
    # 以后我们进公司写后端也需要给前端提供一个手册
	eg:聚合数据

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标签的分类
	1.双标签:有头有尾		内容写在中间
    	<h1></h1>	<html></html>
  2.自闭合标签:单标签
  		<img/>				一般有特殊功能
  
5.HTML注释语法
	<!--单行注释-->
  <!--
  多行注释
  -->
  '''html由于标签非常的多 所以可以通过注释区分页面区域'''

补充

1.如何打开html标签
	1.查找并右键选择打开方式
  	2.pycharm快捷方式(重要)
  		html文件内容区右上方浏览器图标
2.html标签其实没有缩进的概念
	之所以缩进是因为我们习惯了 更加美观

3.在pycharm中的html文件内
	编写标签只需要写表名名称即可 按tab键自动补全
 
4.在pycharm中的html文件内
	注释的快捷键也是ctrl+?

head内常见标签

# head标签内编写的标签一般都是给浏览器看的
	title标签			控制网页小标题
	style标签			内部支持编写css代码
	link标签			引入外部css文件
	script标签		内部支持编写js代码 也可以通过src						属性引入外部js文件
    meta标签
    	keywords:搜索引擎查询关键字
		description:用于展示页面搜索结果的文本描述
'''
正常业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
'''

body内基本标签

"""相同的样式可能存在多种标签 区别在于语义不一样"""
1.标题系列
	h1~h6(1到6级标题)
2.字体系列
	<i>斜体</i>
  <b>加粗</b>
  <u>下划线</u>
  <s>删除线</s>
3.文本段落
	<p></p>
4.其他
	hr	水平分割线
	br	换行符

body内特殊符号

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

body内常见标签

标签的类别：
	1.块儿级标签:h1~h6 p	div
		默认独占浏览器一行内 
	2.行内标签:s i u b span
		自身内部文本多大就占多大
标签之间支持嵌套：
	1.块级标签可以嵌套任意标签
	2.不属于布局标签的块级标签不建议嵌套儿级标签
	3.行内标签只能嵌套行内标签
    
1.布局标签
	div
	span
  # 页面的编写首先就是先用布局标签占位 之后填充内容即可
2.图片标签
	img
  	src			图片路径
    title		鼠标悬浮自动展示提示信息
    alt	  		当图片无法正常展示自动提示的信息
    height 		自定义图片高度
    width   	自定义图片宽度
    # height和width调整一个另外一个自适应调节 单位是px
    
3.链接标签
	a
    
  	href	  点击跳转到位置
		可以写网址
			<a href='网址'></a>
		也可以写标签id值
			<a href='页面上某个标签id值'></a>
    target	控制是否当前页跳转
    	默认_self当前页
      	设置_blank新建页

标签两大重要参数

1. id
	类似身份证号，同一个html页面上标签的id值不允许重复
  用于精确查找某个标签
2.class
	可以将多个标签归为一类 分类查找

列表标签

# 无序标签
<ul>
	<li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
'''
无序列表使用频率极高，页面上的有规则的内容排列几乎都是使用无序列表
'''

表格标签

<table>
	<thead>  <!--表头元素-->
    	<tr>  <!--表示一行-->
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        </tr>
    </tbody>
</table>
posted @   名字只需六字  阅读(38)  评论(0)  编辑  收藏  举报
相关博文：
·  css、js
·  django1
·  前端之HTML
·  1前端开发
·  前端1HTML
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae