zoukankan      html  css  js  c++  java
  • 前端基础--HTML

    什么是前端

    """
    任何与用户直接打交道的操作界面都可以称之为前端
    比如:电脑界面 手机界面 平板界面
    
    什么是后端
    	后端类似于幕后操作者
    	不直接跟用户打交道
    """
    

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

    """
    1 浏览器朝服务端发送请求
    2 服务端接受请求(eg:请求百度首页)
    3 服务端返回相应的响应(eg:返回一个百度首页)
    4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
    """
    

    HTTP协议

    """
    超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...
    
    该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 
    """
    # 四大特性
      1.基于请求响应
      2.基于TCP/IP作用于应用层之上的协议
      3.无状态
      	不保存用户的信息
        eg:一个人来了一千次 你都记不住 每次都当他如初见
        由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
        	cookie、session、token...
      4.无/短链接
      	请求来一次我响应一次 之后我们两个就没有任何链接和关系了
        	长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)
    
            
    # 请求数据格式
      请求首行(标识HTTP协议版本,当前请求方式)
      请求头(一大堆k,v键值对)
      /r/n
      请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
    # 响应数据格式
      响应首行(标识HTTP协议版本,响应状态码)
      响应头(一大堆k,v键值对)
      
      响应体(返回给浏览器展示给用户看的数据)
     
    # 响应状态码
    	用一串简单的数字来表示一些复杂的状态或者描述性信息  404:请求资源不存在
      1XX:服务端已经成功接收到了你的数据正在处理,你可以继续提交额外的数据
      2XX:服务端成功响应了你想要的数据(200 OK请求成功)
      3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
      4XX:请求错误
        	404:请求资源不存在
            403:当前请求不合法或者不符合访问资源的条件
      5XX:服务器内部错误(500)
      
    
    # 请求方式
      1.get请求
      	朝服务端要数据
        eg:输入网址获取对应的内容
      2.post请求
      	朝服务端提交数据
        eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验
    
    # url:统一资源定位符
    

    HTML简介

    超文本标记语言

    如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

    我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)

    <h1>hello big baby~</h1>
    <a href="https://www.mzitu.com/">click me!give you some color to see see!</a>
    <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
    

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

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

    HTML文档结构

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

    注意:HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码

    两种打开HTML文件的方式

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

    标签的分类1

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

    head内常用标签

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

    <title>Title</title>  网页标题
    
    </style>  内部用来书写css代码
    <link rel="stylesheet" href="mycss.css">  引入外部css文件
    </script>  内部用来书写js代码,还可以引入外部js文件
    <meta>  网页的描述性信息
    

    body内常用标签

    你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码

    基本标签

    <h1>我是h1</h1>  标题标签 1~6级标题
    <b>加粗</b>
        <i>斜体</i>
        <u>下划线</u>
        <s>删除线</s>
        <p>段落</p>
         <br>  换行
          <hr>  水平分割线
    

    标签的分类

    # 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你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
    之后往该区域内部填写内容即可
    而普通的文本先用span标签 
    

    img标签

    # 图片标签
    <img src="" alt="">
    
    src	
    	1.图片的路径	可以是本地的也可以是网上的
    	2.url	自动朝该url发送get请求获取数据
    
    alt="这是我的前女友"
    	当图片加载不出来的时候 给图片的描述性信息
    
    title="新垣结衣"
    	当鼠标悬浮到图片上之后 自动展示的提示信息
    
    height="800px" 
    		
    width=""
    	高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
        如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
    

    a标签

    # 链接标签
    <a href=""></a>
    """
    当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
    如果点击过了就会是紫色(浏览器给你记忆了)
    """
    
    href
    	1.放url,用户点击就会跳转到该url页面
        2.放其他标签的id值 点击即可跳转到对应的标签位置
    
    target
    	默认a标签是在当前页面完成跳转   _self
        你也可以修改为新建页面跳转	   _blank
    
    # a标签的锚点功能
    """eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
    <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>
    

    标签具有的两个重要属性

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

    标签既可以有默认的书写也可以有自定义的书写

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

    列表标签

    • 无序列表(较多)

      <ul>
              <li>第一项</li>
              <li>第二项</li>
              <li>第二项</li>
              <li>第二项</li>
      </ul>
      虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
      
    • 有序列表(了解)

      <ol type="1" start="5">
          <li>111</li>
          <li>222</li>
          <li>333</li>
      </ol>
      
      1 A I a ... 参考博客了机即可
      
    • 标题列表(了解)

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

    表单标签

    """
    能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
    """
    # 写一个注册功能
    <form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端
    
    action:控制数据提交的后端路径(给哪个服务端提交数据)
      	1.什么都不写  默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com  朝百度服务端提交
        3.只写路径后缀action='/index/'  
        	自动识别出当前服务端的ip和port拼接到前面
          host:port/index/
    
    <label for="d1">  第一种 直接讲input框写在label内
                username:<input type="text" id="d1">
    </label>					第二种 通过id链接即可 无需嵌套
    <label for="d2">password:</label>
    <input type="text" id="d2">
    ps:input不跟label关联也没有问题
      
    """
    label 和 input都是行内标签
    """
    
    input标签 就类似于前端的变形金刚  通过type属性变形
      text:普通文本
      password:密文
      date:日期	
      submit:用来触发form表单提交数据的动作
      button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的,学完js之后可以给它自定义各种功能
      reset:重置内容
      radio:单选
        	默认选中要加checked='checked'
          <input type="radio" name="gender" checked='checked'>男
          当标签的属性名和属性值一样的时候可以简写
          <input type="radio" name="gender" checked>女
      checkbox:多选
      		<input type="checkbox" checked>DBJ
      
      file:获取文件  也可以一次性获取多个
        	<input type="file" multiple>
      hidden:隐藏当前input框
        	钓鱼网站
          	
      
    
    
    select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
    						<select name="" id="" multiple>
                    <option value="" selected>新垣结衣</option>
                    <option value="" selected>斯佳丽</option>
                    <option value="">明老师</option>
                </select>
    
    textarea标签  获取大段文本
    	  <textarea name="" id="" cols="30" rows="10"></textarea>
    
    # 能够触发form表单提交数据的按钮有哪些(一定要记住)
    		1、<input type="submit" value="注册">
    		2、<button>点我</button>
        
    # 所有获取用户输入的标签 都应该有name属性
    	name就类似于字典的key
      用户的数据就类似于字典的value
      <p>gender:
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女
                <input type="radio" name="gender">其他
      </p>
    
    """
    form表单提交文件需要注意
    	1.method必须是post
    	2.enctype="multipart/form-data"
    		enctype类似于数据提交的编码格式
    			默认是urlencoded 只能够提交普通的文本数据
    			formdata 就可以支持提交文件数据
    """
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
    

    验证form表单提交数据

    pip3 install FLASK
    
    form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
    	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
    你可以通过method指定提交方式
    	<form action="http://127.0.0.1:5000/index/" method="post">
      
    针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
    <p>gender:
                <input type="radio" name="gender" value="male">男
                <input type="radio" name="gender" checked value="female">女
                <input type="radio" name="gender" value="others">其他
    </p>
    <p>hobby:
                <input type="checkbox" name="hobby" value="basketball">篮球
                <input type="checkbox" checked name="hobby" value="football">足球
                <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
    </p>
    <p>province:
                <select name="province" id="">
                    <option value="sh">上海</option>
                    <option value="bj" selected>北京</option>
                    <option value="sz">深圳</option>
                </select>
    </p>
    
    
    
    
    
    from flask import Flask, request
    
    
    app = Flask(__name__)
    
    
    # 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
    @app.route('/index/',methods=['GET','POST'])
    def index():
        print(request.form)  # 获取form表单提交过来的非文件数据
        # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
        print(request.files)  # 获取文件数据
        file_obj = request.files.get('myfile.png')
        file_obj.save(file_obj.name)
        return 'OK'
    
    app.run()
    
    
    # 针对用户输入的标签。如果你加了value 那就是默认值
    <label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
    disable 禁用
    readonly只读
    
  • 相关阅读:
    Error: bzip2: Compressed file ends unexpectedly; # perhaps it is corrupted?
    诡异shellbash脚本没写错运行的时候不报错也不执行
    seeksv
    常用Linux对脚本的基本操作——持续更新
    lumpy-sv
    常用linux对系统的基本操作——持续更新
    常用linux对文件的基本操作——持续更新
    css浮动与定位
    CSS知识点概要
    HTML5新手入门基础知识要点概要
  • 原文地址:https://www.cnblogs.com/Franciszw/p/12904556.html
Copyright © 2011-2022 走看看