人在校生一枚,希望可以找到志同道合的小伙伴一起進步,不定期的更新自己的收獲,如果有大神的話可以指出我的不足,我用的是VS code軟件來寫代碼的
HTML 是個縮寫,全稱Hyper Text Markup Language,譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽.通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。
在<hard>頭部標簽中你可以 插入腳本(scripts),樣式文件(CSS),以及各種meta信息。可以添加在頭部區域的元素有:<title>,<style>,<meta>,<link>等等
注釋快捷鍵:CTRL+? (注釋是不被運行的,作用就是幫助程序員記東西)
<!--這是一個注釋-->
HTML完整結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--頭部,js和css寫在這里面-->
</head>
<body>
<!--內容主體-->
</body>
</html>
可能我寫的會有些不清楚,到后面有代碼的時候就會清楚了
局一張圖
上圖是京東的登錄頁面,這和我們接下來要學習的東西有關系。
form表單就是專門用來實現用戶登錄、用戶注冊、信息收集之類的頁面的。
日常網購一般都要求我們先登錄,輸入用戶名和密碼,點擊登錄后才可以進行物品的購買,那我們就用form表單來實現一下登錄。
form表單中包含了input標簽,input標簽屬于單標簽。單標簽是相對于雙標簽來講的。以前的a標簽、p標簽、span標簽等,都屬于雙標簽,它們的特點是一對一對的,比如a標簽,要寫成<a></a>。比如p標簽,要寫成<p></p>,它們都是有一個開始,有一個結束。都是成雙入對的。
單標簽則沒有結束標簽,比如上面的input標簽,它就沒有</input>這樣的結束。單標簽還有我們之前學的img圖片標簽,br換行標簽等。
input標簽只能包含在form標簽中,也就是說只要有input出現的地方,必定會有一個form標簽包圍著它。
而上一篇中的tr和td標簽只能包含在table表格標簽中,它們是組合。不能分開單獨使用。
同樣的情況還有li標簽,只能包含在ul無序列表標簽,ol有序列表標簽中,dt標簽和dd標簽只能包含在dl標簽中。
上面代碼在瀏覽器中的效果:
這樣一個簡易的登錄頁面就做出來了,是不是很簡單啊,我們試著填寫用戶名和密碼來嘗試一下登錄。
你會發現,你輸入的密碼并不是明文的,也就是說你輸入的密碼會以黑點的形式呈現,這是為了安全,如果不這樣,你輸密碼的時候很可能會被你背后的人看到。
那這個是怎么實現的呢?其實你應該已經發現了,input標簽里面有個type屬性,type設置為password就是以密碼形式呈現。type設置為text就是以明文顯示,type設置為submit就是一個按鈕。
提交按鈕的input里面我們還設置了一個value屬性,這個屬性用來設置,按鈕的文字,我們這里設置的是登錄,為了加深理解,我們給它改為登入。
瀏覽器中就會相應地顯示為登入:
form表單中除了可以寫input外,還可以有select下拉選擇標簽、textarea文本域標簽、button按鈕標簽(這個按鈕和<input type="submit">都是按鈕,用的時候看你自己喜好)。
下面通過一個例子來了解上面的各種標簽的使用。
案例:添加一篇文章,要求填寫文章標題、文章分類、發表頻道、文章內容。
瀏覽器中的效果:
上述代碼中form標簽中有select標簽,這個的作用是產生一個下拉框,供用戶選擇。
select里面包含option標簽,這個就是具體可以選擇項。我們這里設置了三個:財經、教育、歷史。 同我們前面講的一樣,option必須包含在select里面,而select必須包含在form表單標簽中,它們是組合,不能打單獨使用。
在這個例子中,我們還是用到了單選。
紅框框住的就是我們設置的單選,具體對應代碼中的:
單選也是用的input標簽,只不過它的type是radio,還有一個要注意的地方就是name屬性,我們這里可以選擇的項是:新視覺、獵奇、雜說,它們三個的name屬性都設置為了:channel。只有設置name都一樣,才能單選,否則就成了多選了。
文章內容我們使用到了textarea文本域標簽,它和<iniput type="text">的區別是,textarea可以放更多的文字。
textarea標簽有兩個屬性需要說一下,cols代表的是列,rows代表的是行,cols設置的值越大,textarea的框越寬,rows的值設置的越大,textarea的框越高。我們來嘗試一下:
先把cols設置成60,textarea就會變寬。
rows設置為30,textarea就會變高 :
form表單中還可以設置多選,我們也來嘗試一下:
瀏覽器中的效果:
紅框框住的部分就是我們實現的多選,多選用的也是input標簽,type為checkbox
你可以自己動手嘗試一下
我們整體的需求都實現了,但是整個頁面看起來很不美觀,所以我們需要調整一下,我決定采用table表格來調整,把文章標題、請選擇分類、內容這些文字性的東西放到一列,input、select等標簽放在另一列里面,使整個頁面看起來更加整齊。
瀏覽器中的效果:
經過調整以后,看起來已經不那么丑了,在《做網站需要學習哪些知識》中,我們介紹過美化頁面需要用Css和JavaScript,光用html是不可能做到很美觀的。
在講完html后,我們就會講Css和JavaScript。
分享成果,隨喜正能量】喜歡感恩,順利就越來越多;喜歡助人,貴人就越來越多;喜歡抱怨,煩惱就越來越多;喜歡知足,快樂就越來越多;喜歡逃避,失敗就越來越多;喜歡分享,朋友就越來越多;喜歡生氣,疾病就越來越多;喜歡占便宜,貧窮就越來越多;喜歡施財,富貴就越來越多;喜歡享福,痛苦就越來越多;喜歡學習,智慧就越來越多。
《VBA信息獲取與處理》教程是我推出第六套教程,目前已經是第一版修訂了。這套教程定位于最高級,是學完初級,中級后的教程。這部教程給大家講解的內容有:跨應用程序信息獲得、隨機信息的利用、電子郵件的發送、VBA互聯網數據抓取、VBA延時操作,剪貼板應用、Split函數擴展、工作表信息與其他應用交互,FSO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數等等內容。程序文件通過32位和64位兩種OFFICE系統測試。是非常抽象的,更具研究的價值。
教程共兩冊,八十四講。今日的內容是專題八 VBA與HTML文檔,內容是:HTML超文本標記語言
我們上網需要瀏覽器,瀏覽器的作用就是把服務器返回的源代碼,翻譯成我們可視的生動的頁面。它的作用是和VBA代碼一樣的,就要要把各種邏輯關系用代碼的形式表現出來。服務器返回返回的源代碼是什么語言呢,就是通常所說的,超文本標記語言。超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。
什么是標記語言呢?顧名思義,它只能用于展示,展示我們所看到的網頁頁面。不是編程語言。為啥叫超文本呢,大家仔細看,這堆源代碼有什么特征呢,就是有很多<…>這樣的文本,一般而言,我們把<…>叫做標簽。我們先看看下面一段的源碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com</title>
<meta name="description" content="4399小游戲大全包含洛克王國,賽爾號,4399洛克王國,連連看 ,連連看小游戲大全,雙人小游戲大全,H5在線小游戲,4399賽爾號,4399奧拉星,4399奧比島,4399彈彈堂,4399單人小游戲,奧比島小游戲,造夢西游5等最新小游戲。" />
<meta name="keywords" content="小游戲,4399小游戲,在線小游戲,雙人小游戲,小游戲大全,雙人小游戲大全" />
<meta property="og:type" content="image"/>
<meta property="og:image" content="http://imga1.5054399.com/upload_pic/2015/7/10/4399_11174921955.jpg" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta property="qc:admins" content="5303563577643116375" />
<meta property="wb:webmaster" content="9a9751c8cd36bccb" />
<link rel="alternate" media="only screen and(max-width: 640px)" href="http://h.4399.com/"/>
<meta http-equiv="Cache-Control" content="no-transform " />
截圖:
網頁截圖:
瀏覽器正是把上面的代碼翻譯成了我們上面的網頁。
超文本語言中的標簽都是成對出現的,這也是這種語言的特征。例如:“<title>小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com</title>”。
第一個<title>叫做開始標簽,第二個</title>多帶了個/叫結束標簽。標簽之間就是網頁的文本,例如這個例子,就是我們網頁標題的文本“小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com”。所以,標簽的作用就是,給文本打上標記,告訴瀏覽器,怎么顯示這個文本。例如本例,要求瀏覽器把“小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com”顯示成網頁的標題。HTML文檔=文本+標簽,這就是所謂超文本。
在上面我講了什么是HTML語言,及其特征,下面我們通過一個實例進一步認識他:
<html>
<body>
<h1>學習VBA語言</h1>
<p>為了更好的掌握VBA的各個知識點,您可以參考我的第一套教程:VBA代碼解決方案</p>
</body>
</html>
我們把上面的幾行代碼錄入到記事本中,保存成.html文件。HTML基礎學習.HTML
然后正常雙擊大家這個文件,就會是一個瀏覽器文件了:
本節知識點回向:
什么是HTML語言?特征是什么?
本節參考文件:HTML基礎學習.html
我20多年的VBA實踐經驗,全部濃縮在下面的各個教程中,教程學習順序:
【分享成果,隨喜正能量】修持好了內心,心平氣和,就不與瑣事較勁,不與挫折較勁,不與不愉較勁。生活也才順暢,人生自然福氣滿滿。 ??
*請認真填寫需求信息,我們會在24小時內與您取得聯系。