一周學(xué)會(huì)HTML--HTML綜述

一周學(xué)會(huì)HTML

1.HTML是什么？

HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)

2.HTML發(fā)展歷程

HTML版本從1.0到4.0不斷升級(jí)，其版本的規(guī)則都是由W3C組織制定。到了HTML4.0版本后，HTML規(guī)則在當(dāng)時(shí)較為全面，W3C組織甚至認(rèn)為沒(méi)有更新版本的必要，W3C組織于是專注于完善HTML的語(yǔ)法規(guī)則，推出了新一款的規(guī)則XHTML1.0，XHTML與HTML大部

分一致，主要升級(jí)在于語(yǔ)法規(guī)則更加嚴(yán)格，可擴(kuò)展性更強(qiáng)。

-webKit- -O- -moz- -ms-

各大瀏覽器廠商不能接受W3C不再擴(kuò)充HTML功能，于是各自對(duì)HTML進(jìn)行擴(kuò)展，不再遵循W3C的路數(shù)，于是市面上就出現(xiàn)了多種版本的擴(kuò)展版HTML。W3C不愿意HTML被隨意擴(kuò)展，只能再次制定新的擴(kuò)展規(guī)則，綜合多家瀏覽器廠商的擴(kuò)展，得到了最終的HTML版本，命名為HTML5.0。

【注】各種瀏覽器對(duì)HTML5的屬性支持性不同，本次課程大多以chrome和safari為例(兩者均為WebKit內(nèi)核)。

3.HTML、CSS和JavaScript三者的關(guān)系

一個(gè)完整的前端頁(yè)面可分成多個(gè)部分。實(shí)體內(nèi)容為HTML部分，樣式、布局及少部分過(guò)渡和動(dòng)畫(huà)屬于CSS部分，數(shù)據(jù)的處理（請(qǐng)求、運(yùn)算、存儲(chǔ)等）、頁(yè)面內(nèi)容樣式的動(dòng)態(tài)變化等可以通過(guò)JavaScript實(shí)現(xiàn)。

4.開(kāi)發(fā)工具

WebStorm、Dreamweaver、Sublime、記事本...

二、HTML文檔結(jié)構(gòu)

1.結(jié)構(gòu)總覽

一個(gè)完整的html文件應(yīng)為以下結(jié)構(gòu)：

<!DOCTYPE html>             // DTD Document Type Define 文檔類型定義
<html lang="en">
<head>
    <meta charset="UTF-8">      // 字符集編碼格式
    <title></title>     //頁(yè)面標(biāo)題
</head>
<body>

</body>
</html>

2.文檔特性與語(yǔ)法

(1) 標(biāo)簽的三種形式
a. <title> </title> 具有開(kāi)始標(biāo)簽和關(guān)閉標(biāo)簽
b. <meta> 單個(gè)標(biāo)簽
c. <input /> 自身既是開(kāi)始標(biāo)簽也是關(guān)閉標(biāo)簽
(2) 標(biāo)簽的關(guān)系
兄弟標(biāo)簽、父子標(biāo)簽、先輩標(biāo)簽后輩標(biāo)簽
(3) 不區(qū)分單雙引號(hào)、不區(qū)分大小寫

三、HTML標(biāo)簽

1.基礎(chǔ)標(biāo)簽

(1) head與body
(2) title
(3) meta // meta 設(shè)置頁(yè)面屬性
(4) link // 資源引用

2.常用標(biāo)簽

(1) hi (i: 1~6)
(2) p big small i
(3) br
(4) div // 1.Block標(biāo)簽，塊級(jí)元素 2.inline標(biāo)簽，行元素標(biāo)簽
(5) img
(6) a
(7) pre
(8)

【溢出】

(1) 溢出屬性（容器的）
overflow:visible/hidden(隱藏)/scroll/auto(自動(dòng))/inherit;
visible:默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)成現(xiàn)在元素框之外；
hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的；
scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余的內(nèi)容;
auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條，以便查看其他的內(nèi)容;
inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值。
(2) 空余空間
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 該屬性用來(lái)設(shè)置如何處理元素內(nèi)的空白；
normal：默認(rèn)值，空白會(huì)被瀏覽器忽略，
pre：空白會(huì)被瀏覽器保留，其行為方式類似HTML中的pre標(biāo)簽；
nowrap:文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)，直到遇到
標(biāo)簽為止；
pre-wrap：保留空白符序列，但是正常的進(jìn)行換行；
pre-line:合并空白符序列，但是保留換行符；
inherit：規(guī)定應(yīng)該從父元素繼承White-space屬性的值；(ie瀏覽器都不支持此屬性值)
(3) 文本溢出
text-overflow:clip/ellipsis
clip：不顯示省略號(hào)（...），而是簡(jiǎn)單的裁切;
ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)，顯示省略標(biāo)記；
說(shuō)明：
text-overflow屬性僅是...，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需定義：
1、容器寬度：width：value；
2、強(qiáng)制文本在一行內(nèi)顯示:white-space：nowrap;
3、溢出內(nèi)容為隱藏：overflow：hidden；
4、溢出文本顯示省略號(hào)：text-overflow：ellipsis;

3.重要標(biāo)簽

(1) 表格 table
子標(biāo)簽: th tr td
屬性: colspan rowspan

(2) 列表
1> ol有序列表 子標(biāo)簽li
2> ul無(wú)序列表 子標(biāo)簽li
3> dl說(shuō)明列表 子標(biāo)簽dt dd

4.表單標(biāo)簽

(1) 什么是表單？
表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能，將采集到的用戶信息提交。
一個(gè)表單有三個(gè)基本組成部分：
表單標(biāo)簽form：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。
表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來(lái)控制其他定義了處理腳本的處理工作
(2) 創(chuàng)建一個(gè)表單

<!DOCTYPE html>

    <html lang="en">
          
<head>
   
             <meta charset="UTF-8">
 
             <title></title>
          
</head>
    
<body>


        <form name="login" method="post" action="http://andy1991.cn/demo/adlogin.php" onsubmit="**return** loginn()">
  
      <input id="username" name="username" type="text">
  
      <input name="password" type="password">
   
       <input type="submit">

</form>
  

<script type="text/javascript">
   
     **function** loginn() {
   
           **if** (document.getElementById('username').value == 'naibin') {
        
          alert('登陸成功');
      
    }**else** {
            alert('登陸失敗');
   
     }

        **return false**;
   
 }
</script>


</body>

</html>

四、標(biāo)簽屬性

src name alt value max min title

1.id
不可重復(fù)，唯一的標(biāo)志一個(gè)標(biāo)簽元素，可以通過(guò)id定位到一個(gè)頁(yè)面里的唯一的標(biāo)簽
2.name
一個(gè)標(biāo)簽的名字
3.class
標(biāo)簽的類名，將某一些標(biāo)簽劃歸為一類，可以進(jìn)行批量處理
4.style
CSS樣式屬性
5.alt
替換顯示文本
6.title
鼠標(biāo)懸停顯示文本

五、附加

1.iframe

2.修改光標(biāo) cursor

3.HTML5新增結(jié)構(gòu)標(biāo)簽 (塊級(jí)標(biāo)簽)
(1) header
<header> 標(biāo)簽定義文檔的頁(yè)眉（介紹信息）。
(2) footer
<footer> 標(biāo)簽定義文檔或節(jié)的頁(yè)腳。
<footer> 元素應(yīng)當(dāng)含有其包含元素的信息。
頁(yè)腳通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等。
您可以在一個(gè)文檔中使用多個(gè) <footer> 元素。
(3) nav
<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分。
(4) section
<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。
(5) article
<article> 標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容。
一篇文章應(yīng)有其自身的意義，應(yīng)該有可能獨(dú)立于站點(diǎn)的其余部分對(duì)其進(jìn)行分發(fā)。
<article> 元素的潛在來(lái)源：

  • 論壇帖子
  • 報(bào)紙文章
  • 博客條目
  • 用戶評(píng)論
    (6) aside
    <aside> 標(biāo)簽定義其所處內(nèi)容之外的內(nèi)容。
    aside 的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,120評(píng)論 1贊 92
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說(shuō)明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,526評(píng)論 1贊 41
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,872評(píng)論 32贊 459
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素；行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,198評(píng)論 1贊 4
  • 香雪在的時(shí)光里如一枚枯葉蝶，靜靜的等花開(kāi)，等風(fēng)來(lái)，等灰色的蒼穹幻化成蔚藍(lán)，不知不覺(jué)中，天色欲晚?；蛟S，多美的...
    秋瓷大小姐閱讀 342評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容