整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
)通過創建WebSite程序,創建網頁
通過VS菜單欄的"文件"->"新建"->"新建網站"->"ASP.NET空網站"
創建web空網站
在右側的"解決方案"窗口的空網站上右擊選擇"添加"->"html"起個名字
創建網頁
2)通過創建WebApplication程序創建網頁
通過VS菜單欄的"文件"->"新建"->"項目"->"新建項目"->"ASP.NET空Web應用程序"
創建空web程序
創建好空web程序之后,添加網頁方式如上一個圖"創建網頁"所示基本差不多不再截圖
3)在指定瀏覽器中查看編輯好的網頁
3.1為WebApplication程序設置指定瀏覽器
設置瀏覽器
如上圖所示,點擊此圖標即可在瀏覽器中查看編輯后的效果;通過此圖標的右側小三角形查看電腦上都有上面瀏覽器,,前面打對勾地表示當前打開的瀏覽器,如果設置其他的默認瀏覽器,選擇"使用以下工具瀏覽"選項,在彈出的對話框中添加,移除設置默認瀏覽器(默不默認個人感覺差別不大),自己手動試試不再贅述
瀏覽器選項中的"Page Inspector"是VS自帶的使用IE內核的小瀏覽器
3.2為WebSite程序指定瀏覽器
3.2.1第一種方式:WebApplication程序設置方式差不多自己測試;
3.2.2第二種方式:在右側WebSite上右擊選擇"瀏覽方式",在此窗口中設置默認等操作
兩種程序第一次點擊瀏覽圖標查看網頁時都會打開一個VS自帶小型的服務器(IIS)
使用VS創建網頁便于下面的JavaScript(簡稱js)語言的講解
、新建項目
1、新建===web項目===輸入項目名稱====完成
二、新建html文件
在新建項目中新建html模板
輸入文件名稱：
三、認識基本格式
聯想出基本格式：
四、編輯html文件
運行html，選擇瀏覽器
五、html常用的快捷鍵
（1）ctrl+n+w web項目創建
（2）ctrl+n+h html文檔創建
（3）ctrl+s 保存html頁面（頁面上如果未保存會顯示*號）
（4）ctrl+r html運行
（5）ctrl+z 撤回
（6）！+tab鍵 聯想基本格式
（7）ctrl+/ 注釋和取消注釋
（8）ctrl+鼠標滾輪， 字體方大和縮小
六、認識標簽
（1）H標簽（標題標簽）
（2）p標簽 （段落標簽）
（3）img 標簽（圖片標簽）
兩種：第一種widows上傳圖片，第二種：網上圖片鏈接
第一種
img中顯示圖片
img中引入圖片
第二種：網上圖片的鏈接：
（4） 標簽（空格）
（5）em 標簽表示斜體
（6）i 標簽表示斜體
（7）br 表示換行
（8）b 標簽表示加粗
（9） strong 標簽表示加粗
（10）s 標簽（刪除線）
（11）u 標簽 （下劃線）
（12）font 顏色
（13）sub下標
（14）sup上標
<div>元素是個有故事的元素，這個元素很早就出現在html超文本標記語言中，它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。
在我還上初中的時候，智能手機還沒有出現，更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。
那時，大街小巷上有好多網吧。
那時，馬云剛剛辭去工作準備創業。
那時，發送郵件的操作都會出現在計算機課程中。
那時，對頁面還沒有現在的跨平臺要求。
那時，flashplayer大行其道。
那時，dreamwaver、flash、fireworks被稱為網頁三劍客！
那時，制作網頁可以不用懂的html的寫法！
第一次接觸網頁制作是在大學的專業課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。
那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。
因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！
也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業，讓<div>這個專業的塊元素閑置了好久。
直到智能手機，平板電腦產生后，由于對頁面的跨平臺顯示的要求的出現（這類適應多平臺的頁面布局叫做響應式布局），<table>表格制作的頁面在響應式布局大行其道的今天，用它布局的頁面開始出現代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。
從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。
dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。
這個故事在開始學習<div>和css布局之前我都會講給學生（一群文科生）聽，我只是想告訴大家，學習任何計算機技術，我們可以從簡單易學的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術換代中不會被輕易淘汰。
在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數字娛樂技術概述》，這門課既不娛樂也不概述，但是通篇都是數字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。
從此我開始學習數學。因為老師的一句話：從2000年到現在（2014）雖然各種軟件層出不窮，但是計算機圖形學的核心算法卻幾乎沒什么改變。
向下挖掘雖然很難，但是有必要！與各位共勉！
下面開始今天的內容。
首先，我們將之前的"第一個頁面.html"文件復制一個，叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。
如圖：
下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：
<body><div></div></body>我們看看效果：
啦啦啦，什么都沒有！
為了讓大家可以看出來不同，我們為<div>添加邊框屬性！
我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程，這里不再贅述。
示例代碼如下：（通過style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）
<div style = "border-style: solid;">效果如圖：
因為里面沒有內容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內容。
為了看起來花哨些，加張圖片吧！
示例圖片
示例代碼如下：
<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作》
效果如下：
其中，我們也是使用了style的方式為<img>設置的寬度，這個設置方法在<div>中一樣使用！
代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！
<div style = "border-style: solid; width:50%;">
<img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
</div>效果如圖：
整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。
為了方便觀看，我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
<div>
<p>學習網頁制作非常有趣！</p>
</div>
</div>效果如下：
如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？
示例代碼如下：
<div style = "float:right;"><p>學習網頁制作非常有趣！</p></div>
我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設置為right（右）。
頁面效果如圖：
大家思考一下如何讓圖片與文字都靠在左邊呢？
是不是為圖片style添加float:left;同時把新<div>的float改為left？
我們試試看！
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>學習網頁制作非常有趣！</p>
</div>
</div>頁面效果：
效果完全不對，圖片和文字跑到外邊來了。
這是div布局中經常出現的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設置為"clear:both"即可修正。
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>學習網頁制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>頁面效果如下：
值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設置為float：left，是沒有問題的，只有把它們放到<div>中才會出現上面的情況。
代碼如下：
<body>
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">學習網頁制作非常有趣！</p>
</body>頁面顯示效果如下：
大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！
現在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。
疫情期間，請大家少出門，不聚會，沒事在家學學網頁制作，即抗擊疫情又提高自己!
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
