福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >

HTML基礎必學列表

HTML 基礎篇(很全)

 

本章內容:

  • 簡介
  1. HTML定義
  2. 標簽定義和屬性
  3. HTML5基本結構
  4. HTML5字符集
  • <head>標簽
  1. <title>
  2. <base/>
  3. <link/>(rel、href、type)
  4. <meta/>(http-equiv、name、content)
  • <body>標簽
  1. 塊級標簽 & 內聯標簽
  2. 基本標簽(<h1>~<h6>、<p>、<b> <strong>、<strike>、<u>、<em> <i>、<sup>、<sub>、<br>、<hr>、<div>、<span>)
  3. 特殊符號(>、<、 、"、©...)
  4. <a> 超鏈接標簽(錨標簽)(href、target、name)
  5. <img> 圖形標簽(src、title、alt、width、height、align)
  6. 列表標簽(<ul>、<ol>、<li>、<dl>、<dt>、<dd>)
  7. <table> 表格標簽(<table> 、<caption> 、<tr>、<th>、<td>、<thead>、<tbody>、rowspan、colspan)
  8. <from> 表單標簽(action、method、enctype、<input>、<textarea>、<select>、<label>、<fieldset>)
  • 框架
  1. <frameset>
  2. <iframe>

簡介

HTML 是什么?

htyper text markup language 即超文本標記語言。

超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程序等非文字元素。

標記語言: 標記(標簽)構成的語言。

什么是標簽:

  • 是由一對尖括號包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.
  • 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
  • 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
  • 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/><hr/><input/><img/>
  • 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

標簽的屬性:

  • 通常是以鍵值對形式出現的. 例如 name="nick"
  • 屬性只能出現在開始標簽 或 自閉和標簽中.
  • 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="nick"
  • 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

HTML5基本結構:

將HTML4中的DTD定義為如下結構即可,其他不變。

<!DOCTYPE HTML>

HTML5支持的兩種指定頁面使用的字符集的方式:

  • 使用Content-Type指定字符集

<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>

  • 直接使用charset指定字符集

<meta charset="UTF-8">

<head> 標簽

<title>

<title>Title</title>

<base/>

標簽為頁面上的所有鏈接規定默認地址或默認目標。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<base href="http://images.cnblogs.com/cnblogs_com/suoning/845162/"/>

<base target="_blank" />

</head>

<body>

<img src="o_s.png" alt="圖片加載失敗。。。"/>

<a href="http://cnblogs.com/suoning/">nick blogs</a>

</body>

</html>

# 上面這段代碼中,<img>標簽的src屬性是一個相對路徑,因為<head>中通過base標簽設置了鏈接的默認地址,

所以img的src實際的地址是“http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。

同樣的,<a>中只是指定了href,并未指定target屬性,所以也會使用base中設置的target屬性的值。

<link/>

引用外部文檔,常見于引用外部樣式。重要屬性有三個:rel、href、type。

rel 規定文檔與被鏈接文檔之間的關系。

  • rel="dns-prefetch" 預先解析緩存文檔中使用的域名,目的是為了提高網頁訪問速度。使用場景:在一個網頁頻繁使用其他域名資源時。
  • rel="shortcut icon"或rel="icon" 在收藏和標題欄上用于顯示的圖標。示例:<link rel="icon" href="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意:IE瀏覽器只支持ico格式,為了兼容IE,圖片文件采用ico格式。
  • rel="stylesheet" 引用外部樣式表。
  • rel="nofollow" 用于指示搜索引擎不要追蹤(爬蟲抓取),減少垃圾鏈接。用于<a>標簽,使用場景:網頁不被信任或是不希望唄搜索引擎錄入的網站。

href 資源的路徑(相對路徑/絕對路徑)。

type 規定被連接文檔的MIME類型,用于明確文件的打開方式。例如:.ico文件 image/x-icon。

<meta/>

定義關于HTML文檔的元數據。 重要的屬性有三個:http-equiv、name、content

http-equiv 把content屬性值關聯到http頭部。

  • Content-Type(瀏覽器接受的文檔類型,一般是text/html)
  • refresh(網頁刷新,以秒為單位)
  • expires(設定網頁到期時間,一旦過期,必須到服務器上重傳)

<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>

<meta http-equiv="Refresh" content="2">

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">

<meta http-equiv="expires" content="6 Jun 2016"/>

name 把content屬性關聯到一個名稱。

  • keywords(搜索關鍵字,用于搜索引擎抓取信息的顯示)
  • description(搜索到網站后顯示的網頁內容簡描述)
  • author(站點制作者信息)
  • generator(用以說明生成工具)
  • name也可以根據特定的功能自定義,在新浪網中有使用360認證和搜狐認證(<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>)。

<meta name="keywords" content="搜索關鍵字">

<meta name="description" content="簡要描述">

<meta name="author" content="http://cnblogs.com/suoning">

<meta name="generator" content="用以說明生成工具">

content 定義與http-equiv或name屬性相關的元信息,是必要的屬性。

<body> 標簽

1、塊級標簽和內聯標簽

塊級標簽:<p><h1><table><ol><ul><form><div>

內聯標簽:<a><input><img><sub><sup><textarea><span>

block(塊)元素的特點

① 總是在新行上開始;

② 高度,行高以及外邊距和內邊距都可控制;

③ 寬度缺省是它的容器的100%,除非設定一個寬度。

④ 它可以容納內聯元素和其他塊元素

inline(內聯)元素的特點

① 和其他元素都在一行上;

② 高,行高及外邊距和內邊距不可改變;

③ 寬度就是它的文字或圖片的寬度,不可改變

④ 內聯元素只能容納文本或者其他內聯元素

對行內元素,需要注意如下

設置寬度width 無效。

設置高度height 無效,可以通過line-height來設置。

設置margin 只有左右margin有效,上下無效。

設置padding 只有左右padding有效,上下則無效。注意元素范圍是增大了,但是對元素周圍的內容是沒影響的。

2、基本標簽

<h1>~<h6> 標題標簽.

<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.

style="text-indent: 2em"可以設置樣式為首行縮進兩個字符。

<blockquote></blockquote>可以用來設置整個段落的縮進。

<b> <strong>: 加粗標簽.

<strike>: 為文字加上一條中線.

<u>: 文字下方加下劃線.

<em> <i>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角標.

<br>:換行.

<hr>:水平線.

<div>

塊級標簽。塊級標簽常用于布局,行級標簽常用語顯示內容。

div的顯示通常使用id或class來標識。id為唯一的標簽標識,class為標簽的類標識。

div的大小是由內容來決定的,默認情況下,高度由內容的高度決定,寬度適應屏幕。

可以容納其他元素,是一個容器。

<span>

3、特殊符號

> >

< <

空格

" 引號

© 版權符號

特殊符號 符號碼

" &quot ;

& &amp ;

< &lt ;

> &gt ;

© &copy ;

® &reg ;

± &plusmn ;

× &times ;

§ &sect ;

¢ &cent ;

¥ &yen ;

· &middot ;

&euro ;

£ &pound ;

™ &trade ;

4、<a> 超鏈接標簽(錨標簽)

重要屬性有三個:href、target、name

href 超鏈接地址:可以是Web上任意資源,包括圖片,網頁,樣式,腳本文件等。href="#"時,表示被鏈接頁面就是當前頁面。

target 文檔打開時要顯示的目標位置,屬性值一般有:_blank(新窗口中打開)、_self(默認,在超鏈接所在的容器中打開)、_parent(在超鏈接的父容器中打開)、_top(整個容器中打開)、name(框架名稱)。

name 錨記名稱。作用:跳轉到文檔的某個地方。返回首頁。

# 跳轉網頁

<a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>

# 跳轉錨記書簽名稱

<a name="top"><h3>Top!</h3></a>

<div style="height: 800px"></div>

<a href="#top">top</a>

1.標簽最簡式
<a href="mailto:[email protected]">郵件聯系</a>
2.標簽幫你填抄送地址
<a href="mailto:[email protected][email protected]">郵件聯系</a>
3.標簽幫你填暗送地址
<a href="mailto:[email protected][email protected]">郵件聯系</a>
4.暗,抄
<a href="[email protected]">郵件聯系</a>
5.標簽幫你填主題
<a href="mailto:[email protected]?subject=這是主題">郵件聯系</a>
6.填郵件內容
<a href="mailto:[email protected]?body=這是內容">郵件聯系</a>
7.多址發送
<a href="mailto:[email protected],[email protected]">郵件聯系</a>
 #http://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點擊這里給我發消息" title="點擊這里給我發消息"/></a>
<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>
# 更多圖片地址如下:
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13

5、<img> 圖形標簽

行級標簽,用來顯示圖片。

重要屬性有:src、title、alt、width、height、align。

src 圖片地址。

title 鼠標懸浮在圖片上的文字。

alt 圖片找不到時要替換的文字。如果圖片資源使用的是外網資源,則不會顯示要替換的文字。如果使用的是本網站的資源(相對路徑給出),則找不到圖片時會顯示替換的文字,并保留圖片設置的寬高結構。

align 圖片周圍文字的垂直對齊情況。常用的屬性值有:top(與圖片的頂部對齊)、middle(與圖片的中部對齊)、bottom(默認,與圖片的底部對齊)。

width 圖片的寬

height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

<img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>

6、列表標簽

<ul> :無序列表標簽

<li>:列表中的每一項.

<ol> :有序列表標簽

<li>:列表中的每一項.

<li>主要的屬性有:type、value兩個:

  • type指明項目的類型,屬性值有:A,a,I,i,1,disc(實心圓),square(實心正方形),circle(空心圓)。
  • value表示序號值從幾開始。

<dl> 定義列表

<dt> 列表標題

<dd> 列表項

<ur>

<li type="circle">A</li>

<li type="1">B</li>

<li type="1">C</li>

</ur>

<ol>

<li value="3">3</li>

<li>4</li>

</ol>

<dl>

<dt><i>標題</i></dt>

<dd>第一項</dd>

<dd>第二項</dd>

<dd>第三項</dd>

</dl>

7、<table> 表格標簽

<table border="1">

<thead>

<tr>

<th>序號</th>

<th>姓名</th>

</tr>

</thead>

<tbody>

<tr>

<th>1.</th>

<td>nick</td>

</tr>

<tr>

<th>2.</th>

<td>jenny</td>

</tr>

</tbody>

</table>

<table> 表格標簽

  • border:(表格邊框)
  • align(水平對齊方式)
  • bgcolor(背景顏色)
  • cellpadding(內邊距,單元格與內容之間的距離)
  • cellspacing(外邊距,單元格的間距,設置為0時,表格變為實線表格)
  • width(表格的寬度,可以用%或者像素,最好通過css來設置長寬)

<caption> 表格的標題

<tr> 表格的數據行,table row

<th> 表格的表頭名稱,與<td>不同在于文字采用加粗居中的形式顯示,table head cell

<td> 單元格,用來顯示表格內容,table data cell

<thead> 表格頭部,使結構更加分明

<tbody> 表格主體部分,使結構更加分明

rowspan 單元格豎跨多少行,作用在th或者td上

colspan 單元格橫跨多少列(即合并單元格),作用在th或者td上

<table>

<caption>xxxxxxxxxx</caption>

<thead>

<tr>

<th>序號</th>

<th>姓名</th>

<th>年齡</th>

<th>女神</th>

</tr>

</thead>

<tbody>

<tr>

<th>1.</th>

<td>nick</td>

<td>18</td>

<td>可可西</td>

</tr>

<tr>

<th>2.</th>

<td>jenny</td>

<td>21</td>

<td>nick!!!</td>

</tr>

</tbody>

</table>

8、<form>表單標簽

表單屬性

HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數據,從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中。

屬性:action、method、enctype

action 表單要提交的地址,用于處理表單的內容(一般是提交字典到后臺的一個接口,這個接口是java寫成的,提交到這個接口后后臺就知道如何處理這些數據了)。

method 提交的方法,默認是get方式提交。

get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

enctype 對表單數據進行編碼,默認都是要編碼的。格式為:application/x-www-form-urlencoded(表單默認的編碼格式,表單發送前對所有字符進行編碼。編碼規則:空格轉換為“+”號,特殊符號轉換為ASC HEX值)。提交普通的文本內容到服務器就可以采用這種默認的編碼方式。當你需要提交的是一個文件時,編碼就需要采用另一種格式:multipart/form-data(不對字符編碼,文件上傳時使用)。text/plain(是一種純文本編碼,空格轉換為“+”號,但是不對特殊字符進行編碼)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query">
<input type="submit" value="搜狗搜索">
</form>
</body>
</html>

表單元素

<input> type 屬性:

text 文本框輸入(默認text文本框類型)。

autocomplete(自動完成輸入的內容,要求表單元素要有name屬性才有自動完成的效果,off表示自動完成不可用,on表示自動完成可用)

disabled(設置或者獲取控件的狀態,默認是false即可用,等于true時不可用,不能輸入內容)

password 密碼框。(以下屬性text和password共有)

size(指定表單元素的初始寬度。當type為text或password時,表單元素的大小以字符為單位,對于其他元素,寬度以像素為單位)

maxlength(type為text或password時,表示輸入的最大字符數),有利于防止sql的注入攻擊

readonly 只讀. 

placeholder 框內預置內容(灰色),寫上內容時才消失

radio 單選按鈕。屬性:

name(將name的值設置為相同值,才表示一組數據,才能實現單選功能)

value(必須要寫,提交到服務器的key值,實際開發過程中value一般是編號)

checked(是否被選中的狀態)

checkbox 復選框。

name(名字一定要一樣一樣的,才表示是一組數據,添加到同一value值列表提交到服務器)

value(必須要寫,提交到服務器的key值,實際開發過程中value一般是編號)

checked(是否被選中的狀態)

file 文件域,上傳文件(不同的瀏覽器表現形式不同)

submit 提交按鈕。用于提交表單。

reset 重置按鈕。清空表單的輸入,恢復到表單默認的狀態。

button 普通按鈕。一般結合javascript使用。

image 圖片按鈕,用來提交表單,與submit是一樣的效果。

src(圖片路徑)

hidden 隱藏字段。

value(隱藏的內容)

color 顏色標簽。value指定顏色值(采用#十六進制數表示)。

date 日期。value值指定默認的日期,格式為****-**-**(年月日)。

datetime-local 顯示本地時間,value值指定默認的時間,格式為2016-05-20T11:10:10(年月日T時分秒)。

number 數字向上或者向下滑動。可以填數字然后向上或者向下選擇不同的值。

range 滑動標簽。min(指定最小值)、max(指定最大值)、value(指定當前默認值)。

week 每年的周數。value指定哪一年第幾周,格式為2016-W25(2016年第25周)。

<textarea> 文本域標簽。默認表現形式是可以輸入很多行文本的文本框。

name (表單提交項的key)

cols(設置文本域寬度)

rows(設置文本域高度,即行數)

<select> 下拉框標簽。使用時要結合<option>子標簽一起使用。

name:表單提交項的key

size:選項個數

multiple:多選

<option> 下拉選中的每一項

  • value(表單提交項的值)
  • selected(selected下拉選默認被選中)

<optgroup>為每一項加上分組

<label> 把元素與文本結合起來

友好設計:不只是選中復選框才能選中并打鉤,要求點擊對應的文字也能選中該復選框。

這種情況下要用到<label>標簽的for屬性(設置或獲取給定標簽對象指定到的對象,值=另一個元素的id號即可)

<label for="name">姓名</label>

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

<fieldset> 對表單中的相關元素進行分組

<fieldset>

<legend>溫馨提示</legend>

<div align="middle">不要忘記點贊哦 ==</div>

</fieldset>

HTML 基礎篇(很全)

 

value: 表單提交項的值

對于不同的輸入類型,value 屬性的用法也不同:

  • type="button", "reset", "submit" - 定義按鈕上的顯示的文本
  • type="text", "password", "hidden" - 定義輸入字段的初始值
  • type="checkbox", "radio", "image" - 定義與輸入相關聯的值

框架

<frameset> 框架

用來劃分窗體,不能放在<body>中,否則沒有效果。

cols (縱向分割頁面。其數值表示方法有三種:“30%、30(或者30px)、*”;數值的個數代表分成的視窗數目且數值之間用“,”隔開。“30%”表示該框架區域占全部瀏覽器頁面區域的30%;“30”表示該區域橫向寬度為30像素;“*”表示該區域占用余下頁面空間。例如:cols="25%,200,*" 表示將頁面分為三部分,左面部分占頁面30%,中間橫向寬度為200像素,頁面余下的作為右面部分。)

rows(橫向分割頁面。屬性和cols一樣)

frameborder(設置是否顯示框架邊框。設定值只有0、1;0 表示不要邊框,1 表示要顯示邊框)

border(框架之間的距離,一般設置為0)

bordercolor(邊框的顏色)

framespacing(設置框架與框架間的保留的空白距離)

<frameset cols="40%,*,*"> 第一個框架占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。

<frameset cols="*,*,*,*"> 瀏覽器窗口等分為四部分。

<iframe> 框架

元素會創建包含另外一個文檔的內聯框架(即行內框架)

name (設置框架名稱。此為必須設置的屬性)

src (設置此框架要顯示的網頁名稱或路徑。此為必須設置的屬性)

scrolling (設置是否要顯示滾動條。設定值為auto, yes, no)

bordercolor (設置框架的邊框顏色)

frameborder (設置是否顯示框架邊框。設定值只有0、1;0 表示不要邊框,1 表示要顯示邊框)

noresize (設置框架大小是否能手動調節)

marginwidth (設置框架邊界和其中內容之間的寬度)

marginhight (設置框架邊界和其中內容之間的高度)

width(設置框架寬度)

height (設置框架高度)

如需轉載,請注明文章出處和來源網址:http://www.mcowk.com.cn/html/h50900.shtml

我要分享到:
上一篇:用HTML使用CSS的六種方法
下一篇:沒有了

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

 

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-09-29 22:15 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖