前端学习笔记1

最新推荐文章于 2024-07-14 09:37:06 发布

NaNa0o

最新推荐文章于 2024-07-14 09:37:06 发布

阅读量198

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/NaNa0o/article/details/125119664

版权

前端学习笔记

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写好，即网页的关键字。在name属性中设置keywords，content就是关键字的内容，中间用逗号隔开。
5.标签<meta name="description" content="网页描述" />：页面描述就是搜索引擎搜索到之后展示的文字，在name属性中设置。
6.标签<title></title>：网页标题，浏览器选项卡区域显示的文字。
– <body></body>网页的正式内容，浏览器可视区域