阅读 128

我的前端学习之路之html5

1-1互联网基本原理

1.什么是HTTP

(1)概况

HTTP是超文本传输协议,它定义了客户端和服务器之间交换报文的格式和方式, 默认使用80端口。它使用TCP作为传输层协议,保证了数据传输的可靠性。 HTTP是一个无状态的协议,HTTP服务器不会保存关于客户的任何信息。 HTTP有两种连接模式,一种是持续连接,一种非持续连接。 非持续连接指的是服务器必须为每一个请求的对象建立和维护一个全新的连接。 持续连接下,TCP连接默认不关闭,可以被多个请求复用。 采用持续连接的好处是可以避免每次建立TCP连接三次握手时所花费的时间。 在 HTTP1.0以前使用的非持续的连接,但是可以在请求时,加上 Connection: keep-a live来要求服务器不要关闭TCP连接。 HTTP1.1以后默认采用的是持续的连接。目前对于同一个域,大多数浏 览器支持同时建立6个持久连接。

(2)http请求报文和响应报文

(比如客户端想请求www.immoc.com/b/a.html 的时候,向服务器发送请求,服务器寻找之后,给客户端回复文件a.html)

请求报文 HTTP请求报文的格式如下: GET/ HTTP/1.1User-Agent: Mozilla/5.0(Macintosh; Intel Mac 0S X 10_10_5)Acce pt: **

HTTP请求报文的第一行叫做请求行,后面的行叫做首部行,首部行后还可以跟一个实体主体。请求首部之后有一个空行,这个空行不能省略,它用来划分首部与实体。 请求行包含三个字段:方法字段、URL字段和HTTP版本字段。 方法字段可以取几种不同的值,一般有GET、POST、HEAD、PUT和DELETE。 一般GET方法只被用于向服务器获取数据。POST方法用于将实体提交到指定 的资源,通常会造成服务器资源的修改。HEAD方法与GET方法类似,但是在返回的响应中,不包含请求对象。PUT方法用于上传文件到服务器,DELETE方法用于删除服务器上的对象。虽然请求的方法很多,但更多表达的是一种语义上的区别,并不是说POST能做的事情,GET就不能做了,主要看我们如何选择。

响应报文 HTTP响应报文的格式如下: HTTP/1.0 200 OK Content-Type: text/plain content-Length: 137582 Expires: Thu,05 Dec 1997 16:00:0GMT Last-Modified: wed, 5 August 1996 15:55:28 GMT Server: Apache 0.84

Hello world HTTP响应报文的第一行叫做状态行,后面的行是首部行,最后是实体主体。 状态行包含了三个字段:协议版本字段、状态码和相应的状态信息。 实体部分是报文的主要部分,它包含了所请求的对象。

常见的状态有200-请求成功、202-服务器端已经收到请求消息,但是尚未进行处理301-永久 移动、302-临时移动、304-所请求的资源未修改、400-客户端请求的语法错误、 404-请求的资源不存在500-服务器内部错误。 一般1XX代表服务器接收到请求、2XX代表成功、3XX代表重定向、4XX 代表客户端错误、5XX代表服务器端错误。

2.什么是前端和后端

image.png

1-2认识html5骨架

1.文档类型声明DTD(document type definition)

html5文件第一行必须是DTD,不写DTD会产生浏览器的兼容问题 Doctype是一种DTD文档定义类型﹐必须声明在HTML文档的第一行﹐用来规范文档使用哪种方式解析HTML,三种模式分别是怪异模式﹐标准模式,近乎模式(IE8的一种近乎于前两者之间的一种模式);标准模式按照HTML和CSS定义渲染﹐怪异模式会模拟更旧的浏览器行为

2.字符集

image.png

image.png 更改字符集 无论使用哪种字符集,一地那个要在vscode编辑器中将文件也设置为相同字符集,(否则会出现乱码,),然后再更改meta标签

1-3 title,关键词,页面描述

title设置网页的标题,文字会显示在网页的标签栏上

合理设置网页的网页的关键词和页面描述,也是SEO的重要手段 SEo (Search Engine Optimization,搜索引擎优化)利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,让网站在搜索引擎的结果中内占据领先地位,获得品牌收益

使用meta标签设置网页关键词和描述,name属性非常关键,用来设置meta的具体功能

1-4 HTML5特性

1.空白折叠

文字和文字之间的多个空格,换行会被折叠成一个空格

2.转义字符

image.png

2-1 列表标签

1.有序列表

image.png

注: li 标签不能散着放,它必须是 ol 或者 ul 标签的子标签

ol 的子标签只能是 li 标签

li 标签中可以放任何东西

ol标签的reversed属性

1.reversed属性指定列表中的条目是否是倒序排列的 2.reversed属性不需要值,只需要写reversed单词即可,这是HTML5的全新特性

    image.png

    2.无序列表

    image.png 注: 1.无序列表是一个父子组合标签,不能单独出现

    1. ul 的标签必须是 li 不能出现其他标签

    2. li 标签是容器,内部可以放任何标签

    定义列表

    image.png

    3-1多媒体与语义化标签

    1.图片标签

    (1)格式 image.png (2)图片格式 image.png (3)相对路径和绝对路径 相对路径:描述从网页出发,如何找到图片 绝对路径:描述图片的精准地址

    2.超级链接

    3.音频和视频

    1.音频

    <audio controls src="音频地址"></audio>

    (1)autoplay属性 音频自动播放 (2)loop循环播放

    2.视频

    <video contorls src="视频地址" loop autoplay></audio>

    3.区块标签

    image.png

    4.语义化标签

    <span> <strong> <em> ...

    4-1表单标签

    1.表单的创建

    image.png

    控件

    1.单选按钮

    1.单选按钮要有value属性值,向服务器提交的就是value值 2.单选按钮如果加上了checked属性,表示默认被选中

    2.label标签

    label标签用来将文字和单选按钮进行绑定,用户单击文字的时候也默认点击了单选按钮

    3.复选框

    <input type="checkbox"> 同组复选框应该设置他们的name为相同值 复选框要有value属性值,向服务器提交的就是value值

    4.下拉菜单

    <select><option> </option></select>

    5.多行文本框

    <textarea></textarea> rows和cols属性,用于定义多行文本框的行数和列数

    6.三种按钮

    image.png

    3.HTML5新增表单控件

    image.png

    5-1表格标签

    文章分类
    前端
    文章标签