整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML詳細(xì)介紹1

          tml概述和基本結(jié)構(gòu)

          html概述

          HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫,意思是超文本標(biāo)記語言,超文本指的是超鏈接,標(biāo)記指的是標(biāo)簽,是一種用來制作網(wǎng)頁的語言,這種語言由一個(gè)個(gè)的標(biāo)簽組成,用這種語言制作的文件保存的是一個(gè)文本文件,文件的擴(kuò)展名為html或者h(yuǎn)tm,一個(gè)html文件就是一個(gè)網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。

          html基本結(jié)構(gòu)

          一個(gè)html的基本結(jié)構(gòu)如下:

          <!DOCTYPE html>
          <html lang="en">
           <head> 
           <meta charset="UTF-8">
           <title>網(wǎng)頁標(biāo)題</title>
           </head>
           <body>
           網(wǎng)頁顯示內(nèi)容
           </body>
          </html>
          

          第一行是文檔聲明,第二行“”標(biāo)簽和最后一行“”定義html文檔的整體,“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文,定義成中文是’lang=“zh-CN”’,不定義也沒什么影響,它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素,“”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題,設(shè)置包括定義網(wǎng)頁的編碼格式,外鏈css樣式文件和javascript文件等,設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁上,標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄,“”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。

          HTML文檔類型

          目前常用的兩種文檔類型是xhtml 1.0和html5

          xhtml 1.0

          xhtml 1.0 是html5之前的一個(gè)常用的版本,目前許多網(wǎng)站仍然使用此版本。

          此版本文檔用sublime text創(chuàng)建方法: html:xt + tab

          文檔示例:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
           <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
           <title> xhtml 1.0 文檔類型 </title>
          </head>
          <body>
          </body>
          </html>
          

          html5

          pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的

          此版本文檔用sublime text創(chuàng)建方法: html:5 + tab 或者 ! + tab

          文檔示例:

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title> html5文檔類型 </title>
          </head>
          <body>
          </body>
          </html>
          

          兩種文檔的區(qū)別

          1、文檔聲明和編碼聲明

          2、html5新增了標(biāo)簽元素以及元素屬性

          html注釋:

          html文檔代碼中可以插入注釋,注釋是對(duì)代碼的說明和解釋,注釋的內(nèi)容不會(huì)顯示在頁面上,html代碼中插入注釋的方法是:

          <!-- 這是一段注釋 -->
          

          html標(biāo)題標(biāo)簽

          通過

          ,標(biāo)簽可以在網(wǎng)頁上定義6種級(jí)別的標(biāo)題。6種級(jí)別的標(biāo)題表示文檔的6級(jí)目錄層級(jí)關(guān)系,比如說:

          用作主標(biāo)題,其后是

          ,再其次是

          ,以此類推。搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引,所以網(wǎng)頁上使用標(biāo)題是很重要的。

          <h1>這是一級(jí)標(biāo)題</h1>
          <h2>這是二級(jí)標(biāo)題</h2>
          <h3>這是三級(jí)標(biāo)題</h3>
          

          html段落標(biāo)簽、換行標(biāo)簽與字符實(shí)體

          html段落標(biāo)簽

          標(biāo)簽定義一個(gè)文本段落,一個(gè)段落含有默認(rèn)的上下間距,段落之間會(huì)用這種默認(rèn)間距隔開,代碼如下:

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>段落</title>
          </head>
          <body>
           <p>HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫,意思是超文本標(biāo)記語言,超
           文本指的是超鏈接,標(biāo)記指的是標(biāo)簽,是一種用來制作網(wǎng)頁的語言,這種語言由一個(gè)個(gè)的
           標(biāo)簽組成,用這種語言制作的文件保存的是一個(gè)文本文件,文件的擴(kuò)展名為html或者h(yuǎn)tm。
           </p>
           <p>一個(gè)html文件就是一個(gè)網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方
           式編輯它,如果用瀏覽器打開,瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁,顯示的網(wǎng)
           頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。</p>
          </body>
          </html>
          

          html換行標(biāo)簽

          代碼中成段的文字,直接在代碼中回車換行,在渲染成網(wǎng)頁時(shí)候不認(rèn)這種換行,如果真想換行,可以在代碼的段落中插入

          來強(qiáng)制換行,代碼如下:

          <p>
          一個(gè)html文件就是一個(gè)網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用<br />
          文本的方式編輯它,如果用瀏覽器打開,瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br />
          渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。
          </p>
          

          html字符實(shí)體

          代碼中成段的文字,如果文字間想空多個(gè)空格,在代碼中空多個(gè)空格,在渲染成網(wǎng)頁時(shí)只會(huì)顯示一個(gè)空格,如果想顯示多個(gè)空格,可以使用空格的字符實(shí)體,代碼如下:

          <!-- 在段落前想縮進(jìn)兩個(gè)文字的空格,使用空格的字符實(shí)體: -->
          <p>
           一個(gè)html文件就是一個(gè)網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用<br />
          文本的方式編輯它,如果用瀏覽器打開,瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br />
          渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。</p>
          

          在網(wǎng)頁上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽,想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實(shí)體,比如:

          <!-- “<” 和 “>” 的字符實(shí)體為 < 和 > -->
          <p>
           3 < 5 <br>
           10 > 5
          </p>
          

          html塊標(biāo)簽、含樣式的標(biāo)簽

          html塊標(biāo)簽

          1、

          標(biāo)簽 塊元素,表示一塊內(nèi)容,沒有具體的語義。

          2、 標(biāo)簽 行內(nèi)元素,表示一行中的一小段內(nèi)容,沒有具體的語義。

          含樣式和語義的標(biāo)簽

          1、 標(biāo)簽 行內(nèi)元素,表示語氣中的強(qiáng)調(diào)詞

          2、 標(biāo)簽 行內(nèi)元素,表示專業(yè)詞匯

          3、 標(biāo)簽 行內(nèi)元素,表示文檔中的關(guān)鍵字或者產(chǎn)品名

          4、 標(biāo)簽 行內(nèi)元素,表示非常重要的內(nèi)容

          語義化的標(biāo)簽

          語義化的標(biāo)簽,就是在布局的時(shí)候多使用有語義的標(biāo)簽,搜索引擎在爬網(wǎng)的時(shí)候能認(rèn)識(shí)這些標(biāo)簽,理解文檔的結(jié)構(gòu),方便網(wǎng)站的收錄。比如:h1標(biāo)簽是表示標(biāo)題,p標(biāo)簽是表示段落,ul、li標(biāo)簽是表示列表,a標(biāo)簽表示鏈接,dl、dt、dd表示定義列表等,語義化的標(biāo)簽不多。

          html圖像標(biāo)簽、絕對(duì)路徑和相對(duì)路徑

          html圖像標(biāo)簽

          標(biāo)簽可以在網(wǎng)頁上插入一張圖片,它是獨(dú)立使用的標(biāo)簽,它的常用屬性有:

          src屬性 定義圖片的引用地址

          alt屬性 定義圖片加載失敗時(shí)顯示的文字,搜索引擎會(huì)使用這個(gè)文字收錄圖片、盲人讀屏軟件會(huì)讀取這個(gè)文字讓盲人識(shí)別圖片,所以此屬性非常重要。

          <img src="images/pic.jpg" alt="產(chǎn)品圖片" />
          

          絕對(duì)路徑和相對(duì)路徑

          像網(wǎng)頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對(duì)地址和相對(duì)地址。

          絕對(duì)地址:相對(duì)于磁盤的位置去定位文件的地址

          相對(duì)地址:相對(duì)于引用文件本身去定位被引用的文件地址

          絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件,相對(duì)路徑就沒有這個(gè)問題。相對(duì)路徑的定義技巧:

          “ ./ ” 表示當(dāng)前文件所在目錄下,比如:“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片,這個(gè)使用時(shí)可以省略。

          “ …/ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄,比如:“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。

          html鏈接標(biāo)簽

          標(biāo)簽可以在網(wǎng)頁上定義一個(gè)鏈接地址,它的常用屬性有:

          href屬性 定義跳轉(zhuǎn)的地址

          title屬性 定義鼠標(biāo)懸停時(shí)彈出的提示文字框

          target屬性 定義鏈接窗口打開的位置

          target="_self" 缺省值,新頁面替換原來的頁面,在原來位置打開

          target="_blank" 新頁面會(huì)在新開的一個(gè)瀏覽器窗口打開

          頁中添加滾動(dòng)字幕效果

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>滾動(dòng)字體的設(shè)置</title>

          </head>

          <body>

          <canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>

          <script type="text/javascript">

          var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對(duì)象

          var ctx = canvas1.getContext("2d") // 2.上下文對(duì)象(畫筆)


          ctx.shadowBlur = 10; // 陰影距離

          ctx.shadowColor = "red" // 陰影顏色

          ctx.shadowOffsetX = 30 // 陰影偏移

          ctx.shadowOffsetY = 30 // 陰影偏移


          ctx.font = "150px 楷體"


          ctx.fillText("你好!", 20,150)


          ctx.fillText("你好!", 20,350)


          ctx.strokeText('你好!',23, 153)


          ctx.strokeText('你好',23, 553)


          canvas繪制文字



          var x = 600

          setInterval(function(){

          if(x > -350){

          //清空畫布

          ctx.clearRect(0,0,600,600)

          ctx.strokeText('你好!',x, 153)

          ctx.fillText("你好!", x,350)


          ctx.font = "50px 宋體"

          ctx.strokeText('每天學(xué)習(xí)一點(diǎn)點(diǎn)',x, 553)


          x -= 3

          }else{x=590}



          }, 16)


          </script>


          </body>

          </html>


          用html標(biāo)簽使用介紹

          本文主要記錄常用的html標(biāo)簽使用說明,用起來的時(shí)候偶爾查查。

          常用html標(biāo)簽列表

          標(biāo)簽

          英文全拼

          作用

          特點(diǎn)

          ?<html></html>??

          html

          網(wǎng)頁的根標(biāo)簽

          所有的標(biāo)簽都要寫在這一對(duì)根標(biāo)簽里面

          ??<head></head>??

          head

          網(wǎng)頁的頭標(biāo)簽

          包括完檔的屬性和信息

          ??<body></body>??

          body

          網(wǎng)頁的主題

          包含文檔的所有內(nèi)容

          ??<div></div>??

          division

          定義一個(gè)區(qū)域

          瀏覽器通常會(huì)在??<div>??前后放置一個(gè)換行符

          ??<!-- 注釋 -->??

          -

          注釋

          單標(biāo)簽

          ??<br>或<br/>??

          break

          換行

          單標(biāo)簽,不會(huì)在其前后創(chuàng)建空白行

          ??<hr>或<hr/>??

          horizontal rule

          添加水平線

          單標(biāo)簽

          ??<img src="">??

          image

          添加圖片

          單標(biāo)簽

          ??<embed src="">??

          embed

          嵌入外部應(yīng)用

          單標(biāo)簽

          ??<meta>??

          meta

          提供有關(guān)頁面的元信息

          單標(biāo)簽,??<meta>???標(biāo)簽通常位于??<head>??區(qū)域內(nèi)

          ??<link>??

          link

          定義文檔與外部資源的關(guān)系

          單標(biāo)簽,??<link>???標(biāo)簽只能存在于??<head>??區(qū)域內(nèi),不過它可出現(xiàn)任何次數(shù)。

          ??<p></p>??

          paragraph

          定義段落

          自動(dòng)在其前后創(chuàng)建空白行

          ??<h1> to <h6>??

          Header 1 to Header 6

          定義標(biāo)題

          h1在一個(gè)頁面里只能出現(xiàn)一次

          ??<strong></strong>??

          strong

          文本加粗

          加粗標(biāo)記該文本

          ??<b></b>??

          bold

          文本加粗

          加粗顯示文本,不推薦使用

          ??<em></em>??

          emphasize

          文本傾斜

          傾斜標(biāo)記文本

          ??<i></i>??

          italic

          文本傾斜

          傾斜顯示文本,不推薦使用

          ??<del></del>??

          delete

          文本添加刪除線

          -

          ??<s></s>??

          strike

          文本添加刪除線

          不推薦使用

          ??<ins></ins>??

          insert

          文本添加下劃線

          -

          ??<u></u>??

          underline

          文本添加下劃線

          不推薦使用

          ??<a href="">填寫內(nèi)容</a>??

          anchor

          添加超鏈接

          最好使用CSS來改變鏈接的樣式

          ??<ul></ul>??

          unordered list

          定義無序列表

          通常與??<li>??標(biāo)簽一起使用

          ??<ol></ol>??

          ordered list

          定義有序列表

          通常與??<li>??標(biāo)簽一起使用

          ??<li></li>??

          list item

          創(chuàng)建列表項(xiàng)

          可與各種列表定義標(biāo)簽一起使用

          ??<dl></dl>??

          definition list

          定義描述列表

          通常與??<dt>???和??<dd>??一起使用

          ??<dt></dt>??

          definition term

          定義條目

          定義描述列表的項(xiàng)目

          ??<dd></dd>??

          definition description

          定義描述

          對(duì)描述列表中的項(xiàng)目進(jìn)行描述

          ??<table></table>??

          table

          定義HTML表格

          盡可能通過樣式改變表格外觀

          ??<tr></tr>??

          table row

          定義表格的行

          一個(gè)??<tr>???標(biāo)簽包含一個(gè)或多個(gè)??<th>???或??<td>??標(biāo)簽

          ??<th></th>??

          table headline

          定義表格每一列的標(biāo)題

          該標(biāo)簽的文本通常呈現(xiàn)為粗體且居中

          ??<td></td>??

          table data

          定義表格中的單元格數(shù)據(jù)

          該標(biāo)簽的文本呈現(xiàn)為普通且左對(duì)齊

          ??<caption>表格標(biāo)題</caption>??

          caption

          定義整個(gè)表格的標(biāo)題

          ??<caption>???標(biāo)簽必須直接放在??<table>??標(biāo)簽后

          ??<input type="">??

          input

          定義輸入控件

          輸入字段可通過多種方式改變,取決于type屬性

          ??select??

          select

          定義下拉列表

          ??<select>???中的??<option>??標(biāo)簽定義了列表中的可用選項(xiàng)

          ??<option></option>??

          option

          定義下拉列表中的可用項(xiàng)

          ??<option>??標(biāo)簽不可自由定義寬高

          ??<optgroup></optgroup>??

          options group

          定義選項(xiàng)組

          ??<optgroup>??標(biāo)簽用于把相關(guān)的選項(xiàng)組合在一起

          ??<textarea></textarea>??

          textarea

          定義多行的文本輸入控件

          文本的默認(rèn)字體是等寬字體

          ??<form></form>??

          form

          定義表單

          ??<form>??可以包含多個(gè)元素

          ??<fieldset></fieldset>??

          field set

          定義圍繞表單中元素的邊框

          ??<legend>???為??<fieldset>??定義標(biāo)題

          ??<legend></legend>??

          legend

          為??<fieldset>??定義標(biāo)題

          ??<legend>??通過css設(shè)定樣式

          ??<progress></progress>??

          progress

          定義運(yùn)行中的任務(wù)進(jìn)度

          ??<progress>???是HTML5中的新標(biāo)簽,??<progress>??標(biāo)簽不適合用來表示度量衡

          ??<meter></meter>??

          meter

          度量衡

          ??<meter>???是HTML5的新標(biāo)簽,??<meter>??標(biāo)簽不適合用來表示進(jìn)度條

          ??<audio></audio>??

          audio

          添加音頻

          ??<audio>??標(biāo)簽是HTML5的新標(biāo)簽

          ??<video></video>??

          video

          添加視頻

          ??<video>??標(biāo)簽是HTML5的新標(biāo)簽

          ??<source>??

          source

          定義媒介資源

          ??<source>??標(biāo)簽是HTML5中的新標(biāo)簽

          常用標(biāo)簽使用說明

          • 常用寫法:??<img src="" alt="" title=""width="" height=""??>
          • src:圖片的來源(必寫屬性)
          • alt:圖像不顯示時(shí)的替代文本
          • title:鼠標(biāo)在移動(dòng)到元素上的文本提示
          • width/height:圖片寬高,沒有定義寬高的時(shí)候,圖片按照百分之百比例顯示,更改圖片的寬度或者高度,圖片等比例縮放

          普通用法

          • 常用寫法:??<a href="" title="" target="">填寫內(nèi)容</a>??
          • href:去往的路徑(必寫屬性)
          • title:鼠標(biāo)在移動(dòng)到元素上的文本提示
          • target:規(guī)定在何處打開路徑
          • _blank:新頁面打開
          • _parent:在父窗口中打開鏈接
          • _self:當(dāng)前頁面跳轉(zhuǎn)(默認(rèn)值)
          • _top:在當(dāng)前窗體打開鏈接,并替換當(dāng)前的整個(gè)窗體
          • 當(dāng)href的值為javascript:void(0); 或 javascript:; ,表示超鏈接不做任何事情,不做任何跳轉(zhuǎn)
          • 當(dāng)href的值為#,表示超鏈接為空鏈接,點(diǎn)擊此鏈接時(shí)會(huì)跳轉(zhuǎn)到頁首的位置

          錨點(diǎn)鏈接

          錨點(diǎn)鏈接通過點(diǎn)擊超鏈接,自動(dòng)跳轉(zhuǎn)到我們?cè)O(shè)置錨點(diǎn)的位置,類似于word的目錄導(dǎo)航。建立錨點(diǎn)的元素必須要有id或name屬性,最好兩個(gè)都有。這里只跳轉(zhuǎn)本頁面元素,其他頁面跳轉(zhuǎn)自行搜索。
          具體做法如下:

          1. 給目標(biāo)元素設(shè)置id值,如??<p id="id1"></p>??
          2. 設(shè)置錨點(diǎn)超鏈接,錨點(diǎn)的超鏈接路徑一定包含"#",后面緊跟元素的id或者name,如??<a href="#id1"></a>??

          示例如下。為了顯示效果,通過使用lorem自動(dòng)生成隨機(jī)文本(具體使用方法搜索,一般直接輸入就行),lorem*50表示重復(fù)lorem15次。

          <a href="#id2">a</a>
          
            <p id="id1">
              (lorem*15)
            </p>
          
               (lorem*15)
          
            <p id="id2">
               (lorem*15)
            </p>

          超鏈接全局設(shè)置

          在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

          <head>
            <!-- 讓頁面所有的超鏈接新頁面打開 -->
            <base target="_blank">  
          </head>

          charset編碼

          • 常用寫法: ??<meta charset="UTF-8">??
          • charset:定義文檔的字符編碼
          • ASCII/ANSI/Unicode:英語
          • GBK:亞洲通用字符集
          • GB2312:中文簡(jiǎn)體
          • Big5:臺(tái)澳港繁體
          • UTF-8:世界通用字符集

          name

          1. 關(guān)鍵字
          • 常用寫法: ??<meta name="keywords" content="">??
          • 描述:告訴搜索引擎網(wǎng)頁的關(guān)鍵字,盡量將重要的關(guān)鍵詞放在前面
          1. 網(wǎng)頁描述
          • 常用寫法: ??<meta name="keywords" content="">??
          • 描述:告訴搜索引擎網(wǎng)頁的主要內(nèi)容
          1. 作者
          • 常用寫法: ??<meta name="author" content="">??
          • 描述:告訴搜索引擎網(wǎng)頁的作者
          1. 文件檢索
          • 常用寫法: ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
          • 描述:有時(shí)候會(huì)有一些站點(diǎn)內(nèi)容,不希望被ROBOTS抓取而公開。為了解決這個(gè)問題,ROBOTS開發(fā)界提供了兩個(gè)辦法:一個(gè)是robots.txt,另一個(gè)是The Robots META標(biāo)簽。
          • content: 文件檢索方式
          • all:文件將被檢索,且頁面上的鏈接可以被查詢 (默認(rèn)值)
          • none:文件將不被檢索,且頁面上的鏈接不可以被查詢
          • index:文件將被檢索;
          • noindex:文件將不被檢索,但頁面上的鏈接可以被查詢
          • follow:頁面上的鏈接可以被查詢
          • nofollow:文件將不被檢索,頁面上的鏈接可以被查詢

          網(wǎng)頁自動(dòng)跳轉(zhuǎn)

          • 常用寫法: ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
          • 描述:網(wǎng)頁5秒后自動(dòng)跳轉(zhuǎn)到谷歌主頁
          • url:為空則刷新本頁
          • 常用寫法:
          • 描述:規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系
          • rel:定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。rel 是 relationship的英文縮寫(必寫屬性)
          • type:規(guī)定被鏈接文檔的類型
          • href:鏈接的文件路徑
          • 示例:
          • 鏈接外部樣式表:??<link rel="stylesheet" type="text/css" href="a.css">??
          • 設(shè)置網(wǎng)頁icon圖標(biāo):??<link rel="icon" href="a.ico">??

          列表

          無序列表

          無序列表使用粗體圓點(diǎn)進(jìn)行標(biāo)記。簡(jiǎn)單示例如下。

          <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  ...
              </ul>

          有序列表

          有序列表使用數(shù)字進(jìn)行標(biāo)記,我們可以通過整數(shù)值start指定列表編號(hào)的起始值。簡(jiǎn)單示例如下。

          <ol start="2">
                  <li>a</li>
                  <li>b</li>
                  <li>c</li>
                  ...
              </ol>

          描述列表

          通過描述列表自定義列表,列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡(jiǎn)單示例如下。

          <dl>
                  <dt>A</dt> <!-- 小標(biāo)題 -->
                      <dd>A1</dd> <!-- 解釋標(biāo)題 -->
                      <dd>A2</dd> <!-- 解釋標(biāo)題 -->
                  <dt>B</dt> <!-- 小標(biāo)題 -->
                      <dd>B1</dd> <!-- 解釋標(biāo)題 -->
                      <dd>B2</dd> <!-- 解釋標(biāo)題 -->
              </dl>

          表格

          基礎(chǔ)表格

          • 常用寫法:??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
          • width:表格寬度
          • height:表格高度
          • border:邊框?qū)挾?/li>
          • cellspacing:?jiǎn)卧耖g距
          • cellpadding:內(nèi)容與邊框間距

          簡(jiǎn)單示例如下。

          <table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
          <caption>表格標(biāo)題</caption> <!-- 定義表格標(biāo)題 -->
          
          <tr>
              <!-- 定義表格的行 -->
              <td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
              <td>B1</td>
              <td>C1</td>
          </tr>
          <tr>
              <!-- 定義表格的行 -->
              <th>A</th> <!-- 定義表格每一列的標(biāo)題 -->
              <th>B</th>
              <th>C</th>
          </tr>
          <tr>
              <td>A2</td>
              <td>B2</td>
              <td>C2</td>
          </tr>
          </table>

          單元格合并

          • 常用寫法:??<td colspan=“” rowspan=“”></td>??
          • 描述:告訴表格該單元格可以橫跨colspan列,縱跨rowspan行

          簡(jiǎn)單示例如下。

          <table border="2" cellspacing="1px" width="400px" height="100px">
          <caption><strong>表格標(biāo)題</strong></caption> <!-- 定義表格標(biāo)題 -->
          <tr height="100">
              <!-- 定義表格的行 -->
              <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
              <td>B1</td>
          </tr>
          
          <tr height="100">
              <td>A2</td>
              <td>B2</td>
              <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
          </tr>
          
          <tr height="100">
              <td>A3</td>
              <td>B3</td>
          </tr>
          </table>

          對(duì)于??<input>??不同的type屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

          文本輸入框

          • 常用寫法:??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
          • type:規(guī)定輸入字段的類型
          • name:輸入框的名字
          • maxlength:輸入文本長(zhǎng)度
          • readonly:輸入框是否只讀
          • disabled:輸入框是否未激活
          • value:輸入框默認(rèn)值

          簡(jiǎn)單示例如下。

          <input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

          密碼輸入框

          • 常用寫法:??<input type="password" name="">??
          • type:規(guī)定輸入字段的類型
          • name:輸入框的名字
          • 密碼輸入框的其他參數(shù)和文本輸入框一樣

          簡(jiǎn)單示例如下。

          <input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

          單選框

          • 常用寫法:??<input type="radio" name="" checked="checked">??
          • type:規(guī)定輸入字段的類型
          • name:輸入框的名字
          • checked:設(shè)定該輸入框被預(yù)先選定
          • 想要多個(gè)單選框只能有一個(gè)被選中,設(shè)置所有單選框的name值相同即可實(shí)現(xiàn)

          示例一,兩個(gè)單選框都可以被選中

          <div>
              <input type="radio" name="man" checked="checked">男
          </div>
          <div>
              <input type="radio" name="woman">女
          </div>

          示例二,兩個(gè)單選框只能有一個(gè)被選中

          <div>
              <input type="radio" name="gender" checked="checked">男
            </div>
            <div>
              <input type="radio" name="gender">女
            </div>

          下拉列表

          ??<select>??

          • 常用寫法:??<select multiple=""></select>??
          • multiple:當(dāng)該屬性為true時(shí),可選擇多個(gè)選項(xiàng)。

          ??<optgroup>??

          • 常用寫法:??<optgroup label=""></optgroup>??
          • label:設(shè)定選項(xiàng)組的描述。

          ??<option>??

          • 常用寫法:??<option value="" selected="">選項(xiàng)值</option>??
          • value:定義送往服務(wù)器的選項(xiàng)值。
          • selected:當(dāng)該屬性為true時(shí),該選項(xiàng)被默認(rèn)選擇。

          示例一,單選下拉列表

          <select>
              <option value="a">a</option>
              <option value="b">b</option>
              <option value="c" selected='selected'>c</option>  <!-- 默認(rèn)選中 -->
            </select>

          示例二,帶組合的單選下拉列表

          <select>
              <optgroup label="A">
                <option value="a1">a1</option>
                <option value="a2" selected='selected'>a2</option>
              </optgroup>
              <optgroup label="B">
                <option value="b1">b1</option>
                <option value="b2">b2</option>
              </optgroup>
            </select>

          示例三,帶組合的多選下拉列表

          <select multiple=”multiple”>
              <optgroup label="A">
                <option value="a1">a1</option>
                <option value="a2" selected='selected'>a2</option>
              </optgroup>
              <optgroup label="B">
                <option value="b1" selected='selected'>b1</option>
                <option value="b2">b2</option>
              </optgroup>
            </select>

          多選框

          • 常用寫法:??<input type="checkbox" checked="">??
          • type:規(guī)定輸入字段的類型
          • checked:設(shè)定該輸入框被預(yù)先選定

          簡(jiǎn)單示例如下。

          <input type="checkbox"  checked="checked">A
            <input type="checkbox">B

          文本框

          • 常用寫法:??<textarea cols="" rows="" placeholder=""></textarea>??
          • cols:控制可見文本的列數(shù)
          • rows:控制可見文本的行數(shù)
          • placeholder:提示字符

          簡(jiǎn)單示例如下。

          <textarea cols="5" rows="2" placeholder="text"></textarea>

          文本上傳控件

          • 常用寫法:??<input type="file" accept=""/>??
          • accept:規(guī)定提交的文件的類型

          簡(jiǎn)單示例如下。

          <input type="file" accept="image/gif, image/jpeg"/>

          其他類型按鈕

          <input type="submit">文件提交按鈕
            <input type="button" value="">普通按鈕
            <input type="image" src="">圖片按鈕
            <input type="reset">重置按鈕
            <input type="url">網(wǎng)址控件
            <input type="date">日期控件 
            <input type="time">時(shí)間控件
            <!--email提供了郵箱的完整驗(yàn)證,必須包含@和后綴,如果不滿足驗(yàn)證,會(huì)阻止表單提交-->
            <input type="email">郵件控件
            <input type="number" step="3">數(shù)字控件
            <input type="range" step="100">滑塊控件
            <input type="color">顏色控件

          表單

          示例一,普通表單

          <form>
              First name: <input type="text" name="fname"><br>
              Last name: <input type="text" name="lname"><br>
              <input type="submit" value="提交">
            </form>

          示例二,帶分組信息表單

          <form>
              <fieldset>
                <legend>Personalia:</legend>
                First name: <input type="text" name="fname"><br>
                Last name: <input type="text" name="lname"><br>
                <input type="submit" value="提交">
              </fieldset>
          
              First nameA: <input type="text" name="fname"><br>
              Last nameB: <input type="text" name="lname"><br>
            </form>

          ??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??

          ??<progress>??

          • 常用寫法:??<progress value="" max=""></progress>??
          • value:規(guī)定進(jìn)程的當(dāng)前值
          • max:規(guī)定需要完成的值

          簡(jiǎn)單示例如下。

          <progress value="60" max="100"></progress>

          ??<meter>??

          • 常用寫法:??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
          • value:規(guī)定度量的當(dāng)前值
          • max:規(guī)定被界定為高的值的范圍
          • min:規(guī)定被界定為低的值的范圍
          • low:規(guī)定被界定為低的值的范圍
          • high:規(guī)定被界定為高的值的范圍
          • optimum:規(guī)定度量的最優(yōu)值
          • 具體使用見meter標(biāo)簽改變顏色規(guī)則

          簡(jiǎn)單示例如下

          <meter min="0" low="40" high="90" max="100" value="91"></meter>
          <meter min="0" low="40" high="90" max="100" value="90"></meter>

          多媒體資源

          ??<audio>??

          • 常用寫法:??<audio src="" controls autoplay loop></audio>??
          • src:規(guī)定音頻文件的url
          • controls:如果出現(xiàn)該屬性,顯示音頻播放器的控制面板(比如播放/暫停按鈕)
          • autoplay:如果出現(xiàn)該屬性,自動(dòng)播放音頻
          • loop:如果出現(xiàn)該屬性,循環(huán)播放音頻

          簡(jiǎn)單示例如下

          <audio src="demo.mp3" controls autoplay></audio>

          ??<video>??

          • 常用寫法:??<video src="" width="" height="" poster="" controls autoplay loop></video>??
          • src:規(guī)定視頻文件的url
          • width:設(shè)置視頻播放器的寬度(pixels)
          • height:設(shè)置視頻播放器的高度(pixels)
          • poster:設(shè)置視頻未播放時(shí)展示的畫面
          • controls:如果出現(xiàn)該屬性,顯示音頻播放器的控制面板(比如播放/暫停按鈕)
          • autoplay:如果出現(xiàn)該屬性,自動(dòng)播放音頻
          • loop:如果出現(xiàn)該屬性,循環(huán)播放音頻

          簡(jiǎn)單示例如下

          <video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

          ??<source>??

          • 常用寫法:??<source src="" type="">??
          • src:規(guī)定媒體文件的url
          • type:規(guī)定媒體文件的類型
          • 因?yàn)椴煌瑸g覽器支持的媒體格式不同,當(dāng)添加媒體文件時(shí),需要考慮瀏覽器是否支持它們。我們可以準(zhǔn)備多種不同格式的媒體文件,然后使用source 標(biāo)簽,讓瀏覽器從上到下選擇支持的媒體格式

          簡(jiǎn)單示例如下

          <video controls>
              <source src="demo.mp3" type="audio/mp3">
              <source src="demo.mp4" type="video/mp4">
              您的瀏覽器不支持video元素。
            </video>

          特殊字符

          ??HTML特殊字符編碼對(duì)照表??

          參考

          • ??HTML基礎(chǔ)??
          • ??HTML 參考手冊(cè)??
          • HTML中標(biāo)簽對(duì)應(yīng)的英文
          • meter標(biāo)簽改變顏色規(guī)則
          • HTML5 progress和meter控件

          主站蜘蛛池模板: 亚洲一区二区三区亚瑟| 福利电影一区二区| 国产精品亚洲一区二区三区 | 亚洲AV无码一区二区三区网址| 亚洲人成人一区二区三区| 国模少妇一区二区三区| 人妻视频一区二区三区免费| 日本精品视频一区二区| 性色av闺蜜一区二区三区| 国产在线精品观看一区| 秋霞日韩一区二区三区在线观看 | 韩国一区二区视频| 国产精品视频一区| 国产一区二区三区免费在线观看 | 久久影院亚洲一区| 天天躁日日躁狠狠躁一区| 日韩免费观看一区| 国模私拍一区二区三区| 色综合一区二区三区| 天堂va视频一区二区| 日韩一区二区三区四区不卡| 中文字幕在线一区二区在线| 国精品无码一区二区三区左线| 天码av无码一区二区三区四区| 国内精自品线一区91| 亚洲av片一区二区三区| 无遮挡免费一区二区三区| 日韩三级一区二区三区| 日韩视频一区二区在线观看 | 色一乱一伦一区一直爽| 一区二区三区免费视频观看| 亚洲毛片不卡av在线播放一区| 激情综合丝袜美女一区二区| 亚洲国产精品一区二区第四页 | 在线视频国产一区| 成人区人妻精品一区二区不卡视频| 国产一区二区精品久久凹凸| 蜜桃传媒视频麻豆第一区| 亚洲av乱码一区二区三区| 国产精品无码一区二区三区免费| 国产色精品vr一区区三区|