第十四课笔记

前端概要

HTML,CSS,JS 三把利器

HTML

众所周知，对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。所有的web服务器的根源就是客户端和服务端的通过socket进行交互。

访问一个网站，服务端返回一个字符串。浏览器把字符串给解析了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML的本质

1、一套规则、浏览器认识的规则
2、开发者：
    　　学习html的规则
    　　开发后台程序：
        　　    写html文件(充当模板的作用) 数据库获取数据，然后替换到html文件的指定位置WEB框架
    　　本地测试
        　　   找到文件路径，直接浏览器打开
        　　   pycharm打开测试
        　　   如果pycharm打开显示不出你想要的效果，试试第一种方式打开
    　　编写html文件
        　　 doctype 对应关系
        　　 html标签，标签内部可以写属性
        　　注释

docType对应关系

遵循统一的规范<!DOCTYPE html>，默认就是统一的规范

<!DOCTYPE html>   #头部，第一句话，声明规范
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<html></html>标签

起始标签，结束标签，必须成对出现，html标签只能有一对

把html比作一个人，只能有一个head,和一个Body

<html>这是一对标签,把它称作html标签</html>

<head>是head标签</head>

<body>是body标签</body>

标签内部属性

lang="en"是标签内部的属性，标签内部，可以写属性

<html lang="en">

注释

<!DOCTYPE html>   
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这里是注释
单行，多行都可以--> 
</body>
</html>

head标签

其实这个head标签的部分就相当于人的大脑，除了title之外，所有的标签都是看不到，所以我们今天我们就来仔细研究一下这个html的大脑部分，head标签的东西。

标签分类

自闭和标签

说明：只有开头没有结尾的，是自动闭合的，所以称为自闭合标签，自闭合标签就那么几个，记住就好

<meta> 标签

<link> 标签

主动闭合标签

说明：有开头也有结尾，是主动闭合的，称为主动闭合标签，我们用到的大部分都是主动闭合标签

<title></title>
<style></style>
<script></script>
<body></body>
<head></head>

注：自闭和的标签，pycharm没有提示结束符，主动闭合的是有提示主动闭合的

Meta标签（head内部标签）

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字

1.页面编码

<meta charset="UTF-8">  #pycharm的写法，一般默认这个就可以了
 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> #第二种写法

2.刷新和跳转

<meta http-equiv="Refresh" Content="3">  #网站每3秒刷新一次
<meta http-equiv="Refresh" Content="3; Url=http://www.baidu.com" /> #网站过三秒跳转到另外一个网页

3.关键字

说明：在百度网上什么关键字,可以搜索到这个网站，做搜素引擎的，关键字搜索

<meta name="keywords" content="看看，说说，小白，钉钉" >

4.描述

说明：描述你的网站是干嘛的

<meta name="description" content="此网站描述是用来做什么的。" />

5.X-UA-Compatible，兼容问题

微软的IE6是通过XP、win2003等操作系统发布出来，作为占统治地位的桌面系统，也使得IE占据了统治地位，许多网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码调整后，才能够正常运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准都抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在IE版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版的错误、文字重叠、显示不全等各种兼容性错误。

<meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8" /> #按照这种方式先找IE9，再找IE8...

Title（head内部标签）

<head>
    <title>Title</title>
</head>

Link（head内部标签）

Style

Scipt