From 17c27769bed887eed0b38648f4ad95bf6f8a72a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=9C=E4=BB=95=E9=B9=8F?= <2293215729@qq.com> Date: Mon, 23 Sep 2024 22:28:51 +0800 Subject: [PATCH 1/2] tijiao --- ...36\346\200\247\347\254\224\350\256\260.md" | 119 ++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 "\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" 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 0000000..e9ec3da --- /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`（每个单词的首字母大写） -- Gitee From c6c0dbca9ea6be35ee02596d4b3b6a81a74cfe4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=9C=E4=BB=95=E9=B9=8F?= <2293215729@qq.com> Date: Mon, 23 Sep 2024 22:29:51 +0800 Subject: [PATCH 2/2] tijiao --- ...36\346\200\247\347\254\224\350\256\260.md" | 119 ------------------ 1 file changed, 119 deletions(-) delete mode 100644 "\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" 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" deleted file mode 100644 index e9ec3da..0000000 --- "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" +++ /dev/null @@ -1,119 +0,0 @@ -# 拖拽 - -在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`（每个单词的首字母大写） -- Gitee