一抹剩、html簡介
1.1 什么是Html
W3C組織研發(fā).
Html是用來描述網頁的一種語言。
Html指的是超文本標記語言(HyperText Markup Language)(在html中標簽都是w3c組織定義好的,定義好了許多標簽,每個標簽都有具體的含義,超文本是(超出了文本的范圍)
Html不是一種編程語言慷蠕,而是一種標記語言(markup language)
標記語言是一套標記標簽(markup tag)
Html使用標記標簽來描述網頁
html設計的宗旨是用來展示數據的. 具體如何展示數據呢,html中定義了一些標簽,這些標簽都有具體的含義
搭建環(huán)境. dreamweaver(夢想的編織者) .hbuilder.(綠色版本 直接解壓就可以用)
1.2 Html的作用
Web瀏覽器的作用是讀取html文檔怕品,并以網頁的形式顯示它們峡钓。瀏覽器不會顯示html標簽,而是使用標簽來解釋頁面上的內容夭委。簡單說幅狮,html就是用于展示信息的。
1.3 Html程序遵循的規(guī)范
(1) html程序以<html>開始株灸,同時</html>結束崇摄;
(2) html程序包含兩部分內容:head和body;
<html>
<head>設置頁面信息</head>
<body>顯示到頁面上的內容</body>
</html>
(3) html的標簽有開始標簽慌烧,同時也要結束標簽逐抑,標簽通常是成對出現的,比如<b>和</b>屹蚊;
(4) html的代碼不區(qū)分大小寫的厕氨;
(5) 有些標簽沒有結束標簽进每,需要在標簽內結束
,實現換行的操作命斧,使用標簽實現的
田晚,沒有</br>;
(6) 絕大多數的標簽都具有屬性国葬,建議屬性值使用引號引起贤徒。例如:<body text=”red”>;
(7) 大多數標簽是可以嵌套的汇四。
1.4 Html的操作思想
在網頁中可能有很多的數據接奈,不同的數據可能需要不同的顯示效果,這個時候需要使用標簽把要操作的數據包起來(封裝)通孽,通過修改標簽的屬性值來實現標簽內數據樣式的變化序宦。標簽相當于一個容器,通過修改容器的屬性值背苦,實現容器內數據樣式的變化互捌。
二、Html標簽
2.1. 字體標簽
2.1.1. <font>文字標簽font字體糠惫,大小,顏色
(1) font字體钉疫,大小硼讽,顏色
<font>標簽用于規(guī)定文字的字體,大小牲阁,顏色固阁。
<font color="設置文字顏色" size="文字的大小">要操作的文字的內容</font>
常用屬性:
屬性 作用
face 規(guī)定文本的字體
size 規(guī)定文本的大小,文字大小值范圍:1-7城菊,如果值超過了7备燃,使用還是7的效果
color 規(guī)定文本的顏色
顏色有三種表示方式:
顏色由紅色、綠色凌唬、藍色混合而成
第一種:直接使用英文單詞進行表示 red green yellow
第二種:使用十六進制數字進行表示 #ffffff
第三種:使用RGB顏色值配置 rgb(255,0,0)
2.1.2. <title>標題標簽
<head>
<meta charset="utf-8" />
<title>html基本標簽學習</title>
</head>
title 表示當前網頁的標題
<h1>-<h6>標簽用于定義標題并齐。<h1>最大標題,<h6>最小標題客税。
標題標簽可以自動換行况褪,從h1到h6字體的大小依次變小的。
<h1>這是標題h1</h1>
<h2>這是標題h2</h2>
<h3>這是標題h3</h3>
<h4>這是標題h4</h4>
<h5>這是標題h5</h5>
<h6>這是標題h6</h6>
2.2 排版標簽
2.2.1 < hr/>水平線標簽
常用屬性:
屬性 作用
align 設置水平線對齊方式 可選值 left right center
size 設置水平線的粗細更耻,范圍1-7
width 設置水平線長度测垛,可以是絕對值或相對值。默認為100%
color 設置水平線顏色秧均,默認為黑色
2.2.2 <!- - 注釋的內容 -->注釋標簽
在Java里面有三類注釋:單行注釋食侮,多行注釋号涯,文檔注釋。
在html中注釋 <! -- 注釋的內容 -->锯七,使內容不在html頁面中進行顯示链快。
2.2.3. <p>段落標簽
<p>標簽是段落標簽,可以將html文檔分割為若干段落起胰。瀏覽器會自動在段落前后添加空格久又。
<p>標簽常用屬性:
align:用于設定對齊方式,可選值 left right center效五,默認值是left地消。
2.2.4. < br/>換行標簽
< br/>標簽是換行標簽。
因為瀏覽器會自動忽略空白和換行畏妖,因此
標簽成為了我們最常用的標簽之一脉执。
2.2.5.  特殊字符標簽(空格)
 
實現空格的操作
2.2.6. pre,s戒劫,u半夷,b,i標簽(斜體,加粗,下劃線,刪除線)
標簽 作用
pre 原樣輸出
s 刪除線
u 下劃線
b 加粗
i 斜體
2.2.7. div和span
div:展示數據會自動換行,+CSS
span:在一行進行顯示(組合后也不會換行)
2.3 列表標簽
2.3.1. <dl><dt><dd>自定義列表標簽
首先需要使用 <dl></dl>: 定義列表的范圍
之后在dl標簽里面 <dt></dt>: 定義上層內容
在dl標簽里面 <dd></dd>: 定義下層內容
<dl>
<dt>技術部</dt>
<dd>Java</dd>
<dd>Android</dd>
<dd>ios</dd>
</dl>
2.3.2. <ol><li>有序列表標簽
使用 <ol></ol>: 定義有序列表的范圍
ol標簽上面有屬性 type:排序的方式迅细,type屬性里面的值 1 a i
之后在ol標簽里面:<li></li>: 封裝具體的內容巫橄。
<ol type=”a”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ol>
<ol type=”i”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ol>
2.3.3. <ul><li>無序列表標簽
首先使用標簽 <ul></ul>: 定義無序列表的范圍
ul標簽上面有屬性 type:設置特殊符號
type屬性里面的值 disc circle square
之后在ul標簽里面: <li></li>: 封裝具體的內容
<ul >
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
<ul type =”square”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
<ul type =”circle”>
<li>Java</li>
<li>Android</li>
<li>ios</li>
</ul >
2.4 <img>圖形標簽
<img>是一個圖片標簽,用于在頁面上引入圖片茵典。
常用屬性:
屬性 作用
src 用于設定要引入的圖片的url
alt 用于設定圖像的替代文字
*鼠標移動到圖片上面湘换,稍等片刻出現文字
*如果圖片找不到,顯示alt的內容
*這個屬性在某些瀏覽器不能顯示的
width 用于設定圖片的寬度
height 用于設定圖片的高度
border 圖片邊框厚度
align 用于設定圖片的對齊方式
2.4 <a>超鏈接標簽
<a>標簽用于定義超連接统阿,用于從一個頁面鏈接到另一個頁面彩倚。
<a href="鏈接到的地址">顯示在頁面上的內容</a>
常用屬性:
屬性 作用
href 用于設定鏈接指向頁面的url
name 用于設定錨的名稱
target 用于設定在何處打開鏈接頁面。在默認的情況下扶平,打開方式在當前的頁面打開帆离。
target里面的值:
_self,當前頁面打開结澄;
_blank哥谷,在新標簽頁打開。
想要一個超鏈接沒有效果麻献,在href屬性值寫成#
2.5 <table><tr>th或td表格標簽
操作技巧:
首先數表格里面有多少行呼巷,數每行里面有多少個單元格。
首先定義表格的范圍:<table></table>
<table>中的屬性:
屬性 作用
border 設置表格線
bordercolor 設置表格線的顏色
cellspacing 設置單元格之間的距離
cellpadding 設置文字和單元格之間的距離
width 設置表格的寬度
height 設置表格的高度
align 設置表格的對齊方式
bgcolor 設置表格的背景顏色
在table標簽里面表示行: <tr></tr> 包含一個或多個th或td元素
屬性 作用
align 設置對齊方式:left center right
bgcolor 設置表格中行的背景顏色
在tr標簽里面表示列: <td></td> 定義表格單元
屬性 作用
align 用于設定單元格內容的對齊方式
bgcolor 用于設定單元格背景顏色
height 用于設定單元格的高度
width 用于設定單元格的寬度
colspan 用于設定列合并
rowspan 用于設定行合并
在tr標簽里面也可以表示單元格:<th></th>用于定義表格的表頭
- 實現居中和加粗的效果
合并單元格
是在td標簽上面進行的操作赎瑰,使用兩個屬性王悍。
rowspan:跨行
代碼 <th rowspan="4">人員信息3人</th>
colspan:跨列
代碼 <td colspan="3">統(tǒng)計信息3人</td>
標題標簽 用于定義表格標題
<caption>標題內容</caption>
<caption>標簽必須緊隨<table>標簽之后,一個表格只能有一個標題餐曼。通常這個標題會被居中于表格之上压储。
2.6 <form>表單標簽
<form>標簽代表一個表單鲜漩,表單用于向服務器傳輸數據。
<form>標簽能夠包含<input>集惋,可以是文本字段孕似,復選框,單選框或提交按鈕等刮刑。還可以包含<textarea> <select>等喉祭。(大多數由input構成)
<form>常用屬性:
屬性 作用
name 用于定義表單的名稱
action 用于規(guī)定提交表單時向何處發(fā)送表單數據
method:用于規(guī)定提交的方式。一般取值 POST或GET雷绢,在默認情況下泛烙,提交方式是get提交。
get提交方式會在地址欄攜帶數據翘紊,安全性很差
post提交方式地址欄不會攜帶數據蔽氨,安全性比較高,數據在請求體里面
2.6.1 輸入項<input>
可以輸入內容或者選擇內容的地方帆疟。
要求1:輸入項里面必須要有name屬性
要求2:在單選輸入項和復選輸入項以及下拉選擇輸入項里面都需要有屬性value鹉究,設置的值。
輸入項需要寫到form標簽里面
text普通輸入項 <input type="text"/>
password密碼輸入項 <input type="password"/>
radio單選輸入項 <input type="radio"/>
要求:單選輸入項里面必須有name屬性踪宠,同時name的屬性值必須要相同
設置默認選中自赔,使用屬性 checked="checked"
checkbox復選輸入項
<input type="checkbox"/>
要求:單選輸入項里面必須有name屬性,同時name的屬性值必須要相同
設置默認選中柳琢,使用屬性 checked="checked"
file文件輸入項
上傳文件的绍妨。<input type="file"/>
hidden隱藏項
,這個值不會顯示在頁面上染厅,但是提交表單也可以提交到服務器上
<input type="hidden"/>
普通按鈕 <input type="button"/>
<submit>提交
<input type=”submit”> 定義提交按鈕痘绎。提交按鈕會把表單數據發(fā)送到服務器津函。
常用屬性:
name:定義標簽名稱
value:按鈕顯示名稱1
若要提交到百度,在form上加入action=”http://www.baidu.com”
<reset>重置
<input type=”reset”> 定義重置按鈕肖粮。當點擊表單的重置按鈕不是清空數據,是恢復到默認狀態(tài)
常用屬性:
? name:定義標簽名稱
? value:按鈕顯示名稱
服務器會根據name屬性來獲取我們提交的值,所以我們在寫Input標簽的時候都要加上一個name屬性,這樣才可以把數據提交到服務器
提交數據的2種方式 默認get提交 和post提交
<image>定義圖像形式的提交按鈕
<input type=”image”> 定義圖像形式的提交按鈕。這個標簽主要是用了替換 submit按鈕尔苦,因為默認產生的提交按鈕并不漂亮涩馆,這個標簽允許你采用指定 的圖片做為提交按鈕。
常用屬性:
? name:定義標簽名稱
? src:定義作為提交按鈕顯示的圖像的url
? alt:定義作用圖像的替代文本
下面兩個輸入項不是用2標簽進行封裝的
2.6.2. <select><option>下拉選擇輸入項
<select >
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
使用屬性 selected="selected" 默認選中
2.6.3. </textarea>文本域
<textarea cols="10" rows="5"></textarea>