From db87c1c26d5d889d0fd981f15b0aaf33c2c06cf7 Mon Sep 17 00:00:00 2001 From: l y Date: Sun, 29 Sep 2024 21:54:22 +0800 Subject: [PATCH] =?UTF-8?q?20240926=E7=AC=94=E8=AE=B0=E5=92=8C=E4=BD=9C?= =?UTF-8?q?=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...20240923-html5\350\257\246\350\247\243.md" | 220 ++++++++++++++++++ ...60\345\222\214\344\275\234\344\270\232.md" | 135 +++++++++++ 2 files changed, 355 insertions(+) create mode 100644 "\344\275\231\344\270\275/20240923-html5\350\257\246\350\247\243.md" create mode 100644 "\344\275\231\344\270\275/20240926-css\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\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" diff --git "a/\344\275\231\344\270\275/20240923-html5\350\257\246\350\247\243.md" "b/\344\275\231\344\270\275/20240923-html5\350\257\246\350\247\243.md" new file mode 100644 index 0000000..89c1e15 --- /dev/null +++ "b/\344\275\231\344\270\275/20240923-html5\350\257\246\350\247\243.md" @@ -0,0 +1,220 @@ +## 拖拽 +### 拖拽元素的时间监听：（应用于拖拽元素） + +* ondragstart ：当拖拽开始时调用 +* ondragleave：当鼠标离开拖拽元素时调用 +* ondragend：当拖拽结束时调用 +* ondrag：整个拖拽过程都会调用 + +`````` + + + +
+ + + +`````` + + +## 历史 +1. 在html5中可以通过window.history操作访问历史状态，让一个页面可以有多个历史状态 +2. 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（现在浏览器不支持改变历史状态） + +## 地理位置 +地理位置的api代码演示： +`````` + +`````` + +### 开启/关闭全屏显示方法如下（注意screen是小写） +`````` +requestFullscreen() //让元素开启全屏显示 + + cancleFullscreen() //让元素关闭全屏显示 +`````` + + +## Web存储 +### html5中有两种存储方式 +1. window.sessionStorage：会话存储： +* 保存在内存中 +* 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。 +* 在同一个窗口下数据可以共享 + +2. window.localStorage 本地存储： + +* 有可能保存在浏览器内存里，有可能在硬盘里。 + +* 永久生效，除非手动删除（比如清理垃圾的时候）。 + +* 可以多窗口共享。 +### Web存储特性 +（1）设置、读取方便。 + +（2）容量较大，sessionStorage 约5M、localStorage 约20M。 + +（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。 + +### 常见 API +设置存储内容： + + setItem(key, value); +PS：可以新增一个 item，也可以更新一个 item。 + +读取存储内容： + + getItem(key); +根据键，删除存储内容： + + removeItem(key); +清空所有存储内容： + + clear(); +根据索引值来获取存储内容： + + key(n); + +### 应用缓存 +1.优势 +* 可配置需要缓存的资源； + +* 网络无连接应用仍可用； + +* 本地读取缓存资源，提升访问速度，增强用户体验； + +* 减少请求，缓解服务器负担。 + +2.缓存清单文件里的内容怎样写： + +（1）顶行写CACHE MANIFEST。 + +（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。 + +（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。 + +（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。 + +3.举例 +````` +CACHE MANIFEST + +#要缓存的文件 +CACHE: + images/img1.jpg + images/img2.jpg + + +#指定必须联网才能访问的文件 +NETWORK: + images/img3.jpg + images/img4.jpg + + +#当前页面无法访问是回退的页面 +FALLBACK: + 404.html + +````` + + +### html 元素的嵌套关系 +* 块级元素可以包含行内元素。 + +* 块级元素不一定能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。 + +* 行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div +* 注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的 ；但是在 html 4.0.1 中， a > div 仍然是不合法的。 + + +### html 元素（body 区域） +* body 区域的 html 元素，会直接出现在页面上。 + +* div、section、article、aside、header、footer + +* p + +* span、em、strong + +* 表格元素：table、thead、tbody、tr、td + +* 列表元素：ul、ol、dl、dt、dd + +* a + +* 表单元素：form、input、select、textarea、button \ No newline at end of file diff --git "a/\344\275\231\344\270\275/20240926-css\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\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/\344\275\231\344\270\275/20240926-css\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\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" new file mode 100644 index 0000000..52a2fd9 --- /dev/null +++ "b/\344\275\231\344\270\275/20240926-css\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\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" @@ -0,0 +1,135 @@ +# css字体属性和文本属性 +### 相对单位 +* px：像素 + +* em：印刷单位相当于12个点 + +* %：百分比，相对周围的文字的大小，举例：font-size：200%（是周围文字大小的两倍） + +### font字体属性 +* font-size: 50px; （字体大小） +* line-height: 30px; （行高） +* font-family: 幼圆,黑体;（字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认） +* font-style: italic ;（italic表示斜体，normal表示不倾斜） +* font-weight: bold;（粗体） +* font-variant: small-caps; （小写变大写） + +### 行高 +1. CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的 + +2. 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除 +例如：line-height：24px；font-size=14px；他们差可以被二整除 + +### 单行文本垂直居中 +1. 如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中（不适用于多行） + +2. 多行需要计算padding；例如：文字行高20px，总行高80px，盒子高度200px，则上padding（200-80）÷2=60； + +3. vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。 + +例如：vertical-align: middle; （指定行级元素的垂直对齐方式。） + +### 字号，行高，字体属性 +（1）字号： + + font-size:14px; +（2）行高： + + line-height:24px; +（3）字体：（font-family就是“字体”，family是“家庭”的意思） + + font-family:"宋体"; + +（4）font: 加粗 字号/行高/ 字体 （font属性连写至少要有字号和字体，否则连写是不生效的） + +2.为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个） +```` +font-family:“微软雅黑”，“宋体” +```` +3.在设置字体是否加粗时，属性值既可以填写normal、bold这样的加粗字体，也可以直接填写 100至900 这样的数字。normal的值相当于400，bold的值相当于700。 + +### 文本属性 +* 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（每个单词的首字母大写）） + +### 列表属性 +1. list-style-image:url(images/2.gif) ; （列表项前设置为图片） +2. margin-left:80px; （公有属性） +3. list-style-position:设置列表中列表项标记被放置的位置；值：inside，outside + +# gitee12-14题作业 +## 第十二题： + +``````` + + + +

国庆节快乐hhhhhhhhh

+ +``````` + +## 第十三题： + + +`````` + + + +
+

今天是星期四

+

还有四天就要放国庆节假辣

+
+`````` + +## 第十四题： + +``````` + + + +
+ 这是一首诗。每个字都充满了情感，每个词都蕴含着深意 +
+``````` + + + -- Gitee