前端知识之HTML内容

2021-05-06 14:29

阅读:468

YPE 标签>

标签:头部   取数   浏览器   鼠标   最好   cin   编写   不能   hidden   

前端介绍

什么是前端?

  凡是与用户进行交互的操作界面都称为前端

  比如:手机界面,电视屏幕,电脑显示屏等

web服务的本质

  在浏览器上输入一个网址后回车进行的操作

  1.朝着指定服务器发送请求

  2.服务端接收相应的请求

  3.服务端返回相应的响应

  4.浏览器接收响应 按照特点的规则渲染页面展示给用户看

import socket
server = socket.socket
server.bind((‘127.0.0.1‘,9527))
server.listen(5)

while True:
	conn,addr = server.accept()
	data = conn.recv(1024)
	conn.send(b‘HTTP/1.1 200OK \n\r\n‘)
	conn.send(b‘HELLO WORLD‘)
	conn.close()

  

HTTP协议

超文本传输协议

规定了浏览器与服务端之间数据传输的格式

四大特性

  • 1.基于请求响应

    • 一次请求对应一次响应

  • 2.基于TCP/IP作用于应用层之上的协议(还有ftp协议)

  • 3.无状态

    • 不保留客户端的状态(不管请求几次,待如初见)

    • 所以就需要 cookie(储存在用户本地终端上的数据) session token

  • 4.无连接

    • 长链接 websocket(类似于http协议的大补丁)

数据格式

  请求格式

    1.请求首行(请求方式 协议版本)

    2.请求头(一大堆的k,v键值对)

    3.请求体(携带的数据)

  响应格式

    1.响应行首(响应状态码)

    2.响应头(一大堆的K,V键值对)

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

 

  响应状态码

    用数据来表示一大堆提示信息

    1XX:服务端成功接收到客户端的数据正在处理 你可以继续提交

    2XX:200请求成功 服务端已经返回了你想要的数据

    3XX:重定向(原本想访问A但是内部自动给你转到了B上面)

    4XX:404请求资源不存在,403你当前不具备请求该资源的条件

    5XX:500服务端内部错误 机房着火 雨你无瓜

    公司内部可以定制自己响应状态码

 

  请求方式

    1.get请求

    朝服务端要资源(获取数据)

    类似于浏览器窗口输入www.baidu.com获取百度首页

    2.post请求

    朝服务端提交数据(提交数据)

    类似于登录注册功能

 

  HTML是什么?

  • 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。

  • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,同个标签可能有不同的解释(浏览器的兼容性问题)

  • 网页文件的扩展名:.html或.htm

 

  HTML注释
单行注释:
多行注释:  

注释是代码之母。

声明必须是 HTML 文档的第一行,位于 标签之前。

?
声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
?

HTML文档结构

最基本的HTML文档:

    #head内放的内容不是给用户看的 是给浏览器去识别做相应操作的
  css样式优先级    #body内放的内容就是浏览器展示给用户看到的花里胡哨的页面


1.声明为HTML5文档

2.是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。

3. 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。

4.<span></span> 定义了网页标题,在浏览器标题栏显示

5.之间的文本是可见的网页主体内容。

*注意:对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 。*

HTML打开方式

1.pycharm自动调用浏览器打开

2.手动查找路径之后选择浏览器打开

 

HTML标签格式

  • HTML标签是由尖括号包围的关键字,如,

  • HTML标签通常是成对出现的,比如:

    ,第一个标签是开始,第二个标签是结束。结束标签会有斜线。

  • 也有一部分标签是单独呈现的,比如:


    等。

  • 标签里面可以有若干属性,也可以不带属性。

  • 标签的语法:

    • 内容部分标签名>

    几个很重要的属性

    • id:定义标签的唯一ID,HTML文档树中唯一

    • class:为html元素定义一个或多个类名(classname)(CSS样式类名)

    • style:规定元素的行内样式(CSS样式)

    head内常用标签

    标签 意义
    <span></span> 定义网页标题
    定义内部样式表,内部支持直接写CSS代码
    定义JS代码或引入外部JS文件
    引入外部样式表文件或网站图标
    定义网页原信息 name属性keywords,description
     
     

     

     

    什么是URL

    URL:统一资源定位符

    body内常用标签

    标签的分类:双标签、自闭合标签

    基本标签
    加粗
    斜体
    下划线
    删除
    
    

    段落标签

    #独占一行

    标题1

    标题2

    标题3

    标题4

    标题5
    标题6


    特殊符号

     

    技术图片

    div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。 span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

     

    本身没有特殊意义

    块级元素与行内元素的区别: 所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而生的。

    注意:

    关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。

    p标签不能包含块级标签,p标签也不能包含p标签。

     

     

    img图片标签

    src:

    1.可以写一个网站图片地址

    2.还可以写本地的图片地址

    3.url(自动朝该url发送get请求要数据)

    alt:

    当图片加载不出来的时候 默认展示的提示信息

    title

    当鼠标悬浮在图片上的时候 展示的提示信息

    width,height

    修改一个 另一个会自动等比例缩放

    如果两个都修改图片会失真

    图片未加载成功时的提示

      

    a链接标签

    herf:

    放一个url

    点击就会跳转到该url所对应的资源

    三种地址类型:

    • 绝对URL - 指向另一个站点(比如 href="http://www.soscw.com/http://www.jd.com

    • 相对URL - 指当前站点中确切的路径(href="http://www.soscw.com/index.htm")

    • 锚URL - 指向页面中的锚(href="")

     

    target:

    控制是否有在当前页跳转

    默认是在当前页跳转

    _self

    新建页面跳转

    _blank

    锚点功能

    href不单单可以写url 也可以写另外一个a标签id值

    点击就会跳转到id值所对应的a标签所在的位置

     

    列表标签

    1.无序列表

    
    
    • 第一项
    • 第二项

    type属性:

    • disc(实心圆点,默认值)

    • circle(空心圆圈)

    • square(实心方块)

    • none(无样式)

    2.有序列表

    1. 第一项
    2. 第二项

      

    type属性:

    • 1 数字列表,默认值

    • A 大写字母

    • a 小写字母

    • Ⅰ大写罗马

    • ⅰ小写罗马

    3.标题列表

    
    
    标题1
    内容1
    标题2
    内容1
    内容2

    表格标签

    展示网站数据时,一般情况下可以使用表格标签

                  
      

    属性:

    • border: 表格边框.

    • cellpadding: 内边距

    • cellspacing: 外边距.

    • width: 像素 百分比.(最好通过css来设置长宽)

    • rowspan: 单元格竖跨多少行

    • colspan: 单元格横跨多少列(即合并单元格)

    注意:先表格标签 先写结构 然后写数据

    一个tr就是一行

    th和td的区别 一个加粗一个不加粗

    通常情况下表头用th,表单内容用td

    表单标签

    form标签

    功能:

    表单用于向服务器传输数据,从而实现用户与Web服务器的交互

    表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含textarea、select、fieldset和 label标签。

    action参数

    用来控制数据提交的路径(到底朝哪个后端服务器提交数据) 三种写法: 1.不写 默认就是朝当前该页面所在的地址提交数据 2.全路径(https://www.baidu.com) 3.只写路径后缀(/index/)

    表单属性

    技术图片

     

    input

    元素根据不同的type属性,变化为多种形态。

    技术图片

     

     

    属性说明:

     

    • name:表单提交时的“键”,注意和id的区别

    • value:表单提交时对应项的值

      • type="button", "reset", "submit"时,为按钮上显示的文本年内容

      • type="text","password","hidden"时,为输入框的初始值

      • type="checkbox", "radio", "file",为输入相关联的值

    • checked:radio和checkbox默认被选中的项

    • readonly:text和password设置只读

    • disabled:所有input均适用

    select标签

    一个个选项就是一个个option标签
    				默认是单选的
    				可以加一个multiple该成多选
    					
    				如何让option标签默认选中
    					加selected="selected"  
    					

    属性说明:

    • multiple:布尔属性,设置后为多选,否则默认单选

    • disabled:禁用

    • selected:默认选中该项

    • value:定义提交时的选项值

    label标签

    label通常是配合input一起使用的

    for用来填写对应的input标签id值

    定义:

    1. label 元素不会向用户呈现任何特殊效果。

    
    

    textarea多行文本

    属性说明:

    • name:名称

    • rows:行数

    • cols:列数

    • disabled:禁用

    标签应该具备的属性

    1.id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签 在同一个html页面中 id值不能重复

    2.class属性:类似于面向对象的继承 直接引用别的类的样式

    能够触发form表单提交数据的按钮


    可以通过value属性来指定按钮文本内容
     

    input获取到的用户输入就类似于是字典的value

    input中的name属性就类似于是字典的key

    标签的分类2

    1.块儿级标签 独占一行 h1~h6 p br hr div

      1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签 2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签 如果嵌套了 没有问题 知识不符合html语法规范

      2.行内标签 u s i b span

        自身文本多大 就占多大

        行内标签内部不能嵌套块儿级标签和行内标签



     

    前端知识之HTML内容

    标签:头部   取数   浏览器   鼠标   最好   cin   编写   不能   hidden   

    原文地址:https://www.cnblogs.com/lvguchujiu/p/12098360.html

上一篇:Http 协议

下一篇:JS---案例:滚动条


评论


亲,登录后才可以留言!

推荐文章

最新文章

置顶文章