1. 程式人生 > >關於HTML基礎的總結

關於HTML基礎的總結

首先,我們要知道HTML是一種超文字標記語言,不需要編譯,直接由瀏覽器執行。HTML由W3C維護,是通向WEB技術世界的鑰匙。

一、HTML檔案主體結構標籤

1、文件宣告 <!doctype html>

2、html標籤<html></html>

3、head標籤<head></head>裡面會包含諸如頁面標題,搜尋引擎資訊等相關的標籤

4、body標籤<body></body>頁面的主體內容包含在裡面。屬性有background、bgcolor、text、link、vlink、alink

二、head頭部標籤

1、<title></title>定義標題

2、<meta/>

3、<link href=""></link>

相關的程式碼:

  • 定義字符集編碼<meta charset="utf-8">
  • 重新整理或者跳轉<meta http-equiv="refresh" content="3;url=http://www.baidu.com" >過3秒跳到百度
  • 設定關鍵字<meta name="keywords" content="">
  • 設定頁面描述<meta name="description" content="">
  • 定義網站標題圖示<link rel="shortcut icon" href="圖片地址.ico">(各種圖示可以到icon網上找)

三、格式排版標籤

  • <br/>換行
  • <hr/>分隔線
  • <p>段落
  • <pre>原樣輸出(按照原格式輸出)
  • <h1></h1>標題標籤
  • <center></center>居中
  • HTML實體:
  • * &nbsp; 空格
    * &lt;        <
    * &gt;   >
    * &quot;   “ 引號
    * &copy;   © 版權
    * &yen;   ¥
    * &times;  ×
    * &divide;  ÷
    * &reg;    ®

四、列表標籤

  • ul 無序列表
  • li
  • ol 有序列表
  • dl 定義列表
  • dt 列表項的標題
  • dd 列表專案的描述

五、文字標籤

  • em 強調 表現為斜體
  • strong 強調 表現為加粗
  • blockquote引用

六、連結和錨點

1、URL同一資源定位符,全球資訊網的每一個檔案都有一個URL

2、a標籤屬性:  href的值是URL、target新網頁從哪個視窗開啟(_self/_blank)、title 提示、download下載(H5新增)

3、錨點<a name="錨點的名字"></a>、使用超連結#跳到指定位置

七、影象

1、img標籤的屬性:

  • src
  • alt圖片無法顯示時顯示文字
  • title
  • width/height
  • usemap

2、usemap用於圖片的對映。一個影象被分成幾個區域,當用戶點選某一個區域時,將被連結到不同的文件中。

<a name="page1"><a/>

<img src="" usemap="mymap">

<map name="mymap" id="mymap">

<area shape="rect" coords="0,10,20,20" href="#page1">

八、表格

1、table標籤 屬性:border、width/height、cellspacing(單元格之間的間隙,預設2)、cellpadding(單元格與單元格內容之間的間隙,預設0)、align、bgcolor、background

2、tr標籤 屬性:

  • align(行內文字的水平對齊方式left/center/right)
  • valign(行內文字的垂直對齊方式top/middle/bottom)
  • height行高度
  • bgcolor

3、td標籤屬性:align、valign、width、height

4、th標籤 表頭

九、表單

1、form屬性有action、method、target、enctype

  • <form action="http://www.baidu.com/s" method="get">

2、input

  • name
  • type(text預設文字框、password密碼框、radio單選框、checkbox複選框、file檔案上傳、submit提交按鈕、reset重置按鈕、button普通按鈕)
  • value type值不同value的意義不同
  • size 控制輸入框寬度 適用於text/password
  • maxlength 最大輸入字元個數 適用於text/password
  • checked 預設選中 適用於radio/checkbox
  • readonly 只讀
  • disabled 表示不可用

<input type="text" name="wd" placeholder="請輸入您的使用者" size="50" maxlength="5" disabled>

3、button

  • type屬性 submit(預設)、reset、button

4、select屬性 name、size

5、option屬性 value、diabled、selected(預設選項)

<select name="xueli">
<option value="boshi">博士</option>
<option value="shuoshi">碩士</option>
<option value="ben">本科</option>
<option value="zhuan">專科</option>
</select>

6、textarea屬性 rows(高度)、cols(寬度)

<tr>
<td>自我介紹</td>
<td>
<textarea name="text" cols="30" rows="10"></textarea>
</td>
</tr>

7、label

<tr>
<td><label for="pwd" >密碼</label></td>
<!-- 點選密碼游標移動到後面的文字框 -->
<td><input type="password" id="pwd" name="pwd"></td>
</tr>

十、框架分幀

iframe

十一、HTML全域性屬性

title、id、class、style