前端——初识HTML

'''学习方法'''
1、吸取老师的知识消化总结
2、及时复习
3、通过代码来加深对知识点的映像
4、通过录屏口头表述知识点
5、预习后面的知识
6、不懂就讨论+搜索引擎搜索

前端参考博客:https://www.cnblogs.com/Dominic-Ji/p/10864457.html

前端

前端是什么

但凡是跟用户直接打交道的操作频台都可以称为是前端

B/S架构

软件开发架构

'''
C/S   客户端/服务端
B/S   浏览器/服务端
B/S架构本质上也是一个C/S架构，即浏览器为客户端
'''

HTTP协议

HTTP协议是超文本传输协议，它用来规定浏览器与服务器之间数据交互的格式

该协议不是强制遵守的，遵守该协议可以使服务端能够被浏览器访问

'''四大特性'''
1、基于请求响应：浏览器发送一个请求服务器给一个响应
2、基于TCP/IP作用于应用层之上的协议
3、无状态：即不能够保存用户数据
	能够专门记录用户数据的有：cookie、session、token...
4、无/短链接
	当浏览器与服务器完成一次请求响应之后两者就没有任何链接跟关系了
    长链接：双方建立连接之后默认不断开  可以用websocket实现
    
# 请求的数据格式：
请求首行 (用来标识HTTP协议版本, 请求方式)
请求头 （一堆的k:v键值对）

请求体（向服务器提交的数据）
# 请求方式（不仅限于get与post）
1、get请求：用于获取服务器的数据，无请求体
2、post请求：用于向服务器提交数据，请求体中除啦请求方式外还要存放要提交的数据
'''
# 请求首行
b'GET /favicon.ico HTTP/1.1\r\n 
# 请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36\r\n
Accept: image/webp,image/apng,image/*,*/*;q=0.8\r\n
Sec-Fetch-Site: same-origin\r\n
Sec-Fetch-Mode: no-cors\r\n
Sec-Fetch-Dest: empty\r\n
Referer: http://127.0.0.1:8080/\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
# 请求体
'''

# 响应的数据格式：与请求数据格式类似
响应首行 (用来标识HTTP协议版本, 状态码)
响应头 (一堆的k:v键值对)

响应体 (浏览器请求的展示给用户看的数据)

# 状态码：用来表示一些复杂的状态或是描述性信息
1xx：服务端已接收到数据正在处理，可以继续提交额外的数据
2xx：表示服务器已成功响应，浏览器可以展示数据 常见的 (200 OK请求成功)
3xx：表示请求重定向 常见的(301,302)
4xx：表示请求错误，浏览器这边的错误，常见的有(404 not found, 403 请求不合法或不符合访问资源条件)
5xx：服务器内部错误，服务端着变的错误，常见的有(500)

# url：统一资源定位器（网址

HTML简介

HTML是超文本标记语言，不是编程语言
能够让浏览器渲染出页面内容
所看到的所有的网站页面，内部都是HTML代码

HTML文档结构

<html lang="en">
<head>	<!--head内的标签主要是给浏览器看的-->
    <meta charset="UTF-8">
</head>
<body>	<!--body内的标签才是展示给用户看的内容，
		body内写什么浏览器就渲染什么然后向用户展示-->
<!--
	这是
	多行注释
-->
<!--这是单行注释-->
</body>
</html>

<!--
除了HTML可以写前端页面还有XML也可以写前端页面
	odoo框架内部的前端页面全部是用XML写的
	公司内部的管理软件 ERP
-->

打开HTML的两种方式

右键选择打开方式用浏览器打开
pycharm内部集成了自动调用浏览器的功能，直接点击即可（必须是电脑上有安装的浏览器）

常用标签

head内标签

<meta charset="UTF-8">	<!--指定字符编码-->
<title>Title</title>	<!--网页标题-->
<style></style>	<!--css内部样式-->
<script></script>	<!--内部js代码-->
<script src='myjs.js'></script>	<!--引用外部js文件-->
<link rel="stylesheet" href="mycss.css"> <!--引用外部css样式-->
<!--
当你在用浏览器搜索的时候 只要输入了keywords
后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
-->
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训">

<!--网页的描述性信息-->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰...">

body内标签

基本标签

标签	作用
`<h1></h1>`	标题标签 1~6级标题
`<b></b>`	加粗
`<i></i>`	斜体
`<u></u>`	下划线
`<s></s>`	删除线
`<p></p>`	段落
`<br/>`	换行
`<hr>`	水平分割线
`<div></div>`	块级标签
`<img>`	图片标签
`<a></a>`	超链接以及锚点链接
`<span></span>`	行内标签
`<ul><li></li></ul>`	列表标签

标签的两个重要书写

1.id值
	类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
	该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
    
# 标签既可以有默认的书写也可以有自定义的书写
<p id="d1" class="c1" username="jason" password="123"></p>

常用标签

div  块儿级标签
span  行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签

img标签

# 图片标签
<img src="" alt="">
src="url" 1.图片的路径可以是本地的也可以是网上的 2、url 自动朝该url发送get请求获取数据
alt="当图片加载不出来的时候 给图片的描述性信息"
title="当鼠标悬浮到图片上之后 自动展示的提示信息"
# 若只指定一个宽或者高则等比缩放，若两个都指定且不考虑比例，图片则失真
height="300px" 
width=""

a标签

# 文本链接(超链接)
<a href=""></a>
'''
默认字体颜色为蓝色，当用户点击后字体颜色就会变成紫色(浏览器会记忆用户的操作)
'''

href="url" 用户就会跳到对应的url页面
href="#other_id" 放其他标签的id值就会跳到对应标签位置（锚点链接）

target 默认在当前页面完成跳转 _self
	   在新窗口打开页面  _blank
    
# a标签的锚点功能
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

列表标签

# 无序列表（常用）
<ul type="none">
	<li>第一项<li>
    <li>第二项<li>
</ul>

type属性：
    disc（实心圆点，默认值）
    circle（空心圆圈）
    square（实心方块）
    none（无样式）
    
适用于多行数据的排版

# 有序列表（了解）
<ol type="1" start="5">
    <li>第一项</li>
    <li>第二项</li>
</ol>

type属性：
    1 数字列表，默认值
    A 大写字母
    a 小写字母
  Ⅰ大写罗马
    ⅰ小写罗马

start="5" 表示列表的序号从5开始

# 标题列表(了解)
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

特殊标签

标签	含义
` `	空格
`>`	>
`<`	<
`&`	&
`¥`	¥
`©`	©
`®`	®

标签的分类

'''分类1：'''
# 1 单标签：<img>、<br>、<hr>...
# 2 双标签：<div></div>、<p></p>、<span></span>...

'''分类2'''
# 1 块级标签:独占一行
'''
		h1~h6 p div
  	1) 块级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2) 块级标签内部可以嵌套任意的块儿级标签和行内标签
    	但是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签
    	如果强行嵌套，也不会报错，浏览器会自动帮你解开嵌套关系，一般情况下浏览器不会轻易报错
    	即使报错，用户一般也感觉不出来
'''
    总结:
      	块级标签可以嵌套任意的块级标签跟行内标签
        p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
		i u s b span
  	行内标签不能嵌套块级标签 可以嵌套行内标签

posted @ 2020-05-11 16:03 群青-Xi 阅读(178) 评论(0) 编辑收藏举报

刷新页面返回顶部

群青-Xi

Hello Python

前端——初识HTML

前端

前端是什么

B/S架构

HTTP协议

HTML简介

HTML文档结构

打开HTML的两种方式

常用标签

head内标签

body内标签

特殊标签

标签的分类

公告