整合營銷服務商

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

          免費咨詢熱線:

          HTML的入門及結構組成

          大家在瀏覽網頁的時候,是否思考過這樣一個問題:怎樣才能制作出一個網頁呢?制作出一個網頁是很簡單的,只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁,今天我就為講解HTML的入門及結構組成。

          一、什么是HTML?

          1、在我們開始學習HTML之前我們需要知道什么是HTML?

          HTML的全稱為Hyper Text Markup Language,中文名稱為超文本標記語言,閱覽方式為網頁瀏覽器,同時HTML也被稱為網頁。

          2、一個簡單的HTML文檔

          二、HTML編輯器

          我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。

          1、記事本

          ① 創建一個TXT文本

          ② 輸入HTML代碼

          ③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。

          ④ 然后雙擊這個文件運行。

          運行結果

          2、專業編輯器

          ① Sublime Text

          ② HBuilder

          ③ Adobe Dreamweaver

          ④ CoffeeCup HTML Editor

          這其中我比較推薦HBuilder這款編輯器,界面簡單,編輯起來很快。

          三、HTML的組成部分

          在上面的案例中我們可以看到HTML是由頭部(head)和身體(body)所組成的。

          1、頭部(head)

          通常包含標題(title),也就是一個網頁的名稱

          網頁標題

          2、身體(body)

          body的部分是整個網頁的重要內容部分,讓人一眼就瀏覽到這個網頁的內容,可以插入文本、圖片、多媒體等內容。

          四、HTML元素

          l HTML元素是指以開始標簽起始,以結束標簽終止的元素:元素內容即為開始標簽與結束標簽之間的內容。

          l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素,在上面的案例中就有六個元素。

          l 也有部分元素只有開始標簽,例如<br>,以開始標簽的結束而結束。

          五、HTML的屬性

          l 一般來說HTML的屬性就是HTML元素的屬性,屬性可以在元素中添加附加信息。

          l 屬性總是以名稱/值對的形式出現,比如:name=”value”。

          l 屬性一般描述于開始標簽。

          l style中會有更多的屬性。

          六、HTML格式化

          HTML可定義很多供格式化輸出的元素,比如粗體字和斜體字。

          HTML文本格式化標簽

          標簽

          描述

          <b>

          定義粗體文本

          <em>

          定義著重文字

          <i>

          定義斜體字

          <small>

          定義小號字

          <strong>

          定義加重語氣

          <sub>

          定義下標字

          <sup>

          定義上標字

          <ins>

          定義插入字

          <del>

          定義刪除字


          運行結果示意圖

          HTML“計算機輸出”標簽

          標簽

          描述

          <code>

          定義計算機代碼

          <kdd>

          定義鍵盤碼

          <samp>

          定義計算機代碼樣本

          <var>

          定義變量

          <pre>

          定義預格式文本

          HTML引文、引用及標簽定義

          標簽

          描述

          <abbr>

          定義縮寫

          <address>

          定義地址

          <bdo>

          定義文字方向

          <blockquote>

          定義長的引用

          <q>

          定義短的引用語

          <cite>

          定義引用、引證

          <dfn>

          定義一個定義項目

          七、HTML超鏈接

          超鏈接可以是圖片、文字、多媒體也可以是一個網址

          示例:

          結果:

          點擊帶有下劃線的兩個字就可以進入某度的網站

          八、HTML CSS

          1、CSS是一種層疊樣式表,可以修飾html元素的樣式并可以精確地進行排版

          2、CSS有三種方式:

          l 內部樣式,在HTML元素中使用“style”屬性

          l 內部樣式表,在頭部<head>區域使用<style>元素來包含CSS

          l 外部引用,引用帶有后綴css的文件,示例:

          html文檔

          css文檔

          如果你看到了這里,就說明你已經打開了制作網頁的大門啦~

          Low了,網頁居然還用這么老掉牙的特效!弄個粗體字,下劃線就是突出重點了?真是一股濃濃的鄉村風撲面而來;弄個圖在頁面飄來飄去就是動畫效果了,你要這么認為的話那我只能保持沉默了。在HTML5占領著整個互聯網之時,想透過網頁抓住所有人的眼球,因循守舊是行不通的。因此,有你不能不知道的HTML常用代碼。只有熟悉掌握了常用的HTML代碼,你才能在編寫網頁的時候做到行云流水,用處處流露著細膩和創意的動效細節打動所有人。

          在這里還是要說一下我自己建的前端JavaScript學習交流群:574462090,不管你是小白還是大牛,小編我都挺歡迎,小白嘛,多問點問題也就學好了,不定期分享干貨,包括最新的2017年前端學習資料,歡迎初學和進階中的小伙伴。

          html代碼大全:結構性定義

          文件類型<HTML></HTML> (放在檔案的開頭與結尾)

          文件主題<TITLE></TITLE> (必須放在「文頭」區塊內)

          文頭<HEAD></HEAD> (描述性資料,像是「主題」)

          文體<BODY></BODY> (文件本體)

          標題<H?></H?> (從1到6,有六層選擇)

          標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

          區分<DIV></DIV>

          區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

          引文區塊<BLOCKQUOTE></BLOCKQUOTE> (通常會內縮)

          強調<EM></EM> (通常會以斜體顯示)

          特別強調<STRONG></STRONG> (通常會以加粗顯示)

          引文<CITE></CITE> (通常會以斜體顯示)

          碼<CODE></CODE> (顯示原始碼之用)

          樣本<SAMP></SAMP>

          鍵盤輸入<KBD></KBD>

          變數<VAR></VAR>

          定義<DFN></DFN> (有些瀏覽器不提供)

          地址 <ADDRESS></ADDRESS>

          大字<BIG></BIG>

          小字<SMALL></SMALL>

          與外觀相關的標簽(作者自訂的表現方式)

          加粗<B></B>

          斜體<I></I>

          底線<U></U> (尚有些瀏覽器不提供)

          刪除線<S></S> (尚有些瀏覽器不提供)

          下標<SUB></SUB>

          上標<SUP></SUP>

          打字機體<TT></TT> (用單空格字型顯示)

          預定格式<PRE></PRE> (保留文件中空格的大小)

          預定格式的寬度<PRE WIDTH=?></PRE>(以字元計算)

          向中看齊<CENTER></CENTER> (文字與圖片都可以)

          閃耀<BLINK></BLINK> (有史以來最被嘲弄的標簽)

          字體大小 <FONTSIZE=?></FONT>(從1到7)

          改變字體大小 <FONTSIZE=+|-?></FONT>

          基本字體大小 <BASEFONTSIZE=?> (從1到7; 內定為3)

          字體顏色 <FONTCOLOR="#$$"></FONT>($$為顏色代碼)

          2

          html代碼大全:修改頁面的實用性HTML代碼

          1)貼圖:<img src="圖片地址">

          2)加入連接:<a href="所要連接的相關地址">寫上你想寫的字</a>

          3)在新窗口打開連接:<a href="相關地址" target="_blank">寫上要寫的字</a>

          4)移動字體(走馬燈):<marquee>寫上你想寫的字</marquee>

          5)字體加粗:<b>寫上你想寫的字</b>

          6)字體斜體:<i>寫上你想寫的字</i>

          7)字體下劃線: <u>寫上你想寫的字</u>

          8)字體刪除線: <s>寫上你想寫的字</s>

          9)字體加大: <big>寫上你想寫的字</big>

          10)字體控制大小:<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大,h5最小)

          11)更改字體顏色:<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

          12)消除連接的下劃線:<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

          13)貼音樂:<embed src="音樂地址" width="寬度" height="高度" autostart=false>

          14)貼flash: <embed src="flash地址" width="寬度" height="高度">

          15)貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

          16)換行:<br>

          17)段落:<p>段落</p>

          18)原始文字樣式:<pre>正文</pre>

          19)換帖子背景:<body background="背景圖片地址">

          20)固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" body

          bgproperties=fixed>

          21)定制帖子背景顏色:<body bgcolor="#value">(value值見10)

          22)帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>

          23)貼網頁:<iframe. src="相關地址" width="寬度" height="高度"></iframe>

          3

          html代碼大全:常常會遇到的問題

          點擊關閉窗口

          <a href="javascript.:top.window.close();">點擊關閉窗口</a>!

          請問如何去掉主頁右面的滾動條?

          <body scroll="no">

          <body style="overflow-y:hidden">

          如何做到讓一個網頁自動關閉.

          <html>

          <head>

          <OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

          <param name="Command" value="Close">

          </object>

          </head>

          <body >

          這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

          如何在不刷新頁面的情況下刷新css?

          <style>

          button{ color:#000000;}

          </style>

          <button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為  紅色</button>

          請問如何讓網頁自動刷新?

          在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新,你可以更改為任意值。

          如何讓頁面自動刷新?

          方法一,用refresh

          HTML 代碼片段如下:

          <head>

          <meta. http-equiv="refresh" c>

          </head>

          5表示刷新時間

          [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

          方法二,使用setTimeout控制

          <img src=/logo.gif>

          <script>

          function rl(){

          document.location.reload()

          }

          setTimeout(rl,2000)

          </SCRIPT>

          如何讓超鏈接沒有下劃線

          在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼:

          <style. type="text/css"> <!--

          a { text-decoration: none}

          --> </style>

          請問如何去掉IE的上下滾動條?

          <body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>

          </body>

          怎樣才能把RealPlayer文件在網頁做一個試聽連接?

          <embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>

          如何用html實現瀏覽器上后退按鈕的功能?

          <a href="java script.:history.go(-1)">點擊后退</a>

          或者

          <script> history.back() </SCRIPT>

          4

          html代碼大全:你不一定知道的技巧

          16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

            <table borderncontextmenu=return(false)><td>no</table> 可用于Table

          17. <body nselectstart="return false"> 取消選取、防止復制

          18.onpaste="return false" 不準粘貼

          19.oncopy="return false;" ncut="return false;" 防止復制

          20. <link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標

          21. <link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

          22. <inputstyle="ime-mode:disabled"> 關閉輸入法

          23. 永遠都會帶著框架

          <script. language="JavaScript"><!--

          if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

          // --></script>

          24. 防止被人frame.

          <SCRIPT. LANGUAGE=JAVASCRIPT><!--

          if (top.location != self.location)top.location=self.location;

          // --></SCRIPT>

          25. 網頁將不能被另存為

          <noscript><iframe.src=*.html></iframe></noscript>

          26. 查看網頁源代碼

          <input type=button value=查看網頁源代碼

          onclick="window.location = "view-source:"+"http://www.pconline.com.cn"">

          27.刪除時確認

          <a href="javascript:if(confirm("確實要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>

          28.屏蔽功能鍵Shift,Alt,Ctrl

          <script>

          function look(){

          if(event.shiftKey)

          alert("禁止按Shift鍵!");//可以換成ALT CTRL

          }

          document.onkeydown=look;

          </script>

          29. 網頁不會被緩存

          <META. HTTP-EQUIV="pragma" CONTENT="no-cache">

          <META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">

          <META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

          或者<META. HTTP-EQUIV="expires"CONTENT="0">

          30.怎樣讓表單沒有凹凸感?

          <input type=text style="border:1 solid #000000">

          或 <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

          31.不要滾動條?

          讓豎條沒有:

          <body style="overflow:scroll;overflow-y:hidden">

          </body>

          讓橫條沒有:

          <body style="overflow:scroll;overflow-x:hidden">

          </body>

          兩個都去掉?更簡單了

          <body scroll="no">

          </body>

          32.怎樣去掉圖片鏈接點擊后,圖片周圍的虛線?

          <a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>

          33.電子郵件處理提交表單

          <form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

          <input type=submit>

          </form>

          34.在打開的子窗口刷新父窗口的代碼里如何寫?

          window.opener.location.reload()

          35.如何設定打開頁面的大小

          <body nload="top.resizeTo(300,200);">

          打開頁面的位置<bodynload="top.moveBy(300,200);">

          36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

          <STYLE>

          body

          {background-image:url(logo.gif); background-repeat:no-repeat;

          background-position:center;background-attachment: fixed}

          </STYLE>

          37. 檢查一段字符串是否全由數字組成

          <script. language="Javascript"><!--

          function checkNum(str){return str.match(//D/)==null}

          alert(checkNum("1232142141"))

          alert(checkNum("123214214a1"))

          // --></script>

          38. 獲得一個窗口的大小

          document.body.clientWidth; document.body.clientHeight

          39. 怎么判斷是否是字符

          if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

          else alert("全是字符");

          40.TEXTAREA自適應文字行數的多少

          <textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">

          </textarea>

          41. 日期減去天數等于第二個日期

          <script. language=Javascript>

          function cc(dd,dadd)

          {

          //可以加上錯誤處理

          var a = new Date(dd)

          a = a.valueOf()

          a = a - dadd * 24 * 60 * 60 * 1000

          a = new Date(a)

          alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

          } cc("12/23/2002",2)

          </script>

          42. 選擇了哪一個Radio

          <HTML><script. language="vbscript">

          function checkme()

          for each ob in radio1

          if ob.checked then window.alert ob.value

          next

          end function

          </script><BODY>

          <INPUT name="radio1" type="radio"value="style" checked>Style.

          <INPUT name="radio1" type="radio"value="barcode">Barcode

          <INPUT type="button" value="check"nclick="checkme()">

          </BODY></HTML>

          43.腳本永不出錯

          <SCRIPT. LANGUAGE="JavaScript">

          <!-- Hide function killErrors(){return true;} window.onerror = killErrors;// -->

          </SCRIPT>

          44.ENTER鍵可以讓光標移到下一個輸入框

          <input nkeydown="if(event.keyCode==13)event.keyCode=9">

          文末再提兩點建議吧:

          1. 剛學前端JavaScript的時候,一定不要追求速成,編程不比其他傳統行業,可以快速的上手,他需要一定的代碼量積累起來,不然你追求速成很可能會車毀人亡。

          2. 這個文章到這里就說完了,想要前端學習資料的進我的群自助領取,已經上傳到群文件里了:574462090,歡迎初學和進階中的小伙伴。

          如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號:‘前端根據地’關注后回復‘給我資料’可以領取一套完整的學習視頻

          位小伙伴好,黑客技術離不開代碼,做為一個滲透測試工程師,也一定要有一些代碼基礎。網絡安全行業,現在人才缺口大,再加上就業形勢又很嚴峻,介于這些,我們想培養一批優秀的網絡安全人才,將對網絡安全行業、黑客技術,以及滲透測試技術感興趣的小白培養成精英。

          跟隨我們,不管你有多白,都可以逐步進入網絡安全行業,并最終在這個行業找到高薪職業。

          然后呢,我要說一句,關于“黑客”可能并不是大多數人所了解的那樣。關于這些,可以參考:什么是黑客?什么是滲透測試?2分鐘看完這800多字你就懂了

          那么,我們就先從代碼基礎——HTML的基本語方開始。

          首先給大家描述三個概念:語言、程序、代碼之前的關系。

          語言

          首先我們就要搞清楚什么是語言?可能說HTML語言不太好理解,那么我們想一想日常生活當中比較常見的我們中國人彼此之間都會交流,是不是叫做漢語呢?所以說漢語就是一門語言。

          那么這時候大家腦子里面就可以構思一下啊什么樣的東西大致就是語言了。它應該是一種溝通交流的一種方法的一個集合,包括我們如何發音,如何寫字,這些字如何拼在一起,能夠產生具體的意義,有一定的含義,這些所有所有的集合在一起,形成了一套規則,然后大家都去遵循這套規則,就能夠彼此交流,那么這就叫做語言。

          我們再舉一個例子,比如說英國人或者美國人,他們也有自己的語言,叫做英語,那么我在這里就是換了另一種語言,

          代碼

          了解了語言之后,我們就再來看一看,什么是代碼,那代碼跟我們日常生活中的這種能夠聯系起來的又是什么東西呢?

          我們還是拿漢語來做比喻哈,我們說漢語就是一種交流溝通的一種規則,它是一門語言。在大家小的時候肯定就會去學這門語言。這門學科在小學的時候就叫語文,對吧。那么我們上語文課的時候,就要學一些最基礎的有關語言的東西,比如說漢語拼音生字詞,當時要記很多的這種生字生詞,那么他是不是可以理解成是我們漢語的一種最基本的那種組成結構?

          那么英語呢?我們在學習英語的時候也會去記一些東西啊,就比如英文字母,緊接著就是背各種各樣的單詞,是不是當我們單詞量有了一定的積累之后,我們對這個語言呢就掌握得更深刻了。

          那么漢語要背生字詞,英語呢要背單詞,這些最基本的組成結構。那么在程序語言里面,代碼就可以理解成是生字詞或者是單詞。

          程序

          最后,我們再來看看什么是程序。它是由很多很多一行一行的代碼組成在一起,能夠完成一個綜合性的或者一個比較大的一個目標的這樣的一個代碼的集合。

          那么我們對照一下自然的這種語言,比如說漢語英語呢它是什么樣?好多的文字放在一起,是不是句子?或者說再多一點兒就是一篇文章。一篇文章甚至再大一點兒可能是一本書,

          那么漢語能寫文章,用英語英文也能寫文章,這個文章可大可小,可能幾千字能大一點兒的一本書,也可以理解成是文章,那么用生字詞組成的這種集合就成了文章了。然后我們再談程序,它是什么呢?對照一下大家可能就理解了,它就是一個由代碼組成的文章。

          HTML叫做超文本標記語言

          那么回過頭來我們看我們要學的HTML語言,它也是一門語言,只不過呀它跟我們理解的漢語和英語有一定的區別。

          漢語的主流是中國人之間交流的時候溝通的時候用的語言。那么英語呢應用的比較廣泛,是一些英語國家之間彼此交流溝通的時候用的語言。那么HTML語言它也是一種語言,只不過它不是人和人之間去交流的語言,那么它到底是做什么用的呢?我們來看一下HTML的概念。

          HTML中文名稱叫做超文本標記語言,用HTML編寫的超文本文檔稱為HTML文檔。它能夠獨立于各種操作系統平臺,使用HTML語言將所需要表達的信息按某種規則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件翻譯成可以識別的信息,即現在所見到的網頁。

          那么從中我們能看到什么呢?首先我們知道它的中文名稱了。HTML叫做超文本標記語言。

          那么再往下我們看他提到了。

          在這里瀏覽器是吧?提到了瀏覽器,那么這時候我們就知道了HTML語言啊它是一種與瀏覽器之間進行交流的這么一種語言。就是我們去寫一些代碼,那么寫這些代碼的目的是什么呢?目的就是為了和瀏覽器去交流,只要我們寫的這個東西瀏覽器能看得懂,他就會根據我們寫的代碼呈現出最終的網頁。這就是HTML語言的一個基本概念。

          HTML的語法規則

          (1)HTML中的各種元素都是通過標記(標簽)來表示。

          (2)HTML當中的標簽分為單標簽和雙標簽。

          (3)單標簽格式為<名稱/>,雙標簽格式為<名稱></名稱>。

          (4)HTML對大小寫不敏感。


          然后,我們可以對照一下HTML的基本結構

          HTML網頁基本結構需要如下標簽組成:

          (1)<html></html>

          (2)<body></body>

          (3)<head></head>

          (4)<title></title>


          首先,我們打開一個記事本。

          單擊窗口圖片,在列表中找到記事本

          然后在記事本中輸入<html></html>,這表示告訴瀏覽器,這是一個標準的HTML網頁。

          在記事本中輸入<html></html>

          那么為什么是兩個呢?前面1個,后面1個,這就有點類似于我們標點符號里邊的括號,前面有一個開始,左半邊括號后面有一個結束。右半邊括號在這里也是前面的HTML表示網頁從這兒開始,那么后邊這個-html表示網頁呢至此結束。

          那我們網頁這才剛開始就結束了呢,別著急,我們來看我在這里敲了幾次回車把它分開了。那么表示什么意思呀?表示中間呀是有很多內容的,就是在網頁開始到網頁結束的中間是會有其他的東西的。

          分開html開始和結束標簽

          我們接著往下看,第二個標簽呢叫做<body></body>,里面的單詞呢表示的是身體,那么它呢表示的就是網頁的主體,這個網頁的主體也屬于基本結構,那么它在哪兒呢?注意啊網頁的主體也屬于網頁,那么它呀要放在<html></html>的中間。

          將<body></body>標簽插入到<body></body>中

          下面,我們開始將第3個標簽<head></head>寫入記事本,它代表頭部。他表示頭是吧?我們可以想象一下,這個腦袋注意它和身體之間到底應該是個什么樣的關系呢?就我們想象有一個人站在那兒,腦袋應該是在上面,身子應該是在下邊哈。所以注意我們這個<head>標簽呀要放在<body></body>標簽的上方。注意!它們之間沒有包含關系!是一上一下的。

          在<body></body>標簽的上方插入<head></head>

          最后一個叫做<title></title>這個單詞的意思呢叫做標題。那么這個標題你應該放在哪?告訴大家,它屬于網頁的頭部,在頭部的里邊。

          好了,整理一下格式

          插入<title></title>標簽

          我們來看4個基本結構的組成標簽,我們都已經寫到了這個文檔里面了。

          大家需要注意的是,我寫的這種結構啊這個包含的關系非常重要。最外邊是html表示網頁開始,到網頁結束,中間呢有頭、身子,還有標題,那么頭和身子是一上一下的關系,那么標題呢屬于頭部里邊兒。要記住這個格式!

          那么到現在為止呀我們這個網頁的基本結構就算是真正寫完了,我們把它保存一下。現在這個文檔里邊啊我們寫的是網頁的程序,雖然很簡單,但它也是一個完整的網頁了。

          那么既然是一個網頁,那我們如何能打開它看這個網頁呢?注意這個HTML寫出來的這個程序啊需要放在HTML文件里邊,

          那么我們怎么做呢?直接把這個記事本改后綴,他現在是個.txt文檔,我們把這個文件的后面的txt擴展名改成html。

          將.txt格式改成.html格式

          雙擊“網頁.html”,就會打開一個網頁。

          用代碼創建的第1個初始網頁

          果然是用瀏覽器打開的一個網頁,但是里邊呢還沒有東西是吧?空白的。

          那么我們就來看一下,重新用記事本的方式把它打開。

          我現在要想在里邊簡單的寫點文字,哎我看看我這個網頁是否能夠正常顯示。

          那么在哪兒能夠寫文字呢?跟大家說一下,

          在我們這個基本結構里啊有兩個地方是可以寫內容的,一個就是<body></body>主體,另外一個呢就是<title></title>標題,這兩個地方中是可以寫文字內容的。

          右鍵單擊這個html文件,選擇打開方式→打開其他應用,然后找到記事本,用記事本打開。

          用記事本打開html文件

          然后在<title></title>中間寫上“我的第一個網頁”,<body></body>中間寫上“這里是主體文字”

          標簽中間插入文字,讓網頁中有內容

          好了,寫完之后我們再保存。關閉這個窗口,重新打開看一下效果。那么大家看這會兒在網頁里面顯示出來了。首先呢在網頁主體里邊顯示出了“這里是主體文字”,并且在頁面的上方的標簽呢顯示的是“我的一個網頁”。

          用代碼創建的第1個網頁

          那么我們今天的講解你看懂了么?

          帶你學代碼、學編程、學語言、學網絡安全、學黑客技術、學滲透技術,逐步成為網絡高手,拿到年薪30W+的offer,在網絡江湖,從小刀客變成大俠。如果感興趣,請關注我,私信我,可獲得更多學習資料。


          主站蜘蛛池模板: 国产伦一区二区三区高清 | 2021国产精品一区二区在线 | 国产成人无码精品一区不卡| 嫩B人妻精品一区二区三区| 国产麻豆媒一区一区二区三区| 无码精品一区二区三区免费视频| 久久一区二区三区免费| 国产福利一区二区| 国产成人一区二区三区精品久久 | 久久高清一区二区三区| 国产在线精品一区二区三区不卡| 精品人妻一区二区三区四区| 国产视频一区在线播放| 国产日韩精品一区二区在线观看播放| 国产一区二区在线观看| 欧美日韩国产免费一区二区三区| 日本无卡码一区二区三区| 精品女同一区二区三区免费站| 久久精品亚洲一区二区三区浴池 | 日韩av片无码一区二区不卡电影| 色噜噜狠狠一区二区| 亚洲一区二区三区高清在线观看 | 韩国一区二区三区| 精品久久久中文字幕一区 | 精品一区二区三人妻视频| 亚洲综合一区二区三区四区五区| 糖心vlog精品一区二区三区| 无码少妇丰满熟妇一区二区 | 无码国产精品一区二区免费式影视 | 久久无码一区二区三区少妇| 伊人精品视频一区二区三区| 久久亚洲一区二区| 日本视频一区在线观看免费| 少妇一晚三次一区二区三区| 日韩经典精品无码一区| 中文字幕色AV一区二区三区| 少妇激情一区二区三区视频| 国产精品av一区二区三区不卡蜜| 一区二区三区在线视频播放| 无码人妻一区二区三区在线视频 | 亚洲视频一区二区|