html

一抹剩、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) 大多數標簽是可以嵌套的汇四。

Paste_Image.png

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. &nbsp特殊字符標簽(空格)

&nbsp
實現空格的操作

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>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末允坚,一起剝皮案震驚了整個濱河市魂那,隨后出現的幾起案子,更是在濱河造成了極大的恐慌稠项,老刑警劉巖涯雅,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異展运,居然都是意外死亡活逆,警方通過查閱死者的電腦和手機精刷,發(fā)現死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔗候,“玉大人怒允,你說我怎么就攤上這事⌒庖#” “怎么了纫事?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長所灸。 經常有香客問我丽惶,道長,這世上最難降的妖魔是什么庆寺? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任蚊夫,我火速辦了婚禮,結果婚禮上懦尝,老公的妹妹穿的比我還像新娘知纷。我一直安慰自己,他們只是感情好陵霉,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布琅轧。 她就那樣靜靜地躺著,像睡著了一般踊挠。 火紅的嫁衣襯著肌膚如雪乍桂。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天效床,我揣著相機與錄音睹酌,去河邊找鬼。 笑死剩檀,一個胖子當著我的面吹牛憋沿,可吹牛的內容都是我干的。 我是一名探鬼主播沪猴,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼辐啄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了运嗜?” 一聲冷哼從身側響起壶辜,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎担租,沒想到半個月后砸民,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片九府。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖承璃,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情蚌本,我是刑警寧澤盔粹,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站程癌,受9級特大地震影響舷嗡,放射性物質發(fā)生泄漏。R本人自食惡果不足惜嵌莉,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一进萄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧锐峭,春花似錦中鼠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至椎扬,卻和暖如春惫搏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蚕涤。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工筐赔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人揖铜。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓茴丰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蛮位。 傳聞我的和親對象是個殘疾皇子较沪,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內容

  • HTML標簽解釋大全 一鳞绕、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,224評論 1 41
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案失仁? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 0.B/S結構 瀏覽器服務器模式,web瀏覽器是客戶端最主要的應用軟件.將客戶端使用web進行統(tǒng)一,系統(tǒng)功能實現集...
    liusong007閱讀 1,043評論 0 1
  • HTML需要掌握標簽 標簽(空格分隔): H5+CSS [TOC] 常用標簽 img 注意點 和H系列標簽/p標簽...
    袁俊亮技術博客閱讀 2,045評論 1 8
  • 原 Blog 鏈接:HTML基礎學習筆記 自學 html 基礎筆記 Web 前端簡單介紹 web 前端包含: pc...
    任凱閱讀 1,378評論 0 5