2023年9月10日

Html: SVG教程

https://flaviocopes.com/svg/ SVG 是优秀且令人难以置信的强大图像格式。本教程通过简单地解释所有需要了解的知识,为您提供 SVG 的概述。 介绍 尽管在 21 世纪初被标准化了,SVG(Scalable Vector Graphics 的缩写)是近年来的一个热门话题。 SVG 已经被糟糕的浏览器支持(尤其是 IE)惩罚了好多年。 我发现这话源自一本 2011 的书:在撰写本文时,只有在最新的浏览器中才能将 SVG 直接嵌入到 HTML 中工作。7 年过去了,这句话现在已经是过去式了,我们可以很安全地使用 SVG 图像。 现在我们可以安全地使用 SVG 图像,除非您有很多用户使用 IE8 以及更低版本,或者使用较旧的 Android 设备。这种情况下,依然存在着备选方案。 SVG 成功的一部分是由于我们必须支持各种不同分辨率和尺寸的屏幕显示。SVG…
2023年8月26日

Markdown 基本语法

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。 一、标题 在想要设置为标题的文字前面加#来表示 一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。 注:标准语法一般在#后跟个空格再写文字。 示例: # 这是一级标题 ## 这是二级标题 ### 这是三级标题 #### 这是四级标题 ##### 这是五级标题 ###### 这是六级标题 效果如下: 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 二、字体 加粗 要加粗的文字左右分别用两个*号包起来 斜体 要倾斜的文字左右分别用一个*号包起来 斜体加粗 要倾斜和加粗的文字左右分别用三个*号包起来 删除线 要加删除线的文字左右分别用两个~~号包起来 示例: **这是加粗的文字** *这是倾斜的文字*` ***这是斜体加粗的文字*** ~~这是加…
2023年8月22日

Html: 锚点链接 / 锚点定位

锚点链接是超链接的一种.锚点可以连接到文档中的某一个特定位置.对于较长的页面来说,使用锚点链接可以快速定位到页面中的某一个位置,提升用户体验. 锚点链接的使用场景一般有以下两种: 跳转到当前页面的指定位置 跳转到其他页面的指定位置 注意 定义锚点可以使用name属性或者id属性; html5去掉了name属性,建议使用id定义锚点; 如果是页面顶部的锚点,可以省略不写(为了提高代码的可读性,建议不要省略); <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=…
2023年7月25日

Html: CSS 选择器

CSS选择器用于选择你想要的元素的样式的模式。 "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。 选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 element,element div,p 选择所有<div>元素和<p>元素 1 element element div p 选择<div>元素内的所有<p>元素 1 element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 2 element+element div+p 选择所有紧接着&…
2023年7月24日

Html: CSS 超出不换行

一、CSS实现超出不换行的原理 CSS实现超出不换行的原理是通过white-space属性来实现的。在默认情况下,HTML中元素内的文本中的多个空格和换行符都会被解析成一个空格,而当white-space属性值为nowrap时,会禁止文本中的换行和空格的解析,文本会折行,但是不会进行换行操作。 在某些情况下,文本的内容超出了所在元素的宽度范围,如果不设置white-space属性,会进行自动换行,这样会破坏整个页面的布局效果,而使用white-space属性则可以实现不换行,并且保证页面布局的完整性。 二、使用white-space属性实现超出不换行 以下为实现超出不换行的代码实例: <style> .example { width: 200px; /*设置元素宽度*/ white-space: nowrap; /*设置文本…
2023年7月23日

Html: CSS form 表单对齐

表单对齐方法如下: (1)每行表单分为左栏和右栏,左栏主要是文字,右栏是表单,所有行的左栏长度相等,所有行的右栏的盒子长度之和相等。 左栏一般是一个label,右栏是若干个文本框 (2)所有左栏和右栏的盒子设置为左浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单对齐</title> <style type="text/css"> form{ width: 425px; font:14px bold "Microsoft Yahei"; } p:not(.register){ width: 425px; height: 42px; } /*p清浮动*/ p{ overflow: hidden…
2023年7月22日

Html: css实现div水平垂直居中的七种方式

一、使用grid布局 二、使用flex布局 三、使用定位+外边距 四、使用定位+平移 五、使用外边距 + 平移 六、使用文本对齐 + 行高 七、使用表格单元 一、使用grid布局 <!DOCTYPE html> <html lang="en"> <head> <title>test</title> <style> #outside { width: 200px; height: 200px; background: #000; display: grid; place-items: center; /* place-items等于justify-items:center; + align-items:center;*/ } #inside { width: 50px; height: 50px; background: #9…
2022年8月5日

Html: input标签设置disabled="disabled"属性 传值

1.如果不提交表单,设置了disabled属性的input标签的值是不可选取不可编辑状态; eg: <td width="15%" class="mip_form_td_label"><span>库存量:</span> </td> <td class="mip_form_td_content"> <input id="checkBeforeNumber" name="checkBeforeNumber" type="text" value="${CheckData.CHECKBEFORENUMBER}" disabled="disabled" /> </td> 2.如果提交表单,设置了disabled属性的input标签的值是无法传到后台的,也就是不可传值; 3…
2022年7月20日

Html: 详解a标签中href="javascript:"的几种用法

a标签的一种写法<a href="JavaScript:;"></a>,所以就来整理下a标签中href的几种用法。 一、js 伪协议的几种调用方法(参考总结的) 1、a href="javascript:js_method();" 这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句 2、 a href="javascript:void(0);" onclick="js_method()" 这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函…