1.網頁的概念

網頁的來源

網頁的本質類似於txt文件一樣，我們可以給這裡面放入文字、圖片和連結等元素。

如果沒有瀏覽器那麼我們在文件中寫什麼內容就會看到什麼內容，和txt文件一樣，但是如果通過瀏覽器開啟以後它就是網頁了

可以看到瀏覽器中展示的文件內容和普通的文件開啟並不一樣，這是因為瀏覽器會解析文件中的內容，對這些內容進行渲染
因此網頁就相當於是瀏覽器解析文件後顯示出來的內容

瀏覽器

既然是對文件結構進行解析，那麼解析方法就會有多種，解析的方式不同，展示的內容也會有所差別，這樣就形成了同一份文件被解析為多種風格。
瀏覽器中主要是依靠核心對文件進行解析，根據核心的不同瀏覽器主要分為以下種類：IE、chrome、oprea、firefox、safari
剩餘的其他瀏覽器如uc、qq等基本都是基於這些核心定製出來的

web標準

因為存在多種瀏覽器對同一份文件解析後出現不同的內容，對開發造成了很大的困擾，因此出現了W3C標準化組織，他們負責制定標準，然後各種瀏覽器實現這些標準，這樣開發者只需要掌握這些標準即可適配所有瀏覽器了
其中標準主要由html、css和javascript三部分組成

2.網頁的編寫方式

固定格式

如果直接在文件中寫入內容，瀏覽器也是可以直接解析的，這是因為瀏覽器會自動為這些內容新增固定格式

  <meta charset="UTF-8">
  <title>Document</title>


  

整個網頁由html標籤開頭和結尾，分為head和body兩部分，通過宣告這是html5頁面，head標籤內指明頁面的一些元資訊，body中就是在瀏覽器中展示的內容
html中標籤分為兩種：雙標籤和單標籤，雙標籤如,中間可以插入其他內容，單標籤的中間則不允許再插入其他內容，比如

標籤之間的關係也分為兩種：並列和包含
包含：

  <meta charset="UTF-8">
  <title>Document</title>

並列：

<meta charset="UTF-8">
<title>Document</title>

一般一個網頁由html或htm結尾

常用的一些標籤

h系列標籤

  <h1>h1標籤</h1>
  <h2>h2標籤</h2>
  <h3>h3標籤</h3>
  <h4>h4標籤</h4>
  <h5>h5標籤</h5>
  <h6>h6標籤</h6>

 

h標籤一般用於標題，字型大小逐級遞減，每個h標籤都會獨佔瀏覽器一行

段落p標籤

  <p>段落1</p><p>段落2</p>
  <p>段落3</p><p>段落4</p>

p標籤用於分割每段話，使頁面結構更加美觀，每個p標籤也會獨佔一行，並不會按照文件中寫的樣子展示

換行br標籤

  <p>段<br>落3</p><p>段落4</p>

br標籤會強制將內容進行換行顯示

文字格式化標籤

  <strong>加粗</strong>
  <em>傾斜</em>
  <del>刪除線</del>
  <ins>下劃線</ins>

格式化標籤並不會導致換行

盒子標籤

  <div>div標籤1</div><div>div標籤2</div>
  <span>span標籤1</span><span>span標籤2</span>

div和span標籤的作用是為樣式服務的，最明顯的特點就是div是獨佔一行，span並不會

影象img標籤

  網路路徑：<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
  當前檔案所在目錄下：<img src="bd.png">
  其他目錄下：<img src="otherdir/bd.png">

img標籤不會獨佔一行，src中可以填入網路路徑，也可以直接使用專案中的圖片
其中圖片的路徑分為相對路徑和絕對路徑，相對指的是相對於當前檔案所在路徑，絕對路徑則是從專案根目錄開始計算

超連結a標籤

<a href="https://www.baidu.com">百度一下</a>

點選以後跳轉到百度頁面，herf除了可以指定網路地址外，還可以指定頁面中的某個錨點，或者是某個頁面，它的作用就是在當前視窗中開啟href指定的內容

表格table標籤

  <table>
    <thead>
      <tr><th>tilte1</th>
      <th>title2</th>
    </tr></thead>
    <tbody>
      <tr><td>content1</td>
      <td>content2</td>
    </tr></tbody>
  </table>

table標籤也獨佔一行，目前展示的都是標籤的預設樣式，具體美化方式需通過css操作，單元格中可以放其他的標籤

列表ul、ol、dl標籤

  無序列表：
  <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
  </ul>
  有序列表：
  <ol>
    11
    <li>order list1</li>
    <li>order list2</li>
    <li>order list3</li>
    <li>order list4</li>
  </ol>
  自定義列表：
  <dl>
    <dt>tilte</dt>
    <dd>define list1</dd>
    <dd>define list2</dd>
    <dd>define list3</dd>
    <dd>define list4</dd>
  </dl>

表單form標籤

表單中主要分為input、select、textarea三個標籤

  <form>
    input系列:<br>
    普通輸入框：<input type="text"><br>
    單選框：<input type="radio">男<input type="radio">女<br>
    多選框：<input type="checkbox">愛好1<input type="checkbox">愛好2<br>
    提交按鈕：<input type="submit"><br>
    重置按鈕: <input type="reset"><br>
    select系列:<br>
    下拉框: <select><option>選項1</option><option>選項2</option></select><br>
    textarea系列:<br>
    文字框: <textarea></textarea>
  </form>

input系列中還有許多其他型別的標籤，用法基本是一樣的

3.總結

頁面中的標籤基本種類並不多，但是可以很好的滿足日常需求，就是這些標籤組成了豐富多彩的網頁，這些標籤的預設樣式有時並不能滿足人們對介面美感的追求，因此需要通過css對這些標籤進行重新佈局，定位等等
如果記不住這麼多的標籤，那麼只需要掌握div一個標籤即可，因為通過css可以將div模擬成其他的任何標籤