溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

前端復(fù)習(xí)：html

發(fā)布時間：2020-04-08 05:54:04 來源：網(wǎng)絡(luò) 閱讀：1004 作者：糖醋白糖 欄目：web開發(fā)

1 認識什么是純文本文件txt

  • windows中自帶有一個軟件，叫做記事本。記事本保存的文檔格式就是txt格式，就是英語text的縮寫。術(shù)語上稱這個文件叫做“純文本文件”。
  • txt文件，只能夠保存文本內(nèi)容，是無法記錄文本樣式的。（相對于doc文件而言，doc文件是可以存儲文本的內(nèi)容和樣式，所以doc和txt存儲同樣的內(nèi)容，doc比txt要大）
  • 純文本文件具有如下特點：1、只有文本，沒有樣式；2、用記事本等純文本編輯器可讀，不是亂碼。
  • html、css、js都是純文本文件。

    2 HTML是負責(zé)描述文檔語義的語言

  • html是英語HyperText Markup Language的縮寫，即超文本標記語言。.html就是網(wǎng)頁的格式。
  • 純文本txt文件是不能夠描述文檔的語義的，如文檔中不知道誰是主標題，誰是副標題，誰是段落。所以html應(yīng)運而生。即通過html標簽對，來給文本增加語義。
  • 現(xiàn)在業(yè)界的標準，網(wǎng)頁技術(shù)嚴格的三層分離：html就是負責(zé)描述頁面的語義；css負責(zé)描述頁面的樣式；js負責(zé)描述頁面的動態(tài)效果的。
  • 所以，html不能夠讓文字居中，不能夠更改文字字號、字體、顏色。因為這些都是屬于css樣式范疇；html不能夠讓盒子運動起來，這些屬性屬于js行為范疇。

    3 html中，除了語義，其他什么都沒有

  • html是一個純文本文件（可以由txt文件更改后綴名而來），用一些標簽來描述文字的語義，這些標簽在瀏覽器頁面中是看不到的，所以稱之為“超文本”。
  • html只能做一件事，即通過標簽對，給文本增加語義，這是html唯一能做的。

    4 sublime

  • 任何的純文本編輯器都能夠編輯html，比如說記事本、editplus、notepad++。
  • 比較有名的專門制作網(wǎng)頁的工具有：
    1、DreamWeaver (Adobe公司的產(chǎn)品，這個東西已經(jīng)過時)；2、Sublime （高效率的程序書寫工具）；3、WebStorm （更高級的項目級別編程工具）。
  • sublime的中文意思是“華麗的”，是2011年開始流行的代碼編譯器，可以編輯java、c、php等多門語言。對html、css、js支持非常好，界面也非常漂亮，安裝簡單、小巧、插件多。
    • sublime3已集成常用插件網(wǎng)盤下載：https://pan.baidu.com/s/1sugysbl7Wpm1mTpcE6JzJg
  • sublime中的常用快捷鍵：
  • ctrl+滾輪：放大縮小文字；ctrl+shift+d：復(fù)制當前行；ctrl+shift+k：刪除當前行；ctrl+shift+↑：上移當前行；ctrl+shift+↓：下移當前行；
  • 1、鍵入u，后加上tab鍵可生成<u></u>標簽；
  • 2、鍵入html:xt，后按ctrl+E，然后按下enter鍵，sublime可生成一個標準版本的html格式的骨架。 
    <!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>
</title>
</head>
<body>
</body>
</html>
  • 3、按住ctrl鍵，點擊所要編輯的多行，可同時進行編輯。
  • 4、li*10，后按tab鍵可生成多行l(wèi)i標簽。（需要注意的是，在編輯頁面的時候需要先保存頁面）

    5 html骨架

    5.1 文檔聲明頭

  • 任何一個標準的HTML頁面，第一行一定是一個以<!DOCTYPE ......>開頭的語句，這一行，就是文檔聲明頭，DocType Declaration。此標簽可告知瀏覽器文檔使用的是哪種HTML或者是XHTML規(guī)范。
  • 使用sublime的快捷鍵html:xt生成的html骨架是HTML4.01這個版本，這個版本是IE6開始兼容的。而HTML5是IE9開始兼容的。但IE6/7/8這些瀏覽器還不能夠過早的淘汰，所以這幾年網(wǎng)頁還是應(yīng)該使用HTML4.01來制作。而手機、移動端的網(wǎng)頁開發(fā)，就可以使用HTML5了。
  • HTML4.01里面有兩大規(guī)范，每大規(guī)范里面又各有3種小規(guī)范，所以一共有6種規(guī)范。（為什么定義兩大規(guī)范，其原因是因為HTML覺得有些規(guī)定不夠嚴謹，比如說標簽是否可以使用大寫字母等，所以HTML把一些規(guī)范嚴格的標準，有制定了一個XHTML1.0.在XHTML中的字母X，就表示“嚴格的”。
大規(guī)范 大規(guī)范里的小規(guī)范
HTML4.01 1、Strict：嚴格的，體現(xiàn)在一些標簽不能使用，比如u；2、Transitional：普通的；3、Frameset：帶有框架的頁面
XHTML1.0 （其嚴格體現(xiàn)在小寫標簽、閉合、引號） 1、Strict：嚴格的，體現(xiàn)在一些標簽不能使用，比如u；2、Transitional 普通的（使用sublime的快捷鍵html:xt生成的html骨架，x表示xhtml，t表示transitional）；3、Frameset：帶有框架的頁面
  • strict表示“嚴格的”，這種嚴格體現(xiàn)在有一些標簽不能夠使用。比如說u標簽，就是可以讓一個文本加上下劃線，但是這和HTML的本質(zhì)有沖突，即HTML只能夠負責(zé)語義，不能夠負責(zé)樣式，而u這個下劃線就是樣式，所以在strict中是不能夠使用u標簽的。
  • 一般頁面中偶爾要使用一些類似u這種標簽（當做css鉤子使用），所以選擇XHTML1.0中的transitional版本最為合適。

    5.2 字符集

  • 字符集用meta標簽定義，meta表示“元配置”，就是表示基本的配置項目。charset就是charactor set“字符集”的意思。
  • 中文能夠使用的字符集有兩種：
  • 第一種：UTF-8，即<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">；
  • 第二種：gb2312，即<meta http-equiv="Content-Type" content="text/html;charset=gb2312">，第二種也可以寫成gbk，即<meta http-equiv="Content-Type" content="text/html;charset=gbk">。
  • UTF-8是國際通用字庫，里面涵蓋了所有地球上所有人類的語言文字，比如阿拉伯文、漢語、韓文等；而gb2312是國標，是中國的字庫，里面僅僅涵蓋了漢字和一些常用外文，以及一些常用的符號。
  • 在字庫規(guī)模方面，由于UTF-8里面保存了世界上所有人類語言，所以描述一個漢字需要的碼更多，即UTF-8里面存儲了一個漢字3個字節(jié)，而gb2312中存儲一個漢字2個字節(jié)。保存大?。篣TF-8（更臃腫、加載更慢） > gb2312（更小巧、加載更快）。
  • 需要注意，瀏覽器就是通過meta配置來看網(wǎng)頁是屬于什么字符集的，比如你保存時候的meta配置，和保存時編碼格式不一致，那么瀏覽器就會出現(xiàn)亂碼現(xiàn)象。
    前端復(fù)習(xí)：html

    5.3 關(guān)鍵字和頁面描述

  • meta除了可以設(shè)置字符集，還可以設(shè)置關(guān)鍵字和頁面描述。
  • 設(shè)置頁面描述： 
    <meta name="Description" content="網(wǎng)易是中國領(lǐng)先的互聯(lián)網(wǎng)技術(shù)公司，為用戶提供免費郵箱、游戲、搜索引擎服務(wù)，開設(shè)新聞、娛樂、體育等30多個內(nèi)容頻道，及博客、視頻、論壇等互動交流，網(wǎng)聚人的力量。" />
  • 只要設(shè)置Description頁面配置，那么百度搜索結(jié)果中就能夠顯示這些語句，這個技術(shù)叫做SEO，即search engine optimization，搜索引擎優(yōu)化。
    前端復(fù)習(xí)：html
  • 定義關(guān)鍵字： 
    <meta name="Keywords" content="網(wǎng)易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
  • 這些關(guān)鍵字，就是告訴搜索引擎，這個網(wǎng)頁是干什么的，能夠提高搜索命中率。

    6 HTML的基本語法特性

    6.1 HTML對換行不敏感，對tab不敏感

  • HTML只在乎標簽的嵌套結(jié)構(gòu)，嵌套的關(guān)系，即誰嵌套了誰，誰被誰嵌套了，和換行、tab無關(guān)。換不換行、tab不tab，都不影響頁面的結(jié)構(gòu)。
  • HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關(guān)系，但是，有良好的縮進，代碼更易讀。
  • 空格、tab和換行都會占據(jù)字節(jié)，百度為了追求極致的顯示速度，所以HTML標簽都沒有換行、也沒有縮進，HTML和換不換行沒有關(guān)系，標簽的層次依然清晰，只不過程序員不可讀而已。

    6.2 空白折疊現(xiàn)象

  • HTML中所有的文字之間，如果有空格、換行或者是tab都將被折疊為一個空格顯示。
  • 即如下代碼： 
    <p>熱熱
                             愛愛</p>
  • 顯示的是后被折疊了：
    前端復(fù)習(xí)：html

    6.3 標簽必須要求嚴格封閉

  • 標簽不封閉是災(zāi)難性的結(jié)果： 
    <title>歡迎<title>

    7 html標簽上的說明

    7.1 html標簽等級分類

  • html標簽是分等級的，html將所有的標簽分為兩種：容器級和文本級。
  • 顧名思義，容器級的標簽，里面理論上可以放置任何東西（如h是容器級的標簽。理論上里面可以放置p、ul，語法上的允許，在語義上，不要這么寫。）；
  • 而文本級標簽里面，只能放置文字、圖片、表單元素等。（如p標簽是一個文本級標簽，p里面只能夠放置文字、圖片、表單元素等）
  • 正確寫法：
    ```前端復(fù)習(xí)：html
    <h4>個人簽名</h4>
    <p>
    何處不流浪，歸途是故鄉(xiāng)
    </p>
  • 錯誤寫法： 
    <p>
<h4>個人簽名</h4>何處不流浪，歸途是故鄉(xiāng)
</p>
  • 錯誤寫法使用Chrome的F12審查，你會發(fā)現(xiàn)，瀏覽器自己把p封閉掉了，不讓去包裹h2。
    前端復(fù)習(xí)：html
  • 附加說明：Chrome瀏覽器是世界上對HTML5支持最好的瀏覽器，提供了非常好的開發(fā)工具，非常適合開發(fā)人員使用。（審查元素功能的快捷鍵是F12）

    7.2 img標簽

  • HTML頁面中不能夠直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務(wù)器中。插入方法為：<img src="baby.jpg" alt="可愛小寶寶" />，src是英文source“資源”的簡寫。
  • alt是英文中“alternate”替代的意思，就表示不管發(fā)生什么原因，當這個圖片無法被顯示的時候，出現(xiàn)的替代文字（有的瀏覽器不支持）。
  • 關(guān)于src屬性值相對路徑的問題，../表示可以為上一層文件夾，../../表示為上一層的上一層的文件夾。（相對路徑不會出現(xiàn)以下這種情況：aaa/../bbb/1.jpg。即../要么不寫，要么就寫在開頭。）
  • 面試題：如下有個文件層次圖，能在index.html頁面中，插入圖片1.png的語句為：<img src="../../photo/1.png" />。
    前端復(fù)習(xí)：html
  • 解釋：document為頂級文件夾，里面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾中有index.html。所以index.html在myweb文件夾中，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當做一個中轉(zhuǎn)站，進入photo文件夾，就可以找到1.png。

    7.3 超級鏈接的基本語法

  • 一個網(wǎng)站，是由很多html網(wǎng)頁組成的，html網(wǎng)頁之間能夠通過超級鏈接相互跳轉(zhuǎn)，從而形成“網(wǎng)”。語法為：<a href="1.html" title="懸停文本" target="_blank">鏈接的內(nèi)容</a>。
  • a是英文anchor“錨”的意思，是一個文本級的標簽；
  • href屬性是英文hypertext reference超文本地址的縮寫；target屬性表示是否在新窗口中打開，blank為“空白”的意思，表示新建一個空白窗口；title屬性表示懸停文本。

    7.4 頁面中的錨點

  • 頁面當中可以有錨點，所謂的錨點，就是一個小標記，這個小標記是用戶不可察覺的，用戶不知道這里有一個標記。
  • 錨點用name屬性進行設(shè)置，一個a標簽如果有name屬性（或者是id屬性），就說明是頁面中的一個錨點。 
    <a name="wdzp">我的作品</a> 或者是 <a id="wdzp">我的作品</a>
  • 那么頁面地址欄上寫#wdzp就能夠讓這個錨點置于頁面最頂端顯示。
  • 這里也可以使用超級鏈接，指向頁面中的錨點，那么就是：<a href="#wdzp">點擊我就查看我的作品</a>。（也可以從一個頁面中使用a標簽鏈接到另一個頁面中標記的錨點）

    7.5 無序列表

  • 無序列表，用來表示一個列表的語義，并且每個項目與每個項目之間，是不分先后的。
  • ul就是英文中unordered list，“無序列表”的意思；li就是英文list item，“列表項”的意思。
  • 無序列表時一個“組標簽”，即要么不寫，要么就寫一組。（也就是說，li不能夠單獨存在，必須包裹在ul里面；反過來也是，ul的直接子標簽不能是別的東西，只能是li） 
    <ul>
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
</ul>

  • 以下寫法錯誤，li必須用ul包裹：

    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
  • 下面寫法也錯誤，ul里面直接子標簽只能有l(wèi)i標簽，而不能有其他：（但是li是一個容器級標簽，li里面什么都能放，甚至于li標簽中可以包含ul標簽） 
    <ul>
    <h4>中國主要城市</h4>
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
</ul>
  • 瀏覽器會給默認的無序列表項添加小圓點的“先導(dǎo)符號”，這里強調(diào)，ul的作用，并不是給文字添加小圓點，而是添加無序列表的“語義”。

    7.6 有序列表

  • order list，有序列表，用ol表示。 
    <ol>
    <li>體面</li>
    <li>下一秒</li>
    <li>她說</li>
</ol>
  • ol和ul只是語義上的不一樣，怎么使用都是一樣的。（ol這個東西用的不多，如果想表達順序，一般也是用ul）

    7.7 定義列表

  • 定義列表也是一個組標簽，不過比較復(fù)雜，出現(xiàn)了三個標簽：
    1、dl表示definition list，定義列表；2、dt表示definition title，定義標題；3、dd表示definition description，表示定義描述詞。
  • dt、dd只能在dl中；而且dl的直接子標簽只能有dt、dd。 
    <dl>
    <dt>廣州</dt>
    <dd>中國南大門，有珠江、小蠻腰</dd>
    <dt>上海</dt>
    <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>
  • 表達語義是兩個層面的：1、是一個列表，列出了北京、上海、廣州三個項；2、每個詞都有自己的描述項。（即，dd是用于描述dt的）
  • 定義列表用法可以非常靈活，可以一個dt配多個dd： 
    <dl>
    <dt>廣州</dt>
    <dd>中國南大門，有珠江、小蠻腰</dd>
    <dd>人特別多</dd>
    <dt>上海</dt>
    <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>
  • 還可以拆分開，讓每一個dl里面只有一個dt和dd，這樣子感覺會清晰一些： 
    <dl>
    <dt>廣州</dt>
    <dd>中國南大門，有珠江、小蠻腰</dd>
    <dd>人特別多</dd>
</dl>
<dl>
    <dt>上海</dt>
    <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>
  • 此外，dt、dd都是容器級標簽，想放什么都可以。（頁面編輯時，用什么標簽，不是根據(jù)樣子決定的，而是語義決定。）

    7.8 div和span

  • div和span是非常重要的標簽，div的語義是division“分割”；而span的語義就是span”范圍、跨度”。在css設(shè)計樣式時，這兩個標簽，都是最重要的“盒子”。

    <div>
    <h4>中國主要城市</h4>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
    </ul>
</div>

<div>
    <h4>美國主要城市</h4>
    <ul>
        <li>紐約</li>
        <li>洛杉磯</li>
        <li>西雅圖</li>
    </ul>
</div>
  • 在瀏覽器中，div默認是不會增加任何的效果改變的，但是語義改變了，div中的所有元素就是一個小區(qū)域。div是一個容器級標簽，里面什么都能夠放置，甚至于可以放置div本身。
  • span也是表達“小區(qū)域、小跨度”的意思，但是是一個文本級標簽。也就是說，span只能夠放置文字、圖片、表單元素。（即span里面是放置小元素的，而div里面是放置大東西的。）
  • div標簽也稱之為布局標簽，如下： 
    <div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="guanggao"></div>
    <div class="dongxi"></div>
</div>
<div class="footer"></div>
  • 我們稱呼這種模式叫做“div+css”，div標簽負責(zé)布局，負責(zé)結(jié)構(gòu)，負責(zé)分塊，而css負責(zé)樣式。

    7.8 表單元素：文本框架、密碼框、單選按鈕、復(fù)選框

  • 表單就是收集用戶信息的。就是讓用戶填寫、選擇的。 
    <div>
    <h4>歡迎注冊本網(wǎng)站</h4>
    <form>
        所有的表單內(nèi)容，都要寫在form標簽里面
    </form>
</div>
  • form是英文表單的意思。form標簽里面有action屬性和method屬性。action屬性表示表單提交至哪里。method屬性表示用什么HTTP方法提交，有g(shù)et、post兩種方式。
  • 文本框：<input type="text" value="默認有的值" />；input表示“輸入”，指的是一個“輸入小部件”，“type”屬性表示所要選擇的類型，text值表示類型是一個文本框的輸入小部件。
  • value屬性表示“值”。value值的填寫表示默認有的值。
    前端復(fù)習(xí)：html
  • 密碼框：<input type="password" />
  • 單選按鈕：也是input標簽，type為radio；name屬性值相同的單選框只能選其一。 
    <input type="radio" name="gender" /> 男
<input type="radio" name="gender" /> 女
  • 默認被選擇，就應(yīng)該書寫checked=”checked”。
  • 復(fù)選框：也是input標簽，type為checkbox。（name屬性值相同） 
    <p>
請選擇你的愛好：
<input type="checkbox" name="hobby"/> 睡覺
<input type="checkbox" name="hobby"/> 吃飯
<input type="checkbox" name="hobby"/> 足球
<input type="checkbox" name="hobby"/> 籃球
</p>

    7.9 下拉列表和文本域

  • select就是“選擇”， option為”選項“。
  • select標簽和ul、ol、dl一樣，都是組標簽： 
    <select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
  • 多行文本框（文本域）：<textarea cols="30" rows="10">
向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手