整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端 HTML:如何創建網頁 01

          .HTML 介紹

          是網頁的后綴,txt 后綴是文本 ,py 后綴是 python ,html 后綴就是網頁的意思。我們如果想創建一個網頁的話,可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言,是一種標識性的語言。它包括一系列標記標簽,通過這些標記標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。

          1.html 的介紹

          頁面整體分為兩部分:

          一部分是head部分,主要是頁面的整體信息和配置,內容不會出現在瀏覽器內部。

          一部分是body部分,這部分內容則會在瀏覽器中展示出來

          我們使用 pycharm 創建一個 html ,打開后就是下圖模樣。


          (1)文檔類型聲明(默認的可以不用設置)

          <!DOCTYPE html>

          (2)開始標簽和結束標簽

          一般的標簽是成對出現的,一般稱第一個標簽是開始標簽,第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。

          開始標簽:

          <html lang="en">

          其中的 html 為根元素,是所有元素的基礎。lang 表示語言,en 表示英文。

          結束標簽:

          </html>

          (3)頭部標簽

          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>

          其中 utf-8 表示字符編碼格式,如果沒有寫這個就會發生亂碼。Title 表示文檔的標題。

          (4)身體標簽

          <body>
          
          </body>

          身體標簽是文檔的主題,可視化區域,所有的音頻,視頻,圖片,文字都可在其中搭建,相當于我們打開網頁時所看到內容。

          (5)標簽的特點

          標簽是由一對尖括號包裹單詞構成的,標簽要使用小寫。 一般的標簽是成對出現的,一般稱第一個標簽是開始標簽,第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。

          二.標簽

          標簽分為塊級標簽和內聯標簽(運行時點擊右上角的谷歌模式的小圓圈就可以)

          1.內容的書寫

          (1)塊級標簽(p)

          兩個 p 中間可隨意書寫內容

          <p>故事和酒,淘寶都有</p>

          (2)內聯標簽(span)

          <span>故事和酒,淘寶都有</span>

          完整代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
          <!-- 塊級標簽--> 
          <p>故事和酒,淘寶都有</p>
          <!--內聯標簽-->
          <span>故事和酒,淘寶都有</span>
          </body>
          </html>

          運行后:


          運行后看不出塊級標簽和內聯標簽的區別,所有我們使用檢查。右擊后點擊檢查


          在點擊下圖中左上角的方框箭頭,變成藍色說明正在運行,之后就可以查看有關的數據了


          無需點擊,只要將箭頭放在文字上就會出現相關內容



          上面兩圖可以明顯看出兩句話的寬度不相同。

          塊級標簽:在不設置寬度的情況下,寬度始終和瀏覽器寬度保持一致。

          內聯標簽:寬度和內容有關

          2.設置高度寬度

          <p style="width: 500px;height: 50px;">故事和酒,淘寶都有</p>
          
          <span style="width: 500px;height: 50px;">故事和酒,淘寶都有</span>
          



          如圖所示,只有塊級標簽寬高改變了,內聯標簽不改變。由此可得,塊級標簽設置寬高有效,內聯標簽設置寬高無效。

          3.多個標簽同時存在

          <body>
          <!-- 塊級標簽-->
          <p>故事和酒,淘寶都有</p>
          <p>故事和酒,淘寶都有</p>
          <!--內聯標簽-->
          <span>故事和酒,淘寶都有22</span>
          <span>故事和酒,淘寶都有22</span>
          </body>


          多個塊級標簽同時存在的情況下,排列方式從上往下
          多個內聯標簽同時存在的情況下,排列方式從左往右

          4.是否包含

          <body>
          <!-- 塊級標簽-->
          <p>故事和酒,淘寶都有
              <span>故事和酒,淘寶都有22</span>
          </p>
          
          <!--內聯標簽-->
          <span>故事和酒,淘寶都有22
              <p>故事和酒,淘寶都有</p>
          </span>
          
          </body>


          由此可知,塊級標簽可以包含內聯標簽,但內聯標簽不可以包含塊級標簽,只可以包含內聯標簽。

          5.塊級標簽與內聯標簽相互轉換

          (1)塊級轉內聯

          <body>
          <!--將塊級標簽轉化成內聯標簽-->
          <p style="display: inline">故事和酒,淘寶都有</p>
          <p style="display: inline">故事和酒,淘寶都有</p>
          
          </body>


          (2)內聯轉塊級(display: block)

          內聯轉為塊級之后,具有了塊級的性質。

          <span style="display: block">故事和酒,淘寶都有222</span>
          <span style="display: block">故事和酒,淘寶都有222</span>


          (3)內聯塊元素(display: inline-block)

          內聯塊元素包含了內聯標簽和塊級標簽的部分特性。

          <span style="display: inline-block">故事和酒,淘寶都有333</span>
          <span style="display: inline-block;height: 50px">故事和酒,淘寶都有333</span>


          (4)段落標簽(p)

          <!--段落標簽-->
          <p></p>

          (5)標題標簽(h)

          面制作技術詳解


          演示視頻在文章底部

          1.頁面內容居中顯示方法

          將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。

          將</div>放置在</body>之上。

          將全部內容包裹在這個div中,就可以實現整個頁面居中。

          內容顯示寬度為瀏覽器視窗寬度的50%。

          margin(外邊距)是在CSS布局中經常用到的屬性,它指定了該div元素距離四周的距離。使用“auto”值,可以實現居中。

          2.導航欄懸停頂端方法

          把四個a標簽裝到一個div中。

          將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。

          將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。

          position是css布局中指定位置的屬性,“fixed”值是讓該div懸停于固定位置。

          默認下,該div距離視窗頂端有10px左右的距離,因此為了讓它與視窗頂部對齊,添加top:0px。

          3.鼠標滑過導航標題或鏈接時改變背景色提示

          這就要介紹關于css的寫法了。

          簡單來說,就是在<head></head>標簽中添加

          <style>

          a:hover

          {

          background-color:#ffff00;

          }

          </style>

          學過HTML頁面中head標簽有啥用?——零基礎自學網頁制作的小伙伴應該知道,CSS腳本是可以添加在head元素中的。

          其中,a:hover中的a指的是所有<a></a>標簽。

          hover指的是:當鼠標懸停在a上面時的狀態

          使用:連接。

          這個狀態下要執行的內容在{}中。

          background-color:#ffff00;即背景色為黃色。

          3.隱藏滾動條方法

          首先,我們要明確一點,就是,滾動條是在內容長度超過視窗高度時產生的。

          如果要取消視窗最右側滾動條,就要控制內容高度。

          把<p></p>和<img/><map></map>全部裝進<div></div>中,控制該div的高度可以實現。

          在<p>標簽色上面添加<div>。

          在</map>標簽下面添加</div>。

          下面,為div規定尺寸,添加style="width:610px; height:530px;"。

          這樣,就不會超出視窗。但是代碼寫完后發現并不是,如圖:

          多出的文字內容超出div范圍,右側滾動條依然存在。

          這就要在div的style中再增加一條語句"overflow-y:scroll;"

          這句話的意思是“overflow-y”(超出最大高度)就顯示滾動條(scroll)。而不是讓內容超出div的邊框。

          <div style="width:610px; height:530px; overflow-y:scroll;" >

          如圖:

          因為圖片寬度的問題,下方的x軸的scroll也出現了,我們不想看到它,影響美觀。

          添加“overflow-x:hidden”即可,hidden(隱藏)。

          <div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >

          如圖:hidden之后,將無法滾動或拖動畫面。

          最后,我們要把右側的scroll也隱藏掉,因為點擊鼠標,滾動滾輪就夠了,滾動條實在礙眼。

          從前面的例子可知,hidden是不行的,有沒有別的辦法?

          那就是在蓋div的外部再添加一個div,讓這個div的寬度略小于里面div的寬度,小到剛剛擋住滾動條既可以。如圖:

          這個div這樣寫即可

          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

          </div>

          同時還要給里面的div添加margin來讓它們對齊

          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

          <div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >

          <!--省略了p img map 請自行腦補或參考源碼-->

          </div>

          </div>

          完整代碼:用HTML制作一個簡單頁面(代碼閱讀練習)——零基礎自學網頁制作

          就是一個HTML文件

          1、HTML結構

          <!doctype html>

          <HTML>

          <head>

          <title></title>

          </head>

          <body>

          </body>

          </HTML>

          說明:

          • 文檔類型<!DOCTYPE>

          <!DOCTYPE html>

          標簽位于文檔的最前面,用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范.

          • HTML標簽
          • 標識HTML文檔,是所有HTML中標簽的一個根節點。
          • head標簽
          • 標識頭部區域,用于存放:title,meta,base,style,script,link
          • title標題
          • 在head標簽中我們必須要設置的標簽,讓頁面擁有一個屬于自己的標題。
          • body標簽
          • 標識頁面的主體部分,用于存放所有的HTML標簽,如p,h,a,b,u,i,s,em,del,ins,strong,img

          2、HTML標簽和屬性

          寫HTML文檔時,必須遵循HTML語法規范。HTML文檔實際上就是一個文本文件,它由標簽和信息組合而成,當然標簽和信息也不是隨便組合的,需要遵循一定規則,否則無法正常顯示。

          • 標簽分類
          • 在HTML頁面中,帶有“< >”符號的元素被稱為HTML標簽,如上面提到的 <html>、<head>、<body>都是HTML標簽。根據出現個數不同,分為雙標簽和單標簽
          • 雙標簽
          • 該語法中“<標簽名>”表示該標簽的作用開始,一般稱為“開始標簽(start tag)”,“</標簽 名>” 表示該標簽的作用結束,一般稱為“結束標簽(end tag)”。和開始標簽相比,結束 標簽只是在前面加了一個關閉符“/”。
          • <標簽名 屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" ……> 內容 </標簽名>
          • 單標簽
          • 單標簽也稱空標簽,是指用一個標簽符號即可完整地描述某個功能的標簽。
          • <標簽名 屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" …… />

          • 標簽關系
          • 嵌套關系
          • <head> <title> </title> </head>
          • 并列關系
          • <head></head> <body></body>
          • 標簽語義化
          • 所謂標簽語義化,就是指標簽的含義
          • 作用:
            • 方便代碼閱讀和維護
            • 具有更好地搜索引擎優化
            • 更容易讓瀏覽器或是網絡爬蟲解析,從而更好地分析網頁的內容
          • 遵循原則:
          • 合適的地方放一個最為合理的標簽。 當我們去掉CSS之后,網頁結構依然組織有序,并且有良好的可讀性

          有一起學習的嗎?請點贊收藏+關注哦!


          主站蜘蛛池模板: 清纯唯美经典一区二区| 91午夜精品亚洲一区二区三区 | 国产一区二区三区不卡在线看| 无码日韩人妻AV一区二区三区| 人妻无码一区二区三区免费| 一区二区三区精品视频| 成人精品视频一区二区三区尤物| 无码毛片视频一区二区本码| 亚洲国产专区一区| 亚洲国产av一区二区三区| 成人毛片一区二区| 精品人妻无码一区二区色欲产成人| 亚洲综合无码一区二区| 日本亚洲成高清一区二区三区| 精品国产一区二区三区AV性色 | 无码精品前田一区二区| 国产精品538一区二区在线| 欧美激情一区二区三区成人| 亚洲一区在线观看视频| 亚洲一区在线视频| 日韩最新视频一区二区三| 日韩免费一区二区三区在线播放| 亚洲福利电影一区二区?| 在线视频一区二区| 一本一道波多野结衣AV一区| 国产主播在线一区| 成人丝袜激情一区二区| 在线观看中文字幕一区| 国产女人乱人伦精品一区二区 | 日韩电影在线观看第一区| 鲁大师成人一区二区三区| 亚洲A∨精品一区二区三区| 中文字幕无线码一区| 亚洲欧洲∨国产一区二区三区| 国产在线视频一区| 日韩精品无码一区二区中文字幕 | 中文字幕一区二区三区精彩视频| 91精品一区二区综合在线| 在线观看一区二区精品视频| 日本视频一区二区三区| 久久精品一区二区|