Html5學(xué)習(xí)

1. 百度百科上的定義:

HTML的全稱為超文本標(biāo)記語言宰睡,是一種標(biāo)記語言。它包括一系列標(biāo)簽.通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一菌羽,使分散的Internet資源連接為一個邏輯整體狸捅。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字蔼夜,圖形、動畫压昼、聲音求冷、表格、鏈接等窍霞。

2. webview是什么

瀏覽網(wǎng)頁一般用的是瀏覽器
webview翻譯過來就是網(wǎng)頁查看器, 原理和瀏覽器一樣, 可以看做是瀏覽器
app上都內(nèi)置了webview, 所以可以瀏覽網(wǎng)頁匠题。

3. 常用瀏覽器使用的引擎

谷歌瀏覽器(Google Chrome),采用的是雙內(nèi)核但金,Webkit韭山,Blink;
360安全瀏覽器,采用的也是雙內(nèi)核钱磅,Blink(極速模式)梦裂,Trident(IE)(兼容模式);
360極速瀏覽器盖淡,采用的也是雙內(nèi)核年柠,Blink(極速模式),Trident(IE)(兼容模式)褪迟;
UC瀏覽器冗恨,采用的也是雙內(nèi)核,Blink(極速模式)味赃,Trident(IE)(兼容模式)掀抹;
QQ瀏覽器,采用的也是雙內(nèi)核洁桌,Blink(極速模式)渴丸,Trident(IE)(兼容模式);
Safari瀏覽器另凌,采用的也是單內(nèi)核谱轨,Webkit;
Firefox(火狐)瀏覽器吠谢,采用的也是單內(nèi)核土童,Gecko;
IE瀏覽器工坊,采用的也是單內(nèi)核献汗,Trident;
Microsoft Edge瀏覽器王污,采用的也是雙內(nèi)核罢吃,Blink,Trident(IE)昭齐;

4.Html版本

HTML1.0
HTML2.0
HTML3.2
HTML4.0
HTML4.01(微小改進(jìn))
HTML5:2008年正式發(fā)布,現(xiàn)在都在用第5版的html

5. 文檔類聲明

使用的是html5文檔.<!DOCTYPE html> html的第一句話是文檔類型聲明, 表明了是使用html語言的哪個版本

<!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>
    
</body>
</html>

6.HTML XHTML XML的區(qū)別

HTML(Hyper Text Markup Language) 超文本標(biāo)記語言
XHTML (eXtensible HyperText Markup Language) 可擴展超文本標(biāo)記語言, 語法要求比HTML更嚴(yán)格
XML(Extensible Markup Language) 可擴展標(biāo)記語言, 并非像HTML那樣尿招,提供了一組事先已經(jīng)定義好了的標(biāo)簽,而是提供了一個標(biāo)準(zhǔn)阱驾,利用這個標(biāo)準(zhǔn)就谜,可以根據(jù)實際需要定義自己的新的標(biāo)記語言

7. 字符編碼

01 什么是字符編碼

  1. 在計算機中,所有信息最終都是用二進(jìn)制來表示的里覆。
  2. 為了在計算機中表示英文中的字符丧荐,美國制定了一套字符編碼,對英文字符與二進(jìn)制位之間做了映射關(guān)系喧枷,這被稱為 ASCII 碼
  3. 擁有了ASCII碼之后虹统,英文就可以在計算機當(dāng)中完美的表示出來了弓坞,但隨著計算機的普及,其他的國家也要求將自己國家的語言編入計算機當(dāng)中窟却,他們紛紛在基于ASCII碼之上昼丑,編寫了自己的碼表呻逆,比如中國的GB2312夸赫。

02 html中的字符編碼設(shè)置

為了正確顯示HTML頁面,瀏覽器必須知道頁面采用的是什么字符編碼咖城。

<head>
  <meta charset="UTF-8">
</head>

03 常見的字符編號

  1. ASCII字符集

  2. ISO字符集

  3. Unicode標(biāo)準(zhǔn)

    • UTF-8
    • UTF-16
  4. GB2312 簡體中文

8.改變圖標(biāo)

想要得到該圖標(biāo)需用到ico轉(zhuǎn)換工具茬腿,自行百度。

 <link rel="icon" href="./bitbug_favicon.ico">
image.png

9. 標(biāo)簽的使用

<body>
   <p>p標(biāo)簽中進(jìn)行換行宜雀,<br>在此處進(jìn)行換行</p>
   <hr>   <!--水平線的使用 -->
   <i>斜體標(biāo)簽</i><br>
   <pre>
尊敬的某某:
    在此是中國建筑第八工程局某某公司切平,因為你近期幫助我公司
    修訂員工手冊,在此提出感謝
                            xxx
                             2022年1月1日
   </pre>
   <b>粗體文本</b> <br>
   <em id="aa">強調(diào)文本</em><br>
   <ins>被插入文本</ins><br>
   <u>下劃線文本</u><br>
   <s>加刪除線文本</s><br>
   <del>被刪除文本</del><br>
   <sub>下標(biāo)文本</sub><br>
   <sup>上標(biāo)文本</sup><br>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <p>11111</p>
   <span>co<sub>2</sub></span><br>    //二氧化碳
   <span>m<sup>2</sup></span><br>    //平方米
   <a target="_self" >搜狗</a><br>
   <a target="_block" >搜狗</a><br>
   <a target="-block" href="./年齡練習(xí)(if練習(xí)).html">跳轉(zhuǎn)到年齡練習(xí)</a><br>
   <a href="#">返回頂部</a> <br>
   <a href="#aa">返回aa</a><br>
   <a target="_block" href="計算器.html">跳轉(zhuǎn)到計算器</a>
//a標(biāo)簽中target表示網(wǎng)頁跳轉(zhuǎn)時候是內(nèi)部跳轉(zhuǎn)還是外部跳轉(zhuǎn)辐董。href='#'表示回到頂部悴品。#后面可以跟id,表示回到id所在地简烘。
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>
   <p>1111</p>

   <div>
    <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="圖片加載失敗">   
    <img src="https://cdn2.jianshu.io/assets/default_avatar/7-0993d41a595d6ab6ef17b19496eb2f21.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="圖片加載失敗">
//img中alt表示當(dāng)圖片加載失敗時的提示文字苔严。
   </div>
//轉(zhuǎn)移字符
   <div>小于號  &lt;
       <p>大于號  &gt;</p>
       <p>11111&nbsp;&nbsp;&nbsp;&nbsp;22222</p>
       <p>錢&yen;</p>
   </div>
   </body>

轉(zhuǎn)義字符代碼網(wǎng)址

表格

<table> 定義一個表格
<caption> 定義表格標(biāo)題
<thead> 定義表格中的表頭內(nèi)容
<tbody> 定義表格中的主體內(nèi)容
<tfoot> 定義表格中的表注內(nèi)容(腳注)
<tr> 定義表格中的行
<th> 定義表格中的表頭單元格
<td> 定義表格中單元格
colspan 合并橫向單元格
rowspan 合并豎向單元格
border 邊框
cellspacing=0 合并邊框
合并單元格需要將被合并的單元格注釋掉或者刪除掉

<table border="1" cellspacing="0" width="505px" align="center">
    <caption> 表格標(biāo)題</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td align="center" width="200px" colspan="2" >張三 男</td>
            <td align="center">男</td>
        </tr>
        <tr>
            <td align="center" width="200px" rowspan="2">李四</td>
            <td align="center">女</td>
            <td align="center">22</td>
        </tr>
        <tr>
            <td align="center" width="200px">風(fēng)耳</td>
            <td align="center">男</td>
            <td align="center">23</td>
        </tr>
    </tbody>
   </table >

表單

01 form

定義一個 HTML 表單

以下三個屬性了解即可, 現(xiàn)在幾乎用不到

  1. action:規(guī)定當(dāng)提交表單時向何處發(fā)送表單數(shù)據(jù)。
  2. method:發(fā)送表單數(shù)據(jù)的 HTTP 方法孤澎,get/post届氢。
  3. target:在何處打開 action URL,取值blank覆旭,self退子。

02 input

輸入控件

  1. type:指定輸入控件的類型,常用取值:
*   text   文本
*   password   密碼
*   checkbox    多選框
*   radio    單選框   需要設(shè)置name
*   file    選擇文件或文件夾
*   reset   重置表單,只能在表單中才有用
*   submit   提交表單

其他控件
placeholder 占位符型将,當(dāng)輸入時消失
value 真正顯示在輸入框中
disabled 禁用輸入框
readonly 文本只讀
maxlength 輸入框中最大字符量
autofocus 自動獲得焦點

label寂祥,實現(xiàn)點擊文字時也可以進(jìn)行選擇

定義 checkbox、radio 元素的標(biāo)注
for:規(guī)定 label 與哪個表單元素綁定 七兜,需要用到id

<!-- 表單 -->
   <form action="xxx">
       <p>
           <input type="text" placeholder="請輸入手機號碼">  <br>
           <input type="text" value="12113213"> <br>
           <input type="text" disabled placeholder="禁用輸入框">  <br>
           <input type="text" readonly placeholder="文本只讀">  <br>
           <input type="text" maxlength="11" placeholder="請輸入手機號只能到11位">  <br>
           <input type="text" maxlength="11" autofocus placeholder="自動獲得焦點">  <br>
       </p>
       <p>
           <input type="password" placeholder="請輸入密碼">
       </p>
       <p>
           興趣愛好:<br>
           <label for="bb">打球</label><input id="bb" type="checkbox">
           <label for="cc">休息</label><input id="cc" type="checkbox">
           <label for="rest">休息</label><input id="rest" type="checkbox">
       </p>
       <p>
           性別: <br>
           <input type="radio" name="aa" id="man"><label for="man">男</label>
           <input type="radio" name="aa" id="woman"><label for="woman">女</label>
             </p>
             <p>
                 <input type="file">
             </p>
             <p>
                 <input type="reset">
             </p>
             <p>
                 <input type="submit">
             </p>
   </form> <br>

文本域

可以通過設(shè)置高寬來調(diào)整文本域大型杵尽(或者通過行數(shù)和列數(shù)進(jìn)行調(diào)整)

 <textarea name="" id="" cols="30" rows="10"></textarea> <br> 

下拉列表

disabled:禁用。
name:元素名稱惊搏。
<optgroup> 定義下拉列表中的選項組

label:為選項組規(guī)定描述贮乳。
disabled:禁用該選項組。
<option> 定義下拉列表中選項

value:定義送往服務(wù)器的選項值恬惯。
selected:默認(rèn)選中向拆。
disabled:禁用該選項。

<select name="" id="">
        <optgroup>
        <option value="">貴陽</option>
        <option selected value="">遵義</option>
        <option value="">都勻</option>
    </optgroup>
        <optgroup>
            <option value="">濰坊</option>
            <option value="">濟(jì)南</option>
            <option value="">青島</option>
        </optgroup>
    </select>

button屬性

定義按鈕
type: 規(guī)定按鈕的類型,取值:button, reset, submit,默認(rèn)button
disabled:禁用該按鈕酪耳。

iframe 網(wǎng)頁中的網(wǎng)頁

<body>
    <h1>網(wǎng)頁中的網(wǎng)頁</h1>
    <iframe src="http://zk.huruqing.cn/" frameborder="1" width="800" height="600"></iframe>
</body>

html5新增標(biāo)簽

自行查看并學(xué)習(xí)浓恳,需記住常用的標(biāo)簽

<!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>
    <video src=" https://www.w3school.com.cn/i/movie.ogg" autoplay></video>
    <audio src=" https://www.w3school.com.cn/i/horse.ogg" controls></audio> <br>
     
<input type="number"/>  <br>
<input type="tel"/>  <br>
<input type="date"/>  <br>
<input type="color"/>  <br>
<input type="datetime"/>  <br>
<input type="datetime-local"/>  <br>
<input type="email"/>  <br>
<input type="month"/>  <br>
<input type="range"/>  <br>
<input type="search"/>  <br>
<input type="time"/>  <br>
<input type="url"/>  <br>
<input type="week"/>  <br>

</body>
</html>

canvas畫布

及畫出統(tǒng)計表子類的標(biāo)簽刹缝,需要用到j(luò)s

<body> 
    <canvas id="mycanvas" width="800" height="600"></canvas>

    <script>
        var canvas = document.querySelector('#mycanvas');
        var ctx = canvas.getContext('2d');
        ctx.moveTo(10,10); 
        ctx.lineTo(200, 150);
        ctx.lineTo(20, 200);
        ctx.stroke();
    </script>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末细睡,一起剝皮案震驚了整個濱河市奕锌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌恳邀,老刑警劉巖晴圾,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颂砸,死亡現(xiàn)場離奇詭異,居然都是意外死亡死姚,警方通過查閱死者的電腦和手機人乓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來都毒,“玉大人色罚,你說我怎么就攤上這事≌司ⅲ” “怎么了戳护?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長瀑焦。 經(jīng)常有香客問我腌且,道長,這世上最難降的妖魔是什么蝠猬? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任切蟋,我火速辦了婚禮,結(jié)果婚禮上榆芦,老公的妹妹穿的比我還像新娘柄粹。我一直安慰自己,他們只是感情好匆绣,可當(dāng)我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布驻右。 她就那樣靜靜地躺著,像睡著了一般崎淳。 火紅的嫁衣襯著肌膚如雪堪夭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天拣凹,我揣著相機與錄音森爽,去河邊找鬼。 笑死嚣镜,一個胖子當(dāng)著我的面吹牛爬迟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播菊匿,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼付呕,長吁一口氣:“原來是場噩夢啊……” “哼计福!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起徽职,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤象颖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后姆钉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體说订,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年育韩,在試婚紗的時候發(fā)現(xiàn)自己被綠了克蚂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡筋讨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摸恍,到底是詐尸還是另有隱情悉罕,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布立镶,位于F島的核電站壁袄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏媚媒。R本人自食惡果不足惜嗜逻,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缭召。 院中可真熱鬧栈顷,春花似錦、人聲如沸嵌巷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽搪哪。三九已至靡努,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間晓折,已是汗流浹背惑朦。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留漓概,地道東北人漾月。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像垛耳,于是被迫代替她去往敵國和親栅屏。 傳聞我的和親對象是個殘疾皇子飘千,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 一、html5新特性 1.增加了一個專門用于繪畫的元素canvas 2.增加了用于媒體播放的音頻和視頻元素 3.增...
    空谷悠閱讀 597評論 0 2
  • 一.什么是SVG栈雳? SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics),它用來定義...
    nightZing閱讀 17,034評論 11 62
  • HTML5是萬維網(wǎng)的核心語言护奈,標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言(HTML)的第五次重大修改,一方面提升了...
    強哥科技興閱讀 165評論 0 0
  • 制作HTML頁面 1.2.1 創(chuàng)建首個HTML5頁面. Size:在準(zhǔn)備好的開發(fā)工具中哥纫,首先輸入第一行HTML代碼...
    皇童閱讀 358評論 0 0
  • 塊級元素有 霉旗、 、 蛀骇,以及列表標(biāo)簽 厌秒、 、 擅憔、 鸵闪、 、 行內(nèi)元素有 暑诸、 蚌讼、以及文本格式化標(biāo)簽 、 个榕、 篡石、 行內(nèi)塊元...
    Imkata閱讀 685評論 0 0