整合營銷服務商

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

          免費咨詢熱線:

          HTML入門

          、什么是HTML

          HTML簡介

          HTML是用來描述網頁的一種語言,它是一種超文本標記語言,由一套標記標簽組成,在制作網頁時,HTML使用標記標簽來描述網頁。

          發展史


          HTML:Hyper Text Markup Language超文本標記語言

          超文本標記語言—在1993年6月互聯網工程工作小組工作案發布(并非標準)

          HTML2.0—1995年11月作為RFC1866發布,在RFC2854于2000年6月發布之后被宣布過時。

          HTML3.2—1996年1月14日,W3C推薦標準

          HTML4.0—1997年12月18日,W3C推薦標準

          HTML4.01(微小改進)—1999年12月24日,W3C推薦標準,2000年5月15日發布基本嚴格的HTML4.01語法,是國標標準化組織和國際電工委員會的標準

          XHTML1.0—發布于2000年1月26日,是W3C推薦標準,后來經過修訂于2002年8月1日重新發布

          XHTML1.1—2001年5月31日發布

          XHTML2.0是W3C的工作草案,由于改動過大,學習這個新技術的成本過高而最終胎死腹中,因此,現在最常用的還是XHTML1.0標準。

          目前最新的版本為HTML5,它是2004年被提出,2007年被W3C接納并成立新的HTML工作團隊,

          2008年1月22日公布HTML5第一份正式草案,

          2012年12月17日HTML5規范正式定稿,

          2013年5月6日,HTML5.1正式草案公布。

          HTML 5作為最新版本,提供了一些新的元素和一些有趣的新特性,同時也建立了一些新的規則。這些元素、特性和規則的建立,提供了許多新的網頁功能,如使用網頁實現動態渲染圖形、圖表、圖像和動畫,以及不需要安裝任何插件直接使用網頁播放視頻等。目前企業開發中也在增大使用HTML5的力度

          HTML的優勢

          • 各大瀏覽器廠商對H5的支持
          • 市場的需求
          • 跨平臺

          二、HTML的基本結構

          • <html>......</html> HTML文檔的開始和結束標記。
          • <head>……</head> 頭控制標記,不在界面上進行展示,子標簽可設置SEO優化的一些內容以及設置網頁的編碼。
          • <title>……</title>:設置瀏覽器的窗口上標題。
          • <body>……</body>:頁面可見內容。

          三、HTML的基本標簽

          • 標題標簽

          h1~h6


          源代碼

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <title>標題標簽</title>

          </head>

          <body>

          <h1>這是一級標題</h1>

          <h2>這是二級標題</h2>

          <h3>這是三級標題</h3>

          <h4>這是四級標題</h4>

          <h5>這是五級標題</h5>

          <h6>這是六級標題</h6>

          <h7>這是七級標題</h7>效果怎么顯示不出來呢???

          <h1>這是一級標題</h1>

          </body>

          </html>

          瀏覽器預覽效果


          • 段落標簽和換行標簽

          p標簽為段落標簽,br標簽為換行標簽


          源代碼

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <title>段落和換行標簽</title>

          </head>

          <body>

          <h1>北京歡迎你</h1>

          <p>北京歡迎你,<br>為你開天辟地</p>

          <p>北京歡迎你,<br/>有有勇氣就會有奇跡</p>

          </body>

          </html>


          瀏覽器預覽效果圖


          • 水平線標簽

          hr標簽為水平線標簽


          源代碼

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <title>水平線標簽</title>

          </head>

          <body>

          <h1>漂洋過海來看你</h1>

          <hr>

          <p>為你我用了半年的積蓄,<br>漂洋過海來看你</p>

          <hr/>

          </body>

          </html>


          瀏覽器預覽效果圖


          • 字體樣式標簽

          em為斜體標簽,strong為字體加粗標簽


          源代碼

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <title>字體樣式標簽</title>

          </head>

          <body>

          <h1>漂洋過海來看你</h1>

          <hr>

          <p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>,<br>

          <em><strong>漂洋過海</strong></em>來看你

          </p>

          <hr/>

          </body>

          </html>


          瀏覽器預覽效果圖

          • 注釋和特殊符號

          注釋使用:<!--被注釋的內容-->

          大于號:> great than的縮寫

          小于號:< less than的縮寫

          雙引號:""

          版權符號:©

          空格:


          源代碼

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <title>注釋和特殊符號</title>

          </head>

          <body>

          <pre>

          注釋使用:<!--被注釋的內容-->

          大于號:> great than的縮寫

          小于號:< less than的縮寫

          雙引號:""

          版權符號:©

          空格:

          </pre>

          <!-- 我是被注釋的內容,我只留給你們看,不會在頁面上顯示 -->

          5<10>6 <br>

          "我是被雙引號引起來的內容"<br>

          ©自由職業開發者公司<br>

          我是 測試 空 格的

          </body>

          </html>


          瀏覽器預覽效果圖


          以上就是HTML的簡單入門,后續帶大家更深入的了解HTML

          圖是一至六級標題.HTML代碼是怎么樣的?(自學示例1)

          一級標題至六級標題

          標題標簽表示一段文字的標題或主題,并支持多層的內容結構。例如一級標題采用<h1>,二級標題采用<h2>,其他級別標題以此類推。HTML共提供了六級標題 <h1>~<h6>.并賦予了標題一定的外觀,所有標題字體加粗,<h1>最大<h6>最小。

          通過使用WebStorm工具,代碼如下

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>不同等級的標題標簽對比</title>
          </head>
          <body>
          <h1>頭條號</h1>
          <h2>頭條號</h2>
          <h3>頭條號</h3>
          <h4>頭條號</h4>
          <h5>頭條號</h5>
          <h6>頭條號</h6>
          </body>
          </html>

          是不是很簡單,自己操作試一下吧。

          這里的<html lang="en">可以理解為我編輯的這個頁面是英文的。Chrome之類的瀏覽器會提示是否需要翻譯。

          、成品效果

          2、源碼:利用 網頁抬頭、標題標簽、段落標簽、水平線、換行、字體加粗

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <!--網頁抬頭-->

          <title>中央氣象局</title>

          </head>

          <body>

          <!--大標題-->

          <h2>中央氣象臺發布暴雨藍色預警 北京地區局部地區有大雨</h2>

          <p>

          <!-- 二標題 -->

          <h5>2021-08-07 21:00 來源:中國新聞網</h5>

          <hr>

          <!-- 三標題 -->

          <h4>(原標題:中央氣象臺發布暴雨藍色預警)</h4>

          <!-- 四標題 -->

          <h4>中新網8月07日電 中央氣象臺8月07日發布暴雨藍色預警!</h4>

          <!--正文 ↓-->

          <p>

          <strong>北京市氣象臺7日6時發布北京地區天氣預報:</strong>今天白天晴間多云,北轉南風二三級,

          <em>最高氣溫33℃;夜間晴轉多云,</em>南轉北風一二級,最低氣溫23℃。今日是立秋節氣。

          雙休日氣溫較高,濕度大,體感悶熱,戶外注意防暑降溫勤補水。<ins>地質災害風險較高,

          請避免前往河道、山區游玩。</ins>周日夜間將有雷陣雨天氣,請及時關注臨近預報。

          </body>

          </html>


          主站蜘蛛池模板: 国产成人无码一区二区三区| 亚洲一区二区三区乱码在线欧洲| 麻豆va一区二区三区久久浪| 国产一区二区中文字幕| 免费日本一区二区| 末成年女AV片一区二区| 中文字幕精品一区二区| 久久久久国产一区二区三区| 日韩一区二区三区精品| 国产一区二区在线视频| 亚洲一区二区三区深夜天堂| 日韩精品一区二区三区国语自制 | 一区二区三区在线观看中文字幕 | 国产在线观看一区二区三区| 大香伊蕉日本一区二区| 国产一区二区三区免费观在线| 亚洲熟女一区二区三区| 中文字幕无线码一区二区| 视频精品一区二区三区| 午夜福利一区二区三区在线观看 | 亚洲av片一区二区三区| 果冻传媒一区二区天美传媒| 末成年女AV片一区二区| 久久国产香蕉一区精品| 日韩精品一区二区三区老鸭窝| 国产av夜夜欢一区二区三区| 久久精品国产一区二区三| 国产成人一区二区三区电影网站| 国产伦精品一区二区免费| 一本大道在线无码一区| 狠狠色婷婷久久一区二区三区| 日韩精品无码一区二区三区四区 | 亚洲一区二区三区四区视频| 福利一区在线视频| 精品少妇一区二区三区视频| 精品一区二区三区视频在线观看 | 夜精品a一区二区三区| 亚洲一区二区三区高清| 韩日午夜在线资源一区二区 | 午夜视频一区二区三区| 精品国产伦一区二区三区在线观看 |