整合營銷服務(wù)商

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

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

          把圖片轉(zhuǎn)換成ico格式

          生需求的原因:

          今天想要在網(wǎng)頁標(biāo)題的左側(cè)添加圖標(biāo),效果圖如下:

          但是心中有這個(gè)效果圖,卻忘記了如何使用了?

          需求目標(biāo):

          在html網(wǎng)頁標(biāo)題欄上添加圖標(biāo)

          具體實(shí)操:

          1.點(diǎn)擊右鍵——選擇打開方式——選擇畫圖工具,效果圖如下:

          2.在畫圖工具的左上方,點(diǎn)擊文件選項(xiàng)——選擇另存為,效果圖如下:

          3.選擇后綴為.bmp【注:這里選擇的是24位位圖】,效果圖如下:

          4.生成.bmp文件,改后綴的作用可以理解為jpg轉(zhuǎn)ico的過渡,效果圖如下:

          5.選擇.bmp文件,點(diǎn)擊右鍵——選擇重命名

          6.將后綴的bmp改成后綴ico,如果有彈框出現(xiàn),也是照樣點(diǎn)確定

          7.成功改成后生成的效果圖

          8.將生成的ico放進(jìn)HTML代碼中,代碼的語法格式如下:

          <link rel="icon" href="圖標(biāo)地址" type="image/x-icon">

          9.生成前后的效果圖如下:



          HTML 是什么?
          htyper text markup language 即超文本標(biāo)記語言。
          超文本: 就是指頁面內(nèi)可以包含圖片、鏈接,甚至音樂、程序等非文字元素。
          標(biāo)記語言: 標(biāo)記(標(biāo)簽)構(gòu)成的語言。
          什么是標(biāo)簽:
          是由一對(duì)尖括號(hào)包裹的單詞構(gòu)成 例如: <html> *所有標(biāo)簽中的單詞不可能以數(shù)字開頭.
          標(biāo)簽不區(qū)分大小寫.<html> 和 <HTML>. 推薦使用小寫.
          標(biāo)簽分為兩部分: 開始標(biāo)簽<a> 和 結(jié)束標(biāo)簽</a>. 兩個(gè)標(biāo)簽之間的部分 我們叫做標(biāo)簽體.
          有些標(biāo)簽功能比較簡單.使用一個(gè)標(biāo)簽即可.這種標(biāo)簽叫做自閉和標(biāo)簽.例如: <br/><hr/><input/><img/>
          標(biāo)簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
          標(biāo)簽的屬性:
          通常是以鍵值對(duì)形式出現(xiàn)的. 例如 name="nick"
          屬性只能出現(xiàn)在開始標(biāo)簽 或 自閉和標(biāo)簽中.
          屬性名字全部小寫. *屬性值必須使用雙引號(hào)或單引號(hào)包裹 例如 name="nick"
          如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
          HTML5基本結(jié)構(gòu):
          將HTML4中的DTD定義為如下結(jié)構(gòu)即可,其他不變。
          <!DOCTYPE HTML>
          HTML5支持的兩種指定頁面使用的字符集的方式:
          使用Content-Type指定字符集
          <meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
          直接使用charset指定字符集
          <meta charset="UTF-8">
          <head> 標(biāo)簽
          <title>
          <title>Title</title>
          <base/>
          標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <base href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/"/>
          <base target="_blank" />
          </head>
          <body>
          <img src="o_s.png" alt="圖片加載失敗。。。"/>
          <a href="http://cnblogs.com/suoning/">nick blogs</a>
          </body>
          </html>
          # 上面這段代碼中,<img>標(biāo)簽的src屬性是一個(gè)相對(duì)路徑,因?yàn)?lt;head>中通過base標(biāo)簽設(shè)置了鏈接的默認(rèn)地址,
          所以img的src實(shí)際的地址是“http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
          同樣的,<a>中只是指定了href,并未指定target屬性,所以也會(huì)使用base中設(shè)置的target屬性的值。
          <link/>
          引用外部文檔,常見于引用外部樣式。重要屬性有三個(gè):rel、href、type。
          rel 規(guī)定文檔與被鏈接文檔之間的關(guān)系。
          rel="dns-prefetch" 預(yù)先解析緩存文檔中使用的域名,目的是為了提高網(wǎng)頁訪問速度。使用場景:在一個(gè)網(wǎng)頁頻繁使用其他域名資源時(shí)。
          rel="shortcut icon"或rel="icon" 在收藏和標(biāo)題欄上用于顯示的圖標(biāo)。示例:<link rel="icon" href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意:IE瀏覽器只支持ico格式,為了兼容IE,圖片文件采用ico格式。
          rel="stylesheet" 引用外部樣式表。
          rel="nofollow" 用于指示搜索引擎不要追蹤(爬蟲抓取),減少垃圾鏈接。用于<a>標(biāo)簽,使用場景:網(wǎng)頁不被信任或是不希望唄搜索引擎錄入的網(wǎng)站。
          href 資源的路徑(相對(duì)路徑/絕對(duì)路徑)。
          type 規(guī)定被連接文檔的MIME類型,用于明確文件的打開方式。例如:.ico文件 p_w_picpath/x-icon。
          <meta/>
          定義關(guān)于HTML文檔的元數(shù)據(jù)。 重要的屬性有三個(gè):http-equiv、name、content
          http-equiv 把content屬性值關(guān)聯(lián)到http頭部。
          Content-Type(瀏覽器接受的文檔類型,一般是text/html)
          refresh(網(wǎng)頁刷新,以秒為單位)
          expires(設(shè)定網(wǎng)頁到期時(shí)間,一旦過期,必須到服務(wù)器上重傳)
          <meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
          <meta http-equiv="Refresh" content="2">
          <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
          <meta http-equiv="expires" content="6 Jun 2016"/>
          name 把content屬性關(guān)聯(lián)到一個(gè)名稱。
          keywords(搜索關(guān)鍵字,用于搜索引擎抓取信息的顯示)
          description(搜索到網(wǎng)站后顯示的網(wǎng)頁內(nèi)容簡描述)
          author(站點(diǎn)制作者信息)
          generator(用以說明生成工具)
          name也可以根據(jù)特定的功能自定義,在新浪網(wǎng)中有使用360認(rèn)證和搜狐認(rèn)證(<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>)。
          <meta name="keywords" content="搜索關(guān)鍵字">
          <meta name="description" content="簡要描述">
          <meta name="author" content="http://cnblogs.com/suoning">
          <meta name="generator" content="用以說明生成工具">
          content 定義與http-equiv或name屬性相關(guān)的元信息,是必要的屬性。
          <body> 標(biāo)簽
          1、塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
          塊級(jí)標(biāo)簽:<p><h1><table><ol><ul><form><div>
          內(nèi)聯(lián)標(biāo)簽:<a><input><img><sub><sup><textarea><span>
          block(塊)元素的特點(diǎn)
          ① 總是在新行上開始;
          ② 高度,行高以及外邊距和內(nèi)邊距都可控制;
          ③ 寬度缺省是它的容器的100%,除非設(shè)定一個(gè)寬度。
          ④ 它可以容納內(nèi)聯(lián)元素和其他塊元素
          inline(內(nèi)聯(lián))元素的特點(diǎn)
          ① 和其他元素都在一行上;
          ② 高,行高及外邊距和內(nèi)邊距不可改變;
          ③ 寬度就是它的文字或圖片的寬度,不可改變
          ④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
          對(duì)行內(nèi)元素,需要注意如下
          設(shè)置寬度width 無效。
          設(shè)置高度height 無效,可以通過line-height來設(shè)置。
          設(shè)置margin 只有左右margin有效,上下無效。
          設(shè)置padding 只有左右padding有效,上下則無效。注意元素范圍是增大了,但是對(duì)元素周圍的內(nèi)容是沒影響的。
          2、基本標(biāo)簽
          <h1>~<h6> 標(biāo)題標(biāo)簽.
          <p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
              style="text-indent: 2em"可以設(shè)置樣式為首行縮進(jìn)兩個(gè)字符。
              <blockquote></blockquote>可以用來設(shè)置整個(gè)段落的縮進(jìn)。
          <b> <strong>: 加粗標(biāo)簽.
          <strike>: 為文字加上一條中線.
          <u>: 文字下方加下劃線.
          <em> <i>: 文字變成斜體.
          <sup>和<sub>: 上角標(biāo) 和 下角標(biāo).
          <br>:換行.
          <hr>:水平線.
          <div>
          塊級(jí)標(biāo)簽。塊級(jí)標(biāo)簽常用于布局,行級(jí)標(biāo)簽常用語顯示內(nèi)容。
             div的顯示通常使用id或class來標(biāo)識(shí)。id為唯一的標(biāo)簽標(biāo)識(shí),class為標(biāo)簽的類標(biāo)識(shí)。
             div的大小是由內(nèi)容來決定的,默認(rèn)情況下,高度由內(nèi)容的高度決定,寬度適應(yīng)屏幕。
             可以容納其他元素,是一個(gè)容器。
          <span>
          3、特殊符號(hào)
            > >
            < <
             空格
            " 引號(hào)
            © 版權(quán)符號(hào)
          特殊符號(hào) 符號(hào)碼
          " " ;
          & & ;
          < < ;
          > > ;
          © ;
          ® ;
          ± ± ;
          × × ;
          § § ;
          ¢ ;
          ¥ ;
          · · ;
          &euro ;
          £ ;
          &trade ;

          4、<a> 超鏈接標(biāo)簽(錨標(biāo)簽)
          重要屬性有三個(gè):href、target、name
          href 超鏈接地址:可以是Web上任意資源,包括圖片,網(wǎng)頁,樣式,腳本文件等。href="#"時(shí),表示被鏈接頁面就是當(dāng)前頁面。
          target 文檔打開時(shí)要顯示的目標(biāo)位置,屬性值一般有:_blank(新窗口中打開)、_self(默認(rèn),在超鏈接所在的容器中打開)、_parent(在超鏈接的父容器中打開)、_top(整個(gè)容器中打開)、name(框架名稱)。
          name 錨記名稱。作用:跳轉(zhuǎn)到文檔的某個(gè)地方。返回首頁。
          # 跳轉(zhuǎn)網(wǎng)頁
          <a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>
          # 跳轉(zhuǎn)錨記書簽名稱
          <a name="top"><h3>Top!</h3></a>
          <div style="height: 800px"></div>
          <a href="#top">top</a>
          1.標(biāo)簽最簡式
          <a href="mailto:xxx@xx.com">郵件聯(lián)系</a>
          2.標(biāo)簽幫你填抄送地址
          <a href="mailto:xxx@xx.com?cc=xxxx@xx.com">郵件聯(lián)系</a>
          3.標(biāo)簽幫你填暗送地址
          <a href="mailto:xxx@xx.com?bcc=xxxx@xx.com">郵件聯(lián)系</a>
          4.暗,抄
          <a href="xxxxx@xx.com">郵件聯(lián)系</a>
          5.標(biāo)簽幫你填主題
          <a href="mailto:xxx@xx.com?subject=這是主題">郵件聯(lián)系</a>
          6.填郵件內(nèi)容
          <a href="mailto:xxx@xx.com?body=這是內(nèi)容">郵件聯(lián)系</a>
          7.多址發(fā)送
          <a href="mailto:xxx@xx.com,xxxx@xx.com">郵件聯(lián)系</a>
          # http://shang.qq.com/v3/widget.html
          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"/></a>
          <a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>
          # 更多圖片地址如下:
          # http://wpa.qq.com/pa?p=1:707321921:1
          # http://wpa.qq.com/pa?p=1:707321921:2
          # http://wpa.qq.com/pa?p=1:707321921:3
          # http://wpa.qq.com/pa?p=1:707321921:4
          # http://wpa.qq.com/pa?p=1:707321921:5
          # http://wpa.qq.com/pa?p=1:707321921:6
          # http://wpa.qq.com/pa?p=1:707321921:7
          # http://wpa.qq.com/pa?p=1:707321921:8
          # http://wpa.qq.com/pa?p=1:707321921:9
          # http://wpa.qq.com/pa?p=1:707321921:10
          # http://wpa.qq.com/pa?p=1:707321921:11
          # http://wpa.qq.com/pa?p=1:707321921:12
          # http://wpa.qq.com/pa?p=1:707321921:13
          5、<img> 圖形標(biāo)簽
          行級(jí)標(biāo)簽,用來顯示圖片。
          重要屬性有:src、title、alt、width、height、align。
          src 圖片地址。
          title 鼠標(biāo)懸浮在圖片上的文字。
          alt 圖片找不到時(shí)要替換的文字。如果圖片資源使用的是外網(wǎng)資源,則不會(huì)顯示要替換的文字。如果使用的是本網(wǎng)站的資源(相對(duì)路徑給出),則找不到圖片時(shí)會(huì)顯示替換的文字,并保留圖片設(shè)置的寬高結(jié)構(gòu)。
          align 圖片周圍文字的垂直對(duì)齊情況。常用的屬性值有:top(與圖片的頂部對(duì)齊)、middle(與圖片的中部對(duì)齊)、bottom(默認(rèn),與圖片的底部對(duì)齊)。
          width 圖片的寬
          height 圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)
          <img src="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>
          6、列表標(biāo)簽 
          <ul> :無序列表標(biāo)簽
          <li>:列表中的每一項(xiàng).
          <ol> :有序列表標(biāo)簽
          <li>:列表中的每一項(xiàng).
          <li>主要的屬性有:type、value兩個(gè):
          type指明項(xiàng)目的類型,屬性值有:A,a,I,i,1,disc(實(shí)心圓),square(實(shí)心正方形),circle(空心圓)。
          value表示序號(hào)值從幾開始。
          <dl> 定義列表
          <dt> 列表標(biāo)題
          <dd> 列表項(xiàng)
          <ur>
          <li type="circle">A</li>
          <li type="1">B</li>
          <li type="1">C</li>
          </ur>
          <ol>
          <li value="3">3</li>
          <li>4</li>
          </ol>
          <dl>
          <dt><i>標(biāo)題</i></dt>
          <dd>第一項(xiàng)</dd>
          <dd>第二項(xiàng)</dd>
          <dd>第三項(xiàng)</dd>
          </dl>
            
          7、<table> 表格標(biāo)簽
          <table border="1">
          <thead>
          <tr>
          <th>序號(hào)</th>
          <th>姓名</th>
          </tr>
          </thead>
          <tbody>
          <tr>
          <th>1.</th>
          <td>nick</td>
          </tr>
          <tr>
          <th>2.</th>
          <td>jenny</td>
          </tr>
          </tbody>
          </table>
          <table> 表格標(biāo)簽
          border:(表格邊框)
          align(水平對(duì)齊方式)
          bgcolor(背景顏色)
          cellpadding(內(nèi)邊距,單元格與內(nèi)容之間的距離)
          cellspacing(外邊距,單元格的間距,設(shè)置為0時(shí),表格變?yōu)閷?shí)線表格)
          width(表格的寬度,可以用%或者像素,最好通過css來設(shè)置長寬)
          <caption> 表格的標(biāo)題
          <tr> 表格的數(shù)據(jù)行,table row
          <th> 表格的表頭名稱,與<td>不同在于文字采用加粗居中的形式顯示,table head cell
          <td> 單元格,用來顯示表格內(nèi)容,table data cell
          <thead> 表格頭部,使結(jié)構(gòu)更加分明
          <tbody> 表格主體部分,使結(jié)構(gòu)更加分明
          rowspan 單元格豎跨多少行,作用在th或者td上
          colspan 單元格橫跨多少列(即合并單元格),作用在th或者td上
          <table>
          <caption>xxxxxxxxxx</caption>
          <thead>
          <tr>
          <th>序號(hào)</th>
          <th>姓名</th>
          <th>年齡</th>
          <th>女神</th>
          </tr>
          </thead>
          <tbody>
          <tr>
          <th>1.</th>
          <td>nick</td>
          <td>18</td>
          <td>可可西</td>
          </tr>
          <tr>
          <th>2.</th>
          <td>jenny</td>
          <td>21</td>
          <td>nick!!!</td>
          </tr>
          </tbody>
          </table>
          8、<form>表單標(biāo)簽
          表單屬性
          HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。表單標(biāo)簽, 要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中。
          屬性:action、method、enctype
          action 表單要提交的地址,用于處理表單的內(nèi)容(一般是提交字典到后臺(tái)的一個(gè)接口,這個(gè)接口是java寫成的,提交到這個(gè)接口后后臺(tái)就知道如何處理這些數(shù)據(jù)了)。
          method 提交的方法,默認(rèn)是get方式提交。
          get: 1.提交的鍵值對(duì).放在地址欄中url后面. 2.安全性相對(duì)較差. 3.對(duì)提交內(nèi)容的長度有限制.
          post:1.提交的鍵值對(duì)不在地址欄. 2.安全性相對(duì)較高. 3.對(duì)提交內(nèi)容的長度理論上無限制.
          enctype 對(duì)表單數(shù)據(jù)進(jìn)行編碼,默認(rèn)都是要編碼的。格式為:application/x-www-form-urlencoded(表單默認(rèn)的編碼格式,表單發(fā)送前對(duì)所有字符進(jìn)行編碼。編碼規(guī)則:空格轉(zhuǎn)換為“+”號(hào),特殊符號(hào)轉(zhuǎn)換為ASC HEX值)。提交普通的文本內(nèi)容到服務(wù)器就可以采用這種默認(rèn)的編碼方式。當(dāng)你需要提交的是一個(gè)文件時(shí),編碼就需要采用另一種格式:multipart/form-data(不對(duì)字符編碼,文件上傳時(shí)使用)。text/plain(是一種純文本編碼,空格轉(zhuǎn)換為“+”號(hào),但是不對(duì)特殊字符進(jìn)行編碼)。
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <title>Title</title>
          </head>
          <body>
          <form action="https://www.baidu.com/s">
          <input type="text" name="wd">
          <input type="submit" value="百度一下">
          </form>
          </body>
          </html>
          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <title>Title</title>
          </head>
          <body>
          <form action="https://www.sogou.com/web">
          <input type="text" name="query">
          <input type="submit" value="搜狗搜索">
          </form>
          </body>
          </html>
          表單元素
          <input> type 屬性:
          text 文本框輸入(默認(rèn)text文本框類型)。
          autocomplete(自動(dòng)完成輸入的內(nèi)容,要求表單元素要有name屬性才有自動(dòng)完成的效果,off表示自動(dòng)完成不可用,on表示自動(dòng)完成可用)
          disabled(設(shè)置或者獲取控件的狀態(tài),默認(rèn)是false即可用,等于true時(shí)不可用,不能輸入內(nèi)容)
              password 密碼框。(以下屬性text和password共有)
          size(指定表單元素的初始寬度。當(dāng)type為text或password時(shí),表單元素的大小以字符為單位,對(duì)于其他元素,寬度以像素為單位)
          maxlength(type為text或password時(shí),表示輸入的最大字符數(shù)),有利于防止sql的注入攻擊
          readonly 只讀. 
                placeholder 框內(nèi)預(yù)置內(nèi)容(灰色),寫上內(nèi)容時(shí)才消失
          radio 單選按鈕。屬性:
          name(將name的值設(shè)置為相同值,才表示一組數(shù)據(jù),才能實(shí)現(xiàn)單選功能)
          value(必須要寫,提交到服務(wù)器的key值,實(shí)際開發(fā)過程中value一般是編號(hào))
          checked(是否被選中的狀態(tài))
          checkbox 復(fù)選框。
          name(名字一定要一樣一樣的,才表示是一組數(shù)據(jù),添加到同一value值列表提交到服務(wù)器)
          value(必須要寫,提交到服務(wù)器的key值,實(shí)際開發(fā)過程中value一般是編號(hào))
          checked(是否被選中的狀態(tài))
          file 文件域,上傳文件(不同的瀏覽器表現(xiàn)形式不同)
              submit 提交按鈕。用于提交表單。
              reset 重置按鈕。清空表單的輸入,恢復(fù)到表單默認(rèn)的狀態(tài)。
          button 普通按鈕。一般結(jié)合javascript使用。
              p_w_picpath 圖片按鈕,用來提交表單,與submit是一樣的效果。
          src(圖片路徑)
              hidden 隱藏字段。
          value(隱藏的內(nèi)容)
              color 顏色標(biāo)簽。value指定顏色值(采用#十六進(jìn)制數(shù)表示)。
              date 日期。value值指定默認(rèn)的日期,格式為****-**-**(年月日)。
              datetime-local 顯示本地時(shí)間,value值指定默認(rèn)的時(shí)間,格式為2016-05-20T11:10:10(年月日T時(shí)分秒)。
              number 數(shù)字向上或者向下滑動(dòng)。可以填數(shù)字然后向上或者向下選擇不同的值。
              range 滑動(dòng)標(biāo)簽。min(指定最小值)、max(指定最大值)、value(指定當(dāng)前默認(rèn)值)。
              week 每年的周數(shù)。value指定哪一年第幾周,格式為2016-W25(2016年第25周)。
          <textarea> 文本域標(biāo)簽。默認(rèn)表現(xiàn)形式是可以輸入很多行文本的文本框。
          name (表單提交項(xiàng)的key)
              cols(設(shè)置文本域?qū)挾龋?br> rows(設(shè)置文本域高度,即行數(shù))
          <select> 下拉框標(biāo)簽。使用時(shí)要結(jié)合<option>子標(biāo)簽一起使用。
          name:表單提交項(xiàng)的key
          size:選項(xiàng)個(gè)數(shù)
          multiple:多選
          <option> 下拉選中的每一項(xiàng)
          value(表單提交項(xiàng)的值)
          selected(selected下拉選默認(rèn)被選中)
          <optgroup>為每一項(xiàng)加上分組
          <label> 把元素與文本結(jié)合起來
          友好設(shè)計(jì):不只是選中復(fù)選框才能選中并打鉤,要求點(diǎn)擊對(duì)應(yīng)的文字也能選中該復(fù)選框。
          這種情況下要用到<label>標(biāo)簽的for屬性(設(shè)置或獲取給定標(biāo)簽對(duì)象指定到的對(duì)象,值=另一個(gè)元素的id號(hào)即可)
          <label for="name">姓名</label>
          <input id="name" type="text">
          <fieldset> 對(duì)表單中的相關(guān)元素進(jìn)行分組
          <fieldset>
          <legend>溫馨提示</legend>
          <div align="middle">不要忘記點(diǎn)贊哦 ==</div>
          </fieldset>
          value: 表單提交項(xiàng)的值
          對(duì)于不同的輸入類型,value 屬性的用法也不同:
          type="button", "reset", "submit" - 定義按鈕上的顯示的文本
          type="text", "password", "hidden" - 定義輸入字段的初始值
          type="checkbox", "radio", "p_w_picpath" - 定義與輸入相關(guān)聯(lián)的值
          框架
          <frameset> 框架
          用來劃分窗體,不能放在<body>中,否則沒有效果。
          cols (縱向分割頁面。其數(shù)值表示方法有三種:“30%、30(或者30px)、*”;數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且數(shù)值之間用“,”隔開。“30%”表示該框架區(qū)域占全部瀏覽器頁面區(qū)域的30%;“30”表示該區(qū)域橫向?qū)挾葹?0像素;“*”表示該區(qū)域占用余下頁面空間。例如:cols="25%,200,*" 表示將頁面分為三部分,左面部分占頁面30%,中間橫向?qū)挾葹?00像素,頁面余下的作為右面部分。)
          rows(橫向分割頁面。屬性和cols一樣)
          frameborder(設(shè)置是否顯示框架邊框。設(shè)定值只有0、1;0 表示不要邊框,1 表示要顯示邊框)
          border(框架之間的距離,一般設(shè)置為0)
          bordercolor(邊框的顏色)
          framespacing(設(shè)置框架與框架間的保留的空白距離)
          <frameset cols="40%,*,*"> 第一個(gè)框架占整個(gè)瀏覽器窗口的40%,剩下的空間平均分配給另外兩個(gè)框架。
          <frameset cols="*,*,*,*"> 瀏覽器窗口等分為四部分。
          <iframe> 框架
          元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架(即行內(nèi)框架)
          name (設(shè)置框架名稱。此為必須設(shè)置的屬性)
          src (設(shè)置此框架要顯示的網(wǎng)頁名稱或路徑。此為必須設(shè)置的屬性)
          scrolling (設(shè)置是否要顯示滾動(dòng)條。設(shè)定值為auto, yes, no)
          bordercolor (設(shè)置框架的邊框顏色)
          frameborder (設(shè)置是否顯示框架邊框。設(shè)定值只有0、1;0 表示不要邊框,1 表示要顯示邊框)
          noresize (設(shè)置框架大小是否能手動(dòng)調(diào)節(jié))
          marginwidth (設(shè)置框架邊界和其中內(nèi)容之間的寬度)
          marginhight (設(shè)置框架邊界和其中內(nèi)容之間的高度)
          width(設(shè)置框架寬度)
          height (設(shè)置框架高度)

          eb標(biāo)準(zhǔn):

          由于不同瀏覽器解析出來的網(wǎng)頁效果可能不同,所以需要通過web標(biāo)準(zhǔn)對(duì)其進(jìn)行約束使其一致,主要包括三個(gè)方面:

          結(jié)構(gòu)標(biāo)準(zhǔn):

          結(jié)構(gòu)用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類,主要指的是HTML。

          表現(xiàn)標(biāo)準(zhǔn)

          表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式,主要指的是CSS。

          行為標(biāo)準(zhǔn):

          行為是指網(wǎng)頁模型的定義及交互的編寫,主要指的是 JavaScript。

          初識(shí)HTML:

          html 全稱 Hyper Text Markup Language ,中文譯為:“超文本標(biāo)記語言” ,描述網(wǎng)頁的一種語言。

          HTML發(fā)展:

          XHTML 是一個(gè) W3C 標(biāo)準(zhǔn),可擴(kuò)展超文本標(biāo)簽語言(EXtensible HyperText Markup Language),更嚴(yán)格更純凈的 HTML 版本,作為一種 XML 應(yīng)用被重新定義的 HTML。



          HTML中的注釋

           <!-- 注釋標(biāo)簽:注釋的內(nèi)容 -->

          條件注釋:

          條件注釋的作用是:定義只有Internet Explorer才執(zhí)行條件注釋中的html標(biāo)簽。

          
              <!--[if IE 8]>
                  .... some HTML here ....
              <![endif]-->

          HTML骨架:

          <!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
          <html lang="en"> <!-- 網(wǎng)頁的跟標(biāo)簽,lang=""用來設(shè)置網(wǎng)頁語言,其值還有zh-CN中文簡體、fr法語等,設(shè)置后當(dāng)系統(tǒng)設(shè)置語言和網(wǎng)頁語言發(fā)生沖突時(shí)會(huì)提示是否翻譯網(wǎng)頁 -->
              <head> <!-- 網(wǎng)頁的頭部 -->
                  <meta charset='UTF-8'> <!-- 聲明字符編碼,其值還有g(shù)bk和gb2312 -->
                  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動(dòng)端視口 -->
                  <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動(dòng)方式 -->
                  <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設(shè)置iOS頂部通欄樣式 -->
                  <meta name="format-detection" content="telephone=no"> <!-- 遇到數(shù)字不轉(zhuǎn)成電話號(hào)碼 -->
                  <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對(duì)IE瀏覽器做兼容的,ie=edge表示兼容edge,若后面ie=7,則表示兼容IE7 -->
                  <meta name='keywords' content='This is a key words'> <!-- 網(wǎng)站搜索關(guān)鍵字 -->
                  <meta name='description' content='this is description'> <!-- 描述網(wǎng)站的信息 -->
                  <link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!--  網(wǎng)站的圖標(biāo),如果圖標(biāo)是gif圖,則需要改:type="image/gif",引入網(wǎng)站圖標(biāo)另一種方法:命名為favicon.ico文件放到網(wǎng)站根目錄下 -->
                  <link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
                  <base target="_blank"/> <!-- base標(biāo)簽,定義這個(gè)網(wǎng)頁中a鏈接打開窗口的方式,其值還有_self -->
                  <title>標(biāo)題</title> <!-- 網(wǎng)站的標(biāo)題 -->
                  <style type="text/CSS">  /* 用來寫CSS代碼,type="text/CSS"可以省略 */
                      div{width:100px; height:100px; color:white;}
                  </style>
              </head>
              <body> <!-- 網(wǎng)頁的主體 -->
                  <h1>標(biāo)題</h1> <!-- 標(biāo)題標(biāo)簽,共六個(gè)級(jí),分別為:h1~h6,大小逐級(jí)遞減,h1在一個(gè)網(wǎng)頁中只允許出現(xiàn)一次。 -->
                  <p>段落</p> <!-- 段落標(biāo)簽 -->
                  <hr/> <!-- 單線標(biāo)簽,所有單標(biāo)簽后面的關(guān)閉符均可以省略 -->
                  <br/> <!-- 換行標(biāo)簽 -->
                  </div></div> <!-- 無語義化標(biāo)簽布局用,上面的標(biāo)簽是語義化標(biāo)簽 -->
                  <span>span</span> <!-- 無語義化標(biāo)簽分割用 -->                
                  <strong>加粗</strong> <!-- 加粗標(biāo)簽 -->
                  <b>加粗</b> <!-- 加粗標(biāo)簽 -->
                  <i>傾斜</i> <!-- 傾斜標(biāo)簽 -->
                  <em>傾斜</em> <!-- 傾斜標(biāo)簽 -->
                  <s>刪除線</s> <!-- 刪除標(biāo)簽 -->
                  <del>刪除線</del> <!-- 刪除標(biāo)簽 -->
                  <u>下劃線</u> <!-- 下劃線標(biāo)簽 -->
                  <ins>下劃線</ins> <!-- 下劃線標(biāo)簽 -->
                  <img src="圖片路徑" alt="圖片無法加載,提示文字" title="鼠標(biāo)懸停,提示文體" border="2"/> <!-- 圖像標(biāo)簽,border是邊框?qū)傩裕瑆idth和height屬性設(shè)置圖像的寬度和高度 -->
                  <a href="跳轉(zhuǎn)目標(biāo)" target="_self">鏈接的命名</a> <!-- 鏈接標(biāo)簽,target屬性為鏈接頁面打開的方式,默認(rèn)值_self為自身打開;_blank為新窗口打開;_new為新窗口打開,相同頁面只會(huì)打開一個(gè);_top跳出框架-->
                  <ul> <!-- 無序列表 -->
                      <li>列表項(xiàng)1</li>
                      <li>列表項(xiàng)2</li>
                      <li>列表項(xiàng)3</li>
                  </ul>
                  <ol type="A"> <!-- 有序列表,屬性type可以控制li序號(hào)的樣式,其屬性值有:1、A、a、I、i-->
                      <li>中國</li>
                      <li>美國</li>
                      <li>英國</li>
                  </ol>
                  <dl> <!-- 自定義列表 -->
                      <dt>分類1</dt> <!-- 分類名稱 -->
                      <dd>分類1第1項(xiàng)</dd> <!-- 類的項(xiàng) -->
                      <dd>分類1第2項(xiàng)</dd>
                      <dt>分類2</dt>
                      <dd>分類2第1項(xiàng)</dd>
                      <dd>分類2第2項(xiàng)</dd>
                  </dl>
                  <table> <!-- 定義表格,table標(biāo)簽實(shí)際就是一個(gè)四方塊框框,里面有單元格才會(huì)顯示出表格的樣子 -->
                  <caption>信息表</caption> <!-- 表格標(biāo)題 -->
                  <tr> <!-- 定義行 -->
                      <th>姓名</th> <!-- 定義表頭,表頭文本有加粗居中效果 -->
                      <th>年齡</th>
                      <th>性別</th>
                  </tr>
                  <tr> <!-- 定義行 -->
                      <td>小明</td> <!-- 定義單元格,表格里面沒有列-->
                      <td>18</td>
                      <td>男</td>
                  </tr>
                  </table>
              </body>
          </html>

          提示:本文圖片等素材來源于網(wǎng)絡(luò),若有侵權(quán),請發(fā)郵件至郵箱:810665436@qq.com聯(lián)系筆者刪除。

          筆者:苦海123

          其它問題可通過以下方式聯(lián)系本人咨詢:

          QQ:810665436

          微信:ConstancyMan


          主站蜘蛛池模板: 一区二区三区在线|欧| 免费一区二区三区在线视频| 国产精品男男视频一区二区三区| 国产一区二区三区久久| 日本一区二区三区不卡在线视频| 亚洲美女视频一区| 亚洲综合在线一区二区三区| 久久青草国产精品一区| 国产一区二区电影| 精品国产乱码一区二区三区| 99久久无码一区人妻a黑| 国产精品制服丝袜一区| 色噜噜狠狠一区二区| 奇米精品视频一区二区三区| 视频一区二区在线观看| 精品无人乱码一区二区三区| 久久久一区二区三区| 亚洲色大成网站www永久一区| 国产传媒一区二区三区呀| 国产精品久久无码一区二区三区网| 国产一区二区三区不卡在线观看| 一区二区三区视频免费| 国精无码欧精品亚洲一区| 91国在线啪精品一区| 国产成人精品一区二区三区| 国产精品一区三区| 中文字幕精品亚洲无线码一区应用| 国产精品一区二区在线观看| 国产一区二区三区四| 久久久久人妻一区精品果冻| 一区二区国产在线观看| 亚洲国产高清在线一区二区三区 | 亚洲第一区视频在线观看| 国产一区二区三区无码免费| 国精产品一区一区三区有限公司| 无码一区二区波多野结衣播放搜索| 亚洲AV日韩综合一区| 久久人妻av一区二区软件| 国精产品一区一区三区有限公司| 久久综合一区二区无码| 亚洲中文字幕在线无码一区二区|