關於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實體:
- * 空格
* < <
* > >
* " “ 引號
* © © 版權
* ¥ ¥
* × ×
* ÷ ÷
* ® ®
四、列表標籤
- 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