diff --git "a/\345\274\240\350\257\255\345\253\243/20240905-html\346\246\202\345\277\265\345\222\214\351\203\250\345\210\206\345\237\272\347\241\200+\345\233\276\345\272\212.md" "b/\345\274\240\350\257\255\345\253\243/20240905-html\346\246\202\345\277\265\345\222\214\351\203\250\345\210\206\345\237\272\347\241\200+\345\233\276\345\272\212\344\275\234\344\270\232\345\261\225\347\244\272.md" similarity index 100% rename from "\345\274\240\350\257\255\345\253\243/20240905-html\346\246\202\345\277\265\345\222\214\351\203\250\345\210\206\345\237\272\347\241\200+\345\233\276\345\272\212.md" rename to "\345\274\240\350\257\255\345\253\243/20240905-html\346\246\202\345\277\265\345\222\214\351\203\250\345\210\206\345\237\272\347\241\200+\345\233\276\345\272\212\344\275\234\344\270\232\345\261\225\347\244\272.md" diff --git "a/\345\274\240\350\257\255\345\253\243/20240909-git\346\223\215\344\275\234\350\241\245\345\205\205\345\217\212html\345\237\272\347\241\200\347\237\245\350\257\206.md" "b/\345\274\240\350\257\255\345\253\243/20240909-git\346\223\215\344\275\234\350\241\245\345\205\205\345\217\212html\345\237\272\347\241\200\347\237\245\350\257\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..32ac59da25308c6b0e846b5c7a9b9667f0810fcc --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/20240909-git\346\223\215\344\275\234\350\241\245\345\205\205\345\217\212html\345\237\272\347\241\200\347\237\245\350\257\206.md" @@ -0,0 +1,26 @@ +### git操作补充 + ++ git log 时光机穿梭 + ++ git reflog 可找到强推之前版本 + ++ git reset --hard url前4位 回到某个版本 + ++ git add . 添加 + ++ git commit -m "提示文字" 暂存 + ++ git push 推送 + ++ git config --gloal user.name "" 用户名 + ++ git config --gloal user.email "" 邮箱 + +### HTML部分基础 + +如何快速注释? + +``` +1.Ctrl+K+C +2.Ctrl+/ +``` \ No newline at end of file diff --git "a/\345\274\240\350\257\255\345\253\243/20240911-HTML\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214\350\266\205\351\223\276\346\216\245+\346\265\217\350\247\210\345\231\250\344\275\234\344\270\232.md" "b/\345\274\240\350\257\255\345\253\243/20240911-HTML\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214\350\266\205\351\223\276\346\216\245+\346\265\217\350\247\210\345\231\250\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..b15e2e3cdaf722fbb37566441145634a0e8426f5 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/20240911-HTML\345\255\227\344\275\223\346\240\207\347\255\276\345\222\214\350\266\205\351\223\276\346\216\245+\346\265\217\350\247\210\345\231\250\344\275\234\344\270\232.md" @@ -0,0 +1,149 @@ +# HTML笔记 +### 基本的文本格式化标签 +1.**强调,两者可嵌套使用,前者的效果大于后者** +``` + 有加粗效果 + 有斜体效果 +``` +2.**上下标** +``` + 上标文本,如指数、商标符号 + 下标文本,如脚注、化学符号脚标 +``` + +### 超链接 +**超链接有三种形式,外部链接、锚链接、邮件链接** + +1. **外部链接:链接到外部文件** + +``` +百度 +``` + +2. **锚链接:给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转。使用name属性或id属性给那个特定位置起个名字。** + +``` + +顶部 +
+
+
+
+回到顶部 + +``` + +### 注意!!!! +**name属性是HTML4.0以前使用的,id属性是4.0后才开始使用。为了向前兼容,name和id属性都要写上,并且值相同。** + +3. **邮件链接** + +``` +点击进入我的邮箱 +``` + +### 超链接的属性 ++ `href`: 目标URL ++ `title`: 鼠标悬停文本 +``` +照片 +``` ++ `name`: 主要用于设置一个锚点的名称 ++ `target`: 告诉浏览器用什么方式打开目标页面。 + - `target`属性的值: + - `_self`: 在同一个网页中显示(默认值) + - `_blank`: 在新窗口打开 + - `_parent`: 在父窗口中显示 + - `_top`: 在顶级窗口中显示 + + +# 浏览器作业 + +## 大致浏览器 +1. Google Chrome +2. Safari +3. Microsoft Edge +4. Firefox +5. Samsung Internet +6. Opera +7. UC Browser +8. Android +9. QQ Browser +10. Mozilla Firefox +11. Brave +12. Vivaldi +13. Tor +14. Netscape +15. Internet Explorer +16. Chromium +17. DuckDuckGo 隐私浏览器 +18. 其他的,这边省略不说了哈 + + +## 浏览器内核与JS引擎概述 + +## 主流浏览器内核及其JS引擎 + +| 浏览器 | 内核 | JS引擎 | +|--------|------|--------| +| IE | Trident | JScript | +| Firefox (火狐) | Gecko (Firefox内核) | SpiderMonkey (FF3.0及以下), TraceMonkey (FF3.1及以上) | +| Google Chrome (谷歌) | Chromium (以前Webkit, 现Blink) | V8 | +| Safari (苹果) | Webkit | JavaScriptCore (Safari3.1及以下), SquirrelFish (Safari4.0) | +| Opera (欧朋) | Presto (早期), Webkit (中期), Blink (当前) | Linear A, Linear B, Futhark, Carakan | + +### 其他浏览器 +- **360浏览器、猎豹浏览器**:IE+Chrome双内核 +- **搜狗、遨游、QQ浏览器**:Trident(兼容模式) + Webkit(高速模式) +- **百度浏览器、世界之窗**:IE内核 +- **2345浏览器**:以前是IE内核,现在是IE+Chrome双内核 + +## 浏览器如何渲染页面 + +1. **DOM构造** + - 解析HTML生成DOM树(DOM Tree) + - 解析CSS生成样式表规则(CSSOM) + - 将DOM树与CSSOM结合生成渲染树(Render Tree) + +2. **布局** + - 浏览器从上到下,从左到右计算Render Tree每个节点信息,并进行布局 + +3. **绘制页面** + - 根据布局结果绘制整个页面 + +## 详解 + +### 浏览器内核(Rendering Engine) +- **定义**:浏览器最核心的部分,负责渲染网页内容,将页面内容和排版代码转换为用户视图。 +- **组成**:通常包含渲染引擎和JS引擎(如WebKit包含WebCore和JSCore)。 + +### 主流浏览器内核历程 + +#### Internet Explorer +- **内核**:Trident +- **JS引擎**:Chakra(IE9 32位及IE10+) + +#### Safari +- **内核**:Webkit +- **JS引擎**:JSCore + +#### Chrome / Chromium +- **内核**:Chromium(基于WebKit),后转为Blink +- **JS引擎**:V8 + +#### Opera +- **内核**:Presto(早期),Webkit(中期),Blink(当前) +- **JS引擎**:Linear A, Linear B, Futhark, Carakan + +#### Firefox +- **内核**:Gecko +- **JS引擎**:SpiderMonkey, TraceMonkey, JaegerMonkey, IonMonkey, OdinMonkey + +### 注意!!!! +- 不同内核对网页编写语法的解释不同,导致页面显示效果有差异。 +- 浏览器内核名称与浏览器名称不完全对应,如Opera曾使用Presto后转为Webkit再转为Blink。 +- 即使内核名称相同,不同版本也可能有较大差别。 + + + +