• 前端内容整理(一)


    正文前:

    • 前端是和用户直接交互的界面的称呼。

    • web是基于B/S,本质上是基于C/S。为什么用一个浏览器,可以访问百度,访问博客园....等等服务器?因为都遵循着HTTP协议

    HTTP协议

    ​ HTTP协议全称叫超文本传输协议。规定了浏览器与服务端之间数据传输的格式。

    一、四大特性

    • 基于请求响应。一次请求对应一次响应
    • 基于TCP/IP作用于应用层上的协议
    • 无状态,不保留客户端的状态。(cookies,session,token来源)
    • 无连接(长连接 websocket---类似于http协议的大补丁)

    二、数据格式

    1.请求格式:

    • 请求首行(请求方式、请求url、协议版本、)
    • 请求头(key=value键值对)
    • 请求体(get请求无请求体)

    2.响应格式:

    • 响应首行(状态码)
    • 响应头(key=value键值对)
    • 响应体(存放浏览器对用户展示的数据)

    3.响应状态码

    用数字来表示响应的状态。

    1XX:服务端已经成功接收到客户端的数据正在处理

    2XX:200请求成功。

    3XX:重定向

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

    5XX:500服务端内部错误。

    HTML语言

    html全称是超文本标记语言,是浏览器的语言,浏览器可以通过识别html语言将数据加以渲染,然后对用户进行展示。

    从这个角度看,浏览器之所以能访问各个服务器得到数据,是因为在遵循HTTP协议的前提下,各个服务器都通过html的语言格式返回数据,让浏览器能够正确的渲染数据。

    一、html注释:

    二、html文档结构

    <html>
        <header>
            <!--存放给浏览器看的内容-->
        </header>
        <body>
            <!--真正的数据-->
        </body>
    </html>
    
    

    三、标签的分类

    1.按标签数量

    • 双标签
    • 自闭合标签

    2.按标签所占区

    • 块级标签 h1~h6 p br hr div
    • 行内标签 u s i b span

    四、header中常用的标签

    • title:定义网页的标题
    • style:内部支持直接写css代码
    • link:引入外部的css文件
    • script:内部可以直接编写js代码,可以通过src属性引用外部js代码。
    • meta:name属性。keywords,decription

    五、body内常用的标签

    1.基本标签

    • h1~h6:标题标签

    • s:删除线 strikethrough

    • b:加粗 bold

    • u:下划线 underline

    • i: 斜体 italic

    • p: 段落 paragraph

    • br:换行 break

    • hr: Horizontal rule 水平线

    2.特殊符号

    &amp; & 
    &gt;  >
    &lt;  <
    &reg; ®
    &copy;© 
    &yen; ¥
    &nbsp; 空格
    

    3.常用标签

    div 块级标签和span 行内标签本身没有任何特殊意义,但用的频率很高。可以用来做前期的页面布局。

    标签应该具备的属性
    1.id属性:类似于身份证号  用来唯一标识当前html页面中的某一个标签在同一个html页面中 id值不能重复
    2.class属性:类似于面向对象的继承直接引用别的类的样式
    ----------------------------------------------------
    <img> 自闭合标签
    src:
    1.可以写url
    2.可以写本地的图片地址
    alt:当图片加载失败时默认展示的提示信息
    title:当鼠标悬浮在图片上的时候展示的信息
    width,height: 修改图片的大小,只修改一个时自动缩放图片。
    ---------------------------------------------------
    <a></a> achor 双标签
    href:
    放一个url,点击自动跳转。
    target:
    控制是否在当前页跳转: _self,_blank
    锚点功能:
    href可以填写另一个标签的id值。如#aaa
    ----------------------------------------------------
    <ul>   unorder list 双标签 无序列表
        <li> list item
            在页面上实现规则排列的文本,可以用无序列表实现。
        </li>
    </ul>
    ----------------------------------------------------
    <ol>  order list 双标签  排序列表
        <li> list item
            
        </li>
    </ol>
    ----------------------------------------------------
    <dl>  Definition List 标题列表
        <dt> Definition Term
            标题
        </dt>
        <dd> Definition Description
            内容
        </dd>
    </dl>
    ------------------------------------------------------
    <table> 表格标签(******)
        <thead> 表头
            <tr> 表行
                <th>  表头名
                </th>
            </tr>
        </thead>
        <tbody>
        	<tr>
                <td>   单元格数据
                </td>
            </tr>
        </tbody>
    </table>
    tr---table row
    th---table header cell
    td----table data cell
    ---------------------------------------------------------
    <form> 表单标签(*******) POST提交数据的标签块。
    </form>
    参数:
    	aciton:数据的提交的路径。1.不写默认当前地址。2.全路径(https://www.baidu.com)3.只写路径后缀/index/
    *************************************************
    <input> 自闭合标签
    type:
    	text
    	password
    	radio
    	checkbox
    	date
    	reset
    	button
    	submit
    	file
    *************************************************
    <textarea> 获取大段文本
    </textarea>
    *************************************************
    <select>   下拉框标签
        <option></option>
    </select>
    参数:
    	selected
    	multiple
    
  • 相关阅读:
    $.extend用法详解(一)
    JQuery中$.each 和$(selector).each()的区别详解
    span元素和div元素的浮动效果
    $.ajax中contentType: “application/json” 的用法
    JS中获取URL的参数的方法
    移动端的touch事件(一)
    JS运算的优先级
    关于更新发布CSS和JS文件的缓存问题
    small标签
    DP:三角形的最小路径和
  • 原文地址:https://www.cnblogs.com/Ghostant/p/12100149.html
Copyright © 2020-2023  润新知