整合營銷服務商

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

          免費咨詢熱線:

          最全的HTML基本語法總結 值得收藏!

          最全的HTML基本語法總結 值得收藏!

          HTML文檔由HTML元素組成,一個HTML元素由一個標簽和一組屬性組成。一個標簽可以有一個或多個屬性,屬性以名稱和值成對出現。Web 瀏覽器讀取HTML 文檔,并以網頁的形式顯示出來,瀏覽器不會顯示 HTML 標簽,而是通過標簽來解釋網頁的內容。

          HTML(Hyper Text Mark-up Language超文本標記語言):不是編程語言,而是一種描述性的標記語言,用于描述網頁中內容的顯示方式,比如文字以什么顏色、大小來顯示等,這些都是利用Html標記來實現。

          HTML標簽是由尖括號(“<”和“>”)包圍的關鍵詞,如標簽 <p>。標簽不區分大小寫,故 <p> 和 <P> 的含義相同,不過推薦使用小寫。

          HTML標簽通常成對出現,一個是開始標簽,一個是結束標簽。開始標簽告訴瀏覽器,從這里開始執行該標簽所表示的功能;結束標簽告訴瀏覽器,該功能到這里結束。在開始標簽前加一個斜杠(/)即成為結束標簽。如,html 元素的開始標簽是 <html>,結束標簽是</html>。也就是說,一個HTML 元素由開始標簽、內容、結束標簽組成。開始標簽是放在一對尖括號中的元素名稱及可能包含的屬性,結束標簽是放在一對尖括號中的斜杠加元素的名稱。語法格式為:<開始標簽>內容</結束標簽>。如,em 元素的開始標簽為<em>,結束標簽為 </em>,在<em> 和 </em> 標簽之間是元素的內容。如下圖所示:


          HTML的文檔結構

          所有的網頁文件,通過都是四對標記來構成文檔的骨架,它們是:

          小結:

          <html>…</html>標識網頁文件的開始與結束,所有的Html元素,都要放在這對標記中。

          <head>…</head>標識網頁文件的頭部信息,如標題、搜索引擎關鍵字等

          <title>…</title>標識網頁文件的標題

          <body>…</body>標識網頁文件的主體部分


          常見的HTML的標記語法

          1. 單標記

          一.<標記名稱>

          單一型,無屬性值

          如:<br/>——表示換行符

          二.<標記名稱屬性=”屬性值”>

          單一型,有屬性值

          如:<hr width=”80%”/>

          2. 雙標記

          三.<標記名稱>…</標記名稱>

          沒有屬性值

          如:<title>…<title>

          四.<標記名稱屬性=”屬性值”>…</標記名稱>

          有屬性值

          如:<body bgcolor=”red”>…</body>

          注釋

          格式:

          <!—注釋內容-->

          Body屬性

          <body bgcolor=”背景顏色” background=”背景圖像” text=”文本顏色” link=”鏈接文本顏色” vlink=”訪問過的文本顏色” alink=”激活的連接文本顏色” leftmargin=”左邊界”>


          <font>標記

          語法:

          <font color=”文本顏色” size=“字號”>文本</font>

          字符格式

          段落標記

          格式:

          <p align=“對齊方式”>…</p>

          HTML中的特殊字符

          修飾標記

          水平直線<hr/>


          覺得不錯的朋友關注下哩,后面會分享HTML標簽屬性、描點、表單等更多干貨。

          TML針對不同的內容有不同類型的標記,這些標記是HTML5文檔的基礎,你知道有哪些嗎?

          1.單標記和雙標記

          為了方便學習和理解,通常將HTML5標記分為兩大類,即雙標記和單標記。

          a.雙標記:

          雙標記雙標記也稱為體標記,分為開始標記和結束標記,其基本語法為:

          <標記名>內容</標記名>

          如:

          <p>我是一個雙標記</p>

          b.單標記:

          單標記也稱空標記,是指用一個標記就可以完整的描述某個功能,其基本語法為:

          <標記名/>

          如:

          <hr/>

          上面hr標記表示一條水平線,后面會提到

          2.注釋標記

          注釋標記是HTML的一種特殊標記,它是一段便于閱讀理解的不需要在頁面中顯示的注釋文字。其基本語法格式為:

          <!-- 注釋語句 -->

          如:

          <p>這是一段文本</p>   <!-- 這是注釋文本,不會在頁面中顯示 -->

          上圖即為瀏覽器中的結果。

          3.標記的屬性

          HTML標記的默認樣式是無法滿足頁面開發的需求的,如果想要為某段文本設置特定的樣式,就需要用到HTML標記的屬性了,其基本語法格式為:

          <標記名 屬性1="屬性值1" 屬性2="屬性值2" 屬性3="屬性值3"...>內容</標記名>

          下面以一個例子來展示:

          網頁第一行是一個二級居中的標題,第二行是一個局中的段落,第三行是一個大小為2px,顏色為灰色的水平線,第四行是一段正常的段落,部分詞語被加粗

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Document</title>
          </head>
          <body>
              <h2 align="center">我是居中的二級標題</h2> 
              <p align="center">我是居中的段落</p> 
              <hr size="2" color="#ccc"/>
              <p>我是一個正常的段落,這是<strong>關鍵字</strong>,其他的都是正常內容。<p/>
          </body>
          </html>

          效果如圖所示:

          ?

          多學一招(鍵值對):

          “鍵值對”簡單地說即為對“屬性”設置“值”

          例如:

          color="red";width:"200px";

          上面的color和width就相當于屬性1和屬性2,red和200px就是對應的屬性值1和屬性值2,如果順序出錯,是沒有效果的

          總結:

          在HTML開始標記中,可以通過 屬性=“屬性值”的方式為標記添加屬性,其中“屬性”和“屬性值”是以“鍵值對”的形式出現的

          4.HTML5文檔頭部相關標記(拓展)

          1.title

          一個HTML文檔只能含有一對<title></title>標記,<title></title>之間的內容將顯示在瀏覽器窗口的標題欄中。

          基本語法格式:

          <title>網頁標題名稱</title>

          2.meta

          meta定義頁面元信息:

          設置網頁關鍵字》》》<meta name=”keywords” content=”JAVA、php”/>

          設置網頁描述》》》<meta name=”description” content=”IT培訓教育”/>

          設置網頁作者》》》<meta name=”author” content=”傳智播客”/>

          設置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>

          設置頁面自動刷新與跳轉》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>

          3.link

          基本語法格式:

          <link 屬性=”屬性值” />

          屬性名

          常用屬性值

          描述

          href

          URL

          指定引用外部文檔

          rel

          stylesheet

          指定當前文檔與引用外部文檔的關系,該屬性值通常為stylesheet,表示定義一個外部樣式表

          type

          text/css

          引用外部文檔的類型為CSS

          type

          text/javascript

          引用外部文檔的類型為JavaScript腳本

          4.style

          基本語法格式:

          <style 屬性=”屬性值”>樣式內容</style>

          在HTML中使用style標記時,常常定義其屬性為type,相應的屬性值為text/css,表示使用內嵌式的CSS樣式

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

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

          然后呢,我要說一句,關于“黑客”可能并不是大多數人所了解的那樣。關于這些,可以參考:什么是黑客?什么是滲透測試?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,在網絡江湖,從小刀客變成大俠。如果感興趣,請關注我,私信我,可獲得更多學習資料。


          主站蜘蛛池模板: 99无码人妻一区二区三区免费| 日韩一区二区超清视频| 亚洲综合av一区二区三区不卡| 亚洲综合av永久无码精品一区二区| 国产一区二区精品久久91| 国产成人精品视频一区| 国产一区二区免费| 精品乱码一区二区三区在线| 精品乱人伦一区二区| 无码成人一区二区| jazzjazz国产精品一区二区| 无码人妻一区二区三区在线水卜樱 | 香蕉久久一区二区不卡无毒影院| 成人免费av一区二区三区| 国产手机精品一区二区| 国产亚洲日韩一区二区三区| 无码精品一区二区三区免费视频| 丰满人妻一区二区三区免费视频 | 日本一区二区三区爆乳| 精品国产香蕉伊思人在线在线亚洲一区二区 | 日韩精品午夜视频一区二区三区| 国产人妖视频一区二区| 视频一区二区三区免费观看| 色噜噜狠狠一区二区| 天堂资源中文最新版在线一区 | 一区二区三区在线| 亚洲一区二区三区在线| 日韩高清一区二区三区不卡 | 无码人妻精品一区二区三区夜夜嗨| 一区二区三区福利视频免费观看| 国产福利在线观看一区二区| 农村乱人伦一区二区| 中文字幕精品一区二区日本| 99精品国产一区二区三区2021| 无码av免费一区二区三区试看 | 丰满人妻一区二区三区视频53 | 一区二区三区视频免费观看| 国产成人av一区二区三区在线观看| 无码乱码av天堂一区二区| 蜜桃AV抽搐高潮一区二区| 日本一区二区三区精品国产|