.1.4 窗口大小

// 得到頁面寬度
var width=window.innerWidth;
// 得到頁面高度
var height=window.innerHeight;
// 只能對通過window.open()打開的,并且只有一個tab頁面進行調整大小
window.resizeTo(500,500);

8.1.5 導航和打開窗口

window.open(url)

1）、當只有一個url參數時，會在新的頁面打開url，并且新頁面呈在最前面

var url="https://www.baidu.com";
window.open(url);

2）、第二個參數代表頁面打開的方式：

window.open(url,"_self");    // 以當前頁面打開新的url
window.open(url,"__parent"); // 加載到父框架
window.open(url,"__top");    // 替換任何可加載的框架集
window.open(url,name);       // 窗口名稱
window.open(url,"_blank");  // 在新的頁面打開url，并且新頁呈現在最前面

3）、如果是新彈出窗口，那么第三個參數是用來設置新窗口的一些屬性與元素，包含有以下屬性：

fullscreen、height、width、left、tpp、location、menubar、resizable、scrollbars、status、toolbar

以下為使用舉例：

var url=“xxxxxxxx”;
window.open(url,"_blank","fullscreen=yes,height=200,width=200,left=100,top=200");

window.open()打開新窗口后，會返回一個窗口對象，可對其設置各種屬性，還可以關閉：winobj.close()，不過close()方法只能用于使用open()該當打開的窗口。

4）、如果返回的窗口對象為null，那么大可能是有彈出口屏蔽程序。

　用HTML怎么制作網頁呢?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的。

　　一、網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

　　二、網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。

　　三、網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。

　　四、網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;

　　五、網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。

　　更多關于“用HTML怎么制作網頁呢?”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。

知道嗎？其實網頁中有很多種圖片格式，例如網頁中有一種圖片格式叫做 PNG，或者有一種圖片叫 JPEG，還有另外一個名字叫 JPEG。

網頁中其實還有很多其他種圖片的格式，比如 GIF，GIF 一般是用來表示動圖的，而 AVIF 或者 WebP 這些格式可能大部分同學并沒有在網頁中過多的去關注過，甚至還有一些 SVG 或者 BMP 的圖片也有，這些可能不是大多數同學所經常去關注的圖片格式。

今天會在網頁代碼中去實現自己通過引入一張圖片來在網頁中進行展示。圖片是通過圖片標簽進行引入的，寫一個圖片標簽，在 src 屬性里面去寫入當前圖片的地址，當前圖片地址可以用點斜杠表示。

當前去找到 test.jpg 的圖片，找到之后就可以在瀏覽器中進行預覽，通過瀏覽器進行打開就會發現圖片已經展示在瀏覽器中了，但是這張圖片實在是太大了。

可以通過改變代碼標簽中的"width"屬性來修改圖片大小，把它改成 100 寬，這個 100 寬就是指 100px 的意思，但是圖片又變得太小了，怎么辦？可以繼續去修改它大小，把它變成 300。

修改完寬度之后發現圖片是按比例進行伸縮的，也就是說即使不去修改它的 height 高度也能夠放大和縮小，但是一旦手動控制了它的 height 就被壓縮了，所以 height 可以不去設置。如果設置一定要提前知道這張圖片的寬高比例，隨意修改一個寬高都會導致圖片進行的變形。