整合營銷服務商

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

          免費咨詢熱線:

          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

          TML 文本格式化

          加粗文本

          斜體文本

          電腦自動輸出

          這是 下標 和 上標

          HTML 格式化標簽

          HTML 使用標簽<b> 與<i> 對輸出的文本進行格式, 如:粗體 or 斜體

          這些HTML標簽被稱為格式化標簽(請查看底部完整標簽參考手冊)。

          通常標簽 <strong> 替換加粗標簽 <b> 來使用, <em> 替換 <i>標簽使用。然而,這些標簽的含義是不同的:<b> 與<i> 定義粗體或斜體文本。<strong> 或者 <em>意味著你要呈現的文本是重要的,所以要突出顯示。現今所有主要瀏覽器都能渲染各種效果的字體。不過,未來瀏覽器可能會支持更好的渲染效果。

          在線實例

          文本格式化

          此例演示如何在一個 HTML 文件中對文本進行格式化

          預格式文本

          此例演示如何使用 pre 標簽對空行和空格進行控制。

          "計算機輸出"標簽

          此例演示不同的"計算機輸出"標簽的顯示效果。

          地址

          此例演示如何在 HTML 文件中寫地址。

          縮寫和首字母縮寫

          此例演示如何實現縮寫或首字母縮寫。

          文字方向

          此例演示如何改變文字的方向。

          塊引用

          此例演示如何實現長短不一的引用語。

          刪除字效果和插入字效果

          此例演示如何標記刪除文本和插入文本。

          HTML 文本格式化標簽

          標簽描述
          <b>定義粗體文本
          <em>定義著重文字
          <i>定義斜體字
          <small>定義小號字
          <strong>定義加重語氣
          <sub>定義下標字
          <sup>定義上標字
          <ins>定義插入字
          <del>定義刪除字

          HTML "計算機輸出" 標簽

          標簽描述
          <code>定義計算機代碼
          <kbd>定義鍵盤碼
          <samp>定義計算機代碼樣本
          <var>定義變量
          <pre>定義預格式文本

          HTML 引文, 引用, 及標簽定義

          標簽描述
          <abbr>定義縮寫
          <address>定義地址
          <bdo>定義文字方向
          <blockquote>定義長的引用
          <q>定義短的引用語
          <cite>定義引用、引證
          <dfn>定義一個定義項目。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          TML是超文本標記語言。

          web標準是由W3C和其它標準化組織制成集合。

          web標準的構成

          結構(對網頁元素進行整理和分類-HTML)

          表現(設置網頁元素的版式,顏色,大小等外觀樣式-CSS)

          行為(模型的定義及交互的表現-JS)

          HTML常用標簽

          加粗:<strong>和<b>

          傾斜:<em>和<i>

          刪除線:<del>和<s>

          下劃線:<ins>和<u>

          <div>分割分區<span>跨度跨距

          圖片標簽<img/>

          屬性: src圖片路徑

          alt替換文本,圖片無法正常顯示

          title提示文本,鼠標放到圖像顯示

          width寬度,height高度(只需要修改其中一個)

          border邊框(無需單位直接寫數值)

          注意:

          ①圖像標簽可以擁有多個屬性,必須寫在標簽名后面

          ②屬性之前不分先后順序,標簽名與屬性,屬性與屬性之間需要空格分開

          ③屬性采取鍵值對的格式

          相對路徑:以引用文件所在位置為參考基礎

          (同一級路徑,下一級路徑/,上一級路徑../)

          絕對路徑:從盤符開始的路徑(\)

          常用屬性

          img ——vspace垂直邊距 ,hspace水平邊距 align對齊

          details,summary,鼠標點擊時顯示或隱藏

          mark 文本中高亮顯示,和strong相似

          cite 用于引用標記,斜體顯示

          draggable true選中后可以拖動操作

          font定義 font-style font-weight font-size/line-height font-family 順序不能改變

          word-wrap break-word長單詞或url地址自動換行

          letter-spacing字間距

          word-spacing單詞間距

          line-height行間距

          text-decorantion文本裝飾unline下劃線,overline上劃線,line-through刪除線

          text-indent 2em 首行縮進兩個字符

          white-space空白符處理 pre

          box-sizing:content-box當widthh和height的時候不包括margin和panding

          更換圖層位置,z軸偏移z-index:-10

          align-items:center居中對齊

          align-self:center


          超鏈接標簽<a>

          href鏈接目標地址

          target鏈接頁面打開的方式(_self當前窗口打開,_blank新窗口中打開方式)

          外部鏈接,內部鏈接,空鏈接,下載鏈接,網頁元素鏈接,錨點鏈接(快速定位到頁面的某個位置- 添加id屬性)

          去除超鏈接樣式:text-decoration:none


          特殊字符

          空格符 &nbsp;

          小于號&lt; 大于號&gt;


          表格標簽

          align對齊方式

          bolder表格邊框

          cellpadding單元格與內容之間空白

          cellspacing單元格與單元格之前空白

          合并單元格:rowspan colspan


          列表標簽

          無序列表:ul li

          有序列表:ol li

          自定義列表:dl dt dd


          表單標簽

          完整表單:表單域<form>,表單控件,提示信息

          <form>

          ——action(指定接受并處理表單數據的服務器程序的url地址)

          ——method(get/post設置表單數據的提交方式)

          ——name(指定表單名稱)


          <input>輸入元素

          type屬性:button(點擊按鈕)checkbox(復選框)file(輸入字段和“瀏覽”按鈕)hidden(隱藏輸入字段)image(圖片形式提交按鈕)password(密碼字段)radio(單選按鈕)reset(重置按鈕)sumbit(提交按鈕)text(單行輸入字段,默認20個字符)

          name屬性:(相同的名字——單選框和復選框)區別不同表單元素

          value屬性:定義input元素值

          checked屬性:頁面首次加載是否選中

          maxlength屬性:輸入字段的最大值


          <lable>標簽

          用于綁定一個表單元素,當點擊<lable>標簽內的文本時,瀏覽器會自動將焦點轉到或者選擇對應的表單元素上,用來增加用戶體驗。

          <lable>標簽的for屬性與相關元素的id屬性相同

          <select>下拉列表元素

          -<option>

          -selected="selected"默認選中

          <textarea>文本域

          -cols rows (每行每列字數)


          主站蜘蛛池模板: 精品国产一区二区二三区在线观看| 无码国产亚洲日韩国精品视频一区二区三区| 亚洲大尺度无码无码专线一区| 加勒比精品久久一区二区三区| 亚洲国产精品一区二区久久| 亚洲AⅤ无码一区二区三区在线 | 能在线观看的一区二区三区| 91午夜精品亚洲一区二区三区| 国产一区二区电影在线观看| 亚洲AⅤ视频一区二区三区| 毛片无码一区二区三区a片视频| 51视频国产精品一区二区| 麻豆文化传媒精品一区二区| 无码aⅴ精品一区二区三区浪潮| 红桃AV一区二区三区在线无码AV| 无码少妇一区二区浪潮av| 日本强伦姧人妻一区二区| 鲁大师成人一区二区三区| 一区二区三区电影在线观看| 成人精品视频一区二区| 中文字幕人妻AV一区二区| 亚洲日韩中文字幕一区| 男人的天堂av亚洲一区2区| 欧洲亚洲综合一区二区三区| 国产SUV精品一区二区88L| 亚洲一区二区三区在线视频| 国产一区二区视频在线观看| 国产av天堂一区二区三区| 日韩人妻一区二区三区免费| 亚洲一区中文字幕在线电影网| 无码国产精品久久一区免费 | 国模无码视频一区二区三区| 精品国产福利在线观看一区| 国产一区二区精品久久91| 亚洲国产精品一区二区九九| 日本高清不卡一区| 中文无码一区二区不卡αv | 天堂国产一区二区三区| 亚洲熟妇AV一区二区三区宅男| 国产一区二区三区播放| 国产免费一区二区视频|