20初識前端HTML（1）

1 、HTML

1.1 網頁的組成

文字圖片連結等元素構成。除了這些元素之外網頁中還可以包含音訊視訊等

1.2 WEB前端開發的流程

現在主流的開發流程：

前後端分離的開發模式。

美工：ps(效果圖)
- 前端和後端需要協商後端介面的開發規範。
前端工程師：（HTML CSS JS等前端技術）實現靜態網頁同時還需要使用mock技術實現頁面的模擬測試。
後端工程師：開發介面。
- 前後端聯調。

1.3 WEB的標準（重點）

不同的瀏覽器（火狐，谷歌, IE）的核心是不同的。並且他們的工作的原理對頁面的解析是不同的，在顯示上就會有差異。W3C組織制定了瀏覽器的WEB標準

1.3.1 web標準的好處

1 能夠被廣泛的裝置訪問

2 更容易的被搜尋引擎所搜尋

3 降低網站的流量費用

4 使網站更易於維護

5 提高頁面的瀏覽速度

1.3.2 WEB標準的構成

主要包括結構表現和行為三個方面

結構標準：用於對網頁元素進行整理和分類主要包括html 和XHTML 等。

樣式標準：表用用於設定網頁元素的版式顏色大小等外觀樣式，主要指的就是CSS

行為標準：指的是網頁模型的定義以及互動的方式，主要包括 DOM ，ECMAScript和BOM三部分。

2 HTML的認識

HTML：Hyper Text Markup Lanague（超文字標記語言）

HTML是通過標籤來標記要顯示的網頁中的各個部分，網頁本身是一種文字檔案，通過文字檔案新增標記符，可以告訴瀏覽器如何顯示其中的內容（文字如何處理，頁面如何排版，圖片如何顯示等）。

2.1 開發第一個HTML的頁面

1 建立一個HTML檔案副檔名為.html 或者。htm

2 在檔案中編寫HTML頁面的基本框架 html:5

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

</body>

</html>

JAVA 程式需要先編譯後由java虛擬機器執行。但是HTML檔案不需要編譯，直接有瀏覽器進行解析執行。

2.2 文件型別

<!--html4的文件型別 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--html5的文件型別 -->

<!DOCTYPE html>

必須位於文件的第一行告訴瀏覽器當前文件使用的是哪種html標準規範。

3 HTML的標籤

3.1 頭部標籤

<head>

    <!-- meta標籤是頁面的元資料 -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 頁面的標題 -->

    <title>這是第一個HTML頁面</title>

</head>

元資料標籤：meta標籤

meta標籤通常用於指定網頁的描述關鍵字檔案的最後的修改時間作者及其他的元資料

元資料可以被瀏覽器使用，搜尋引擎發現其他的web服務呼叫。

meta標籤常用name屬性：

 <!-- meta標籤是頁面的元資料 -->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--設定網頁可以自適應佈局 width=device-width  適應裝置的寬度  initial-scale不縮放 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name='keywords' content="網上購物，網上商城">

    <meta name="description" content="這是一個B2C的全品類的電商網站">

    <meta name="author" content="張三">

    <!-- 設定網頁的自動跳轉 5秒之後跳轉到百度 -->

    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">

    <!-- 頁面的標題 -->

    <title>這是第一個HTML頁面</title>

3.2 body

3.2.1 標籤的格式

<標籤名 屬性名=屬性值, 屬性名 = 屬性值>標籤的封裝內容</標籤名>

標籤名大小寫不敏感推薦標籤名統一小寫

標籤的屬性：

基本屬性：bgcolor=”red“ 可以修改元素的基本樣式

事件屬性：onclick=“alert('你好')” 可以讓瀏覽器產生一定的動作來相應當前的操作

標籤分類：

單標籤和雙標籤

單標籤：<標籤名/>

<hr/>

雙標籤：<head></head> <body></body> <p></p>

標籤的語法：

1 標籤不能交叉巢狀

<!-- 正確 -->

<div><span>你好，html</span></div>

<!-- 錯誤 -->

<div><span>你好，html</div></span>

2 雙標籤一定要記得關閉

3 屬性必須有值屬性值要使用雙引號

4 註釋不能巢狀

3.2.2 常用標籤

3.2.2.1 font字型標籤

<font color="red" face="宋體" size="22"> Hello  HTML </font>

3.2.2.2 特殊的符號

  <h2>這是一個換行標籤&lt;br/&gt;</h2>

常見的符號

&nbsp; -->空格,無論在原始碼中寫了多少個空格 瀏覽器都將解析為一個空格

&lt;

&gt;

&amp;-->&

&quot;-->“

&apos;-->'

3.2.2.4 標題標籤

標題標籤 h1 --- h6

h1 是最大 h6 最小

屬性：

對齊方式： align：left right center

3.2.2.5 超連結

在網頁中所有點選之後可以跳轉的內容都是超連結

 <!--

    a 標籤是超連結標籤

    href 設定連結的地址

    target:

        _self 表示在當前標籤中開啟連結地址

        _blank 表示在一個新的標籤中開啟連結地址的頁面

  -->

 <a href="http://www.baidu.com" target="_blank">百度</a>

3.2.2.6 列表標籤

無序列表有序列表

 <!--

    ul 表示無序列表

    ol表示有序列表

      li 列表項

        type屬性  可以修改列表籤的樣式

            有序列表：A  a  1  i

            無序列表：none  disc   square    circle

  -->

<ol type="i">

    <li>趙四</li>

    <li>劉能</li>

    <li>小瀋陽</li>

    <li>宋小寶</li>

</ol>



<ul type="circle">

    <li>趙四</li>

    <li>劉能</li>

    <li>小瀋陽</li>

    <li>宋小寶</li>

</ul>

3.2.2.7 影象標籤

<img src="img/1.jpg"  width="300px" height="200px" border="10"  alt="這是一張圖片">

3.2.2.8 表格標籤

  <!--

        標籤：table 表示表格

              tr  表示行

              td 表示單元格

              thead 表示表頭

              tbody 表示表體

              th 表頭的單元格

        表格屬性：

             border  表格的邊框

             align 表格相對於頁面的對齊方式  left  right  center

             width  表格的寬度

             height 表格的高度

             cellspacing 單元格之間的間距

        單元格的屬性：colspan 設定跨列   合併列

                    rowspan  設定跨行  行合併

     -->



<table align="center" border="1" width="300px" height="300px" cellspacing="0">

        <tr>

            <td>姓名</td>

            <td>性別</td>

            <td>年齡</td>

        </tr>

        <tr>

            <td>張三</td>

            <td>男</td>

            <td>21</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>女</td>

            <td>18</td>

        </tr>

    </table>



  <table align="center" border="1" width="300px" height="300px" cellspacing="0">

        <thead>

            <tr >

               <th colspan="4">個人基本資訊</th>

            </tr>

            <tr>

                <th>姓名</th>

                <th>性別</th>

                <th>年齡</th>

                <th>學校</th>

            </tr>

        </thead>

        <tbody align="center">

            <tr >

                <td>張三</td>

                <td>男</td>

                <td>21</td>

                <td rowspan="2">中北大學</td>

            </tr>

            <tr>

                <td>李四</td>

                <td>女</td>

                <td>18</td>

            </tr>

        </tbody>

    </table>

3.2.2.9 iframe框架標籤（瞭解）內聯或內嵌框架

iframe 標籤他可以在一個html頁面上開啟一個小視窗，去載入一個單獨的頁面

  <iframe src="index.html"  width="800px" height="300px" name="abc"></iframe>

3.2.2.10 frameset （瞭解）

通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。每份HTML文件稱為一個框架，並且每個框架都獨立於其他的框架。

<!-- 垂直劃分  左右分別佔比 25%  75 -->

<frameset cols="25%,75%">

    <frame src="index.html">

    <frame src="table.html">

 </frameset>

 <!-- 水平劃分 分為上中下  分別佔比 25% 50%  25%-->

 <frameset rows="25%,50%,25%">



    <frame src="/example/html/frame_a.html">

    <frame src="/example/html/frame_b.html">

    <frame src="/example/html/frame_c.html">

  </frameset>

4 表單標籤

表單標籤 form標籤主要是用來收集使用者的輸入資料，將資料提交到後臺，進行處理儲存。

<form action="">

    <!-- 單行文字輸入框 -->

    使用者名稱稱：<input type="text" value=""  placeholder="請輸入使用者名稱稱"/><br/><br/>

    <!-- 密碼框 -->

    使用者密碼：<input type="password" value="" placeholder="請輸入密碼"/><br/><br/>

    確認密碼：<input type="password" value="" placeholder="請輸入確認密碼"/><br/><br/>

    <!-- 檔案選擇對話方塊 -->

    頭像：<input type="file" value="" placeholder="請選擇你要上傳的檔案"/><br/><br/>

    <!-- 單選按鈕的之間是互斥關係  因此單選按鈕的name屬性值必須一致 這樣才能互斥 -->

    性別：<input type="radio" name="sex" value="man" checked="true">男

         <input type="radio" name="sex" value="woman">女 <br/><br/>

         <!-- 複選框  type=checkbox  可以同時選中多個值  預設選擇則使用checked表示選中  可以使用checked或true-->

    興趣愛好：<input type="checkbox" value="JAVA"  checked="checked">JAVA

                <input type="checkbox" value="python">python

                <input type="checkbox" value="html">HTML

                <input type="checkbox" value="CSS">CSS<br/><br/>

    <!--下拉選擇框  multiple表示下拉框是否可以多選  預設選擇使用selected  option選項 -->

    籍貫：<select >

            <option>--請選擇籍貫所在地--</option>

            <option value="sx" selected="selected">山西</option>

            <option value="tj">天津</option>

            <option value="bj">北京</option>

            <option value="hn">湖南</option>

        </select><br/><br/>

    自我評價：

        <textarea rows="10"  cols="80" placeholder="請填寫自我評價">



        </textarea><br/><br/>

    <!-- 提交按鈕 -->

    <input type="submit" value="提交"/>

    <!-- 重置按鈕 -->

    <input type="reset" value="重置"/>

    <!-- 普通按鈕 -->

    <input type="button" value="普通按鈕"/>



</form>

使用表格完成表單的佈局設定

<form>

    <h1 align="center">使用者註冊</h1>

    <hr width="500px">

    <table align="center" width="500px">

        <tr>

            <td>使用者名稱稱：</td>

            <td><input type="text" value=""  placeholder="請輸入使用者名稱稱"/></td>

        </tr>

        <tr>

            <td>使用者密碼：</td>

            <td><input type="password" value="" placeholder="請輸入密碼"/></td>

        </tr>

        <tr>

            <td>確認密碼：</td>

            <td><input type="password" value="" placeholder="請輸入密碼"/></td>

        </tr>

        <tr>

            <td>頭像：</td>

            <td><input type="file" value="" placeholder="請選擇你要上傳的檔案"/></td>

        </tr>

    </table>

</form>

5 其他標籤

div標籤

span標籤

p 段落標籤

<!-- div標籤是獨佔一行  但是 標籤本身不佔有任何空間 依靠內容來佔據空間-->

<div style="width: 100px; height: 100px; ">這是一個div標籤</div>

<div>這是一個div標籤</div>

<!-- span標籤是在同一行  本身也不佔據空間  依靠內容來佔有空間 -->

<span>span標籤 </span><span></span> <span>span標籤 </span>

<!-- p段落標籤  預設會在段落的上方或下方空出一行 -->

<p>

    8月6日，鄭州市新冠肺炎疫情釋出會迴應，網傳“800人婚宴”誇大其辭，當天參加婚宴者實有402名客人，60名工作人員，請大家不造謠、不信謠、不傳謠。那麼，這名護士在哪一天確診？與她的接觸者可否定為密接和次密接者......

    </p>

20初識前端HTML（1）