HTML+CSS基礎學習：HTML

時間 2019-12-04

標籤 html+css html css 基礎學習欄目 CSS 简体版

原文原文鏈接

一、HTML文件基本結構

一個HTML文件是有本身固定的結構的。php

<html>
    <head>...</head>
    <body>...</body>
</html>
複製代碼

<html></html>稱爲根標籤，全部的網頁標籤都在<html></html>中。css
<head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤html
在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裏的標籤中的內容會在瀏覽器中顯示出來。前端

二、基本標籤

（1）<head>標籤：文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示給讀者。程序員

下面這些標籤可用在 head 部分：編程

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>
複製代碼

（2）<title>標籤：在<title>和</title>標籤之間的文字內容是網頁的標題信息，它會出如今瀏覽器的標題欄中。網頁的title標籤用於告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出網頁的主題。每一個網頁的內容都是不一樣的，每一個網頁都應該有一個獨一無二的title。windows

（3）<body>標籤：網頁上顯示的內容放在這裏後端

在網頁上要展現出來的頁面內容必定要放在body標籤中。以下圖是一個新聞文章的網頁。瀏覽器

在瀏覽器中的顯示效果：bash

（4）<p>標籤：在網頁上顯示文章，須要<p>標籤，把文章的段落放到

標籤中，一段文字一個<p>標籤

<p>個人第一個段落。</p>
<p>個人第二個段落。</p>

複製代碼

（5）<h>標籤：使用<hx>標籤來製做文章的標題，由於h1標籤在網頁中比較重要，因此通常h1標籤被用在網站名稱上。

h1-h6標籤的默認樣式：

標籤代碼：

<body>
 <h1>一級標題</h1>
 <h2>二級標題</h2>
 <h3>三級標題</h3>
 <h4>四級標題</h4>
 <h5>五級標題</h5>
 <h6>六級標題</h6>
</body>
複製代碼

實際顯示：

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

（6）<strong>和<em>標籤：若是想在一段話中特別強調某幾個文字，這時候就能夠用到<em>或<strong>標籤，但二者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。而且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標籤相比，目前國內前端程序員更喜歡使用<strong>表示強調。

語法：

<em>須要強調的文本</em>  

<strong>須要強調的文本</strong> 
複製代碼

須要強調的文本

須要強調的文本

（7）<span>標籤：爲文字設置單獨樣式，跟<em>或<strong>不一樣，<span>標籤是沒有語義的，它的做用就是爲了設置單獨的樣式用的。

語法：

<span>文本</span>
複製代碼

例：設置段落中的一段文字的顏色爲藍色

<style>
span{color:blue;}
</style>

<p>1922年的春天，一個想要成名名叫尼克•卡拉威的做家，離開了美國中西部，來到了紐約。
那是一個道德感漸失，爵士樂流行，走私爲王，股票飛漲的時代。
爲了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
複製代碼

（8）<q>標籤：短文本引用。

好比在你的網頁的文章裏想引用某個做家的一句詩，這樣會使你的文章更加出彩，那麼<q>標籤是你所須要的。

要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號。用<q>標籤的真正關鍵點不是它的默認樣式雙引號（若是這樣咱們不如本身在鍵盤上輸入雙引號就好了），而是它的語義：引用別人的話。

語法：

<q>引用文本</q>
複製代碼

例：

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心託杜鵑。</q>開始的。雖然當時不知道是什麼意思，只是以爲詩句挺特別。
複製代碼

顯示：

最初知道莊子，是從一首詩莊生曉夢迷蝴蝶。望帝春心託杜鵑。開始的。雖然當時不知道是什麼意思，只是以爲詩句挺特別。

（9）<blockquote>的做用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名做家的文字，這時須要這個標籤。

例：

<blockquote>明月出天山，蒼茫雲海間。長風幾萬裏，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閒。</blockquote>
複製代碼

瀏覽器對<blockquote>標籤的解析是縮進樣式。以下圖所示：

（10）<br>標籤：分行顯示文本，讓每一句話後面加入一個折行就能夠用到<br />標籤了，在須要加回車換行的地方加入<br />，<br />標籤做用至關於word文檔中的回車。在 html 代碼中輸入回車、空格都是沒有做用的。在html文本中想輸入回車換行，就必須輸入<br />

語法：

xhtml1.0寫法：

<br />

html4.01寫法：

<br>

例：

（11） 標籤，表明空格，每一個標籤表明一個空各位 例：

牀前&nbsp;&nbsp;&nbsp;明月光，疑&nbsp;是地上霜
複製代碼

牀前明月光，疑是地上霜

（12）<hr />標籤，表示水平線，在信息展現時，有時會須要加一些用於分隔的橫線，這樣會使文章看起來整齊些。

語法：

html4.01版本 <hr>

xhtml1.0版本 <hr />

例：

<p>牀前明月光，疑是地上霜</p>
<hr />
<p>舉頭望明月，低頭思故鄉</p>
複製代碼

牀前明月光，疑是地上霜

舉頭望明月，低頭思故鄉

（13）<address>標籤：通常網頁中會有一些網站的聯繫地址信息須要在網頁中展現出來，這些聯繫地址信息如公司的地址就能夠<address>標籤。也能夠定義一個地址（好比電子郵件地址）、簽名或者文檔的做者身份

語法：

<address>聯繫地址信息</address>

（14）<code>和<pre>標籤：在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼爲一行代碼時，就可使用<code>標籤，標籤中間的部分會在html頁面顯示輸入代碼的原貌

若是是多行代碼，可使用<pre>標籤

語法：

<code>代碼語言</code>
複製代碼

<pre>
第一行代碼段
第二行代碼段
第三行代碼段
</pre>
複製代碼

（15）<div>標籤：在網頁製做過程過中，能夠把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的做用就至關於一個容器。

肯定邏輯部分：

什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。以下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可使用<div>標籤做爲容器。

給div命名，使邏輯更加清晰

咱們把一些標籤放進<div>裏，劃分出一個獨立的邏輯部分。爲了使邏輯更加清晰，咱們能夠爲這一個獨立的邏輯部分設置一個名稱，用id屬性來爲<div>提供惟一的名稱，這個就像咱們每一個人都有一個身份證號，這個身份證號是惟一標識咱們的身份的，也是必須惟一的。

以下兩圖進行比較，右邊的圖要比左邊的更好理解：

語法：

<div  id="版塊名稱">合併在一塊兒的板塊內容</div>

複製代碼

（15）<table>標籤：認識網頁上的表格

建立表格的四個元素：

table、tbody、tr、th、td

一、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

二、<tbody>…</tbody>：若是不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，沒必要等待表格結束後在顯示，同時若是表格很長，用tbody分段，能夠一部分一部分地顯示。（通俗理解table 能夠按結構一塊塊的顯示，不在等整個表格加載完後顯示。）

三、<tr>…</tr>：表格的一行，因此有幾對tr 表格就有幾行。

四、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

五、<th>…</th>：表格的頭部的一個單元格，表格表頭。

六、表格中列的個數，取決於一行中數據單元格的個數。

table表格在沒有添加css樣式以前，在瀏覽器中顯示是沒有表格線的

表頭，也就是th標籤中的文本默認爲粗體而且居中顯示

例：

<table>
  <tbody>
    <tr>
      <th>班級</th>
      <th>學生數</th>
      <th>平均成績</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
      <td>三班</td>
      <td>32</td>
      <td>80</td>
    </tr>
  </tbody>
</table>
複製代碼

效果：

班級	學生數	平均成績
一班	30	89
二班	35	85
三班	32	80

用css樣式，爲表格加入邊框

Table 表格在沒有添加 css 樣式以前，是沒有邊框的，下面的代碼能夠爲表格增長邊框：

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
複製代碼

（16）<caption>標籤：爲表格添加標題和摘要

表格仍是須要添加一些標籤進行優化，能夠添加標題和摘要。

摘要：

摘要的內容是不會在瀏覽器中顯示出來的。它的做用是增長表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可使屏幕閱讀器更好的幫助特殊用戶讀取表格內容

語法：

<table summary="表格簡介文本">
複製代碼

標題：

用以描述表格內容，標題的顯示位置：表格上方。

語法：

<table summary="表格簡介文本">
    <caption>標題文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>
複製代碼

（17）<a>標籤：連接到另外一個頁面

使用<a>標籤可實現超連接

語法：

<a  href="目標網址"  title="鼠標滑過顯示的文本">連接顯示的文本</a>
複製代碼

例：

<a  href="http://www.imooc.com"  title="點擊進入慕課網">click here!</a>
複製代碼

效果： click here!

<a>標籤在默認狀況下，連接的網頁是在當前瀏覽器窗口中打開，有時咱們須要在新的瀏覽器窗口中打開。在href語段後加入target="_blank"

語法：

<a href="目標網址" target="_blank">click here!</a>

<a>標籤還有一個做用是能夠連接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。還能夠利用mailto作許多其它事情。詳細圖示：

若是mailto後面同時有多個參數的話，第一個參數必須以「?」開頭，後面的參數每個都以「&」分隔。

點擊連接會打開電子郵件應用，並自動填寫收件人等設置好的信息，以下圖：

（18）<img>標籤：爲網頁插入圖片

語法：

<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
複製代碼

一、src：標識圖像的位置；

二、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

三、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

四、圖像能夠是GIF，PNG，JPEG格式的圖像文件。

（19）表單標籤，與用戶交互

網站與用戶進行交互使用HTML表單(form)。表單是能夠把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就能夠處理表單傳過來的數據。

語法：

<form   method="傳送方式"   action="服務器文件">
複製代碼

講解：

1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。

2.action ：瀏覽者輸入的數據被傳送到的地方,好比一個PHP頁面(save.php)。

3.method ：數據傳送的方式（get/post）

<form    method="post"   action="save.php">
        <label for="username">用戶名:</label>
        <input type="text" name="username" />
        <label for="pass">密碼:</label>
        <input type="password" name="pass" />
</form>
複製代碼

一、全部表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間（不然用戶輸入的信息可提交不到服務器上）

二、method : post/get 的區別這一部份內容屬於後端程序員考慮的問題

（19-1）文本輸入框、密碼輸入框：

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也能夠轉化爲密碼輸入框

語法：

<form>
   <input type="text/password" name="名稱" value="文本" />
</form>
複製代碼

一、type：

當type="text"時，輸入框爲文本輸入框;

當type="password"時, 輸入框爲密碼輸入框。

二、name：爲文本框命名，以備後臺程序ASP 、PHP使用。

三、value：爲文本輸入框設置默認值。(通常起到提示做用)

例：

<form>
姓名
 <input type="text" name="小明" value="輸入姓名">
 <br />
密碼
<input type="password" name="pass" value="輸入密碼">
</form>
複製代碼

（19-2）文本域：支持多行文本輸入

當用戶須要在表單中輸入大段文字時，須要用到文本輸入域。 語法：

<textarea  rows="行數" cols="列數">文本</textarea>
複製代碼

在<textarea></textarea>標籤之間能夠輸入默認值。

例：

<form  method="post" action="save.php">
        <label>聯繫咱們</label><br />
        <textarea cols="50" rows="10" >在這裏輸入內容...</textarea>
</form>
複製代碼

效果：

（19-3）使用單選框、複選框，讓用戶選擇

在使用表單設計調查表時，爲了減小用戶的操做，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，二者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶能夠任意選擇多項，甚至全選

語法：

<input type="radio/checkbox" value="值" name="名稱" checked="chenked">
複製代碼

一、type:

當 type="radio" 時，控件爲單選框

當 type="checkbox" 時，控件爲複選框

二、value：提交數據到服務器的值（後臺程序PHP使用）

三、name：爲控件命名，以備後臺程序 ASP、PHP 使用，同一組的單選按鈕，name 取值必定要一致,這樣同一組的單選按鈕才能夠起到單選的做用。

四、checked：當設置 checked="checked" 時，該選項被默認選中

<form name="iForm" method="post" action="save.php">
  你喜歡哪一種游泳姿式：<br />
  <input type="radio" value="1" name="泳姿" checked="checked">自由泳
  <input type="radio" value="2" name="泳姿">蛙泳
  <input type="radio" value="3" name="泳姿">仰泳
  <br /><br />
  你對哪些運動感興趣：<br />
  <input type="checkbox" value="4" name="籃球">籃球
  <input type="checkbox" value="5" name="足球">足球
  <input type="checkbox" value="6" name="羽毛球">羽毛球
 </form>
複製代碼

（19-4）使用下拉列表框，節省空間

下拉列表在網頁中也常會用到，它能夠有效的節省網頁空間。既能夠單選、又能夠多選。

講解：

一、value：

二、selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

<form name="iForm">
 <label>愛好</label>
  <select>
    <option value='讀書'>讀書</option>
    <option value='運動'>運動</option>
    <option value='音樂'>音樂</option>
    <option value='旅遊' selected="selected">旅遊</option>
 </select>
</form>
複製代碼

顯示效果：

使用下拉列表框進行多選

下拉列表也能夠進行多選操做，在<select>標籤中設置multiple="multiple"屬性，就能夠實現多選功能，在 windows 操做系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），能夠選擇多個選項。以下代碼：

<form name="iForm">
 <label>愛好</label>
  <select multiple="multiple">
    <option value='讀書'>讀書</option>
    <option value='運動'>運動</option>
    <option value='音樂'>音樂</option>
    <option value='旅遊' selected="selected">旅遊</option>
 </select>
</form>
複製代碼

（19-5）使用提交按鈕，提交數據

在表單中有兩種按鈕可使用，分別爲：提交按鈕、重置。

提交按鈕：當用戶須要提交表單信息到服務器時，須要用到提交按鈕。

語法：

<input   type="submit"   value="提交">
複製代碼

type：只有當type值設置爲submit時，按鈕纔有提交做用

value：按鈕上顯示的文字

<form  method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value=" " name="myName " />
    <input type="submit" value="提交" name="submitBtn" />
</form>
複製代碼

重置按鈕:重置表單信息

當用戶須要重置表單信息到初始時的狀態時，好比用戶輸入「用戶名」後，發現書寫有誤，可使用重置按鈕使輸入框恢復到初始狀態。只須要把type設置爲"reset"就能夠。

語法：

<input type="reset" value="重置">
複製代碼

type：只有當type值設置爲reset時，按鈕纔有重置做用

value：按鈕上顯示的文字

<form method="post" action="save.php"
  <label for="myname">姓名：</label>
  <input type="text" value=" " name="myName " />
  <input type="reset" value="重置" name="resetBtn" />
</form>
複製代碼

（19-6）form表單中的label標籤

label標籤不會向用戶呈現任何特殊效果，它的做用是爲鼠標用戶改進了可用性。若是你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。

語法：

<label for="控件id名稱">
複製代碼

<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">輸入你的郵箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  
</form>
複製代碼