如何用HTML寫一個網(wǎng)頁

時間：2023-07-08 12:42:01 | 來源：網(wǎng)站運營

時間：2023-07-08 12:42:01 來源：網(wǎng)站運營

如何用HTML寫一個網(wǎng)頁：首先，新建一個文件夾，標題為html-demo-1，可以拖到vscode打開，接著在文件夾中新建文件index.html。html文件有一個基本格式，輸入感嘆號，然后tab鍵，就會出現(xiàn)。由于我們寫的是一篇中文網(wǎng)頁，故要做一些改動，把lang后面的en改成zh-CN，基本準備工作到這里就結束了。下次新建html文件基本上都是用這種方法。

依次用的標簽有，

表示標題的<h>標簽，<h>標簽有<h1>到<h6>六個層級，標題從大到小。

代表文章一個段落的的<p>標簽，不僅是文本，任何想以段落顯示的內(nèi)容，比如圖表和表單項，都可以放進<p>元素。

注意它與<div>的區(qū)別，<div>是無語義的塊級元素，只要樣式上需要多個塊級元素組合在一起，就可以使用<div>。但是，這應該是最后的措施，帶有語義的塊級標簽始終應該優(yōu)先使用，當且僅當沒有其他語義元素合適時，才可以使用<div>。

<nav>標簽定義導航鏈接的部分。

<ol>標簽是一個有序列表容器，會在內(nèi)部的列表項前面產(chǎn)生數(shù)字編號。列表項的順序有意義時，比如排名，就會采用這個標簽。<ol>標簽內(nèi)部可以嵌套<ol>標簽或<ul>標簽，形成多級列表。

<ul>是一個無序列表容器，會在內(nèi)部的列表項前面產(chǎn)生實心小圓點，作為列表符號。列表項的順序無意義時，采用這個標簽。

<li>表示列表項，用在<ol>或<ul>容器之中。

新建一個目錄名叫images，把圖片下載好后直接拖入vscode的images目錄中，在src后輸入images可以選擇目錄中的文件，alt屬性用來設定圖片的文字說明，圖片不顯示時（比如下載失敗，或用戶關閉圖片加載），圖片的位置上會顯示該文本。但是我們還需要加一些寬度和高度的設定，一旦設置了這兩個屬性，瀏覽器會在網(wǎng)頁中預先留出這個大小的空間，不管圖片有沒有加載成功。不過，由于圖片的顯示大小可以用css設置，所以不建議使用這兩個屬性。如果一定要設置，只要設置其一防止圖片變形，一般來說圖片不能超過300k，否則加載速度會變慢，建議壓縮，想要有點擊圖片產(chǎn)生高清大圖的效果，除了a標簽內(nèi)鏈接外，一般還要添加target="_blank"，

內(nèi)容寫完后，我們可以使用谷歌瀏覽器檢查功能預覽網(wǎng)頁在手機上的效果。也可以用處在同一wifi下的手機調(diào)試。也可以用chorme遠程調(diào)試。

最后一步是部署到github pages，注意它在生成網(wǎng)址后加上路徑index.html，在倉庫中一定要加上預覽地址，任何作品都應該如此，方便面試官瀏覽。

預覽地址如下：拖延心理學

提高效率的小技巧 ：

1.輸入包圍縮寫個別行：ctrl+shift+P（顯示相關插件的命令），輸入wrap，選擇輸入包圍縮寫個別行，選中該需要修改的部分，再次輸入Emmett wrap，點擊輸入縮寫包圍個別行，ul>li*，即可快速達到想要效果。（注意使用縮寫包圍和使用縮寫包圍個別行的區(qū)別）

2.同時刪除維基百科[ ]中的內(nèi)容：點擊編輯，替換，使用正則表達式， 用完之后注意取消

3.按住alt鍵可以多選 全選所需部分 并按tab鍵 可以使其整體右移