HTML5基礎(chǔ)入門

.標(biāo)簽

1.1meta標(biāo)簽

meta主要用于設(shè)置網(wǎng)頁中的一些元數(shù)據(jù)，元數(shù)據(jù)不是給用戶看 charset 指定網(wǎng)頁的字符集 name 指定的數(shù)據(jù)的名稱 content 指定的數(shù)據(jù)的內(nèi)容

keywords 表示網(wǎng)站的關(guān)鍵字，可以同時指定多個關(guān)鍵字，關(guān)鍵字間使用,隔開

<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲卡,京東"/>

description 用于指定網(wǎng)站的描述

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù)，為您提供愉悅的網(wǎng)上購物體驗!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁面重定向到另一個網(wǎng)站

1.2title標(biāo)簽

title標(biāo)簽的內(nèi)容會作為搜索結(jié)果的超鏈接上的文字顯示

<title>Document</title>

1.3標(biāo)題

h1 ~ h6 一共有六級標(biāo)題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網(wǎng)頁中的重要性僅次于title標(biāo)簽，一般情況下一個頁面中只會有一個h1
標(biāo)題元素是塊元素
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
hgroup標(biāo)簽用來為標(biāo)題分組，可以將一組相關(guān)的標(biāo)題同時放入到hgroup
<hgroup>
<h1>回鄉(xiāng)偶書二首</h1>
<h2>其一</h2>
</hgroup>
其他標(biāo)簽

p標(biāo)簽表示頁面中的一個段落
<p>在p標(biāo)簽中的內(nèi)容就表示一個段落</p>
em標(biāo)簽用于表示語音語調(diào)的一個加重
<p>今天天氣<em>真</em>不錯！</p>
strong表示強調(diào)，重要內(nèi)容！
<p>你今天必須要<strong>完成作業(yè)</strong>！</p>
blockquote 表示一個長引用
<blockquote>
這句話我是從來沒有說過的！
</blockquote>
q表示一個短引用
子曰<q>學(xué)而時習(xí)之，樂呵樂呵！</q>
br標(biāo)簽表示頁面中的換行
<br>

1.4布局標(biāo)簽

header 表示網(wǎng)頁的頭部 main 表示網(wǎng)頁的主體部分(一個頁面中只會有一個main) footer 表示網(wǎng)頁的底部 nav 表示網(wǎng)頁中的導(dǎo)航 aside 和主體相關(guān)的其他內(nèi)容（側(cè)邊欄） article 表示一個獨立的文章 section 表示一個獨立的區(qū)塊，上邊的標(biāo)簽都不能表示時使用section

div 沒有語義，就用來表示一個區(qū)塊，目前來講div還是我們主要的布局元素

span 行內(nèi)元素，沒有任何的語義，一般用于在網(wǎng)頁中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標(biāo)簽來創(chuàng)建無序列表，使用li表示列表項

<ul>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ul>

1.1.1.2 無序列表

使用ul標(biāo)簽來創(chuàng)建無序列表，使用li表示列表項

<ol>
       <li>結(jié)構(gòu)</li>
       <li>表現(xiàn)</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標(biāo)簽來創(chuàng)建一個定義列表，使用dt來表示定義的內(nèi)容，使用dd來對內(nèi)容進(jìn)行解釋說明

<dl>
       <dt>結(jié)構(gòu)</dt>
       <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標(biāo)題，哪里是段落</dd>
       <dd>結(jié)構(gòu)表示網(wǎng)頁的結(jié)構(gòu)，結(jié)構(gòu)用來規(guī)定網(wǎng)頁中哪里是標(biāo)題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個頁面跳轉(zhuǎn)到其他頁面，或者是當(dāng)前頁面的其他的位置

1.6.2 定義

使用 a 標(biāo)簽來定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉(zhuǎn)的目標(biāo)路徑

值可以是一個外部網(wǎng)站的地址

也可以寫一個內(nèi)部頁面的地址

超鏈接是也是一個行內(nèi)元素，在a標(biāo)簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來指定超鏈接打開的位置

_self 默認(rèn)值在當(dāng)前頁面中打開超鏈接

_blank 在一個新的要么中打開超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來作為href的屬性，此時點擊這個超鏈接什么也不會發(fā)生

將超鏈接的href屬性設(shè)置為#，這樣點擊超鏈接以后頁面不會發(fā)生跳轉(zhuǎn)，而是轉(zhuǎn)到當(dāng)前頁面的頂部的位置

跳轉(zhuǎn)到頁面的指定位置，只需將href屬性設(shè)置 #目標(biāo)元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個自然段</a>
   <br><br>
<p>
  內(nèi)容多一點
</p>
<a href="#">這是一個新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標(biāo)簽

img標(biāo)簽來引入外部圖片，img標(biāo)簽是一個自結(jié)束標(biāo)簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規(guī)則和超鏈接是一樣的）

alt 圖片的描述，這個描述默認(rèn)情況下不會顯示，有些瀏覽器會圖片無法加載時顯示

<img src="./img/1.gif" alt="松鼠">

1.8內(nèi)聯(lián)框架

用于向當(dāng)前頁面中引入一個其他頁面

src 指定要引入的網(wǎng)頁的路徑
frameborder 指定內(nèi)聯(lián)框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標(biāo)簽

1.8.1音頻

audio 標(biāo)簽用來向頁面中引入一個外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動播放

如果設(shè)置了autoplay 則音樂在打開頁面時會自動播放

loop 音樂是否循環(huán)播放

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

除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑

<audio controls>
       <!-- 對不起，您的瀏覽器不支持播放音頻！請升級瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長表格

可以將一個表格分成三個部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設(shè)置邊框的合并

border-collapse: collapse;

如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創(chuàng)建一個tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標(biāo)簽來創(chuàng)建一個表單
action 表單要提交的服務(wù)器的地址
數(shù)據(jù)要提交到服務(wù)器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務(wù)器
checked 可以將單選按鈕設(shè)置為默認(rèn)選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項一</option>
          <option selected value="ii">選項二</option>
          <option value="iii">選項三</option>
      </select>

提交按鈕

<input type="submit" value="注冊">

屬性

autocomplete="off" 關(guān)閉自動補全
readonly 將表單項設(shè)置為只讀，數(shù)據(jù)會提交
disabled 將表單項設(shè)置為禁用，數(shù)據(jù)不會提交
autofocus 設(shè)置表單項自動獲取焦點

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標(biāo)簽中（開始標(biāo)簽或自結(jié)束標(biāo)簽）還可以設(shè)置屬性
屬性是一個名值對（x=y）
屬性用來設(shè)置標(biāo)簽中的內(nèi)容如何顯示
屬性和標(biāo)簽名或其他屬性應(yīng)該使用空格隔開
屬性不能瞎寫，應(yīng)該根據(jù)文檔中的規(guī)定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應(yīng)該使用引號引起來

6.文檔聲明

<!doctype html>

么是html？

html是一種簡單易記，功能強大的標(biāo)記語言，它是學(xué)習(xí)前端知識的第一站，也是所有WEB開發(fā)者、乃至產(chǎn)品經(jīng)理、運營人員必須學(xué)習(xí)的一項基礎(chǔ)內(nèi)容。

為什么學(xué)習(xí)html5？

1. html5是WEB開發(fā)者，必須掌握的基礎(chǔ)知識；

2. html5應(yīng)用廣泛，它可以用來開發(fā)網(wǎng)站、WEB應(yīng)用、WEB游戲等等，如微信小程序、移動端小游戲等都跟html5有關(guān)；

3. html5很容易掌握，花幾個小時就可以掌握它；

課程特點

1. 講師講課風(fēng)格幽默，整個學(xué)習(xí)過程輕松有趣，不枯燥、不乏味；

2. 以就業(yè)為導(dǎo)向，與實戰(zhàn)相結(jié)合，滿足大部分學(xué)員的學(xué)習(xí)需求；

學(xué)習(xí)建議

1. 學(xué)完每一節(jié)課程，動手將代碼打一遍；

2. 舉一反三，學(xué)完每節(jié)課程，思考一下它的應(yīng)用場景；

3. 完成本門課程，試著自己寫一個純html5的網(wǎng)頁；

適宜人群

1. 零基礎(chǔ)學(xué)員；

2. 前端愛好者；

1、DOCTYPE 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。

網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同

2、<html></html> 網(wǎng)頁文檔中的根標(biāo)記

html 標(biāo)簽有三個特殊的屬性　　

manifest 指定網(wǎng)頁緩存文件，可以讓用戶離線的時候也可以訪問文件。
xmlns 設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時候可以使用這個值。
lang 設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。

3、<head></head>頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。

head里面的標(biāo)記

<meta> 標(biāo)記
<title>定義網(wǎng)頁的標(biāo)題
<link> 鏈接
<script> 標(biāo)記JavaScript腳本的內(nèi)容
<style> 標(biāo)記css樣式
meta 標(biāo)記

4、<body></body>只能有一個，顯示網(wǎng)頁的主體內(nèi)容。

（一）、<meta>標(biāo)簽

<meta>元素的屬性：

name 描述信息的名稱，來標(biāo)記這是一個什么樣的信息
http-equiv 描述行為
content 描述的內(nèi)容
charset 指定網(wǎng)頁的編碼

1、name 屬性

1 <meta name="author" content="nyw">
2     <!--作者， 定義網(wǎng)頁的作者 -->
3 <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
4     <!-- 描述，描述網(wǎng)頁的實際內(nèi)容 -->
5 <meta name="keywords" content="HTML,meta">
6     <!-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 -->

2、http-equiv屬性

1 <meta http-equiv="refresh" content="30">
2     <!-- 網(wǎng)頁30s后自動刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4     <!-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 -->

<meta http-equiv="refresh" content="5,url=dom.html">

http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。

3、content 屬性

特殊屬性

content-type 指定http頭部信息的文字編碼（最為常用）
default-style 指定優(yōu)先使用的樣式單（stylesheet）
refresh 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)
set-cookie 設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。

代碼實例：

為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。

<meta name="robots" content="noindex,nofollow">
    <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->

代碼實例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>網(wǎng)頁標(biāo)題(顯示在瀏覽器上)</title>
 6     <meta name="author" content="nyw">
 7     <!--作者， 定義網(wǎng)頁的作者 -->
 8     <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
 9     <!-- 描述，描述網(wǎng)頁的實際內(nèi)容 -->
10     <meta name="keywords" content="HTML,meta">
11     <!-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 -->
12     <meta http-equiv="refresh" content="30">
13     <!-- 網(wǎng)頁30s后自動刷新 -->
14     <meta http-equiv="refresh" content="5,url=dom.html">
15     <!-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 -->
16     <meta name="robots" content="noindex,nofollow">
17     <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->
18 </head>
19 <body>
20 </body>
21 </html>

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫在head標(biāo)簽中

title：設(shè)置網(wǎng)頁的標(biāo)題

寫法：<title>內(nèi)容</title>。

base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫法：<base href="http://www.aaa.zzz/">

base屬性值：

href 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

<base href="http://baidu.com/"> 這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。

target 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。

<base target="_blank"> 網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。

terget屬性值：

_blank 在新窗口中打開被鏈接的文檔
_self 默認(rèn)值，在相同框架中打開被鏈接的文檔
_parent 在父框架集中
_top 在整個窗口中打開被鏈接文檔·
framename 在指定框架中打開被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/span>

rel：引用文件，引用資源的類型定義

我們在使用link標(biāo)簽引用外部文件的時候，外部文件的類型是多種多樣的。

alternate 代替文檔（種子，其他語言版本，其他格式等等）

author 網(wǎng)頁的作者

help 幫助文件的鏈接

icon 網(wǎng)頁的圖標(biāo)

next 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁

prefetch 把鏈接外部資源時提前緩存起來。

prev 如果是連續(xù)網(wǎng)頁

media 鏈接文件或是資源屬于哪一種資源。

hreflang 鏈接文件的語言種類

type 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）

sizes 根據(jù)link鏈接文件的類型，來指定文件的大小

代碼示例：

鏈接網(wǎng)頁圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 <!-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 -->
2     <link rel="icon">
3     <!-- 示例 -->
4     <link rel="icon" href="img/favicon.png" type="image/png">
5     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6     <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意：后面的href和前面type標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上

鏈接外部樣式單

1 <link rel="stylesheet">
2     <link rel="stylesheet" href="style1.css" media="screen">
3     <link rel="stylesheet" href="style2.css" title="主題樣式文件">
4     <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">

說明：

alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進(jìn)行選擇

media 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀

title 對這個link進(jìn)行簡單的說明

網(wǎng)站RSS種子指定

<!-- 網(wǎng)站RSS種子指定 -->
    <link rel="alternate" type="application/rss+xml">

為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL

<!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

告訴搜索引擎代替URL是哪里。

有試過自己寫一個網(wǎng)頁嗎？聽上去難，其實操作起來很簡單，不夸張地說——有手就行。來試試看吧。

一. 對網(wǎng)頁設(shè)計的基本了解

1. 網(wǎng)站

1）一個網(wǎng)站由若干個網(wǎng)頁構(gòu)成，這些網(wǎng)頁是用超級鏈接有邏輯地聯(lián)系起來的。
2）網(wǎng)站由網(wǎng)址來識別和存取。
3）網(wǎng)頁需要上傳到網(wǎng)絡(luò)空間中，才能供瀏覽者訪問網(wǎng)站中的內(nèi)容。
即，一個網(wǎng)站需要有域名（網(wǎng)址）、網(wǎng)頁、網(wǎng)絡(luò)空間三部分。

2. 網(wǎng)頁編輯工具

1）語言

我們可以使用HTML來編寫網(wǎng)頁，HTML文件就是增加了標(biāo)記的普通文本文件。
可以簡單地使用記事本來編寫一個網(wǎng)頁，只需將文件后綴名改為html，然后用瀏覽器打開。
現(xiàn)在編寫網(wǎng)頁的語言其實由三部分構(gòu)成：HTML,CSS,JavaScript。

1）HTML：早期編寫網(wǎng)站的語言。
2）CSS：負(fù)責(zé)網(wǎng)站內(nèi)容的表現(xiàn)形式。是在HTML原來的功能中分離出來的，這種分離可以使維護(hù)站點外觀更容易，也讓文檔代碼更簡練，網(wǎng)頁加載快。
3）JavaScript：負(fù)責(zé)動態(tài)部分。使網(wǎng)頁更加生動活潑，增加和用戶的互動。

2）軟件
前面已經(jīng)講到，可以簡單地使用記事本來編輯網(wǎng)頁。
這里在提出兩款編輯軟件：EditPlus，Dreamweaver。它們的能力是遞增的。

EditPlus:

EditPlus相比記事本的優(yōu)點是，可以帶有html語言的語法高亮，而且可以在這個編輯頁面中直接預(yù)覽網(wǎng)頁（點擊左上角部分的小地球圖標(biāo)）。

二. 第一個網(wǎng)頁

前面已經(jīng)提到，html語言文件就是增加了標(biāo)記的普通文本。
那么首先，我們就要了解標(biāo)記的作用：
一些簡單的標(biāo)記，可以讓文本在網(wǎng)頁中以另一種形式呈現(xiàn)出來。

1. 實操——用記事本寫個樸素的網(wǎng)頁

簡單起見，接下來就使用記事本來編寫我們的網(wǎng)頁。

首先，新建一個文本文件（txt），給它起個隨便的名字。

然后用記事本打開它，輸入以上內(nèi)容，記得保存。

重命名文件，將文件后綴名改為html。

（<br>的意思是換行）
接著選擇打開方式為某個瀏覽器（系統(tǒng)默認(rèn)的瀏覽器就可以），就可以顯示出我們剛剛編寫的網(wǎng)頁了。
是不是感覺樸素地有點過頭了？沒關(guān)系，第一次嘛。

2. 代碼講解

<html>
  	<body>
  			<br>
  		  <br>
  		  <br>
									這是我們的第一個網(wǎng)頁。
        <br>
  			 <br>
   			 <br>
	</body>
</html>

這里我們用到了三個基本的標(biāo)簽：<html>、<body>和<br>。
其中<html>標(biāo)志著我們html文件的開始，<body>則表示正文內(nèi)容的開始。而</html>和</body>分別代表著對應(yīng)部分的結(jié)束。<body>和</body>之間的一行文本，則是我們要展現(xiàn)的內(nèi)容。而<br>則是換行，我們經(jīng)常用這個標(biāo)簽來調(diào)整網(wǎng)頁的上下距離。

3. 更豐富一點

增加一些其它的標(biāo)簽，讓我們的網(wǎng)頁更加生動一點。

<!doctype html>
<html>
<title>第一個網(wǎng)頁</title>
<body 
	background = "宇宙.jpeg"
	text = "#ccff66"
	leftmargin = "300">
<h1>這是我們的第一個網(wǎng)頁！</h1>
<p>可以簡單留作一個紀(jì)念。</p>
<p>但我們的征途，是星辰大海！</p>
</body>
</html>

標(biāo)簽	功能
<!doctype html>	標(biāo)識文件的語言標(biāo)準(zhǔn)，這里指的是html5
<title>	網(wǎng)頁的標(biāo)題，即瀏覽器中頁面的名字
<h1>	一級標(biāo)題
<p>	一個段落的開始

在<body>標(biāo)記中，還可以控制一些全局的呈現(xiàn)效果：

標(biāo)識符	控制內(nèi)容
background	背景圖片（需要在html文件相同目錄下，加入相應(yīng)的圖片文件）
text	文本內(nèi)容的顏色
leftmargin	兩邊間距大小

下面是新的網(wǎng)頁：

在線咨詢

上一篇：大神60行JS代碼實現(xiàn)的網(wǎng)頁鋼琴按鍵特效，代碼>點開文章拷貝拿走
下一篇：圖表分析中的HTML5地圖需求，這款BI輕松5步就給解決了

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商