diff --git "a/\346\235\216\346\200\235/20240923-HTML5\346\226\260\345\242\236\345\206\205\345\256\271\345\222\214\344\275\234\344\270\232.md" "b/\346\235\216\346\200\235/20240923-HTML5\346\226\260\345\242\236\345\206\205\345\256\271\345\222\214\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..d901af0804fb44f6303078dbeacd80fed6070466 --- /dev/null +++ "b/\346\235\216\346\200\235/20240923-HTML5\346\226\260\345\242\236\345\206\205\345\256\271\345\222\214\344\275\234\344\270\232.md" @@ -0,0 +1,119 @@ +#### 拖拽 + +###### 拖拽元素：draggable="true" + +拖拽元素的事件监听 + + `ondragstart`当拖拽开始时调用 + + `ondragleave` 当**鼠标离开拖拽元素时**调用 + + `ondragend` 当拖拽结束时调用 + + `ondrag` 整个拖拽过程都会调用 + +``` +
+ + +``` +###### 目标元素 + +目标元素的事件监听：（应用于目标元素） + +`ondragenter` 当拖拽元素进入时调用 + +`ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态） + +`ondrop` 当在目标元素上松开鼠标时调用 + +`ondragleave` 当鼠标离开目标元素时调用 + +#### 历史 +在HTML5中可以通过window.history操作访问历史状态 +Single Page Application,可以无刷新改变网页内容 + + +#### 地理位置 + +获取方式 ： IP地址 、 三维坐标（GPS、Wi-Fi定位、手机信号定位） 、 用户自定义数据 + + +#### 全屏 + +开启全屏 requestFullscreen() + +关闭全屏 cancleFullscreen() + +全屏的伪类 +full-screen .box {} + +-webkit-full-screen {} + +moz-full-screen {} + + +#### Web存储 + +H5的两种存储方式 +window.sessionStorage 会话存储 + +window.localStorage 本地存储、 + +#### 常见 API + +设置存储内容： setItem(key, value); + +读取存储内容： getItem(key); + +根据键，删除存储内容： removeItem(key); + +清空所有存储内容： clear(); + +根据索引值来获取存储内容： key(n); + + + + +#### 跑马灯作业 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-24%20184032.png) + +``` + + + + + +``` diff --git "a/\346\235\216\346\200\235/20240926-HTML\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" "b/\346\235\216\346\200\235/20240926-HTML\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..320fb8def40600027480b508fa34a6dffc0dcee8 --- /dev/null +++ "b/\346\235\216\346\200\235/20240926-HTML\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\344\275\234\344\270\232.md" @@ -0,0 +1,164 @@ +### css单位 + +##### 绝对定位: + in： 英寸（1英寸=2.45厘米） + cm：厘米 + mm：毫米 + pt：点，或者叫英镑 (1点 = 1/72英寸) + pc：皮卡 (1 皮卡 = 12 点) + +##### 相对单位： + px：像素 + em：印刷单位相当于12个点 + %：百分比，相对周围的文字的大小 + + + +##### font字体属性： + + font-size: 50px; 字体大小 + line-height: 30px; 行高 + font-family: 幼圆,黑体; 字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认 + font-style: italic ; italic表示斜体，normal表示不倾斜 + font-weight: bold; 粗体 + font-variant: small-caps; 小写变大写 + + +##### 行高 + +CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 +行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。 +如果一段文本只有一行，行高 = 盒子高，就可以保证单行文本垂直居中 + + + +`vertical-align`属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。 +``` + + + +

我是一段文字

+ 我也是一段文字 +``` + +#### 字号、行高、字体 +是否加粗、字号、行高、字体可以连写（是否加粗、字号 font-size、行高 line-height、字体 font-family） +``` + + + +

我是一段文字

+ 我也是一段文字 + +``` +font属性连写至少要有字号和字体，否则连写是不生效 + + +字体属性的说明 +1. 网页中不是所有字体都能用，这个字体要看用户的电脑里面装没装 +2. 为了防止用户电脑里，没有所选字体。就要用英语的逗号，提供备选字体 +3. 须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体 + +#### 文本属性 +常见的文本属性有以下几种： + +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（每个单词的首字母大写） + + + + + + +### 作业 +设计一个类 .highlight，使得应用该类的元素文本颜色为金色，背景颜色为黑色，文本为大写，并且首行缩进 20px。 +同时，设置该元素的 :hover 伪类，使得悬停时文本颜色变为白色，背景颜色为深灰色。 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-28%20135105.png) +``` + + + +

这是一段需要高亮显示的文本。

+ +``` + + +设计一个类 .article，使得应用该类的元素文本颜色为深灰色，字体大小为 16px，行高为 1.5，首行缩进为 1em。 +同时，设置该元素的 :first-letter 伪元素，使得首字母字体大小为 24px，字体加粗。 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-28%20135405.png) +``` +.article{ + color: darkgray; + font-size: 16px; + line-height: 1.5; + text-indent: 1em; + padding: 10px; + } + .article p::first-letter{ + font-size: 24px; + font-weight: bold; + } + + +
+

这是文章的第一段。

+

这是文章的第二段。

+
+``` + + +设计一个类 .poem，使得应用该类的元素文本对齐方式为两端对齐，文本颜色为深蓝色，并且每个单词的首字母大写。 +同时，设置该元素的 ::first-line 伪元素，使得第一行文本颜色为深红色。 +[效果图](http://sjg1u7mxz.hn-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202024-09-28%20135446.png) +``` +.poem{ + text-align: justify; + color: darkblue; + text-transform: capitalize; + + } + .poem::first-line{ + color: darkred; + } + +
+ 这是一首诗。每个字都充满了情感，每个词都蕴含着深意。 +
+``` \ No newline at end of file