前端復習：html

發布時間：2020-04-08 05:54:04 來源：網絡閱讀：1015 作者：糖醋白糖欄目：web開發

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

windows中自帶有一個軟件，叫做記事本。記事本保存的文檔格式就是txt格式，就是英語text的縮寫。術語上稱這個文件叫做“純文本文件”。
txt文件，只能夠保存文本內容，是無法記錄文本樣式的。（相對于doc文件而言，doc文件是可以存儲文本的內容和樣式，所以doc和txt存儲同樣的內容，doc比txt要大）
純文本文件具有如下特點：1、只有文本，沒有樣式；2、用記事本等純文本編輯器可讀，不是亂碼。
html、css、js都是純文本文件。
2 HTML是負責描述文檔語義的語言
html是英語HyperText Markup Language的縮寫，即超文本標記語言。.html就是網頁的格式。
純文本txt文件是不能夠描述文檔的語義的，如文檔中不知道誰是主標題，誰是副標題，誰是段落。所以html應運而生。即通過html標簽對，來給文本增加語義。
現在業界的標準，網頁技術嚴格的三層分離：html就是負責描述頁面的語義；css負責描述頁面的樣式；js負責描述頁面的動態效果的。
所以，html不能夠讓文字居中，不能夠更改文字字號、字體、顏色。因為這些都是屬于css樣式范疇；html不能夠讓盒子運動起來，這些屬性屬于js行為范疇。
3 html中，除了語義，其他什么都沒有
html是一個純文本文件（可以由txt文件更改后綴名而來），用一些標簽來描述文字的語義，這些標簽在瀏覽器頁面中是看不到的，所以稱之為“超文本”。
html只能做一件事，即通過標簽對，給文本增加語義，這是html唯一能做的。
4 sublime
任何的純文本編輯器都能夠編輯html，比如說記事本、editplus、notepad++。
比較有名的專門制作網頁的工具有：
1、DreamWeaver (Adobe公司的產品，這個東西已經過時)；2、Sublime （高效率的程序書寫工具）；3、WebStorm （更高級的項目級別編程工具）。
sublime的中文意思是“華麗的”，是2011年開始流行的代碼編譯器，可以編輯java、c、php等多門語言。對html、css、js支持非常好，界面也非常漂亮，安裝簡單、小巧、插件多。
- sublime3已集成常用插件網盤下載：https://pan.baidu.com/s/1sugysbl7Wpm1mTpcE6JzJg
sublime中的常用快捷鍵：
ctrl+滾輪：放大縮小文字；ctrl+shift+d：復制當前行；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鍵可生成多行li標簽。（需要注意的是，在編輯頁面的時候需要先保存頁面）
5 html骨架

5.1 文檔聲明頭
任何一個標準的HTML頁面，第一行一定是一個以<!DOCTYPE ......>開頭的語句，這一行，就是文檔聲明頭，DocType Declaration。此標簽可告知瀏覽器文檔使用的是哪種HTML或者是XHTML規范。
使用sublime的快捷鍵html:xt生成的html骨架是HTML4.01這個版本，這個版本是IE6開始兼容的。而HTML5是IE9開始兼容的。但IE6/7/8這些瀏覽器還不能夠過早的淘汰，所以這幾年網頁還是應該使用HTML4.01來制作。而手機、移動端的網頁開發，就可以使用HTML5了。
HTML4.01里面有兩大規范，每大規范里面又各有3種小規范，所以一共有6種規范。（為什么定義兩大規范，其原因是因為HTML覺得有些規定不夠嚴謹，比如說標簽是否可以使用大寫字母等，所以HTML把一些規范嚴格的標準，有制定了一個XHTML1.0.在XHTML中的字母X，就表示“嚴格的”。

大規范	大規范里的小規范
HTML4.01	1、Strict：嚴格的，體現在一些標簽不能使用，比如u；2、Transitional：普通的；3、Frameset：帶有框架的頁面
XHTML1.0 （其嚴格體現在小寫標簽、閉合、引號）	1、Strict：嚴格的，體現在一些標簽不能使用，比如u；2、Transitional 普通的（使用sublime的快捷鍵html:xt生成的html骨架，x表示xhtml，t表示transitional）；3、Frameset：帶有框架的頁面

strict表示“嚴格的”，這種嚴格體現在有一些標簽不能夠使用。比如說u標簽，就是可以讓一個文本加上下劃線，但是這和HTML的本質有沖突，即HTML只能夠負責語義，不能夠負責樣式，而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是國標，是中國的字庫，里面僅僅涵蓋了漢字和一些常用外文，以及一些常用的符號。
在字庫規模方面，由于UTF-8里面保存了世界上所有人類語言，所以描述一個漢字需要的碼更多，即UTF-8里面存儲了一個漢字3個字節，而gb2312中存儲一個漢字2個字節。保存大小：UTF-8（更臃腫、加載更慢） > gb2312（更小巧、加載更快）。
需要注意，瀏覽器就是通過meta配置來看網頁是屬于什么字符集的，比如你保存時候的meta配置，和保存時編碼格式不一致，那么瀏覽器就會出現亂碼現象。

5.3 關鍵字和頁面描述
meta除了可以設置字符集，還可以設置關鍵字和頁面描述。

設置頁面描述：

<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />

只要設置Description頁面配置，那么百度搜索結果中就能夠顯示這些語句，這個技術叫做SEO，即search engine optimization，搜索引擎優化。

定義關鍵字：

<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

這些關鍵字，就是告訴搜索引擎，這個網頁是干什么的，能夠提高搜索命中率。
6 HTML的基本語法特性

6.1 HTML對換行不敏感，對tab不敏感
HTML只在乎標簽的嵌套結構，嵌套的關系，即誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系，但是，有良好的縮進，代碼更易讀。
空格、tab和換行都會占據字節，百度為了追求極致的顯示速度，所以HTML標簽都沒有換行、也沒有縮進，HTML和換不換行沒有關系，標簽的層次依然清晰，只不過程序員不可讀而已。
6.2 空白折疊現象
HTML中所有的文字之間，如果有空格、換行或者是tab都將被折疊為一個空格顯示。

即如下代碼：

<p>熱熱
                             愛愛</p>

顯示的是后被折疊了：

6.3 標簽必須要求嚴格封閉
標簽不封閉是災難性的結果：
```
<title>歡迎<title>
```
7 html標簽上的說明

7.1 html標簽等級分類
html標簽是分等級的，html將所有的標簽分為兩種：容器級和文本級。
顧名思義，容器級的標簽，里面理論上可以放置任何東西（如h是容器級的標簽。理論上里面可以放置p、ul，語法上的允許，在語義上，不要這么寫。）；
而文本級標簽里面，只能放置文字、圖片、表單元素等。（如p標簽是一個文本級標簽，p里面只能夠放置文字、圖片、表單元素等）
正確寫法：
```
<h4>個人簽名</h4>
<p>
何處不流浪，歸途是故鄉
</p>

錯誤寫法：

<p>
<h4>個人簽名</h4>何處不流浪，歸途是故鄉
</p>

錯誤寫法使用Chrome的F12審查，你會發現，瀏覽器自己把p封閉掉了，不讓去包裹h2。
附加說明：Chrome瀏覽器是世界上對HTML5支持最好的瀏覽器，提供了非常好的開發工具，非常適合開發人員使用。（審查元素功能的快捷鍵是F12）
7.2 img標簽
HTML頁面中不能夠直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器中。插入方法為：<img src="baby.jpg" alt="可愛小寶寶" />，src是英文source“資源”的簡寫。
alt是英文中“alternate”替代的意思，就表示不管發生什么原因，當這個圖片無法被顯示的時候，出現的替代文字（有的瀏覽器不支持）。
關于src屬性值相對路徑的問題，../表示可以為上一層文件夾，../../表示為上一層的上一層的文件夾。（相對路徑不會出現以下這種情況：aaa/../bbb/1.jpg。即../要么不寫，要么就寫在開頭。）
面試題：如下有個文件層次圖，能在index.html頁面中，插入圖片1.png的語句為：<img src="../../photo/1.png" />。
解釋：document為頂級文件夾，里面有兩個文件夾work和photo。work中又有一個文件夾叫做myweb。myweb文件夾中有index.html。所以index.html在myweb文件夾中，上一級就是work文件夾，上兩級就是document文件夾。通過document文件夾當做一個中轉站，進入photo文件夾，就可以找到1.png。
7.3 超級鏈接的基本語法
一個網站，是由很多html網頁組成的，html網頁之間能夠通過超級鏈接相互跳轉，從而形成“網”。語法為：<a href="1.html" title="懸停文本" target="_blank">鏈接的內容</a>。
a是英文anchor“錨”的意思，是一個文本級的標簽；
href屬性是英文hypertext reference超文本地址的縮寫；target屬性表示是否在新窗口中打開，blank為“空白”的意思，表示新建一個空白窗口；title屬性表示懸停文本。
7.4 頁面中的錨點
頁面當中可以有錨點，所謂的錨點，就是一個小標記，這個小標記是用戶不可察覺的，用戶不知道這里有一個標記。
錨點用name屬性進行設置，一個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里面直接子標簽只能有li標簽，而不能有其他：（但是li是一個容器級標簽，li里面什么都能放，甚至于li標簽中可以包含ul標簽）
```
<ul>
    <h4>中國主要城市</h4>
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
</ul>
```
瀏覽器會給默認的無序列表項添加小圓點的“先導符號”，這里強調，ul的作用，并不是給文字添加小圓點，而是添加無序列表的“語義”。
7.6 有序列表

order list，有序列表，用ol表示。

<ol>
    <li>體面</li>
    <li>下一秒</li>
    <li>她說</li>
</ol>

ol和ul只是語義上的不一樣，怎么使用都是一樣的。（ol這個東西用的不多，如果想表達順序，一般也是用ul）
7.7 定義列表
定義列表也是一個組標簽，不過比較復雜，出現了三個標簽：
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都是容器級標簽，想放什么都可以。（頁面編輯時，用什么標簽，不是根據樣子決定的，而是語義決定。）
7.8 div和span

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

<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中的所有元素就是一個小區域。div是一個容器級標簽，里面什么都能夠放置，甚至于可以放置div本身。
span也是表達“小區域、小跨度”的意思，但是是一個文本級標簽。也就是說，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標簽負責布局，負責結構，負責分塊，而css負責樣式。
7.8 表單元素：文本框架、密碼框、單選按鈕、復選框

表單就是收集用戶信息的。就是讓用戶填寫、選擇的。

<div>
    <h4>歡迎注冊本網站</h4>
    <form>
        所有的表單內容，都要寫在form標簽里面
    </form>
</div>

form是英文表單的意思。form標簽里面有action屬性和method屬性。action屬性表示表單提交至哪里。method屬性表示用什么HTTP方法提交，有get、post兩種方式。

文本框：<input type="text" value="默認有的值" />；input表示“輸入”，指的是一個“輸入小部件”，“type”屬性表示所要選擇的類型，text值表示類型是一個文本框的輸入小部件。
value屬性表示“值”。value值的填寫表示默認有的值。

密碼框：<input type="password" />
單選按鈕：也是input標簽，type為radio；name屬性值相同的單選框只能選其一。
```
<input type="radio" name="gender" /> 男
<input type="radio" name="gender" /> 女
```
默認被選擇，就應該書寫checked=”checked”。

復選框：也是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問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

前端復習：html

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

2 HTML是負責描述文檔語義的語言

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

4 sublime

5 html骨架

5.1 文檔聲明頭

5.2 字符集

5.3 關鍵字和頁面描述

6 HTML的基本語法特性

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

6.2 空白折疊現象

6.3 標簽必須要求嚴格封閉

7 html標簽上的說明

7.1 html標簽等級分類

7.2 img標簽

7.3 超級鏈接的基本語法

7.4 頁面中的錨點

7.5 無序列表

7.6 有序列表

7.7 定義列表

7.8 div和span

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

7.9 下拉列表和文本域

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

前端復習：html

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

2 HTML是負責描述文檔語義的語言

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

4 sublime

5 html骨架

5.1 文檔聲明頭

5.2 字符集

5.3 關鍵字和頁面描述

6 HTML的基本語法特性

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

6.2 空白折疊現象

6.3 標簽必須要求嚴格封閉

7 html標簽上的說明

7.1 html標簽等級分類

7.2 img標簽

7.3 超級鏈接的基本語法

7.4 頁面中的錨點

7.5 無序列表

7.6 有序列表

7.7 定義列表

7.8 div和span

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

7.9 下拉列表和文本域

猜你喜歡

最新資訊

相關推薦

相關標簽