HTML 的 tabindex 屬性開發過程中一般不會使用到,最近開發中有個需求兼顧富交互,便總結了一下。本篇文章同時收錄在我的【前端知識點】中,Github鏈接請點擊閱讀原文直達,歡迎 Star
兼容性:Safari不支持!
在我們日常使用網頁的過程中,可以通過鍵盤控制一些元素的聚焦,從而達到便捷訪問的目的
element 分為 focusable 和 非focusable ,如果使用了tabindex就可以改變相關的行為
在HTML中有6個元素默認支持聚焦:
以上的元素默認都可以使用 Tab 鍵,以及 JS focus() 方法聚焦
document.querySelector("a").focus();
使用 tab鍵 進行聚焦元素時,聚焦的順序等于元素在代碼中的出現先后順序,當我們進行富交互優化時,就需要用到 tabindex 這個屬性來幫助我們進行更好用戶體驗的優化了
①元素是否能聚焦:通過鍵盤這類輸入設備,或者通過 JS focus() 方法
②元素什么時候能聚焦:在用戶通過鍵盤與頁面交互時
通俗來說:就是當用戶使用鍵盤時,tabindex用來定位html元素,即使用tab鍵時焦點的順序。
tabindex理論上可以使用在幾乎所有元素上
tabindex 有三個值:0,-N(通常是-1),N(正值)
tabindex 決定聚焦順序
// HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
// HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
tabindex 決定是否聚焦
// HTML
<button type="button">未設置tabindex</button>
<button type="button" tabindex="-1">tabindex === -1</button>
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
tabindex 與JS編程聚焦
// HTML
<button type="button" @click="clickBtn()">點擊讓DIV聚焦</button>
<div id="FocusDiv" ref="FocusDiv" tabindex="-1">這是一個div</div>
// JS
clickBtn: function() {
document.getElementById('FocusDiv').focus();
}
針對自定義標簽進行富交互優化
針對特定節點禁止聚焦操作
復雜列表控制聚焦順序
HTML:htper text markup language超文本標記(標簽)語言
由各種標簽組成,用來制作網頁,告訴瀏覽器如何顯示頁面
w3c:world wide web consortium萬維網聯盟,制定web技術相關標準和規范的組織,HTML技術hi由w3c制定的標準
兩個版本:HTML4.0.1、HTML5.0-----通常H5
官網:http://www.W3shcool.com.cn
HTML文檔是以.html或.htm結尾
記事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等
使用步驟:
使用技巧:
常見的瀏覽器:IE瀏覽器微軟、chrome谷歌瀏覽器、fifirefox火狐、safari蘋果
瀏覽器的作用是讀取html文件,并以網頁的形式來顯示
瀏覽器不會直接顯示html標簽,而是使用標簽來解釋網頁的內容
一個完整的html標簽的組成:
<標簽名 屬性名="屬性值">內容</標簽名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽</title>
</head>
<body bgcolor="red" text="blue">
html從入門到精通!
</body>
</html>
12345678910
屬性值要用雙撇號括起來,一般用雙引號
根據標簽是否關閉,分為,關閉型和非關閉型
<html></html>
<head></head>
<title></title>
非關閉型:沒有結束標簽
<meta>
<br>
<h1>....<h6>
根據標簽是否獨占一行,分為塊級標簽和行級標簽
塊級標簽:顯示為塊狀,獨占一行
<h1>大家好</h1>
<hr>
行級標簽:在行內顯示,可與其他內容在同一行顯示
<span></span>
注釋在瀏覽器中不會顯示,是用來標注解釋html語句,但通過查看源代碼的方式可以看到
語法:
<--注釋內容-->
也稱為特殊字符,用于顯示一些特殊符號,如<>&空格等
語法:
<&實體字符的名稱>
在html文檔的第一行,使用<!DOCTYPE html>
聲明HTML文檔的類型用來告訴瀏覽器頁面的文檔嘞型,用來制定html版本的規范
目前基本上最常用的html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
12345678910
1.基本標簽
1.1 有序列表
ol:ordered listli:list item默認使用阿拉伯數字、從1開始標記,可以通過屬性進行修改
· type屬性:設置列表的符號標記、取值;數字1(默認)、字母(a或A)、羅馬數字(i或I) · start屬性:設置起始值,值必須是數字
1.2 無序列表
ul:unodered list
li:list item
默認情況下使用實心圓表作為符號標記,可以通過屬性進行修改
· type屬性:設置列表的符號標記、取值:disc實心圓(默認)、circle空心圓、square正方形、none不 顯示項目符號
1.3 定義列表
dl:definition list
dt:definition title
dd:definition description
1.4 水平線標簽
hr:horizontal
常用屬性:
· color:顏色
兩種方式:
顏色名稱:如red、green、blue、white、black、pink、orange等
16進制的RGB表示法:Red、Green、Blue用法:#RRGGBB 每種顏色的取值范值0-255,轉換為16 進制00-FF
如: #FF0000 紅色 #00FF00綠色 #0000FF藍色 #FFFFFF白色、#CCCCCC #FF7300桔色
· size:粗細,數值
· width寬度
兩種寫法:
? 像素:絕對值(固定值)
? 百分比:相對值,相對于水平線標簽所在父容器寬度的百分比
· align對齊
? 取值:center居中 left right
1.5圖像標簽
img:image
常見的圖片格式:.jpg .png .gif .bmp
常見的屬性:
· src:source指定圖片的路徑(來源),必選叁數
如果圖片與html源代碼在同一個文件夾中,可以直接在src中寫圖片名稱即可
習慣上,我們會將多個圖片與html代碼文檔分別放在同一個文件夾project中的不同目錄下,此時需要 在src中指定圖片的路徑為相對路徑
路徑的分類:
? · 相對路徑
? 表示: ./當前路徑
…/當前位置的上一級文件夾
? 提示:…/image
? · alt:當圖片無法顯示時顯示的提示信息
? · title:當鼠標放到圖片上時顯示的提示信息
? · width和 height:設置圖片的寬度和高度
默認圖片以原始尺寸顯示
? 如果只設置其中一個,則另一個會按比例縮放
? 如果同時設置寬和高,可能導致圖片變形
? 兩種寫法:
? 像素:絕對值(固定值)
? 百分比:相對值,相對于父容器的尺寸的百分比
2.其他標簽
為了更好語義化
3.頭部標簽
· meta定義網頁的摘要信息,如字符編碼,關鍵詞,描述,作者等
· title定義網頁的標題
· style定義內容css樣式
· link引用外部css樣式
· script定義或引用腳本
· base定義基礎路徑
默認以當前頁面文件所在的位置為相對路徑參照
4.標簽嵌套
一個標簽中嵌套另外一個標簽
標簽不能亂嵌套
瀏覽器渲染后顯示的頁面代碼與編碼時有所不同
chrome瀏覽器提供的開發工具:幫助開發人員查看和調試頁面的
如何打開:
· Elements:從瀏覽器的角度來看頁面,瀏覽器渲染頁面時內部的結構
· console:控制臺,顯示各種警告和錯誤信息
· network:查看網絡請求信息,瀏覽器向服務器請求了哪些資源,資源大小,
加載資源所消耗的時間
四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉到另外一個頁面,實現頁面之間導航
當鼠標移動到超鏈接文本或圖片時,鼠標箭頭會變成一只小手
超鏈接有三種類型:
普通鏈接/頁面間的鏈接,跳轉到另一個頁面 錨鏈接:鏈接到錨點(鏈接到同一個頁面的指定位置) 功能鏈接:實現特殊功能(發郵件,下載)
2.基本用法
使用 標簽來創建超鏈接
語法格式:
常用屬性:
href:鏈接地址或路徑,鏈接地址
world
鏈接文本或圖片
1 2 3 4 5 1 target:鏈接打開的位置,取值
路徑分類:
絕對路徑 以根開始的路徑
file:///D:/software/b.html https://www.baidu.com/img/bd_logo1.png
相對路徑 相對于當前頁面文件所在的路徑,不是以根開始的路徑 ./ 當前路徑 …/ 當前位置上一級目錄
3.錨鏈接
3.1簡介
點擊鏈接后跳轉到某一個頁面的指定位置(錨點anchor)
錨鏈接的分類:
頁面內的錨鏈接 頁面間的錨鏈接
3.2 頁面內的錨鏈接
步驟:
3.3 頁面間的錨鏈接
4.功能鏈接
5.URL
5.1 簡介
URL:Uniform Resource Locator 統一資源定位器,用來定位資源所在的位置,最常見的就是網址
5.2 組成
一個完整的URL由8個部分組成:
協議:prococol 如 http:超文本傳輸協議,用來訪問WEB網站Hyper text Transfer protocal https:更加安全的協議 SSL安全套接子層 ftp文件傳輸協議,用來訪問服務器上的文件,實現文件的上傳和下載File Transfer protocol file:文件協議,用來訪問本地文件 主機名hostname服務器地址或服務器Netbios名稱,如www.baidu.com ftp://10.255.254.254 端口:port位于主機名的后面,使用冒號進行分隔 不同的協議使用不同的端口,如http使用80端口,https使用的443端口,ftp使用20和21 如果使用的是默認端口,則端口可以省略 如果使用的不是默認端口,則必須指定端口http://59.49.32.213:7070/ 路徑:path目標文件所在的路徑結構,如:www.baidu.com/img/ 資源resource要訪問的目標文件,如bd_logo1.png 查詢字符串:query string 也稱為參數 在資源后面使用?開頭的一組名稱/值
鏈接文本
鏈接文本
https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male https://www.w3school.com.cn/html/html_quotation_elements.asp file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html http://www.sxgjpx.net/ ftp://10.255.254.253/
1
1
1 2 3
4 5
名稱和值之間以=分隔,多個之間用&分隔,如:name=tom&age=2&sex=male 錨點anchor,在資源后面使用#開頭的文本,如#6 身份認證authentication,指定身份信息,如:ftp://賬戶:密碼@ftp.bbshh010.com
五、表格
1.簡介
表格是一個規則的行列結構,每個表格是由若干行組成,每行由若干個單元格組成
table row column
2.基本結構
2.1 table標簽
用來定義表格
常用屬性:
border:表格邊框 默認為0 width/height:寬度/高度 bordercolor:邊框的顏色 align:對齊方式,取值:left(默認) center居中 right居右 bgcolor:背景顏色 background:背景圖片 cellspacing間距:單元格與單元格之間的距離 cellpadding邊距:單元格中的內容到邊界之間的距離
2.2 tr標簽
用來定義行:table row
常用屬性:
align:水平對齊 取值:left(默認) center right valign垂直對齊 取值:top center bottom bgcolor:背景顏色 background:背景圖片
2.3 td標簽
用來定義單元格,table data
常用屬性:align、valign、bgcolor、background
注意:表格必須是由行組成,行必須由單元格來組成,數據必須放到單元格中
3.合并單元格
合并單元格也稱為單元格的跨行跨列
兩個屬性:
rowspan 設置單元格所跨的行數 colspan 設置單元格所跨的列數
步驟:
六、表單
1.簡介
表單是一個包含若干個表單元素的區域,用于獲取瑣類型的用戶數據
表單元素是允許用戶在表單輸入信息的元素,如文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2.表單結構
2.1表單語法
1
2.2form標簽
用來定義表單,可以包含多個表單元素
常用屬性:
action:提交數據給誰處理,即處理數據的程序,默認為當前頁面 method:提交數據的方式或方法,取值:get(默認),post get和post的區別: get:以查詢字符串的形式提交,在地址欄中能看到,長度有限制,不安全 post以表單數據組的形式進行提交,在地址欄中看不到,長度無限制,安全 enctype(encode type)編碼類型:提交數據的編碼,取值:application/X-www-form-urlencoded(默 認)、multipart/form-data(文件上傳)
3.表單元素
大多數的表單元素都是使用 標簽來定義的,通過設置屬性type來定義不同的表單元素
1
3.1單行文本框
常用屬性:
·name名稱,很重要,如果沒有定義name屬性,則該表單元素的數據是無法提交的
·value初始值
·size顯示寬度
·maxlength:大字符數,默認是沒有限制
·readonly只讀:readonly=“readonly”,可簡寫readonly,即只寫屬性名
·disabled禁用:disabled=“disabled”, 可簡寫disabled完全禁用
表單元素被提交的兩個條件,1.有name屬性2.非disabled
3.2 單選按鈕
常用屬性:
·name名稱:多個radio的name屬性必須相同,才能實現互斥(單選)
·value值
·checked:是否被選中,兩種狀態,選中,未選中 checked=“checked” 簡寫 checked
3.3 復選框
常用屬性與單選按鈕radio類似
3.4 文件選擇器
常用屬性:
·name:名稱
·accept設置可選擇的文件類型,用來限制上傳的文件類型
使用MIME格式字符串對資源類型進行限制
常見的MIME類型:
·純文本:text/plain text/xml text/html
· 圖像:image/png image/jpeg image/gif
4.特殊表單元素
4.1下拉列表
select常用屬性:
·name名稱
·size行數,同時顯示多個選項
·multiple允許同時選擇多個
option常用屬性:
·value選項值
·selected設置默認選中項
optgroup常用屬性:
·label分組的標簽
4.2文本域
·name名稱
·rows行數
·cols列數
5、其他標簽
5.1 label標簽
為表單元素提供標簽,當選中label標簽中的文本內容時會自動將光標切換到與之相關聯的表單元素。
常用屬性:
·for必須將該屬性值設置為與相關聯的表單元素的Id屬性值相同。
注:幾乎所有HTML標簽都具有id屬性,且id值必須唯一。
5.2 button標簽
也表示按鈕,與input按鈕類似
語法:
1按鈕文字或圖像
常用屬性:
·type按鈕的類型,取值: submit(默認)、reset、button
5.3 fieldset和legend標簽
fieldset標簽,對表單元素進行分組
legend標簽,對分組添加標題
七、內嵌框架
1、簡介
使用iframe可以在一個頁面中引用另一個頁面,實現復用、靈活
2、基本用法
語法:
1
常用屬性:
· src:引用的頁面
· width/height寬度/高度 ,像素或百分比
· frameborder是否顯示邊框,取值:1(yes) 0(no)—默認
· scrolling是否顯示滾動條,取值:yes no auto
· name屬性 為框架定義名稱
3、在框架中打開鏈接
1
2
3鏈接的文本或圖像
八、HTML5簡介
1、發展
W3C于1992年12月發布了HTML4.0.1標準
W3C于2014年10月發布了HTML5標準
2、特點
· 取消了過時的標簽,如font、center等,它們僅具有展示外觀的功能
· 增加了一些更具有語義化的標簽,如header、footer、aside等
· 增加了一些新功能標簽,如canvas、audio、video
· 增加了一些表單控件,如email、date、time、url、search等
· 可以直接在瀏覽器中繪畫(canvas),無需flash
· 增加了本地存儲的支持
3、兼容性
http://caniuse.com
提供了各種瀏覽器版本對HTML5和CSS規范的支持度
九、HTML5新增內容
1、結構相關的標簽
用來進行頁面結構布局,本身無任何特殊樣式,需要使用CSS進行樣式設置
· article定義一個獨立的內容,完整的文章
· section定義文檔的章節、段落
· header文章的頭部、頁眉、標題
· footer文章的底部、頁腳、標注
· aside定義側邊欄
· figure圖片區域
· figcaption為圖片區域定義標題
· nav定義導航菜單
結構標簽只是表明各部分的角色,并無實際的外觀樣式,與普通div相同
2、語義相關的標簽
2.1 mark標簽
標注,用來突出顯示文本,默認添加黃色背景
2.2 time標簽
定義日期和時間,便于搜索引擎智能查找
2.3 details和 summary標簽
默認顯示summary中的內容,點擊后顯示details中的內容
注:并不是所有的瀏覽器都兼容,chrome、opera支持、Firefox、IE瀏覽器不支持
2.4 meter標簽
計數儀,表示度量
常用屬性:
· max定義大值,默認為1
· min定義小值,默認為0
· value定義當前值
· high定義限定為高的值
· low定義限定為低的值
· optimum定義佳值
規則:
當value大于high時為綠色
當value在low與high之間時為黃色
當value小于low時為紅色
當value小于low時為綠色
當value在low與high之間時為黃色
當value大于high時為紅色
2.5 progress標簽
進度條,表示運行中的進度
常用屬性:
· value定義當前值
· max定義完成的值
3.表單相關
3.1 新增表單元素
新增以下type類型:
· email接收郵箱
· url接收URL
· tel接收電話號碼,目前僅在移動設備上有效
· search搜索文框
· number/range接收數字/數字滑塊,包含min,max,step屬性
· date/month/week/time/datetime日期時間選擇器,兼容性不好
· color顏色拾取
作用:
· 具有格式校驗的功能
· 可以與移動設備的鍵盤相關聯
3.2新增表單屬性
form標簽的屬性:
· autocomplete是否啟動表單的自動完成功能, 取值:on(默認)、o?
· novalidate提交表單時不進行校驗,默認會進行表單校驗
3.3 新增表單元素的屬性
新增表單元素屬性:input/select/textarea等
· placeholder提示文字
· required是否必填
· autocomplete是否啟用該表單元素的自動完成功能
· autofocus設置初始焦點元素
· pattern使用正則表達式(RegExp后面會講解),進行數據校驗
· list使文本元素具有下拉列表的功能,需要配合datalist和option標簽一起使用
· form可以將表單元素寫在form標簽外面,然后通過該屬性關聯指定的表單
4、多媒體標簽
4.1audio標簽
在頁面中插入音頻,不同的瀏覽器對音頻格式的支持不一樣
audio常用屬性:
· src音頻文件的來源
· controls是否顯示控制面板,默認不顯示
· autoplay是否自動播放,默認不自動播放
· loop是否循環播放
· muted是否靜音
· preload是否預加載,取值:none不預加載、auto預加載(默認)、metadata只加載元數據
如果設置了autoplay屬性,則該屬性無效
可以結合source標簽使用,指定多個音頻文,瀏覽器會檢測并使用第一個可用的音頻文件
4.2 video標簽
在頁面中插入視頻,不同的瀏覽器對視頻格式的支持不一樣
用法與audio標簽基本相同,增加屬性:
· widht/height視頻播放器的寬度/高度
· poster在視頻加載前顯示的圖片
<html>
<body>
<tiele>HTML技術</tiele>
</body>
<body>
大家好,歡迎學習html技術!
</body>
</html>1234567
效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-h271e4v6-1593240920352)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例1.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽</title>
</head>
<body text="blue">
標簽的組成
<br>
html從入門到精通!
<hr>
<h1>標簽的分類</h1>
<hr>
<h2>標簽的分類</h2>
<hr>
<h6>標簽的分類</h6>
<hr>
<span>哈哈</span>嘿嘿
</body>
</html>1234567891011121314151617181920212223
效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jx6zJE1P-1593240920354)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例2.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
圖書:<<HTML從入門到精通<<
<hr>
北京 上海 廣州
<hr>
在HTML中用<表示<小于號
<hr>
“HTML語言” 或 &qout;HTML語言&qout;
<hr>
版權所有? 2000-2020 高教培訓
<hr>
×關閉符號
</body>
</html>123456789101112131415161718192021222324
效果
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nuFLl3hm-1593240920355)(C:\Users\lenovo\Desktop\新建文件夾\靜態網頁2\案例\result\案例3.png)]
(剩下的下期出)
原文鏈接:https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html
作者:WanXuang
出處:從CSDN
TML即超文本標記語言,是目前應用最為廣泛的語言之一,是組成一個網頁的主要語言。在現今這個HTML5華麗麗地占領了整個互聯網的時候,如果想要通過網頁抓住瀏覽者的眼球光靠因循守舊是不行的,程序猿們需要掌握一些必須知道的HTML常用代碼,因為只有熟悉掌握了常用的HTML代碼,程序猿們在編寫網頁的時候才可以做到流暢美觀,用細膩的思維和創意的細節效果打動并留住網頁瀏覽者。
html+css代碼
文本設置
1、font-size: 字號參數
2、font-style: 字體格式
3、font-weight: 字體粗細
4、顏色屬性
color: 參數
注意使用網頁安全色
超鏈接設置
text-decoration: 參數
主要用途是改變瀏覽器顯示文字鏈接時的下劃線。
參數取值范圍:
underline:為文字加下劃線
overline:為文字加上劃線
line-through:為文字加刪除線
blink:使文字閃爍
none:不顯示上述任何效果
背景
1、背景顏色
background-color: 參數
2、背景圖片
background-image: url(URL)
URL就是背景圖片的存放路徑,none表示無。
3、背景圖片重復
background-repeat: 參數
參數取值范圍 :
no-repeat:不重復平鋪背景圖片
repeat-x:使圖片只在水平方向上平鋪
repeat-y:使圖片只在垂直方向上平鋪
如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。
4、背景圖片固定
背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時轉移瀏覽者的注意力,一般都設為固定
background-attachment: 參數
參數取值范圍:
fixed:網頁滾動時,背景圖片相對于瀏覽器的窗口而言,固定不動
scroll:網頁滾動時,背景圖片相對于瀏覽器的窗口而言,一起滾動
區塊
1、單詞間距
word-spacing: 間隔距離
2、字母間距
letter-spacing: 字母間距
3、文本對齊
text-align: 參數
參數的取值:
left:左對齊
right:右對齊
center:居中對齊
justify:相對左右對齊
4、垂直對齊
vertical-align: 參數
top:頂對齊
bottom:底對齊
text-top:相對文本頂對齊
text-bottom:相對文本底對齊
baseline:基準線對齊
middle:中心對齊
sub:以下標的形式顯示
super:以上標的形式顯示
5、文本縮進
text-indent: 縮進距離
12px相當于一個文字距離
6、空格
white-space: 參數
normal 正常
pre 保留
nowrap 不換行
7、顯示樣式
display: 參數
參數取值范圍:
block:塊級元素,在對象前后都換行
inline:在對象前后都不換行
list-item:在對象前后都換行,增加了項目符號
none:無顯示
方框
1、height 高度
2、width 寬度
3、padding 內邊距
4、margin 外邊距
5、float(浮動):可以讓塊級元素在一行中排列,例如橫向菜單。
6、clear 清除浮動
邊框
1、樣式
border style 參數
邊框樣式的參數:
none:無邊框
dotted:邊框為點線
dashed:邊框為長短線
solid:邊框為實線
double:邊框為雙線
2、寬度
border width 參數
3、顏色
border color 參數
列表
list-style-type 列表樣式
不同瀏覽器的列表符可能不相同,可能會影響到網頁,所以網頁中的列表大多都是由背景圖片顯示。
控制用戶界面的樣式
鼠標
cursor:鼠標形狀參數
CSS鼠標形狀參數表:
鼠標形狀:CSS代碼
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
style="cursor:text" 文本形
style="cursor:wait" 沙漏形
style="cursor:move" 十字箭頭形:
style="cursor:help" 問號形
style="cursor:e-resize" 右箭頭形
style="cursor:n-resize" 上箭頭形
style="cursor:nw-resize" 左上箭頭形
style="cursor:w-resize" 左箭頭形
style="cursor:s-resize" 下箭頭形
style="cursor:se-resize" 右下箭頭形
style="cursor:sw-resize" 左下箭頭形
HTML常用代碼之:結構性定義
文件類型<HTML></HTML> (放在檔案的開頭與結尾)
文件主題<TITLE></TITLE> (必須放在「文頭」區塊內)
文頭<HEAD></HEAD> (描述性資料,像是「主題」)
文體<BODY></BODY> (文件本體)
標題<H?></H?> (從1到6,有六層選擇)
標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
區分<DIV></DIV>
區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引文區塊<BLOCKQUOTE></BLOCKQUOTE> (通常會內縮)
強調<EM></EM> (通常會以斜體顯示)
特別強調<STRONG></STRONG> (通常會以加粗顯示)
引文<CITE></CITE> (通常會以斜體顯示)
碼<CODE></CODE> (顯示原始碼之用)
樣本<SAMP></SAMP>
鍵盤輸入<KBD></KBD>
變數<VAR></VAR>
定義<DFN></DFN> (有些瀏覽器不提供)
地址 <ADDRESS></ADDRESS>
大字<BIG></BIG>
小字<SMALL></SMALL>
與外觀相關的標簽(作者自訂的表現方式)
加粗<B></B>
斜體<I></I>
底線<U></U> (尚有些瀏覽器不提供)
刪除線<S></S> (尚有些瀏覽器不提供)
下標<SUB></SUB>
上標<SUP></SUP>
打字機體<TT></TT> (用單空格字型顯示)
預定格式<PRE></PRE> (保留文件中空格的大小)
預定格式的寬度<PRE WIDTH=?></PRE>(以字元計算)
向中看齊<CENTER></CENTER> (文字與圖片都可以)
閃耀<BLINK></BLINK> (有史以來最被嘲弄的標簽)
字體大小 <FONTSIZE=?></FONT>(從1到7)
改變字體大小 <FONTSIZE=+|-?></FONT>
基本字體大小 <BASEFONTSIZE=?> (從1到7; 內定為3)
字體顏色 <FONTCOLOR="#$$"></FONT>($$為顏色代碼)
HTML常用代碼之:修改頁面的實用性HTML代碼
貼圖:<img src="圖片地址">
加入連接:<a href="所要連接的相關地址">寫上你想寫的字</a>
在新窗口打開連接:<a href="相關地址" target="_blank">寫上要寫的字</a>
移動字體(走馬燈):<marquee>寫上你想寫的字</marquee>
字體加粗:<b>寫上你想寫的字</b>
字體斜體:<i>寫上你想寫的字</i>
字體下劃線: <u>寫上你想寫的字</u>
字體刪除線: <s>寫上你想寫的字</s>
字體加大: <big>寫上你想寫的字</big>
字體控制大小:<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大,h5最小)
更改字體顏色:<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間
消除連接的下劃線:<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>
貼音樂:<embed src="音樂地址" width="寬度" height="高度" autostart=false>
貼flash: <embed src="flash地址" width="寬度" height="高度">
貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>
換行:<br>
段落:<p>段落</p>
原始文字樣式:<pre>正文</pre>
換帖子背景:<body background="背景圖片地址">
固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" body bgproperties=fixed>
定制帖子背景顏色:<body bgcolor="#value">(value值見10)
帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>
貼網頁:<iframe. src="相關地址" width="寬度" height="高度"></iframe>
HTML常用代碼之:常常會遇到的問題
點擊關閉窗口
<a href="javascript.:top.window.close();">點擊關閉窗口</a>!
請問如何去掉主頁右面的滾動條?
<body scroll="no">
<body style="overflow-y:hidden">
如何做到讓一個網頁自動關閉.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>
如何在不刷新頁面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為 紅色</button>
請問如何讓網頁自動刷新?
在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新,你可以更改為任意值。
如何讓頁面自動刷新?
方法一,用refresh
HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新時間
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
方法二,使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何讓超鏈接沒有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼:
<style. type="text/css"> <!--
a { text-decoration: none}
--> </style>
請問如何去掉IE的上下滾動條?
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
怎樣才能把RealPlayer文件在網頁做一個試聽連接?
<embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>
如何用html實現瀏覽器上后退按鈕的功能?
<a href="java script.:history.go(-1)">點擊后退</a>
或者
<script> history.back() </SCRIPT>
HTML常用代碼之:你不一定知道的技巧
ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵
<table borderncontextmenu=return(false)><td>no</table> 可用于Table
<body nselectstart="return false"> 取消選取、防止復制
onpaste="return false" 不準粘貼
oncopy="return false;" ncut="return false;" 防止復制
<link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標
<link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標
<inputstyle="ime-mode:disabled"> 關閉輸入法
永遠都會帶著框架
<script. language="JavaScript"><!--
if (window==top)top.location.href="frames.htm"; //frames.htm為框架網頁
// --></script>
防止被人frame.
<SCRIPT. LANGUAGE=JAVASCRIPT><!--
if (top.location !=self.location)top.location=self.location;
// --></SCRIPT>
網頁將不能被另存為
<noscript><iframe.src=*.html></iframe></noscript>
查看網頁源代碼
<input type=button value=查看網頁源代碼
onclick="window.location="view-source:"+"http://www.w3cschool.cn"">
刪除時確認
<a href="javascript:if(confirm("確實要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>
屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!");//可以換成ALT CTRL
}
document.onkeydown=look;
</script>
網頁不會被緩存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires"CONTENT="0">
怎樣讓表單沒有凹凸感?
<input type=text style="border:1 solid #000000">
<input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>
不要滾動條?
讓豎條沒有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
讓橫條沒有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
兩個都去掉?更簡單了
<body scroll="no">
</body>
怎樣去掉圖片鏈接點擊后,圖片周圍的虛線?
<a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>
電子郵件處理提交表單
<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>
在打開的子窗口刷新父窗口的代碼里如何寫?
window.opener.location.reload()
如何設定打開頁面的大小
<body nload="top.resizeTo(300,200);">
打開頁面的位置<bodynload="top.moveBy(300,200);">
在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
檢查一段字符串是否全由數字組成
<script. language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
獲得一個窗口的大小
document.body.clientWidth; document.body.clientHeight
怎么判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");
TEXTAREA自適應文字行數的多少
<textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>
日期減去天數等于第二個日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上錯誤處理
var a=new Date(dd)
a=a.valueOf()
a=a - dadd * 24 * 60 * 60 * 1000
a=new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>
選擇了哪一個Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio"value="style" checked>Style.
<INPUT name="radio1" type="radio"value="barcode">Barcode
<INPUT type="button" value="check"nclick="checkme()">
</BODY></HTML>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。