02_互聯網基本原理和HTML入門

時間 2019-11-20

標籤互聯網基本原理 html 入門欄目 HTML 简体版

原文原文鏈接

上節課的知識複習

互聯網的原理：服務器、瀏覽器、HTTP。知道網頁文件是真實的物理存在，用HTTP請求這個文件。

要知道網址的含義：http://www.iqianduan.cn/aaaphp

請求哪一個文件？css

請求的是iqianduan.cn服務器上的aaa文件夾中的index.html文件。拓展一下，服務器能夠進行默認頁面的配置，好比配置爲default.html或者default.php等等。可是默認的是index.html。html

HTML頁面是真正的傳輸到了你的電腦裏面進行渲染的，保存這些文件的文件夾，臨時文件夾。前端

純文本：只有字，沒有樣式。txt、html、java、php、css、js等等。能用記事本打開，而且打開以後不是亂碼的，就是純文本文件。java
HTML是負責描述語義的： <h1>我是一個主標題</h1>功能是給文本增長「主標題」的語義，而不是變大黑粗。程序員

p的功能是增長「段落」的語義。面試

Sublime使用：任何的純文本編輯器都能編輯網頁html文件。學習的是編程，而不是某種軟件。編程
骨架：

<!DTD>
    <html>
       <head>
       </head>
       <body>

       </body>
    </html>

DTD： HTML4.01 3種， XHTML1.0 3種。

XHTML1.0明確的規定了標籤名必須小寫、全部的屬性都是雙引號封閉、自封閉結尾反斜槓。瀏覽器

strict : 嚴格版本，font、b、u、i等不能使用了。服務器

<b>加粗文字</b>
    
<u>下劃線文字</u>
 
<i>傾斜文字</i>

2007年以前，就是用這些標籤寫頁面的。可是，2007~08就被廢棄了，緣由是：DIV+CSS，
咱們但願HTML標籤只負責語義，而不要負責樣式。而b、u、i明顯的帶有「樣式色彩」，因此08年開始，就被廢棄了。strict版本中，嚴格不需使用b、u、i。可是，咱們要在頁面上巧妙的使用一下b、u、i（css鉤子），因此咱們使用transitional版本。

字符集： utf-8和gb2312。字符庫收錄文字多少： utf-8 > gb2312 ；文件尺寸： gb2312 < utf-8。
- gb2312沒有被廢棄，很明顯qq.com使用gb2312，追求打開速度快。
關鍵字、頁面描述

<meta name=」keywords」 content=」手機,電腦」 />

<meta name=」description」 content=」頁面描述」 />

空白摺疊現象和 HTML標籤對空格、tab、換行不敏感。
h標籤和p標籤

h標籤系列，一共6個

<h1></h1>
    到
<h6></h6>

p標籤，段落語義。

所謂的「容器級」和「文本級」不是官方的分類，而是有經驗的程序員本身分出來的類別。

有一些標籤，裏面什麼都能放置，很是的大氣； → 容器級

有一些標籤，裏面只能放置文本，雖然放置別的東西，瀏覽器可能不報錯，可是也沒人這麼作。 → 文本級

記住：HTML4.01層面，容器級標籤，只有div、li、dd、dt、td。其他的標籤，都是文本級的。

圖片

1.基本使用

在HTML頁面中要插入圖片，使用img標籤。

<img src="shishi.jpg" />

img是英語image的簡稱，圖片的意思
src是英語source的簡稱，資源的資源
src屬性中的值，就是圖片的路徑。

img標籤是一個自封閉標籤，也稱爲單標籤，並非一對兒。
<img />
咱們如今接觸的自封閉標籤就兩個：
<meta />和<img />

網頁中能插入的圖片格式：jpg、jpeg、png、bmp、gif。不能插入的圖片格式：psd

2.圖片的寬度和高度

不設置寬度、高度：
<img src="shishi.jpg" />

經過width設置寬度、height設置高度：

<img src="shishi.jpg" width="500" height="300" />

昨天學的語法，鍵值對：
<img k=」v」 k=」v」 k=」v」 />

若是咱們僅僅設置其中一個屬性，另外一個屬性將按比例自動設置。

<img src="shishi.jpg" width="100" />

3.圖片是「文字」

圖片img元素，不是普通的html標籤，和p這種東西不同，img標籤實際上也是一個文字。

img標籤，就是文字：

<body>
   <img src="shishi.jpg" alt="" />
   <img src="shishi.jpg" alt="" />
   <img src="shishi.jpg" alt="" />
</body>

去掉空格：

<img src="shishi.jpg" alt="" /><img src="shishi.jpg" alt="" /><img 
src="shishi.jpg" alt="" />

4.相對路徑和絕對路徑

1.相對路徑

img的src屬性，描述圖片文件在哪兒。

從html頁面出發，找到圖片。這種路徑的描述方式，叫作相對路徑。

當html文件和圖片文件在同一個目錄下，那麼很是簡單，能夠直接輸入文件名<img src=」shishi.jpg」 />

當圖片在更深一層的文件夾中的時候：

寫法就是寫上文件夾名字：
<img src="images/longlong.jpg" />能夠有不少的層次：<img src="images/aaa/bbb/1.jpg" / >

若是圖片在頁面更淺一層的文件夾中：<img src="../jiehunzhao.jpg" />

路徑可能比較複雜，沒有關係一層一層找就能夠了：
<img src="../../images/aaa/bbb/1.jpg" />

須要注意的是： ** ../只能出如今開頭**。

2.絕對路徑

全部以http://開頭的路徑，或者以/開頭的路徑，咱們都稱爲絕對路徑。

<img src="http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png" />

注意http:// 不能省略。

很明顯，咱們如今不是從html頁面出發找到圖片，而是描述了一個絕對的一個網址，那麼稱爲「絕對路徑」。

以/開頭的路徑，表示當前服務器的根目錄。
<img src=」1.jpg」 />不等價於：<img src=」/1.jpg」 />

解釋：
<img src=」1.jpg」 />表示從當前頁面出發，找到1.jpg。
<img src=」/1.jpg」 />表示從當前服務器根目錄出發，找到1.jpg

等價於絕對地址：
<img src=」http://www.shaoshanhuan.com/images/1.jpg」 />

不要去考慮直接插入硬盤中的文件：
<img src=」file://d:/1.jpg」 />不要學，沒有用，由於服務器上沒有d盤，你的路徑不適用服務器的狀況。而且也不方便用u盤考來考去。這是一個錯誤的路徑。

看一道面試題，騰訊2014校園招聘筆試題：

img src=」../../photo/1.png」 />

5.alt屬性

<img src="sdf34.jpg" alt="這是一隻考拉" />

alt是英語alternate替代的意思，就是當圖片不能被顯示的時候（可能由於路徑錯誤、服務器錯誤），顯示的替代文字：

超級連接

1.基本使用

超級連接，把網頁和網頁之間連起來了，互聯網是「網」的緣由。

使用a標籤來製做，a是英語anchor錨的意思。

<a href="temp.html">我是超級連接</a>

href是英語hypertext reference超文本地址的意思。

相似於img的src。

必定不要寫成herf。因此你就要讀作「何瑞福」，不要讀做「喝er夫」。

href裏面的值，就是要跳轉到的頁面的地址，相對路徑、絕對路徑都行：

<a href="../../aaa/bbb/ccc/1.html">連接</a>
<a href="/1.html">連接</a>
<a href="http://www.sina.com.cn/">連接</a>

2.常見屬性

title屬性，就是鼠標懸停時候的提示文本

<a href="temp.html" title="快點我，還等什麼！！">我是超級連接</a>

target屬性，設置是否在新窗口中打開鏈接，若是想在新窗口中打開連接 target=」_blank」

<a href="temp.html" target="_blank">我是新窗口打開的連接</a>

target是英語目標的意思，blank就是空白新窗口的意思。有一個下劃線。

3.頁面內的錨點

能夠經過下面的這種特殊形式的a，在頁面中放置錨點：

<a name="hysh"></a>

a裏面有一個name屬性，name是英語名字的意思。而沒有href和連接中的文字。

這種a標籤叫作錨點。

可使用網址：

10_頁面內錨點.html#hysh

來快速定位這個錨點。注意看下圖的地址欄最後的部分：

能夠在頁面的其餘部分，製做跳轉到這個錨點的超級連接：

<a href="#yysy">查看演藝生涯</a>

甚至，能夠在其餘頁面製做這個超級連接：

<a href="10_頁面內錨點.html#yysy">查看演義生涯</a>

最後說一下，若是咱們想要把一個段落中全部的文字，都是超級連接：

應該p包裹a，由於咱們感受p比a大，a就是一個文字：

<p>
   <a href="">我是段落的文字</a>
</p>

而不要：

<a href="">
   <p>我是段落的文字</p>
</a>

列表

列表有三種

1.無序列表

<ul>
    <li>百度</li>
    <li>百度</li>
    <li>百度</li>
    <li>百度</li>
</ul>

ul是英語unordered list，無序列表。表達的是沒有順序關係的列表。

li是英語list item列表項的意思。

這是咱們學習的第一個組合的標籤：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul的兒子標籤，只能是li，不能是別的東西：
錯誤：

<ul>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</ul>

錯誤：

<ul>
   <h3>中國著名城市</h3>
   <li>北京</li>
   <li>上海</li>
   <li>廣州</li>
</ul>

正確的：

   <h3>中國著名城市</h3>
<ul>
   <li>北京</li>
   <li>上海</li>
   <li>廣州</li>
</ul>

錯誤的：

<ul>
    中國著名城市
   <li>上海</li>
   <li>廣州</li>
</ul>

li的數量沒有限制，能夠有無限多個。

li是一個很是經典的容器級標籤，裏面能夠防止任何東西，甚至，再放置一個ul（二級列表），甚至三級列表。

注意下面的正確寫法（這個案例想寫對，真的不容易）：

<body>
    <ul>
        <li>
            <h4>直轄市</h4>
            <ul>
                <li>北京</li>
                <li>天津</li>
                <li>上海</li>
                <li>重慶</li>
            </ul>
        </li>

        <li>
            <h4>廣東省</h4>
            <ul>
                <li>廣州</li>
                <li>深圳</li>
                <li>東莞</li>
                <li>珠海</li>
                <li>佛山</li>
            </ul>
        </li>
        
        <li>
            <h4>江蘇省</h4>
            <ul>
                <li>南京</li>
                <li>無錫</li>
                <li>蘇州</li>
                <li>常州</li>
                <li>揚州</li>
            </ul>
        </li>
    </ul>
</body>

網站上的使用：

至於小圓點，如何變化，是CSS的事情，不是HTML的事情。

2.有序列表

ol就是ordered list

<ol>
    中國著名城市
   <li>上海</li>
   <li>廣州</li>
</ol>

全部的注意事項和ul同樣同樣的。

3.定義列表

定義列表表示定義某事的一個列表。

<dl>
        <dt>HTML語言</dt>
        <dd>HTML語言是基本的描述文字語義的語言，負責頁面的結構</dd>

        <dt>CSS語言</dt>
        <dd>CSS是負責描述頁面樣式的語言</dd>
        
        <dt>JavaScript語言</dt>
        <dd>JavaScript是負責描述頁面交互的語言</dd>
    </dl>

dl是英語definition list定義列表的意思；
dt是英語definition title定義標題的意思；
dd是英語definition description定義描述的意思；

dl中，交替出現dt和dd。dd是dt的解釋說明，dd負責解釋、描述、定義dt。

也能夠單獨成爲一個dt和dd組，大部分前端工程師更喜歡這樣的：

<h4>中國著名女演員</h4>
    <ul>
        <li>
            <dl>
                <dt>楊冪</dt>
                <dd>出生在北京，老公是劉愷威</dd>
                <dd>出演過仙劍奇俠傳3</dd>
            </dl>
        </li>
        <li>
            <dl>    
                <dt>劉詩詩</dt>
                <dd>老公是吳奇隆</dd>
                <dd>出演過步步驚心</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>angelababy</dt>
                <dd>老公是黃曉明</dd>
            </dl>
        </li>
    </ul>

這樣的好處，就是樣式更好管理一些（學CSS以後你就懂了）。
網頁中的應用：

dd和dt都是很是經典的容器級標籤，裏面什麼都能放。

放什麼標籤，和長得樣子沒有關係，一切看語義！！

表單

表單中的全部元素，都要放在一個form標籤中：

<form>
</form>

form就是英語表格的意思。這個標籤是一個功能型的標籤，不是一個結構型的標籤。form標籤是後臺哥哥來進行配置的。Ajax課程的第一天，咱們講解PHP語言，將介紹更多的表單提交的原理。那時候你就知道了form表單的兩個屬性method、action，如今先不說。

1.單行文本框

<input type="text" />

input是英語輸入的意思，表示這是一個輸入控件，所謂的控件就是用戶能點的、能填的東西。

type是英語類型的意思，text是文本的意思。

這又是一個自封閉標籤，不是一個標籤對兒。由於它並不須要給別的文字添加語義。

至此，咱們已經學習了3個自封閉標籤：

<meta name=」keywords」 content=」手機,電腦」 />

<img src=」1.jpg」 />
<input type=」text」 />

value屬性表示默認有的值：

<input type="text" value="haha"/>

2.單選按鈕

<input type="radio" name="sex"/> 男
<input type="radio" name="sex"/> 女

你會發現，當行文本框和單選按鈕，很是像

<input type=」text」 />
<input type=」radio」 />

radio是收音機的意思，按其中的一個鍵，其餘鍵就彈起來，因此咱們的計算機就沿用了這個名字。

單選按鈕，必須是互斥的，不能同時選中多個，因此它們必須有相同的name屬性。至因而什麼name無所謂，可是必須相同。

說道一個提高用戶體驗的東西，叫作label標籤。點字的時候，小圓點就能被選擇上。

<input type="radio" name="sex" id="nan"/> 
<label for="nan">男</label>

label就是標籤的意思，id就是id的意思。

如今，這個for屬性和id的值是同樣的，產生了綁定關係。這是咱們學習的第一個有綁定關係的標籤，後面還要學習一個。就把某一個label和input產生了綁定關係。

3.複選框

<input type="checkbox" name="hobby" /> 籃球
<input type="checkbox" name="hobby" /> 足球
<input type="checkbox" name="hobby" /> 羽毛球

checkbox就是複選框的意思，name屬性雖然如今感受沒有啥用，可是仍是應該設置爲相同的。

4.密碼框

<input type=」password」 />

[圖片上傳失敗...(image-bed414-1550760431599)]

5.三種按鈕

<input type="button" value="我是一個普通按鈕哈哈" />
<input type="submit" value="提交按鈕哈哈" />
<input type="reset" value="復位重置按鈕哈哈" />

button普通按鈕
submit提交按鈕
reset重置按鈕

HTML4.01層面就是上面這些input系列：

<input type="text" />

<input type="radio" />

<input type="checkbox" />

<input type="password" />

<input type="button" />

<input type="submit" />

<input type="reset" />

6.下拉列表

<select>
   <option>1950</option>

   <option>1951</option>
   <option>1952</option>

   <option>1953</option>
   <option>1954</option>

</select>

select表示選擇的意思，option是選項的意思。

這是一個組合使用的標籤組，和ul、li的關係是同樣的。

7.文本域

可以換行的輸入文本的控件：

<textarea cols="40" rows="20">這傢伙很懶，什麼都沒留下</textarea>

text文本，area區域。cols多少列，rows多少行，咱們通常都是用css來控制。

這是一個對兒標籤，裏面的內容是默認文字。

HTML4.01層面（XHTML1.0層面），就這些，表單的東西，咱們HTML5將擴充。

表格

1.基本表格

table就是表格、桌子；

tr就是table row表格行的意思；

td就是table dock表格小格的意思。

每個tr就是一行，每行中的小格格就是td

<table border="1">
        <tr>
            <th>品牌</th>
            <th>價格</th>
            <th>類別</th>
        </tr>
        <tr>
            <td>寶馬</td>
            <td>30w</td>
            <td>高級轎車</td>
        </tr>
        <tr>
            <td>奔馳</td>
            <td>50w</td>
            <td>高級轎車</td>
        </tr>
        <tr>
            <td>現代</td>
            <td>20w</td>
            <td>中級轎車</td>
        </tr>
        <tr>
            <td>QQ</td>
            <td>2w</td>
            <td>低級轎車</td>
        </tr>
    </table>

這組標籤三層嵌套。td的數量是同樣多的。具備表頭語義的小格格，用th替代td便可。

<tr>
            <th>品牌</th>
            <th>價格</th>
            <th>類別</th>
        </tr>
        <tr>
            <td>寶馬</td>
            <td>30w</td>
            <td>高級轎車</td>
        </tr>

本質上講，th和td都是小格格，只不過th有表頭小格格的語義；

2.單元格的合併

rowspan 行跨度

colspan 列跨度

小練習，製做下面的表格：

<!--題目一-->
<table border="1">
    <tr>
        <td>1</td>
        <td rowspan="2">2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
</table>

<!--題目二-->
<table border="1">
    <tr>
        <td colspan="2">1</td>
        
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<!--題目三-->
<table border="1">
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        
    </tr>
    <tr>
        <td>3</td>
    </tr>
</table>

HTML還剩餘的知識：
表格的其他組件好比tbody、thead
div、span標籤
HTML註釋、轉義字符
廢棄標籤介紹

等等

思路：先輸出表格，再考慮行跨度(rowspan)和列跨度問題（colspan）。

<tr>    
            <th>萬公頃</th>    
            <th>萬畝</th> 
            <th>萬公頃</th>    
            <th>萬畝</th> 
        </tr>       

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>北京</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>                       
    </table>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。