2021-03-18 16:25阅读: 12评论: 0推荐: 0

WEB前端 ---- 学习第一天(head及body内常用标签)

前端学习第一天

为了Django！

"""
什么是前端？
任何与用户直接打交道的操作界面都可以称之为前端
比如：电脑界面、手机及界面、平板界面

什么是后端？
    后端类似于幕后操作者(一堆代码)
    不直接与用户打交道

"""

前端学习过程

"""
HTML       ---> 内容: 网页的骨架,没有任何内容
CSS        ---> 外观: 给骨架添加各种样式,变的好看
JavaScript ---> 动作: 控制网页的动态效果

前端框架: BOOTSTRAP、JQuery、Vue
    提前给你封装好了很多操作 你只需要按照固定的语法句式调用即可
"""

软件开发架构

"""
C/S: 客户端 服务端
B/S：浏览器 服务端
ps: bs本质也是cs
"""

浏览器输入网址回车发生了几件事

"""
1. 浏览器像服务端发送请求;
2. 服务端接收请求;
3. 服务端返回响应;
4. 浏览器接收响应,根据特定的规则渲染(美化)页面后展示给用户;
"""

浏览器可以充当很多服务器的客户端
    百度 腾讯视频 优酷视频...

如何做到浏览器能够跟多个不同的客户端之间进行数据交互
1. 浏览器 能够自动识别不通服务端做不同处理
2. 制定统一标准 如果你想要让你写的服务端和客户端之间做正常的数据交互,就必须要遵循一些规则(HTTP协议)

HTTP协议

"""
超文本传输协议：用来规定服务端与浏览器之间的数据交互的格式...

该协议你可以不遵循 但是你写的服务端不能被浏览器正常访问

自己写客户端 用户想要使用 就下载专门的App即可
"""
# 四大特性
    1. 基于请求响应
    2. 基于TCP/IP作用于应用层之上的协议
    3. 无状态
        不保存用户的信息
        eg: 一个人来了一千次 都不记得 每次都认为他第一次来
        由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术 
        cookie、session、token...
    4. 无/短链接
        请求来一次响应一次 之后就没有任何链接和关系了
        长链接：双方建立链接后默认不断开 websocket


# 请求数据格式
    请求首行：标识HTTP协议版本,当前请求方式 ↓;
    请求头：许多k,v键值对儿;
    /r /n：换行符,不可缺少;
    请求体：并不是所有的请求方法都有GET没有POST有 存放的是POST请求提高的敏感数据;
# 请求方式
    1. GET
        像服务端索要数据
        eg: 输入网址获取对应内容
    2. POST
        像服务端提交数据
        eg: 用户登录 输入用户名和密码后 提交到后端做身份校验
# 响应数据格式
    响应首行：标识HTTP协议版本,响应状态码;
    响应头：许多k,v键值对儿;
    /r /n：换行符,不可缺少;
    响应体：返回给浏览器展示给用户看的数据;
# 响应状态码
    用一串简单的数字来表示一些复杂的状态或者描述性信息
    1xx: 服务端已经成功接收到了客户端数据,可以继续提交额外数据
    2xx: 服务端成功响应了客户端想要的数据
    3xx: 重定向
    4xx: 请求错误
        404：请求资源不存在
        403：当前请求不合法或不符合访问资源的条件,没有权限
    5xx: 服务器内部错误
# url： 统一资源定位符

HTML简介

超文本标记语言
如果你想要的让浏览器能够渲染出你写的页面,那就必须要遵循HTML语法规范
我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)

"""
<h1>Hello Big Baby</h1>
<a href="https://www.mzitu.com/">click me! give u some color to see see!</a>
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=138431549,3001675123&fm=26&gp=0.jpg" />
"""

HTML就是书写网页的一套标准

# 注释
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常杂乱并且很多,所以习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的HTML代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码内容
<!--左侧菜单栏结束-->

HTML文档结构

<html>
    <head></head>：head内的标签不是给用户看的,而是定义一些配置主要是供浏览器看
    <body></body>：body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>

PS: 文件的后缀名其实是给用户看的,只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
注意：HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进显示代码

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开
在pycharm内部,集成了自动调用浏览器的功能,直接点击即可(前提是你的电脑上安装了对应的浏览器)

标签的分类1

<h1></h1>
<a href="https://www.baidu.com/"></a>
<img/>
1. 双标签
2. 单标签(自闭和标签)

head内常用标签

在书写HTML代码的时候只需要写标签名然后tab就能自动补全

<!--网页标题-->
<title>Title</title>
<!--用来书写css代码-->
<style>
    h1 {
        color: greenyellow;
    }
</style>
<!--内部用来书写js文件或者引入外部js文件-->
<script>alert(123)</script>
<script src="myjs.js"></script>
<!--引入外部css文件-->
<link rel="stylesheet" href="myclass.css">
<!--告诉浏览器2秒后跳转到对应网址,注意引号-->
<meta http-equiv="refresh" content="2; URL=https://www.baidu.com">
<!--当你在浏览器搜索的时候 只要输入了keywords后面指定的关键字,那么该网页都有可能被百度搜索出来展视给用户-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<!--网页描述性信息-->
<meta name="description" content="前端学习">

body内常用标签

肉眼能够在浏览器上面看到的页面,内部都是HTML代码

基本标签

<!--标题标签 1~6级标题-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<!--段落 一个p一行-->
<p>孤独九剑</p>
<!--换行-->
<br>
<!--水平分割线-->
<hr>

标签的分类2

"""
1. 块儿级标签：独占一行
    h1-h6 p div 
    1. 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2. 块儿级标签可以嵌套任意的块儿级标签和行内标签
       但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
       如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直面用户的 不会轻易的报错 哪怕有报错 用户也基本感觉不出来)
       前端基本上不会报错
    总结：
        只要是块儿级标签都能嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内标签(HTML书写规范)
2. 行内标签：自身文本多大就占多大
    i u s b span
    行内标签不能嵌套块儿级标签 但能嵌套行内标签
"""

特殊符号

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

常用标签

div: 块儿级标签
span: 行内标签

上述的两个标签是在构造页面初期最常使用的 页面的布局一般先使用div和span占位之后再去调整样式 尤其是div使用非常的频繁;
你可以把div看成一块儿区域,划定区域,然后可以在划定的区域中再次划区域,然后写内容HTML代码;
而普通的文本先用span标签 之后添加样式或调整;

img标签

# 图片标签
<img src="" alt="">
src
    1. 图片的路径。可以是本地的也可以是网上的;
    2. url 自动像该url发送GET请求获取数据;
alt
    当图片不显示时 给图片的描述
title
    当鼠标悬浮到图片上之后 自动展示的提示信息
height="800px" (px:像素,修改单位)
width=""
    高度和宽度当你只修改一个的时候 另一个参数会等比例缩放
    如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

a标签

# 链接标签
<a href="https://www.baidu.com/" target="_self">点我即可</a>
<a href="https://www.baidu.com/" target="_blank">点我即可</a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是深蓝色
如果点击过了就会是紫色(浏览器给你记忆了)
"""
href=""
    1. 放url,用户点击就会跳转到该url页面
    2. 放其他a标签的id值,点击即可跳转到对应的标签位置
target=""
    默认a标签是在当前页面完成跳转 _self
    你也可以修改为新建页面跳转 _blank

# a标签的锚点功能
"""
eg:
    点击一个文本标题 页面自动跳转到标题对应的内容区域
"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<a href="" id="d2">中间</a>
<a href="">底部</a> 
<a href="" id="#d1"> 回到顶部</a>
<a href="" id="#d2"> 回到中间</a>
<a href="" id="#d111">去hello hao   world</a>

标签具有的两个重要属性

1. id值
    类似于标签的身份证号,在同一个HTML页面上id值不能重复
2. class值
    该值有点儿类似于面向对象里面的继承,一个标签可以继承多个class值

标签既可以有磨人的属性也可以有自定义的属性

<p id="d1" class="c1" username="wenkai" password="123"></p>

列表标签

无序列表(较多)

<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
type:
    无序列表默认是圆圈,可以手动指定形式
    circle: 空心圆圈
虽然ur标签不美观,但在页面布局时,只要是排版一致的几行数据基本上用的都是ul标签

有序列表(了解)

省力书写方式:
    ol>li*3 + tab键即可出现下列代码
<ol type='1' start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
type:
    以什么类型排序
        1的话就是1,2,3...
        A的话就是A,B,C...
        I的话就是I,II,III...
        等等
start:
    从类型的第几个开始递归
    5的话就是以5为起始依次向下

标题列表(了解)

<DL>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>    
    <dt>标题3</dt>
    <dd>内容3</dd>
</DL>

THE END

上一篇Zabbix ---- 轮询日志监控

下一篇WEB前端 ---- 学习第二天(表格、表单、css等)

本文作者：k-free

本文链接：https://www.cnblogs.com/k-free-bolg/p/14555171.html

posted @ 2021-03-18 16:25 k-free 阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

k-free