前端學習之HTML

前言：前端自從HTML5出來以后，發(fā)展極為迅速，搶占了很大一部分原生開發(fā)的份額。我覺得原因有兩個：第一個是H5開發(fā)跨平臺，橫跨iOS、Android、PC端，相比原生開發(fā)來說可以節(jié)省公司開發(fā)資源，而且前端還可以借助龐大的微信用戶群開發(fā)微信小程序，開發(fā)成本低；第二個是H5開發(fā)相比原生界面開發(fā)，開發(fā)調試效率高幾個等級，可能原生端開發(fā)一個復雜界面，iOS、Android各需要3人力，前端可能只需要1人力就可以開發(fā)完成。

基于前端開發(fā)整體的高效率，比如調試界面刷新網(wǎng)頁即可實時更新界面，響應式編程范式、聲明式編程范式等，所以直接擼起袖子加油干-開始學習前端基礎HTML。

一、HTML定義

HTML 是用來描述網(wǎng)頁的一種語言，英文全稱是 Hyper Text Markup Language ，中文是超文本標記語言。HTML 使用標記標簽來描述網(wǎng)頁，HTML文檔包含了HTML 標簽及文本內容，HTML文檔也叫做 web 頁面。

二、HTML基本結構

HTML基本結構如下：

// 在VSCode新建一個test.html文件，使用Emmet語法鍵盤輸入'!'即可把HTML代碼全部敲出來
// 在HTML中，注釋使用'<!--  -->'注釋，而不是'//'，這里為了方便使用'//'，快捷鍵是cmd+/

// 文檔聲明語句：告訴瀏覽器該文檔遵循h(huán)tml規(guī)范
<!DOCTYPE html>
// 第一個標簽<html>是告訴瀏覽器這是html文檔的開始
<html lang="en">

// 文檔文本是頭部信息
<head>
    // UTF-8為多國語言編碼
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  // 文檔標題，會顯示在瀏覽器的窗口的標題欄
  <title>Document</title>
</head>

// body之間的文本是正文
<body>
  <h1>Hello world</h1>
</body>

// 告訴瀏覽器這是html的終止
</html>

三、HTML標簽分類

HTML標簽大體分類兩類：

1、雙標簽：比如 head、body、h1~h6等，大部分是雙標簽；

2、單標簽：比如 img、meta、input、br等；

HTML常見標簽（這里也有人稱為元素）如下：

1）區(qū)塊：div；
2）區(qū)分：span；
3）文本：p、h1~h6、em、dt、dd；
4）表格：table、tbody、thread；
5）表單：form、input、label；
6）鏈接：a；
7）圖片：img；
8）文檔：html、head、title、body、meta；
9）列表：ul、ol、li、nav；
10）其他：br、hr、iframe、video、audio；

前端標簽和元素的嚴格區(qū)別：

標簽：由尖括號包圍的關鍵詞，比如 `<html>` ，標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽；

元素：HTML 元素以開始標簽起始，以結束標簽終止，元素的內容是開始標簽與結束標簽之間的內容。

通過對比我們可以清楚的了解到，HTML標簽是超文本標記語言的最基本單位，而HTML 元素指的是從開始標簽到結束標簽的所有代碼。

四、常見文本類標簽

1、<h1~h6>：標題標簽，準確的來說它屬于文檔章節(jié)標簽，但是也是一種文本標簽，h標簽有助于SEO（Search Engine Optimization）優(yōu)化，可以促進關鍵詞排名。

<h1>Hello world</h1>

2、<P>：定義段落，<br>：定義換行，<hr>：定義水平線，<pre>：定義預格式文本，<strong>：定義語氣更為強烈的強調文本，<i>：顯示斜體文本效果，<b>：呈現(xiàn)粗體文本效果；

3、<a>：定義超鏈接 <a href="URL"></a> ，href的作用是指明超鏈接要鏈接到的網(wǎng)址。除了href屬性，還有title屬性表示鏈接的提示信息。target屬性表示鏈接的打開方式，即當點擊了鏈接，選擇是在另一個頁面打開還是本頁面打開。其屬性值包括 _ blank(新的空白頁)、_ self(當前頁)、_ top（當前頁）。

<a  target="_blank">百度一下</a>

五、塊級元素與內聯(lián)元素

如果按是否換行特征分類，大體分為三類：塊級元素、內聯(lián)元素和內聯(lián)塊級元素。

1、塊級元素

塊級元素定義：是指本身的屬性為display:block的元素。

塊級元素的特點：

1）每個塊級元素獨占一行，每個塊級元素都會從新的一行開始，從上到下排布，所以我們通常使用塊級元素來進行大布局的搭建；

2）塊級元素可以直接控制寬度、高度以及盒子模型的相關css屬性；

3）在不設置寬度的情況下，塊級元素的寬度是他父級元素內容的寬度；

4）在不設置高度的情況下，塊級元素的高度是他本身內容的高度；

常見塊級元素：

1）div：常用塊級容器，也是css和layout的主要標簽；

2）h1~h6：一級標題至六級標題；

3）hr：水平分隔線；

4）menu：菜單列表；

5）ol、ul、li：有序列表、無序列表、列表項；

6）dl、dt、dd：定義列表、定義術語、定義描述；

7）table：表格；

8）p：段落；

9）form：表單；

2、內聯(lián)元素（也叫行內元素）

內聯(lián)元素定義：是指本身屬性為display:inline的元素。

內聯(lián)元素的特點：

1）內聯(lián)元素會和其他元素從左到右顯示在一行，我們通常使用內聯(lián)元素來進行文字、小圖片或者小布局的搭建；

2）內聯(lián)元素不能直接控制寬度、高度以及盒子模型的相關css屬性，但是可以設置內外邊距的水平方向的值。也就是說對于內聯(lián)元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是豎直方向的margin和padding無效果；

3）內聯(lián)元素的寬高是由內容本身的大小決定的（文字、圖片等）；

4）內聯(lián)元素只能容納文本或者其他內聯(lián)元素（不要在內聯(lián)元素中嵌套塊級元素）；

常見的內聯(lián)元素：

1）a：超鏈接；

2）b：加粗；

3）span：常用的內聯(lián)容器，定義文本內區(qū)塊；

4）select：下拉列表；

5）label：Input元素定義標記；

3、內聯(lián)塊級元素

內聯(lián)塊級元素定義：是指本身屬性為display:inline-block的元素。

內聯(lián)塊級元素特點：

1）和其他元素都在一行上；

2）元素的高度、寬度、行高以及頂和底邊距都可設置；

常見的內聯(lián)塊級元素：

1）img：引入圖片；

2）input：輸入框；

注意：塊級元素可以通過設置 display:inline 變?yōu)閮嚷?lián)元素，內聯(lián)元素也可以通過設置 display:block 變?yōu)閴K級元素。

六、表格標簽

1、<table>：定義表格；

2、<thead>：定義頁眉；

3、<tbody>：定義主體；

4、<tfoot>：定義頁腳；

5、<caption>：定義標題；

6、<th>：定義表頭；

7、<tr>：定義一行；

8、<td>：定義單元格；

代碼如下：

  <table align="center" cellpadding="2" cellspacing="3" width="300" height="300" border="1">
    <caption>照片沖印價格詳情</caption>
    <thead>
      <tr>
        <th>相片尺寸</th>
        <th>富士</th>
        <th>柯達</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>6寸</th><td>0.45</td><td>0.6</td>
      </tr>
      <tr>
        <th>7寸</th><td>0.89</td><td>1</td>
      </tr>
      <tr>
        <th>8寸</th><td>1.69</td><td>2</td>
      </tr>
      <tr>
        <th>10寸</th><td>3.89</td><td>5</td>
      </tr>
    </tbody>
    <tfoot>
      <tr><td colspan="3">運費21元/單，滿199元免運費</td></tr>
    </tfoot>
  </table>

常見屬性值：

1、width、height： 指定表格的寬度，表格的高度；

2、border：指定表格邊框的寬度；

3、cellpadding：指定邊框與內容之間的空白；

4、cellspacing：指定單元格之間的空白；

5、align： 指定表格的對齊方式 ，left、 right 、 center ；

6、valign：垂直排列方式， top、 middle 、 bottom；

7、colspan： 列數(shù)合并列單元格；

8、rowspan： 行數(shù)合并行單元格；

9、bgcolor：表格背景色；

10、background：表格背景圖；

11、bordercolor：表格邊框顏色；

七、表單標簽

1、<form>：定義表單；

2、<input>：定義輸入域；

3、<textarea>：定義文本域(多行)；

4、<label>：定義一個控制的標簽(input 元素的標注)；

5、<fieldset>：定義域，圍繞表單中元素的邊框；

6、<legend>：定義域的標題；

7、<select>：定義一個選擇列表；

8、<optgroup>：定義下拉框分組，包裹多個種類的option標簽；

9、<option>：定義下拉列表的選項，與select標簽一起使用；

10、<button>：定義按鈕；

11、<keygen>：定義表單的密鑰對生成器字段；

12、<output>：定義不同類型的輸出，比如腳本的輸出；

代碼如下：

  <form action="/login"  method="post" class="m-form">
    <fieldset>
      <legend>照片選擇</legend>
      <label for="file">選擇照片</label><input type="file" id="file">
    </fieldset>
    <fieldset>
      <legend>綜合設置</legend>
      <div>選擇尺寸：</div>
      <div>
        <input class="cb" type="checkbox" name="size" id="cb_0" value="5"><label for="cb_0" checked>5寸</label>
        <input class="cb" type="checkbox" name="size" id="cb_1" value="6"><label for="cb_1">6寸</label>
      </div>
      <div>選擇相紙：</div>
      <div>
        <input class="rd" type="radio" name="material" id="rd_0" value="fushi"><label for="rd_0" >富士</label>
        <input class="rd" type="radio" name="material" id="rd_1" value="keda"><label for="rd_1" >柯達</label>
      </div>
      <div>
        <label for="delivery">配送方式：</label>
        <select id="delivery">
            <option value="0">快遞</option>
            <option value="1">EMS</option>
            <option value="2" selected>平郵</option>
        </select>
      </div>
      <div>
        <label for="description">商品描述：</label>
        <input class="txt" type="text" id="description" placeholder="描述">
      </div>
      <div>
        <label for="feedback">意見反饋：</label>
        <textarea name="feedback" rows="4" id="feedback"></textarea>
      </div>
    </fieldset>
    <div>
      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </div>
  </form>

HTML5的表單常見屬性type類型：

1、checkbox：定義復選框；

2、color：定義拾色器；

3、date、month、week：定義日期字段（帶有 calendar 控件）；

4、time：定義日期字段的時、分、秒（帶有 time 控件）；

5、email：定義用于 e-mail 地址的文本字段；

6、file：定義輸入字段和 "瀏覽..." 按鈕，供文件上傳；

7、image：定義圖像作為提交按鈕；

8、number：定義帶有 spinner 控件的數(shù)字字段；

9、password：定義密碼字段。字段中的字符會被遮蔽；

10、radio：定義單選按鈕；

11、range：定義帶有 slider 控件的數(shù)字字段；

12、reset：定義重置按鈕，重置按鈕會將所有表單字段重置為初始值；

13、submit：定義提交按鈕，提交按鈕向服務器發(fā)送數(shù)據(jù)；

14、search：定義用于搜索的文本字段；

15、tel：定義用于電話號碼的文本字段；

16、text：默認，定義單行輸入字段，用戶可在其中輸入文本，默認是 20 個字符；

17、url：定義用于 URL 的文本字段；

八、列表標簽

1、<ul>：定義無序列表；

2、<ol>：定義有序列表；

3、<li>：定義列表項；

4、<dl>：定義自定義列表；

5、<dt>：定義自定義列表項；

6、<dd>：定義自定義的描述；

a、無序列表：屬性type，屬性值 disc (實心原點)、circle(符號為空心圓)、square(符號為方形)。

  <ul type="disc">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>雪梨</li>
  </ul>

b、有序列表：有序列表使用數(shù)字或字母系統(tǒng)來組織列表里包含的信息，屬性type對應的屬性值 1、 a 、 A、i、I ，屬性start對應數(shù)值的起點。

  <ol type="1" start="2">
    <li>蘋果</li>
    <li>香蕉</li>
    <li>雪梨</li>
  </ol>

c、定義列表：定義列表用來組織術語和它們的定義。任何信息如果包含多個術語和相對應的解釋，都可以使用定義列表進行組織。

  <dl>
    <dt>小明</dt>
    <dd>聽歌</dd>

    <dt>小紅</dt>
    <dd>跑步 </dd>
    <dd>唱歌 </dd>
  </dl>

九、圖片多媒體標簽

1、<img>：加載圖片，屬性src-圖像資源的地址，width-圖像寬度，height-圖像高度，alt-圖片的替代文字。屬性 src 既可以是網(wǎng)絡圖片地址，也可以是本地圖片路徑地址，其中本地路徑說明：

1）./：當前目錄；

2）../： 回到上一層目錄；

3）../images/： 回到上一層目錄，然后再進入images目錄；

<img src="https://img2.baidu.com/it/u=549611111,1103524299&fm=26&fmt=auto&gp=0.jpg" width="100" height="100" alt="狗" />

2、<video>：視頻標簽，屬性如下：

1）poster：用戶點擊播放按鈕前顯示的圖像；

2）src：要播放的視頻的 URL；

3）width、height：視頻寬度、高度；

4）controls：設置用戶顯示控件，是一個布爾屬性；

5）autoplay：設置視頻是否自動播放，是一個布爾屬性；

6）preload：定義視頻是否預加載，屬性有三個可選擇的值：none（不進行預加載）、metadata（部分預加載）、auto(全部預加載)；

7）loop：用于指定視頻是否循環(huán)播放，是一個布爾屬性；

8）source標簽：Source標簽用于給媒體（因為audio標簽同樣可以包含此標簽，所以這兒用媒體，而不是視頻）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標簽沒有使用src屬性時使用；

    <video controls autoplay loop width='200' height='200'  preload='none' 
    poster='https://img2.baidu.com/it/u=549611111,1103524299&fm=26&fmt=auto&gp=0.jpg'
    src='https://haokan.baidu.com/v?pd=wisenatural&vid=8271645066485706928' >
  </video>

注意：HTML中布爾屬性的值不是true和false。正確的用法是，在標簽中使用此屬性表示true，比如自動播放為<video autoplay />或者<video autoplay="autoplay"/> ，在標簽中不使用此屬性表示false。

3、<audio>：音頻標簽，video中能夠使用的屬性在audio標簽中大部分都能夠使用, 并且功能都一樣，只不過有3個屬性不能用, height/width/poster。

  <audio controls autoplay loop>
    <source src="images/yinyue.mp3" type="audio/mp3">
  </audio>

4、<iframe>：內嵌框架（這個標簽不知道放哪里，先放這里吧），屬性width-指定框架的寬度，height-指定框架的高度，scrolling-是否顯示滾動條(三個值 yes，no，auto)，frameborder-是否顯示邊框(兩個值1, 0)，src-被嵌入html文檔的URL。

<iframe src="https://www.baidu.com" name="百度" width="600" height="600" scrolling="auto" frameborder="1"></iframe>

十、全局屬性和實體字符

1、常見全局屬性：

1）class：規(guī)定元素的一個或多個類名（引用樣式表中的類），它允許 CSS 和 Javascript 通過類選擇器 (class selectors) 或DOM方法(document.getElementsByClassName)來選擇和訪問特定的元素。

2）hidden：規(guī)定元素仍未或不再相關；

3）id：定義唯一標識符（ID），該標識符在整個文檔中必須是唯一的，配合 id 選擇器使用；

4）lang：規(guī)定元素內容的語言；

5）style：規(guī)定元素的行內 CSS 樣式；

6）title：規(guī)定有關元素的額外信息；

2、常見實體字符：在HTML中，有些特殊字符是需要用HTML語言表示出來的。一個字符實體包含三個部分：一個&符，一個實體名或者一個實體號，最后一個分號（;），實體名稱對大小寫敏感。

1）大于號 (>)：&gt;；

2）小于號 (<)：&lt;；

3）引號 (")：&quot;；

4）注冊商標(?)：&reg;；

5）版權(? )：&copy;；

6）&號：&amp;；

7）空格：&nbsp;；

推薦前端入門學習w3school。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • HTML是什么？ HTML（Hypertext Markup Language）超文本標記語言。 純文本只能保存文...
    michaelxwang閱讀 576評論 0贊 1
  • 一、注釋標簽 在很多代碼技術中都可以添加注釋內容，我們也可以向 HTML 源代碼添加注釋 HTML注釋語法： vs...
    qiong的叮當響閱讀 360評論 0贊 0
  • 為什么需要表單： 使用表單目的是為了收集用戶信息。在我們網(wǎng)頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時就需...
    Jane_xxxxxy閱讀 622評論 0贊 4
  • 一、HTML語法規(guī)則 1.HTML 標簽是由尖括號包圍的關鍵詞，例如 。2.HTML 標簽通常是成對出現(xiàn)的，例如...
    Jane_xxxxxy閱讀 348評論 0贊 0
  • 列表 表格是用來顯示數(shù)據(jù)的，那么列表就是用來布局的。列表最大的特點就是整齊、整潔、有序，它作為布局會更加自由和方便...
    Jane_xxxxxy閱讀 431評論 0贊 0

友情鏈接更多精彩內容