Html基礎

• 複習昨天知識

• 單標籤

◆註釋標籤   ctrl+/

◆水平線標籤   <hr>

◆換行標籤   <br>

• 雙標籤

◆段落標籤    <p></p>

◆h1-h6  值只能取到6   h1在頁面中只能出現一次。

◆文字標籤  <font></font>

◆圖片標籤

<img src=”圖片的來源”  alt=”替換文字” title=”提示文字”   width=”寬” height=”高”>

◆  <strong></strong>  <b></b>

    <em></em>   <i></i>

    <ins></ins>   <u></u>

    <del></del>    <s></s>

    ^上標   _下標

• 路徑

◆相對路徑

  ★檔案和圖片（html）在同一資料夾（目錄）時，直接寫檔名              ★圖片在上一級目錄，..+/+檔名

  ★圖片在下一級目錄，資料夾名+/+檔名

◆絕對路徑

• 超連結

<a href=”去往的路徑”  title=”提示文字”  target=”_self  |   _blank”>連結文字</a>

◆錨鏈接

◆空鏈    <a href=”#”>

◆連結優化寫法    <base target=”_blank”>

• 特殊字元

&nbsp;  空格

&lt;    <

&gt;    >

&copy; 

&yen;

• 列表

無序列表

<ul>
    <li></li>

    <li></li>

    <li></li>

</ul>

有序列表

<ol>
   <li></li>

   <li></li>

   <li></li>
</ol>

     自定義列表

<dl>
    <dt></dt>

    <dd></dd>

    <dd></dd>
</dl>
 

• 新知識

1. !+tab   html5的標籤結構
2. 編碼

Charset   編碼

Ascll

Ansi

Unicode  

Gbk

Gb2312

Big5

Utf-8   通用字符集

    3.關鍵字

   4.網頁描述

   5.網頁重定向

   6.連結外部樣式表

   7.設定icon圖示

   8.表格

展示資料。 是對網頁重構的一個有益補充。

<table>    表格
    <tr>       行
        <td></td> 列
        <td></td>
        <td></td>
    </tr>
</table>

◆屬性：

Border=”1”   邊框

Width=”500”  寬度

Height=”300” 高

cellspacing=”2”    單元格與單元格的距離

cellpadding=”2”    內容距邊框的距離

align=”left  |  right  |  center” 

如果直接給表格用align=”center”  表格居中

如果給tr或者td使用   ，tr或者td內容居中。

bgcolor=”red”    背景顏色。

◆表格的標準結構

<table>
    <thead>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

  ◆表頭和單元格合併

   ◆  表頭  <caption></caption>

colspan=”2”  合併同一行上的單元格

rowspan=”2”  合併同一列上的單元格

◆表格標題、邊框顏色、內容垂直對齊

   ◆表格標題 <th></th>用法和td一樣

標題的文字自動加粗水平居中對齊

   ◆邊框顏色

◆內容垂直對齊方式

Valign=”top   |  middle   |  bottom”

   9.表單：表單的作用是收集資訊。

表單的組成

◆提示資訊

◆表單控制元件

◆表單域

屬性：action:處理資訊

Method=”get | post”  

Get通過位址列提供（傳輸）資訊，安全性差。

Post 通過1.php來處理資訊，安全性高。

◆文字輸入框

maxlength="6"    限制輸入字元長度

readonly=”readonly”  將輸入框設定為只讀狀態（不能編輯）

disabled="disabled"  輸入框未啟用狀態

name="username"   輸入框的名稱

value="大前端"     將輸入框的內容傳給處理檔案

◆密碼輸入框

★注意：文字輸入框的所有屬性對密碼輸入框都有效。

◆單選框

★只有將name的值設定相同的時候，才能實現單選效果。

★checked=”checked” 設定預設選擇項。

◆下拉列表

<select>
    <option>下拉列表選項</option>
    <option>下拉列表選項</option>
</select>

屬性：

Multiple=”multiple”  將下拉列表設定為多選項

Selected=”selected”  設定預設選中專案

<optgroup></optgroup>   對下拉列表進行分組。

Label=””  分組名稱。

◆多選框

Checked=”checked” 設定預設選中項

◆多行文字框

Cols  控制輸入字元的長度。

Rows  控制輸入的行數

◆ 檔案上傳控制元件

◆檔案提交按鈕

★：可以實現資訊提交功能

◆普通按鈕

★不能提交資訊，配合JS使用。

◆圖片按鈕

★圖片按鈕可實現資訊提交功能

◆重置按鈕

★將資訊重置到預設狀態

◆表單資訊分組

<fieldset></fieldset>    對錶單資訊分組

<legend></legend>      表單資訊分組名稱 html5補充表單控制元件

​​​​​​​

10.標籤語義化

好的語義化的網站標準就是去掉樣式表文件之後，結構依然很清晰。

標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）

-標籤語義化意義：

       1:網頁結構合理

       2:有利於seo:和搜尋引擎建立良好溝通，有了良好的結構和語義你的網頁內容自然容易被搜尋引擎抓取；

       3:方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）

       4:便於團隊開發和維護

1：儘可能少的使用無語義的標籤div和span；

2：在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；

3：不要使用純樣式標籤，如：b、font、u等，改用css設定。

4：需要強調的文字，可以包含在strong或者em標籤中strong預設樣式是加粗（不要用b），em是斜體（不用i）；

如果有疑問聯絡博主：y19970821ywty

要用到的工具，視訊教程，關注公眾號（Java學習之樂）直接免費獲取：

​​​​​​​