首先搞清楚HTML的一些基礎(chǔ)知識(shí)
一、什么是 HTML?
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。 HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) HTML 不是一種編程語(yǔ)言,而是一種標(biāo)記語(yǔ)言 (markup language) 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag) HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
二、HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。 HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞,比如 HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的,比如和 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽,第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽 開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
三、HTML 文檔 = 網(wǎng)頁(yè)
HTML 文檔描述網(wǎng)頁(yè) HTML 文檔包含 HTML 標(biāo)簽和純文本 HTML 文檔也被稱為網(wǎng)頁(yè) Web 瀏覽器的作用是讀取 HTML 文檔,并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示HTML標(biāo)簽,而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。 好了,廢話不多說(shuō),先來(lái)看一個(gè)例子,打開(kāi)記事本輸入以下字段,保存為html格式:
圖片1.png (26.75 KB, 下載次數(shù): 889)
下載附件
2020-2-22 14:55 上傳
HTML中常用標(biāo)簽的介紹 1)HTML 標(biāo)題(Heading)是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的,如:<h1>這是標(biāo)題1</h1> 2)HTML 段落是通過(guò) <p> 標(biāo)簽進(jìn)行定義的。 3)HTML 鏈接是通過(guò) <a> 標(biāo)簽進(jìn)行定義的,如 <ahref="https://www.dota2.com.cn/index.htm">DOTA2官網(wǎng)</a> 4)HTML 圖像是通過(guò) <img> 標(biāo)簽進(jìn)行定義的,如 <img src="w3school.jpg"width="104" height="142"/> 5)<font> 規(guī)定文本的字體、字體尺寸、字體顏色:<font size="3" color="red">This is sometext!</font> 6)如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行(新行),請(qǐng)使用 <br /> 標(biāo)簽,<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒(méi)有任何意義,因此它沒(méi)有結(jié)束標(biāo)簽 7)表格由 <table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行(由 <tr> 標(biāo)簽定義),每行被分割為若干單元格(由 <td> 標(biāo)簽定義)。字母 td 指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 8)注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋 9)HTML中有兩個(gè)分組標(biāo)簽,可以通過(guò)<div> 和 <span> 將 HTML 元素組合起來(lái)。HTML <div> 元素是塊級(jí)元素,它是可用于組合其他 HTML 元素的容器;<div>元素沒(méi)有特定的含義。除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行;如果與 CSS 一同使用,<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性;<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table>元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。 10)HTML <span> 元素是內(nèi)聯(lián)元素,可用作文本的容器,<span> 元素也沒(méi)有特定的含義,當(dāng)與CSS 一同使用時(shí),<span> 元素可用于為部分文本設(shè)置樣式屬性。 11)<script> 標(biāo)簽用于定義客戶端腳本,比如JavaScript。script 元素既可包含腳本語(yǔ)句,也可通過(guò) src 屬性指向外部腳本文件。
了解了這么多,來(lái)個(gè)實(shí)例看看。這里隨意編寫(xiě)一個(gè)HTML網(wǎng)頁(yè),大家可以參考。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>selenuim彈窗</title> </head> <body> <divalign="center"> <h4>一起測(cè)試吧</h4> <input type="button"value="帶輸入框的彈窗"/> <span id="textSpan"></span> <div> <font color="red" size="6"> <p>DOTA是什么: <a href="https://www.dota2.com.cn/index.htm">DOTA2官網(wǎng)</a> <a href="https://www.dota2.com.cn/download/">下載游戲</a> </p> <p>這里的游戲很好玩,里面有吃雞哦: <ahref="https://store.steampowered.com/">STEAM</a> </p> </div> </body> <script> function jianjian(){ document.getElementById("textSpan").innerHTML=""; con = prompt("輸入1為OK,輸入2為false"); if(con==1){ document.getElementById("textSpan").innerHTML="<fontstyle='color: green;'>OK</font>"; }else if(con==2){ document.getElementById("textSpan").innerHTML="<fontstyle='color: green;'>都說(shuō)了false還輸入啊</font>"; }else{ document.getElementById("textSpan").innerHTML="<fontstyle='color: red;'>您沒(méi)有按要求輸入,請(qǐng)重新輸入</font>"; } } </script> </html>
|