前端学习笔记
HTML5
一、知识储备
制作网页文件 发送http请求，接收回传的数据，渲染网页 ???--第一次打开一个网页需要很长时间，第二次打开同一个网站(本地缓存)更快 HTTP(客户端-服务器) ??-HTTP无状态，每次都需要重新要求- ??--输入 URL ??--DNS 域名解析 ??--建立 TCP 连接 ??--发送 HTTP Request ??--Web 服务器 Nginx 反向代理 ??--应用服务器 Servient 处理请求 ??--关闭 TCP 连接 ??--客户端解析 HTML文档 并渲染相应的页面（HTML、CSS、JS） 纯文本只包含文本，不包括图片、视频等文本；纯文本文件只能写纯文本，不能保存样式，不能传输文本样式，如.txt，.html，.css，.js文件；非纯文本文件，如word .doc文件和ppt . ppt文件等。因此二者文件占用默认内存大小不同。
VS Code ??--将新文件夹拖入编译器 ??--在文件夹中建立新的文件或文件夹，文件的后缀是.html ??--在新建的.html 文件中输入 。html:5 ?回车，生成html文件的骨架 ??– tab键快速补充标签 ??– div * 5 tab多种元素的快速生成 ??– h$ * 6 tab快速生成h1-h6 ??– shift alt 键盘上下箭头复制当前行文本 ??– ctrl shift k删除当前行 ??– 按下滚轮键不松手，向下拖动鼠标(拖动，不是滚动滚轮)选择多个光标 ??– ctrl enter在任何位置换行 ??– ctrl 键盘“ 或-”放大或缩小文本
二、HTML5 骨架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="前端,HTML,JavaScript"> <meta name="description" content="网页描述" />
<title>Document</title>
</head>
<body>
...
</body>
</html>
– <!DOCTYPE html>DTD(Document Type Definition，文本类型定义)，必须出现在第一行，目的是让浏览器知道是什么格式的文件。<!> 警示标签；DOCTYPE 表示文档类型；html 就是超文本标记语言。 – <html lang="en"></html>整个文件被其包裹，包括<head></head>和<body></body>两部分，且二者为同级关系。属性lang，language的缩写，表示整个网页的主题语言，en表示英语，中文的表示法有三种：zh、cn、zh-CN。 – <head></head>网页的配置 - <meta >“元”的意思，表示基本配置。 1.属性charset：配置字符集，有UTF-8，gb2312，gbk；如果网页的使用场景是面向国际化的，使用UTF-8，如果主要面向国内，gbk即可。修改字符集，除了了修改本属性，还要修改编辑器，点击右下角的字符集标识选择“通过编码保存”，输入对应的字符集并选择。 2.标签<meta http-equiv="X-UA-Compatible" content="IE=edge">：浏览器私有设置，edg是win10中IE升级版浏览器，这句话设置兼容性使得edge和IE的渲染方式一样；对于一些双核浏览器，例如360，QQ，搜狗，百度，猎豹浏览器等都可以加上这句话，表示尽可能的使用高级核打开页面。 3.关键字viewport：视口，在name属性中设置，针对于手机网页。如果不加这个视口，手机看网页就是“俯瞰”模式，将以980px宽度俯瞰页面；加上这个视口，手机看网页就是“APP”模式，将以APP的状态、字号看页面。 4.标签<meta name="keywords" content="前端,HTML,JavaScript">： SEO（搜索引擎优化） 核心：把keywords写好，即网页的关键字。设置keywords，content就是关键字的内容，中间用逗号隔开。 5.标签<meta name="description" content="网页描述" />：页面描述就是搜索引擎搜索到之后展示的文字，在name属性中设置。 6.标签<title></title>：网页标题，浏览器选项卡区域显示的文字。 – <body></body>网页的正式内容，浏览器可视区域