前端内容整理(一)

正文前:

  • 前端是和用户直接交互的界面的称呼。
  • 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

原文地址:https://www.cnblogs.com/Ghostant/p/12100149.html

时间: 2024-10-07 22:57:48

前端内容整理(一)的相关文章

前端重点整理集合

一.XHTML+CSS重点 一.各浏览器兼容问题和解决方法 1.3px的Bug:ie6下一个容器的浮动和文字之间会产生3px的间距, 解决方法:给浮动的盒子添加一个margin-right:-3px;(与浮动方向反方向). 2.浮动双边距Bug:当一个盒子像左浮动的同时有一个向左的margin-left的时候,IE6解析这段代码时就会把margin-left解析为原来的2倍,这个就是所谓的浮动双边距BUG. 解决方法:浮动盒子添加属性display:inline;将浮动盒子属性改为内联,或单使用

Google C++ 风格指南内容整理

之前一直没有全面的看过Google C++风格指南,现在很多公司进行C++开发都要求按照Google C++风格.在这个网站 http://zh-google-styleguide.readthedocs.org/en/latest/contents/  有人已经把其翻译成中文.为了便于以后查看,下面的内容完全是来自于这个网站,只是把多个网页的内容整理放在了一起. 1.      头文件: 通常每一个.cc文件都有一个对应的.h文件.也有一些常见例外,如单元测试代码和只包含main()函数的.c

网页格式化排版代码,专用信息采集后的内容整理

public static string ClearHtml(string content) { Regex regex = new Regex(""); //首先把p标签的属性去掉,只留<p> regex = new Regex(@"<p.*?>", RegexOptions.IgnoreCase | RegexOptions.Singleline); content = regex.Replace(content, "<p

位运算相关内容整理

位运算相关内容整理 1) 负数 负数的右移:负数右移的话,由于要保持它是负数,所以负数的二进制的左边补1.如果一直右移的话,最后就就变成0xFFFFFFFF 即-1 如: -4>>1 为-2 :-4>>2为-1 负数的左移:跟正整数左移一样,右边补0.左移总是在低位补零,高位丢失,因而负数左移后可能会变成正数. int x = 0x8fff0000; cout << (x << 1); // 输出为536739840 cout << (-2 &l

Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转

Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 - 转 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS

python脱产4期内容整理NO.11

今天的内容整理共有5部分 一.命名关键字参数 二.函数对象 三.函数的嵌套 四.名称空间与作用域 五.闭包函数 一.命名关键字参数 命名关键字参数:在定义函数是,*与**之间的参数称为命名关键字参数           特点:在调用函数时,命名关键字参数必须按照key=value的形式传值           正常的函数形参排列(位置,关键字,*args,命名关键字,**kwargs) 二.函数对象 函数是第一类对象:指的是函数内存地址可以像一个变量值一样去使用 1.变量值可以被引用 2.变量值

前端语法整理

前言 很久都没有更新随笔了,一方面这段时间自己确实有所懈怠,另一方面确实最近工作中的事情多而杂,没有好好沉下来专注一方面的成长.其实这段时间,也并不是毫无所获,还是发表了一些比较系统的文章(比如"大数据测试环境全量迁移docker之路"),在公司内部的论坛里,由于涉及一些关键技术和敏感信息,所以不便在此发表.另外,这段时间学习了spring-boot开发的一些知识,并将之前的关于java基础和设计模式.以及jvm虚拟机相关的内容做了整理,放到自己的个人github上:https://g

前端面试整理

第一阶段 1.XHTML与HTML与HTML5的有何异同? HTML是一种超文本标记语言 HTML5 最先由whatwg命名的一种超文本标记语言,随后与W3Cxhtml2.0相结合,生成现代最新的一种超文本标记语言 h5=html+css3+js+API html与html5主要区别是语义化的标签<header><footer><article> html特性: 标识文本.例如:定义标题文本.段落文本.列表文本.预定义文本. 建立超链接,便于页面链接的跳转. 创建列表,

夏令营讲课内容整理Day 0.

今年没有发纸质讲义是最气的.还好我留了点课件. 第一次用这个估计也不怎么会用,但尝试一下新事物总是好的. 前四天gty哥哥讲的内容和去年差不多,后三天zhn大佬讲的内容有点难,努力去理解吧. 毕竟知识还是需要消化的. 这里我只整理知识点,每天上午评测的题目我会单独处理. 嗯大概就是这样了. 写完后我就会考虑发到博客园里.