1. 程式人生 > >小白學習前端---第二天 HTML的基本屬性————1

小白學習前端---第二天 HTML的基本屬性————1

一.HTML的屬性

1.1基本屬性

1.1.1三個基本屬性

class        定義類規則或者樣式規則

id         定義元素的唯一標識

stype     定義元素的樣式宣告

1.1.2不含三個基本屬性的元素

html、head    文件和頭部資訊基本結構

title      網頁標題

base       網頁的基準資訊

meta      網頁元資訊

param      元素引數資訊

stype、script   網頁的指令碼資訊和樣式

1.2語言屬性

1.2.1兩個屬性

lang      定義元素的語言程式碼或者編碼

dir      定義文字的方向

1.2.2不含語言屬性的元素

iframe、frameset、frame      網頁框架架構

br                 換行標識

hr                 結構裝飾線

base               網頁基準資訊

param               元素引數資訊

script                 網頁的指令碼

列子:

<html dir="rtl" xml:lang="zh-CN">
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8"
/> <title>標題在head標籤中</title> </head> <body id="myid" lang="zh-CN"> <h1>大標題</h1> <p><big>真香!!!</big></p> <p>真香</p> </body> </html>

效果:

1.3鍵盤屬性

 accesskey      定義訪問某一個元素的快捷鍵

 tabindex       定義tab鍵的索引編號

列子:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
        <title>tab鍵測試</title>
    </head>
        <from id="from1" name="from1" method="post" action="">
            <!--放在表格裡-->
            <p><a  tabindex="1">輸入你的賬號<input type="text" name="text1" id="text1"/></a></p>
            <p>輸入你的密碼<input type="password" name="password1" id="password1"/></p>
            <p><a tabindex="2">你是一個有夢想的人嗎? 是的<input name="checkbox1" type="checkbox"  id="checkbox1" value="1"/></a>
                <a tabindex="3">怎麼會不是呢?<input name="checkbox2" type="checkbox" id="checkbox2" value="2"/></a>
            </p>
            <p>你是小天才嗎?
                <input name="button1" type="radio" value="1"/>不是
                <input name="button1" type="radio" value="1"/>第二個不是
            </p>
        </from>
</html>

 效果:

 現在他的tab鍵的索引是按照你定義的順序來進行的

1.4內容屬性

 1.4.1五個內容屬性

 alt         定義元素的替換文字

 title       定義元素的提示文字

longdese      定義元素包含的內容的大段描述資訊

cite        定義元素引用的資訊

datetime     定義元素包含內容的時間

 列子:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8"/>
        <title>內容屬性</title>
    </head>
    <body>
        <p><a title="當你的滑鼠移動到這個元素上面的時候就會出現一個提示文字">把滑鼠移動到這裡</a></p>
    </body>
</html>

效果:

1.4.2title屬性不能運用的元素

html head title base basefont meta param script這幾個屬性不能使用title屬性