當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端几个小知识点笔记

發布時間：2023/12/20 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端几个小知识点笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、css實現寬度是百分比的盒子為正方形

只需要保證width的百分比值和padding-bottom的百分比值一樣即可

2、手機端判斷是橫屏還是豎屏

?

3、不固定行數的文字垂直居中

需求：一個盒子div中有一段文字，文字行數不確定，如何實現該段文字在盒子內垂直居中
方法1：
在div盒子上使用兩個css屬性：display:table-cell;vertical-align:middle;
方法2：
在div盒子內部放置另外一個盒子p元素，把文字放置到p元素中，
然后div盒子設置：position:relative;
p元素設置：position:absolute;top:50%;transform:translate(-50%);

4、動態正則校驗

function dynamicReg(text) {?
　　eval("var reg = /^" + text + "$/;");?
　　console.log(reg);?
　　console.log(reg.test('123456'));?
}??
dynamicReg('34'); //false?
dynamicReg('123456'); //true

5、不固定寬高的盒子水平垂直居中

.parent {width: 60%;height: 500px;position: relative;border: 1px solid #000; } .box{width: 30%;height: 20%;position: absolute;top:0;right:0;bottom:0;left:0;margin: auto;background-color: blue; }<div class="parent"><div class="box"></div> </div>

6、移動設備上實現滾動回彈效果

-webkit-overflow-scrolling: touch; //手指離開屏幕后，還會滾動一段距離 -webkit-overflow-scrolling: auto; //手指離開屏幕后，立即停止滾動

7、盒子四周陰影效果

div {box-shadow: 0px 0px 15px #000; }

8、正則表達式

1、正則校驗是否是漢字或全角
/[^\x00-\xff]/g.test('abc') //false?
/[^\x00-\xff]/g.test('表達') 　//true
/[^\x00-\xff]/g.test('.') 　　 //false
/[^\x00-\xff]/g.test('。') 　　//true

2、密碼校驗：必須包含數字、英文、符號中的至少兩種：
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~!@#$%^&*()_+<>?.,]{8,20}$/

3、密碼校驗：必須包含數字、英文字母、特殊符號且大于等于8位：（特殊字符只能為?~!@#$%^&*()_+<>?., 中的一種或幾種）
var reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*()_+<>?.,])[\da-zA-Z~!@#$%^&*()_+<>?.,]{8,}$/;

4、密碼校驗：必須包含數字，大寫字母，小寫字母，特殊字符中的至少三種：（特殊字符只能為?~!@#$%^&*()_+<>?., 中的一種或幾種）
var reg = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W~!@#$%^&*()_+<>?.,]+$)(?![a-z0-9]+$)(?![a-z\W~!@#$%^&*()_+<>?.,]+$)(?![0-9\W~!@#$%^&*()_+<>?.,]+$)[a-zA-Z0-9\W~!@#$%^&*()_+<>?.,]{8,20}$');

9、獲取瀏覽器相關信息

/**獲得屏幕寬度**/ function getScreenWidth () {return window.screen.width; }/**獲得屏幕高度**/ function getScreenHeight() {return window.screen.height; }/**獲得瀏覽器***/ function getBrowse() {var browser = {};var userAgent = navigator.userAgent.toLowerCase();var s;(s = userAgent.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = userAgent.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = userAgent.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] : (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0;var version = "";if (browser.ie) {version = 'IE ' + browser.ie;}else {if (browser.firefox) {version = 'firefox ' + browser.firefox;}else {if (browser.chrome) {version = 'chrome ' + browser.chrome;}else {if (browser.opera) {version = 'opera ' + browser.opera;}else {if (browser.safari) {version = 'safari ' + browser.safari;}else {version = '未知瀏覽器';}}}}}return version; }/**獲得操作系統***/ function getClientOs() {var sUserAgent = navigator.userAgent;var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");if (isMac)return "Mac";var isUnix = (navigator.platform == "X11") && !isWin && !isMac;if (isUnix)return "Unix";var isLinux = (String(navigator.platform).indexOf("Linux") > -1);if (isLinux)return "Linux";if (isWin) {var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;if (isWin2K)return "Win2000";var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;if (isWinXP)return "WinXP";var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;if (isWin2003)return "Win2003";var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;if (isWinVista)return "WinVista";var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;if (isWin7)return "Win7";}return "other"; }

10、生成唯一的uuid

11、字體

宋體?? ?SimSun
黑體?? ?SimHei
微軟雅黑?? ?Microsoft YaHei
微軟正黑體?? ?Microsoft JhengHei
新宋體?? ?NSimSun
新細明體?? ?PMingLiU
細明體?? ?MingLiU
標楷體?? ?DFKai-SB
仿宋?? ?FangSong
楷體?? ?KaiTi
仿宋_GB2312?? ?FangSong_GB2312
楷體_GB2312?? ?KaiTi_GB2312
宋體：SimSuncss中中文字體（font-family）的英文名稱

Mac OS的一些：
華文細黑：STHeiti Light [STXihei]
華文黑體：STHeiti
華文楷體：STKaiti
華文宋體：STSong
華文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light

Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑體：SimHei
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋_GB2312：FangSong_GB2312
楷體_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微軟雅黑體：Microsoft YaHei

裝Office會生出來的一些：
隸書：LiSu
幼圓：YouYuan
華文細黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩云：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei

Windows 中的中文字體。
在默認情況下，也就是未自行安裝新字體或者 Office 等文字處理軟件的情況下，Windows 默認提供下列字體：
Windows 95/98/98SE 宋體、黑體、楷體_GB2312、仿宋_GB2312
Windows XP/2000/2003/ME/NT 宋體/新宋體、黑體、楷體_GB2312、仿宋_GB2312 (Windows XP SP3 宋體-PUA)
Windows Vista/7/2008 宋體/新宋體、黑體、楷體、仿宋、微軟雅黑、SimSun-ExtB

那么每種字體能顯示那些漢字呢？
Vista 之前的 Windows 中宋體/新宋體、黑體支持 GBK 1.0 字符集，
楷體_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。
（注：Windows 3.X 只能支持 GB2312-80 字符集）

Vista 及之后的 Windows 中宋體/新宋體、黑體、楷體、仿宋、微軟雅黑支持 GB18030-2000 字符集，
SimSun-ExtB 只支持 GB18030-2005 字符集擴展 B 部分。
下面對字符集進行簡單的介紹：

GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005
GB2312-80 中的字符數量最少，GB18030-2005 字符數量最多。
GB2312-80 是最早的版本，字符數比較少；
GBK 1.0 中的漢字大致與 Unicode 1.1 中的漢字數量相同；
GB18030-2000 中的漢字大致與 Unicode 3.0 中的漢字數量相同，主要增加了擴展 A 部分；
GB18030-2005 中的漢字大致與 Unicode 4.1 中的漢字數量相同，主要增加了擴展 B 部分；
由于 Unicode 5.2 的發布，估計 GB18030 會在近期發布新版本，增加擴展 C 部分。

需要說明的是在 GB18030 中擴展 B 部分并不是強制標準。
如果想查看 GB18030 的標準文本，請訪問 http://www.gb168.cn 中的強標閱讀。
如果想了解 Unicode 的內容，請訪問 http://www.unicode.org。

現在糾正網上普遍的一個錯誤：
GB18030-2000 和 GB18030-2005 都不支持單字節的歐元符號

與簡體中文有關的代嗎頁如下：
936 gb2312 簡體中文(GB2312)————其實是GBK
10008 x-mac-chinesesimp 簡體中文(Mac)
20936 x-cp20936 簡體中文(GB2312-80)
50227 x-cp50227 簡體中文(ISO-2022)
51936 EUC-CN 簡體中文(EUC)
52936 hz-gb-2312 簡體中文(HZ)
54936 GB18030 簡體中文(GB18030)

補充：
使用楷體_GB2312、仿宋_GB2312后，在 Windows 7/Vista/2008 中可能不再顯示為對應的字體。
這是因為 Windows 7/Vista/2008 中有楷體、仿宋，默認情況下沒有楷體_GB2312、仿宋_GB2312，字體名稱相差“_GB2312”。

轉載于:https://www.cnblogs.com/libo0125ok/p/8303686.html

總結

以上是生活随笔為你收集整理的web前端几个小知识点笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [转载]李开复针对马加爵事件写给中国学生
下一篇：弹幕网站开发（只有前端）