diff --git "a/\345\206\234\344\273\225\351\271\217/20240904-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240904-Git\346\265\201\347\250\213\345\217\212Markdown\350\257\255\346\263\225\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240904-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240904-Git\346\265\201\347\250\213\345\217\212Markdown\350\257\255\346\263\225\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240909-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240909-\350\256\244\350\257\206web\343\200\201\346\265\217\350\247\210\345\231\250\345\217\212HTML\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240909-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240909-\350\256\244\350\257\206web\343\200\201\346\265\217\350\247\210\345\231\250\345\217\212HTML\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240911-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240911-html\350\247\204\350\214\203\343\200\201\346\216\222\347\211\210\346\240\207\347\255\276\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240911-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240911-html\350\247\204\350\214\203\343\200\201\346\216\222\347\211\210\346\240\207\347\255\276\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240913-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240913-\345\255\227\344\275\223\343\200\201\345\233\276\347\211\207\346\240\207\347\255\276\343\200\201\350\266\205\351\223\276\346\216\245\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240913-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240913-\345\255\227\344\275\223\343\200\201\345\233\276\347\211\207\346\240\207\347\255\276\343\200\201\350\266\205\351\223\276\346\216\245\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240914-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240914-\345\210\227\350\241\250\343\200\201\350\241\250\346\240\274\346\240\207\347\255\276\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240914-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240914-\345\210\227\350\241\250\343\200\201\350\241\250\346\240\274\346\240\207\347\255\276\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240918-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240918-\350\241\250\345\215\225\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240918-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240918-\350\241\250\345\215\225\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240920-\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240920-HTML\350\257\246\350\247\243\347\254\224\350\256\260.md" similarity index 100% rename from "\345\206\234\344\273\225\351\271\217/20240920-\347\254\224\350\256\260.md" rename to "\345\206\234\344\273\225\351\271\217/20240920-HTML\350\257\246\350\247\243\347\254\224\350\256\260.md" diff --git "a/\345\206\234\344\273\225\351\271\217/20240923-html\350\257\246\350\247\243\345\217\212\345\255\227\344\275\223\346\226\207\346\234\254\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/\345\206\234\344\273\225\351\271\217/20240923-html\350\257\246\350\247\243\345\217\212\345\255\227\344\275\223\346\226\207\346\234\254\345\261\236\346\200\247\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..1ad1f7d4bfedd93a45940cce18ae3f18090ce107 --- /dev/null +++ "b/\345\206\234\344\273\225\351\271\217/20240923-html\350\257\246\350\247\243\345\217\212\345\255\227\344\275\223\346\226\207\346\234\254\345\261\236\346\200\247\347\254\224\350\256\260.md" @@ -0,0 +1,119 @@ +# 拖拽 + +在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 + +### 1、拖拽元素 + +页面中设置了 `draggable="true"` 属性的元素。 + +**拖拽元素的事件监听**：（应用于拖拽元素） + +- `ondragstart`当拖拽开始时调用 + +- `ondragleave` 当**鼠标离开拖拽元素时**调用 + +- `ondragend` 当拖拽结束时调用 + +- `ondrag` 整个拖拽过程都会调用 +### 2、目标元素 + +比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。 + +页面中任何一个元素都可以成为目标元素。 + +**目标元素的事件监听**：（应用于目标元素） + +- `ondragenter` 当拖拽元素进入时调用 + +- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态） + +- `ondrop` 当在目标元素上松开鼠标时调用 + +- `ondragleave` 当鼠标离开目标元素时调用 + +**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。 + +## 历史、记录 + + +界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。 + +在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态 + +`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。 + +- window.history.forward(); // 前进 + +- window.history.back(); // 后退 + +- window.history.go(); // 刷新 + +- window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。 + +- 通过JS可以加入一个访问状态 + +- history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态) + +## 地理定位 + +在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。 + + +# 本文重要内容 + + - CSS的单位 + - 字体属性 + - 文本属性 + - 定位属性：position、float、overflow等 + +## CSS的单位 + +html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 +**CSS中的单位是必须要写的**，因为它没有默认单位。 + +### 绝对单位 + +1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。 + +各种单位的含义： + +- `in`：英寸Inches (1 英寸 = 2.54 厘米) +- `cm`：厘米Centimeters +- `mm`：毫米Millimeters +- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸) +- `pc`：皮卡Picas (1 皮卡 = 12 点) + +### 相对单位 + +`px`：像素 +`em`：印刷单位相当于12个点 +`%`：百分比，相对周围的文字的大小 + +为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。 + +## font 字体属性 + +CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。 + +### 行高 + +CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 + +### 如何让单行文本垂直居中 + +小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。 + +### `vertical-align: middle;` 属性 + +`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。 + +## 文本属性 + +CSS样式中，常见的文本属性有以下几种： + +- `letter-spacing: 0.5cm ;` 单个字母之间的间距 +- `word-spacing: 1cm;` 单词之间的间距 +- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线 +- `color:red;` 字体颜色 +- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（**在当前容器的中间**）、justify +- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写） diff --git "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240909-\346\237\245\350\257\242\346\265\217\350\247\210\345\231\250\345\274\225\346\223\216\346\270\262\346\237\223\344\275\234\344\270\232.md" "b/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240909-\346\237\245\350\257\242\346\265\217\350\247\210\345\231\250\345\274\225\346\223\216\346\270\262\346\237\223\344\275\234\344\270\232.md" deleted file mode 100644 index 425d8268c6ce95478885a6c0c946c26c30d95222..0000000000000000000000000000000000000000 --- "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240909-\346\237\245\350\257\242\346\265\217\350\247\210\345\231\250\345\274\225\346\223\216\346\270\262\346\237\223\344\275\234\344\270\232.md" +++ /dev/null @@ -1,12 +0,0 @@ -以下是中国市场主流浏览器及其渲染核心和JS引擎的列表： - -| 浏览器名称 | 渲染核心 | JS引擎 | -| ----------- | --------- | ------ | -| Google Chrome | Blink | V8 | -| Mozilla Firefox | Gecko | SpiderMonkey | -| Apple Safari | WebKit | JavaScriptCore | -| Microsoft Edge | Blink | V8 | -| UC浏览器 | 基于Blink/WebKit | V8/JavaScriptCore | -| 360安全浏览器 | 基于Blink/WebKit | V8/JavaScriptCore | - -表格中的信息是基于搜索结果的最新数据，并且可能会随着时间和技术的发展而变化。例如，Microsoft Edge在早期版本中使用了EdgeHTML作为渲染核心和Chakra作为JS引擎，但在后来的版本中转向了Blink渲染核心和V8 JS引擎。同样，UC浏览器和360安全浏览器等中国国内的浏览器通常基于开源的Blink或WebKit渲染核心，并可能使用与之兼容的JS引擎。 diff --git "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240911-\346\260\264\345\271\263\347\272\277\346\226\207\345\255\227\345\261\205\344\270\255\344\275\234\344\270\232.html" "b/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240911-\346\260\264\345\271\263\347\272\277\346\226\207\345\255\227\345\261\205\344\270\255\344\275\234\344\270\232.html" deleted file mode 100644 index 12e57cf9a968b1fa0111c18fbe780e3e5656a12c..0000000000000000000000000000000000000000 --- "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240911-\346\260\264\345\271\263\347\272\277\346\226\207\345\255\227\345\261\205\344\270\255\344\275\234\344\270\232.html" +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - Document - - - - - - - - -
这是居中的文字
-
- - \ No newline at end of file diff --git "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240913-\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255\344\275\234\344\270\232/20240913.html" "b/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240913-\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255\344\275\234\344\270\232/20240913.html" deleted file mode 100644 index b184fd608945fc4463a5da03ac2fc8fc0e70a2d8..0000000000000000000000000000000000000000 --- "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240913-\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255\344\275\234\344\270\232/20240913.html" +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Document - - - - 流萤 - - - \ No newline at end of file diff --git "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240913-\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255\344\275\234\344\270\232/img1.png" "b/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240913-\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255\344\275\234\344\270\232/img1.png" deleted file mode 100644 index d777d335eb04c2c3678d94f0b4a983b3e142c844..0000000000000000000000000000000000000000 Binary files "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240913-\345\233\276\347\211\207\346\260\264\345\271\263\345\236\202\347\233\264\345\261\205\344\270\255\344\275\234\344\270\232/img1.png" and /dev/null differ diff --git "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240914-\350\213\271\346\236\234\345\257\274\350\210\252\344\275\234\344\270\232.html" "b/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240914-\350\213\271\346\236\234\345\257\274\350\210\252\344\275\234\344\270\232.html" deleted file mode 100644 index 5fb717eff5b6ca40507d547d98b8bd5e097043a8..0000000000000000000000000000000000000000 --- "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240914-\350\213\271\346\236\234\345\257\274\350\210\252\344\275\234\344\270\232.html" +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - Document - - - - - - - - -
- - - - - -
- - - \ No newline at end of file diff --git "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240918-\346\214\211\351\222\256\346\202\254\346\265\256\344\275\234\344\270\232.html" "b/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240918-\346\214\211\351\222\256\346\202\254\346\265\256\344\275\234\344\270\232.html" deleted file mode 100644 index 106cf34c69b8910657c7571af4fb670804f418b2..0000000000000000000000000000000000000000 --- "a/\345\206\234\344\273\225\351\271\217/\344\275\234\344\270\232/20240918-\346\214\211\351\222\256\346\202\254\346\265\256\344\275\234\344\270\232.html" +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - Document - - - - - - - - - - - - - - - - - - - - - -
- - - - \ No newline at end of file