HTML5笔记

本文深入介绍了HTML5的相关知识,从浏览器与服务器的工作原理开始,详细讲解了URL、HTTP协议的重要性。接着,重点探讨了HTML的基本结构、HTML5的发展历程及新增标签,如标题、段落、列表、表格、表单和多媒体元素。此外,还讨论了字符集、字符实体和DTD文档声明,以及HTML5中的一些废弃和新增标签,强调了语义化在现代网页设计中的重要性。
摘要由CSDN通过智能技术生成

1.浏览器http理解

1.浏览器和服务器

1. 什么是浏览器

  • 像qq一样是安装在电脑上的软件

2. 浏览器功能

  • 将网页渲染出来给用户查看
  • 让用户能够通过浏览器和网页交互 (点击,输入,拖动等操作和网页交互)

五款主流浏览器(IE,chrome,firefox,safari,opera)

  • 这五款浏览器的内核不同,也就是浏览器所采用的的渲染引擎(如何显示网页的内容和页面格式信息)不同,正因为内核不同,所以要考虑兼容问题
    IE内核Trident
    谷歌内核WebKit/Blink
    火狐内核Gecko
    Safarri内核WebKit
    欧朋内核Presto

3.什么是服务器

  • 可以理解为一张超级计算机,配置比家用电脑高
  • 24小时不断电不关机,专门用于存储数据,访问者可以访问服务器获得服务器上存储的资源

2.浏览器访问网页原理

1.第一次打开IE6, 发现系统自动给我们生成了一个文件夹,所以我们可以得出这个文件夹必然和IE6有一定的关系
2.先删除Internet-Cache下的所有文件夹,然后通过IE6打开百度的首页.打开百度首页之后呢,我们发现被删除的文件夹又回来了
3.再次删除这些文件夹,发现不能删除,提示被其它应用程序打开.但是当我们关闭IE6浏览器之后又发现可以删除了
所有综合第一点和我们的第三点 我们得出一个结论.这些系统自动创建的文件实和当前被打开的网页有一定的关系
通过观察发现,这些文件夹中存储的内容和网页上的内容有对应关系,那
么这些文件夹是什么文件夹呢?其实这些文件夹我们称之为缓存文件夹,
缓存文件夹是专门用于存储网页数据的文件决

  • 当我们利用浏览器访问网页时,其实是有真实的物理文件传输的.浏览
    器会先将网页上的内容缓存到本地文件实中,然后再渲染出来呈现给用
    户查看
  • 平时我们在上网时会感觉到第二次访问网页会比第一-次访问网页要快,
    就是因为第一次访问时已经将这个网页上的储息缓存到了本地
  • 通过观察我们还发现缓存文件夹家中除了缓存图片以外还缓在了一些
    例如js .css .html等文件,所以可以得出一个网页不是一个文件, 而是
    一堆文件. 网页越复杂那么组成这个网页的文件就越多

3.浏览器请求数据过程

  1. 打开浏览器(以访问百度为例讲解)
  2. 输入网址
  3. 按下回车(江哥服务端开发再讲解)
    3.1浏览器发送一个’请求报文’到百度的服务器
    3.2百度服务器处理浏览器请求(此时的请求是打开百度首页)
    3.3百度服务器把处理结果发送给浏览器
    3.4通过’响应报文’发送给浏览器
    3.5浏览器接收到响应报文,解析浏览器返回的内容呈现给用户
  4. 浏览器显示网页
    在这里插入图片描述
  • 请求报文组成:请求行+请求头+空行+请求体
  • 响应报文组成:响应行+响应头+响应体

现在我们来做一个测验:通过wamp可以把自己的电脑配置为一台服务器,可以访问我电脑上的一个网页(http://127.0.0.1/Jquery/ajax/02get.html)
可以看到network里面有响应头和响应体,在response里面就是响应体哦
在这里插入图片描述

4.什么是url

其实我们平时在浏览器的地址栏中输入的地址就是一个url
URL格式:
http://127.0.0.1/Jquery/ajax/02get.html(浏览器会自动添加80)
完成的格式:http://127.0.0.1:80/Jquery/ajax/02get.html

  1. URL拆分:
  • http:// URL协议类型
  • 127.0.0.1 服务器IP地址
  • :80 服务器端口号
  • Jquery/ajax/02get.html 需要访问的资源名称
  1. URL拆分后每部分的作用
  • IP地址和端口号:告诉浏览器需要访问的那台服务器的详细地址是什么,找到对应的服务器
    IP地址相当于现实生活中的地址:重庆市民安华福
    端口号相当于门牌号:A栋6-4
    只要把地址和门牌号码结合在一起就可以得到一个详细的地址,拿到详细地址就可以根据地址找到对应的位置

  • 需要访问的资源名称:当我们通过IP地址和端口号找到对应的服务器之后,需要通过资源名称告诉服务器,我们需要获取服务器上的哪个资源

  1. URL网络协议类型(HTTP协议):超文本传输协议
    3.1什么是协议:类似离婚租房协议,用来规范约束某一类事务。
    3.2那么网络协议类型就是用来规范哪一类事务?
    HTTP协议就是用来约束浏览器和服务器的沟通,浏览器和服务器都遵守这个协议的话沟通起来就没有问题了
    我们知道通过浏览器访问网页需要去服务器请求获取数据,那么浏览器必须要和服务器进行沟通,涉及到沟通
    沟通最常见的问题:语言不通!类似美国人和中国人说话,解决沟通问题需要规则(比如都说中文,都说英文,请一个翻译等等),这些规则就是协议

5.补充

  1. 如何查看文件拓展名(后面的.xml .mp3)
    打开文件夹,选中文件,点最上面的查看,点导航栏的文件拓展名即可

  2. 电脑上的一个文件是可以"同时"被多个软件打开的,不同的软件打开可能会有不同的效果(浏览器打开不可编辑,记事本打开html文件可以编辑)

  3. 什么是纯文本文件?
    我们Windows电脑上有一款默认安装好的软件叫做记事本. 这款软件就是专门用来打开纯文本文件的,所以只要能够被记事本打开,并且能够正常显示的文件都是纯文本文件(html文件是纯文本文件)

2.HTML

1.认识HTML

  1. 什么是HTML?
    专门用来告诉浏览器哪几个内容是什么含义(h,p,a),这样浏览器就会显示正确的格式
  2. 作用
  • 就只有一个作用:只能用来描述文本语义!!不是用来修改样式的
  • 因为HTML的这些标签是专门用来描述其它文本语义的,并且在浏 览器中不会被显示出来,所以我们称这些文本为"超文本",而这些文本又叫做标签(包含单标签<>和双标签<></>),所以HTML被称之为"超文本标记语言"

面试题:
- H1标签它的作用是什么?
-错误: H1标签可以用来修改文字的大小,并且还可以将文字加粗
-正确: H1标签的作用是用来告诉浏览器,哪些文字是标题.也就是H1标签是专门用于给指定的文字添加标题语义的

2.HTML发展史

  1. IETF简介
    ●IETF是英文Internet Engineering Task Force的缩写,翻译过来就是"互联网工程任务组"
    ●IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹
    配的域名系统( DNS)、用于发送邮件的简单邮件传输协议( SMTP )等

  2. W3C简介
    ●W3C是英文World Wide Web Consortium的缩写,翻译过来就是W3C理事会或万维网联盟,
    W3C是全球互联网最具权威的技术标准化组织.
    ●W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim
    Berners-Lee
    ●W3C负责web方面标准的制定,像HTML、XHTML、 CSS、 XML的标准就是由W3C来定制的。

html1.0是没有标准的,1995年html2.0由w3c制定后才有标准,html4.0开始分化,w3c觉得标准不够严格,指定一个XHTML1.0标准,比html更严格严谨
但是引发了很大的不满,因为太严格了,以前有的东西到xhtml就不能用了(过去很多用html写的都不能用了),但是w3c不以为然一意孤行,继续发布了xhtml1.1,但是xhtml发布2.0标准一出
遭到了五大浏览器的抵制,所以没办法了,五大浏览器合并搞了一个WHATWG组织,为了继续推广html的标准,他们自己出了一个html5的草案,然后W3c召开五大浏览器开了一个会,和浏览器厂商一起发布了HTML5正式版!
在这里插入图片描述

3.html结构理解

  1. <html></html>
    作用:告诉浏览器这是一个网页,也就是告诉浏览器我是一个HTML文件

  2. <head></head>
    作用:用于给网站添加一些配置信息

  • 指定网站的标题/指定网站的小图标(就是你打开浏览器的名字和图表,随便打开一个网页,浏览器顶部就看得到)
  • 添加网页的SEO相关信息(指定网站的关键字/指定网站的描述信息)
  • 添加一些外部的js css文件等
  • 添加一些浏览器适配相关的内容
  • 注意:写在header内部的内容除了标题和小图标,页面都看不见,只有浏览器知道
  1. <title></title>
    作用:专门用于指定网站的标题,并且这个指定的标题将来还会作为用户保存网站的默认标题,注意:必须写在header里面
  2. <body></body>
    作用:专门用于html文档中需要显示给用户查看的内容,包括文字影音。

4.字符集问题

1. 作用:指定网页的字符集

  • 为什么会有乱码现象:因为在编写网页的时候没有指定字符集
  • 如何解决乱码现象:在head标签添加<meta charset="UTF-8">指定字符集
  • 所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子,你应该如何去查找才能找到对应的内容

2. GBK(GB2312)和UTF-8区别

  • GBK(GB2312)里面存储的字符比较少,仅仅存储了汉字和一些常用外文-体积比较小
  • UTF- 8里面存储的世界上所有的文字 -体积比较大
  • 如果你的网站仅仅包含中文,那么推荐使用GB2312,因为它的体积更小,访问速度更快
  • 如果你的网站除了中文以外,还包含了一些其它国家的语言,那么推荐使用UTF- 8
  • 懒人推荐,一律写UTF-8,网速很快,其实速度差异影响不大

3. 注意点:

  • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
  • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候,文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

6.字符实体

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值