进入python的世界_day42_前端——何为前端、HTTP、HTML、head和body以及常用标签

标签：body 嘿嘿 head 文件标签前端网址可以服务端

一、前端

1.何为前端

与用户打交道的操作界面即为前端，一般都是做了美化的

2.前端核心基础

HTML >>>：网页的骨架
CSS >>>：网页的样式
JS >>>：网页的动态（比如说滑动，弹窗）

二、HTTP超文本传输协议

前戏：

还记得CS/BS 软件开发架构吗？浏览器也可以看作是一个客户端

我们可以尝试写一个基本的服务端，然后用浏览器去访问，但是发现得到的反馈是该网页无法正常运作，描述是客户端回应的响应无效

想让浏览器能正常接收服务端的响应，必须遵循HTTP协议

# 服务端在回响应时，加上http协议的格式
比如
xxx.send(b'HTTP/1.1 200 OK\r\n\r\n')
# 不用记
# 这样浏览器就可以接收解析到服务端发过来的响应了

1、四大特性 ——背下来

基于请求响应
基于TCP/IP 之上作用于应用层的协议
无状态
无/短连接

2、数据格式

请求数据格式

请求首行（请求方式：有很多种协议名称及版本）
请求头（一大堆K：V键值对）
换行 \r\n
请求体（携带一些敏感的数据不是所有的请求都有请求体）比如说用户名密码

响应数据格式

响应首行（响应状态码）
响应头（一大堆K：V键值对）
换行 \r\n
响应体（一般情况下就是浏览器）

响应状态码

利用数字来表示一些复杂的情况说明（类似于暗号）
1XX：服务端已经接收到你的请求正在处理你可以继续提交或者等待
2XX： 200 ok服务端给出了相应的响应

3XX：重定向 302临时，304永久比如说想访问A，被跳转到了网页B

4XX： 403请求不符合条件 404请求资源不存在
5XX：服务端内部错误

补充一个网址——聚合数据API
我们在公司还会自己定义更多的状态码一般情况下从10000开始

三、超文本标记语言--HTML

多看多练习，所见即所得

1.html的注释

<！--注释内容-->

pycharm中按ctrl+?一样可以注释

2.html文档结构

<>标签

<html>  网址所有的代码都必须写在html标签内部
    <head></head>  head内的数据一般都不是给用户看的
      <body></body>  body内的数据就是浏览器展示给用户看的
</html>

3.标签分类

单标签自闭合标签

比如说

双标签结尾一定是</+名字>

这种较多，双标签都出现了标志这个代码书写结束

四、head内常见标签

前戏：

网址文件的后缀是html，我们也可以使用pycharm来编写网址的文件（pycharm yyds！）

# 直接打开pycharm新建一个网址文件 得到如下默认代码
<!DOCTYPE html>  # 声明这是一个网址文件
<html lang="en"> # lang="en"意思支持中文
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1.Title标签

网址的标题

如何修改网址的小图标

制作流程：

 （1）一张图

 （2）在网上将图片做成ico图标（网址：http://www.bitbug.net/），并且将图标丢到你这个网址文件的根目录

 （3）在html中引入<link rel="shortcut icon" href="favicon.ico" />

2.meta定义配置

通过内部属性的不同可以有很多功能

<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率"> #用处不大 浏览器 可以通过 合作 充值 将你提前
<meta name="description" content="填写一些网页的简介">

3.style——内部支持编写CSS代码

不过一般不是在html文件上写，单独写

# 注意还是写在head标签内哦~
<style>
    h1 {
        color: gold; # 颜色可以自己选，pycharm给选项
    }
</style>

4.link——引入外部css文件

单独建一个CSS文件

h1{
    color:pink;
}

然后在HTML文件head标签下加一行

<link rel="stylesheet" href="mycss.css">
# 可以是本地文件也可以是网络上的文件链接

这样前端页面的文字颜色就变成了粉色

5.script——引入JS标签

可以直接写一个弹窗动态，当然推荐还是引用JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="mycss.css">

    <script>
        confirm('想要了解生命的含义吗？ yes/no')
    </script>

</head>
<body>
<h1>你好，欢迎来到无限世界</h1>

</body>
</html>

# 也可以创建一个JS文件
# JS中，console.log 就是Print 
——————————————————————————————————
# Js文件代码
console.log('选中者已登录')
alert('想要了解生命的含义吗？ yes/no')
———————————————————————————————————
# HTML文件代码
# 然后在HTML文件head标签下加一行
<script src="myjs.js"></script>

五、body内基本标签

标签字符	功能
`h1-h6`	标题标签，从大到小
`<p></p>`	段落标签，看到p就相当于看到文本
`<hr>`	分割线
`<br>`	换行
`<u></u>`	下划线，word中也有
`<s></s>`	删除线
`<b><b>`	加粗，word中也有
`<i></i>`	斜体，word中也有 `<em></em>`也可以

块儿级标签

：h1-h6 p hr br

一块标签独占一行

行内标签

： u i s b

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

六、body内常见符号

字符	功能
`&nbsp`	空格,需要几个就打几个
`&gt`	大于号
`&lt`	小于号
`&amp`	& (和)
`&yen`	￥
`&reg`	注册
`&copy`	版权

七、body内布局标签

div

块儿级标签,主要用于前端网页布局，划地

spen

行内标签

<body>
<div>手机</div>
<span>小米</span>
<span>华为</span>
<div>电脑</div>
</body>

>>>
手机
小米 华为
电脑

块儿级标签是可以通过CSS调整为不独占一行
标签之间很多时候可以嵌套

块儿级可以嵌套任何类型标签
p标签虽然是块儿级标签但是不能嵌套块儿级标签

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

八、body内常用标签

1.a标签 `<a></a>`

链接标签

herf= 可以填写网址点击自动跳转
herf 还可以填写其他标签的id值 # xxx 实现锚点功能

所有的标签都可以有id值，同一个页面上id不能重复

# 模拟一下锚点功能
<body>
<h1 id="999">我是顶部!</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1 id="998">我是中部!</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1>嘿嘿嘿嘿嘿嘿</h1>
<h1 id="997">我是底部!</h1>
<a href="http://www.4399.com/" target="_self">靓仔来玩啊~</a>
<a href="#999">回到顶部</a>
<a href="#998">回到中部</a>


</body>

target=可以控制是否新建页面跳转

默认是_self 意思自己就没了

可以改为_blank 意思是新开窗口

2.img 标签

图片标签

src= 填写图片地址（网络地址本地地址）

title 鼠标悬浮再图片上会提示信息

<img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00449-1705.jpg" title="这是上海东方明珠" alt="">

alt 图片加载失败提示的信息

# 这里故意把图片链接删除了几位——即找不到这张图
<img src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-9-1705.jpg" title="这是上海东方明珠" alt="哎呀,加载失败">

height 调整图片的高度
width 调整图片宽度

上述两个调整一个另外一个等比例缩放

3.列表标签

无序列表

有规则排列的横向或者竖向的数据一般都是这个

<ul > 可以添加参数 type=”“ disc实心默认  circle 空心圆 square实心方块 nonne无样式
<body>
<ul>
    <li>番剧</li>
    <li>国漫</li>
    <li>直播</li>
    <li>游戏中心</li>
    <li>世界杯</li>
</ul>


</body>

有序列表

type 有很多种，I A a i 都可以选

<ol type="1" start="1">  #第一个参数 为序号样式 第二个为起始点
    <li> 第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>

4.表格标签

格式：

看成两部分，字段，和每行数据

th是加粗字体，td是普通字体

# 首行table 内可以加修饰条件 
border=" " 可以改变表格的边框粗细
cellspacing=" " 可以改变单元格与单元格、单元格和边距之间的空白距离
cellpadding=" " 可以改变内容（文本）和单元格之间的空白距离

# 比如说
<table border="10" cellpadding="10" cellspacing="20">

前端不单单是为了展示，更重要的是和用户交互，表单标签可以获取用户的数据

form标签

# 复制该代码时记得去# 的注释内容哦
——————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        confirm('想知道生命的意义吗？yes/no')
    </script>
</head>
<body>

<h2>主神空间</h2>
<img src="https://img1.baidu.com/it/u=2029997362,3898639432&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=719" alt="">
<form action="http://www.baidu.com/"> # action是控制朝哪个服务端提交的
    <p><label for="">用户名：        # label标签是提示，也可以不写
        <input name="" type="text">  # form内也是input获取用户输入框
    </label>
    <p><label for="">密码：
        <input name="" type="password"> # type很多，都是别人封装好了的
    </label>
    <p>生日: <input type="date"></p>
    <p>邮箱: <input type="email"></p>
    <p>性别：
        <!--        单选用radio-->
        <!--        多选用checkbox-->
        # 为什么用一个变量名name，因为要组成一个字典发给后端去
        # name相当于键
        <input type="radio" name="性别" value="male"> 男
        <input type="radio" name="性别" value="female"> 女
        <input type="radio" name="性别" value="other"> 其他
    </p>
    <p>爱好:
        <input type="checkbox"> 读书
        <input type="checkbox"> 听歌
        <input type="checkbox"> 睡觉
    </p>
    <p>携带的资料：
        <!--        multiple可发送多个文件，并在前端显示-->
        <input type="file" multiple>
    </p>

    <p>选择的任务难度:
        <!--        下拉框标签-->
        <select name="" id="">
            <option value=""> S级</option>
            <option value=""> A级</option>
            <option value=""> B级</option>
            <option value=""> C级</option>
        </select>
    </p>
    <p>意向的轮回空间：
        <select name="" id="" multiple> # 按住shift多选
            <option value=""> 生化危机</option>
            <option value=""> 异形</option>
            <option value=""> 咒怨</option>
            <option value=""> 神鬼传奇</option>
            <option value=""> 变形金刚</option>
            <option value=""> 星河战队</option>
        </select>
    </p>
    <p>个人简介:
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="跳过本次任务">
    </p>

</form>
</body>
</html>

标签：body,嘿嘿,head,文件,标签,前端,网址,可以,服务端
From： https://www.cnblogs.com/wznn125ml/p/16939789.html

进入python的世界_day42_前端——何为前端、HTTP、HTML、head和body以及常用标签

一、前端

二、HTTP超文本传输协议

前戏：

1、四大特性 ——背下来

2、数据格式

请求数据格式

响应数据格式

响应状态码

三、超文本标记语言--HTML

1.html的注释

2.html文档结构

3.标签分类

四、head内常见标签

1.Title标签

2.meta定义配置

3.style——内部支持编写CSS代码

4.link——引入外部css文件

5.script——引入JS标签

五、body内基本标签

块儿级标签

行内标签

六、body内常见符号

七、body内布局标签

div

spen

八、body内常用标签

1.a标签 `<a></a>`

2.img 标签

3.列表标签

无序列表

有序列表

4.表格标签

相关文章

赞助商

阅读排行

进入python的世界_day42_前端——何为前端、HTTP、HTML、head和body以及常用标签

一、前端

二、HTTP超文本传输协议

前戏：

1、四大特性 ——背下来

2、数据格式

请求数据格式

响应数据格式

响应状态码

三、超文本标记语言--HTML

1.html的注释

2.html文档结构

3.标签分类

四、head内常见标签

1.Title标签

2.meta定义配置

3.style——内部支持编写CSS代码

4.link——引入外部css文件

5.script——引入JS标签

五、body内基本标签

块儿级标签

行内标签

六、body内常见符号

七、body内布局标签

div

spen

八、body内常用标签

1.a标签 <a></a>

2.img 标签

3.列表标签

无序列表

有序列表

4.表格标签

相关文章

赞助商

阅读排行

1.a标签 `<a></a>`