HTML 是什么,?htyper text markup language 即超文本標(biāo)記語言 超文本: 就是指頁面內(nèi)可以包含圖片、鏈接,,甚至音樂,、程序等非文字元素。 標(biāo)記語言: 標(biāo)記(標(biāo)簽)構(gòu)成的語言.
網(wǎng)頁的分類: 網(wǎng)頁==HTML文檔,,由瀏覽器解析,,用來展示的 靜態(tài)網(wǎng)頁:靜態(tài)的資源,如xxx.html 動(dòng)態(tài)網(wǎng)頁:html代碼是由某種開發(fā)語言根據(jù)用戶請(qǐng)求動(dòng)態(tài)生成的
html文檔樹形結(jié)構(gòu)圖 什么是標(biāo)簽:
標(biāo)簽的屬性:
<!DOCTYPE html>標(biāo)簽 在W3C標(biāo)準(zhǔn)出臺(tái)以前,,瀏覽器在對(duì)頁面的渲染上沒有統(tǒng)一規(guī)范,,產(chǎn)生了差異(Quirks mode或者稱為Compatibility Mode); 由于W3C標(biāo)準(zhǔn)的推出,,瀏覽器渲染頁面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱為Strict mode也有叫做Standarsmode),,這就是二者最簡(jiǎn)單的區(qū)別。
這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用,,但是如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認(rèn)就是BackCompat 如果你的頁面添加了<!DOCTYPE html>,,那么就等同于開啟了標(biāo)準(zhǔn)模式
head標(biāo)簽:meta標(biāo)簽 共有兩個(gè)屬性,,它們分別是name屬性和http-equiv屬性,。1.name 屬性主要用于描述網(wǎng)頁,,與之對(duì)應(yīng)的屬性值為content. content中的內(nèi)容:主要是便于搜索引擎機(jī)器人查找信息和分類信息用的,。
2.http-equiv 相當(dāng)于http的文件頭作用,,它可以向?yàn)g覽器傳回一些有用的信息,。以幫助正確和精確地顯示網(wǎng)頁內(nèi)容,。 與之對(duì)應(yīng)的屬性值為content,content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值??!
body標(biāo)簽: 一: 基本標(biāo)簽 <hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題. <p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白. <b> <strong>: 加粗標(biāo)簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標(biāo) 和 下角表. <br>:換行. <hr>:水平線 可以通過border設(shè)置顏色屬性 <div><span> 塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
block(塊)元素的特點(diǎn) ① 總是在新行上開始,; ② 高度,,行高以及外邊距和內(nèi)邊距都可控制; ③ 寬度缺省是它的容器的100%,,除非設(shè)定一個(gè)寬度,。 ④ 它可以容納內(nèi)聯(lián)元素和其他塊元素
inline元素的特點(diǎn) !!! ① 和其他元素都在一行上; ② 高,,行高及外邊距和內(nèi)邊距不可改變,; ③ 寬度就是它的文字或圖片的寬度,不可改變 ④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素 ⑤ 設(shè)置margin 只有左右margin有效,,上下無效,。 ⑥ 設(shè)置padding 只有左右padding有效,上下則無效,。注意元素范圍是增大了,,但是對(duì)元素周圍的內(nèi)容是沒影響的。
特殊字符: < > " © ®
二:圖形標(biāo)簽: <img> : src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時(shí)的提示!. title: 鼠標(biāo)懸浮時(shí)的提示信息. width: 圖片的寬 height: 圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)
三 超鏈接標(biāo)簽(錨標(biāo)簽)<a>: href:要連接的資源路徑 格式如下: target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容. name: 定義一個(gè)頁面的書簽( id屬性也適用! ). 用于跳轉(zhuǎn) href : #書簽名稱. 錨標(biāo)簽: <a href="#abc">定位第一章</a> <div id='abc'>我是第一章</abc> <div id='efg'>我是第一章</abc> 或者: <div name='abc'>我是第一章</abc> <div name='efg'>我是第一章</abc>
四 列表標(biāo)簽: <ul>: 無序列表 <ol>: 有序列表 <li>:列表中的每一項(xiàng). <dl> 定義列表 <dt> 列表標(biāo)題 <dd> 列表項(xiàng) <dl> <dt>定義:</dt> <dd>內(nèi)容</dd> </dl>
五 表格標(biāo)簽: <table>: border: 表格邊框. cellpadding: 內(nèi)邊距 cellspacing: 外邊距. width: 像素 百分比.(最好通過css來設(shè)置長(zhǎng)寬) rowspan: 單元格豎跨多少行! colspan: 單元格橫跨多少列!(即合并單元格)
demo
六 表單標(biāo)簽<form>: 表單用于向服務(wù)器傳輸數(shù)據(jù),。 表單能夠包含 input 元素,,比如文本字段、復(fù)選框,、單選框,、提交按鈕等等。 表單還可以包含textarea,、select,、fieldset和 label 元素。
1.表單屬性 HTML表單用于接收不同類型的用戶輸入,,用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互,。 action: 表單提交到哪. 一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過來的數(shù)據(jù)(即表單元素值)作相應(yīng)處理,。 method: 表單的提交方式 post/get 默認(rèn)取值 就是 get(信封)
2.表單元素 <input> type: 可選屬性 text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) file 提交文件:form表單需要加上屬性enctype="multipart/form-data" name: 表單提交項(xiàng)的鍵. 注意和id 屬性的區(qū)別:name屬性是和服務(wù)器通信時(shí)使用的名稱;而id屬性是瀏覽器端使用的名稱,, 該屬性主要是為了方便客戶端編程,,而在css和javascript中使用的。 value: 表單提交項(xiàng)的值. 對(duì)于不同的輸入類型,,value 屬性的用法也不同: type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入字段的初始值 type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值 checked: radio 和 checkbox 默認(rèn)被選中 readonly: 只讀. text 和 password disabled: 對(duì)所有input標(biāo)簽都有效果.
demo
<select> 下拉選標(biāo)簽屬性: name: 下拉列表的名稱 size: 選項(xiàng)個(gè)數(shù) multiple: multiple value: 表單提交項(xiàng)的值. selected: selected下拉選默認(rèn)被選中 <option> 下拉選中的每一項(xiàng) 屬性 <optgroup>為每一項(xiàng)加上分組
demo
demo效果:
<textarea> 文本域 name: 表單提交項(xiàng)的鍵. cols: 文本域默認(rèn)有多少列 rows: 文本域默認(rèn)有多少行 <textarea rows="4" cols="20"> 在w3school,,你可以找到你所需要的所有的網(wǎng)站建設(shè)教程,。 </textarea>
<label> 如果您在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件,。就是說,, 當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上
demo
<fieldset> 組合表單中的相關(guān)元素:
demo
|
|