7天學會HTML--HTML綜述

時間 2019-11-20

標籤 7天學會 html 綜述欄目 HTML 简体版

原文原文鏈接

一週學會HTMLjavascript

1.HTML是什麼？

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

2.HTML發展歷程

HTML版本從1.0到4.0不斷升級，其版本的規則都是由W3C組織制定。到了HTML4.0版本後，HTML規則在當時較爲全面，W3C組織甚至認爲沒有更新版本的必要，W3C組織因而專一於完善HTML的語法規則，推出了新一款的規則XHTML1.0，XHTML與HTML大部

分一致，主要升級在於語法規則更加嚴格，可擴展性更強。php

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

各大瀏覽器廠商不能接受W3C再也不擴充HTML功能，因而各自對HTML進行擴展，再也不遵循W3C的路數，因而市面上就出現了多種版本的擴展版HTML。W3C不肯意HTML被隨意擴展，只能再次制定新的擴展規則，綜合多家瀏覽器廠商的擴展，獲得了最終的HTML版本，命名爲HTML5.0。

【注】各類瀏覽器對HTML5的屬性支持性不一樣，本次課程大多以chrome和safari爲例(二者均爲WebKit內核)。html

3.HTML、CSS和JavaScript三者的關係

一個完整的前端頁面可分紅多個部分。實體內容爲HTML部分，樣式、佈局及少部分過渡和動畫屬於CSS部分，數據的處理（請求、運算、存儲等）、頁面內容樣式的動態變化等能夠經過JavaScript實現。

4.開發工具

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

2、HTML文檔結構

1.結構總覽

一個完整的html文件應爲如下結構：前端

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

2.文檔特性與語法

(1) 標籤的三種形式
a. 具備開始標籤和關閉標籤
b. 單個標籤
c. 自身既是開始標籤也是關閉標籤java

(2) 標籤的關係
兄弟標籤、父子標籤、先輩標籤後輩標籤web

(3) 不區分單雙引號、不區分大小寫chrome

3、HTML標籤

1.基礎標籤

(1) head與body瀏覽器

(2) title服務器

(3) meta // meta 設置頁面屬性

(4) link // 資源引用

2.經常使用標籤

(1) hi (i: 1~6)

(2) p big small i

(3) br

(4) div // 1.Block標籤，塊級元素 2.inline標籤，行元素標籤

(5) img

(6) a

(7) pre

(8)

【溢出】

(1) 溢出屬性（容器的）
overflow:visible/hidden(隱藏)/scroll/auto(自動)/inherit;
visible:默認值，內容不會被修剪，會成如今元素框以外；
hidden：內容會被修剪，而且其他內容是不可見的；
scroll：內容會被修剪，可是瀏覽器會顯示滾動條，以便查看其他的內容;
auto：若是內容被修剪，則瀏覽器會顯示滾動條，以便查看其餘的內容;
inherit：規定應該從父元素繼承overflow屬性的值。

(2) 空餘空間
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 該屬性用來設置如何處理元素內的空白；
normal：默認值，空白會被瀏覽器忽略，
pre：空白會被瀏覽器保留，其行爲方式相似HTML中的pre標籤；
nowrap:文本不會換行，文本會在同一行上繼續，直到遇到
標籤爲止；
pre-wrap：保留空白符序列，可是正常的進行換行；
pre-line:合併空白符序列，可是保留換行符；
inherit：規定應該從父元素繼承White-space屬性的值；(ie瀏覽器都不支持此屬性值)

(3) 文本溢出
text-overflow:clip/ellipsis
clip：不顯示省略號（...），而是簡單的裁切;
ellipsis：當對象內文本溢出時，顯示省略標記；
說明：
text-overflow屬性僅是...，當文本溢出時是否顯示省略標記，並不具有其它的樣式屬性定義，要實現溢出時產生省略號的效果還需定義：
一、容器寬度：width：value；
二、強制文本在一行內顯示:white-space：nowrap;
三、溢出內容爲隱藏：overflow：hidden；
四、溢出文本顯示省略號：text-overflow：ellipsis;

3.重要標籤

(1) 表格 table
子標籤: th tr td
屬性: colspan rowspan

(2) 列表
1> ol有序列表子標籤li
2> ul無序列表子標籤li
3> dl說明列表子標籤dt dd

4.表單標籤

(1) 什麼是表單？
表單在網頁中主要負責數據採集功能，將採集到的用戶信息提交。
一個表單有三個基本組成部分：
表單標籤form：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
表單按鈕：包括提交按鈕、復位按鈕和通常按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做

(2) 建立一個表單

<!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>