整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML的基本

          人在校生一枚,希望可以找到志同道合的小伙伴一起進步,不定期的更新自己的收獲,如果有大神的話可以指出我的不足,我用的是VS code軟件來寫代碼的

          什么是 HTML

          HTML 是個縮寫,全稱Hyper Text Markup Language,譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽.通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

          HTML的結構

          • html的后綴名有兩種 一種是.html,另一種是.htm (兩種并無區別)
          • 快捷創建基本結構的方法:方法一:可以在開頭打一個“!”號,方法二:打一個html,智能提示會出現html:5 選中即可。

          HTML的頭部

          在<hard>頭部標簽中你可以 插入腳本(scripts),樣式文件(CSS),以及各種meta信息。可以添加在頭部區域的元素有:<title>,<style>,<meta>,<link>等等

          • ? <title>定義網頁標題</title>
          • <meta>元素:描述了一些基本的元數據,元數據不顯示在頁面上,但會被瀏覽器解析,<meta>通常用于指定網頁的描述,關鍵詞,作者。


          注釋快捷鍵:CTRL+? (注釋是不被運行的,作用就是幫助程序員記東西)

           <!--這是一個注釋-->

          HTML屬性

          • 通用屬性:幾乎所有元素都可以使用的屬性,例如 id、name、style等
          • 私有屬性:某個一個/類元素所具備的屬性
          • 事件屬性:為某個元素綁定事件(DOM學習)
          • 自定義屬性:開發者為某個元素設置的屬性,一般都是在前端框架中使用
          • 參考介紹https://developer.mozilla.org/zh-CN/

          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>


          可能我寫的會有些不清楚,到后面有代碼的時候就會清楚了

          局一張圖

          上圖是京東的登錄頁面,這和我們接下來要學習的東西有關系。

          《踏上編程之路的必經之路之html篇六》中我們學習了table表格,今天我們要學習的這叫做form表單。


          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超文本標記語言

          第一節 什么是HTML超文本標記語言

          我們上網需要瀏覽器,瀏覽器的作用就是把服務器返回的源代碼,翻譯成我們可視的生動的頁面。它的作用是和VBA代碼一樣的,就要要把各種邏輯關系用代碼的形式表現出來。服務器返回返回的源代碼是什么語言呢,就是通常所說的,超文本標記語言。超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。

          1 超文本標記語言的作用

          什么是標記語言呢?顧名思義,它只能用于展示,展示我們所看到的網頁頁面。不是編程語言。為啥叫超文本呢,大家仔細看,這堆源代碼有什么特征呢,就是有很多<…>這樣的文本,一般而言,我們把<…>叫做標簽。我們先看看下面一段的源碼:

          <!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 " />

          截圖:

          網頁截圖:

          瀏覽器正是把上面的代碼翻譯成了我們上面的網頁。

          2 超文本標記語言的基本特征

          超文本語言中的標簽都是成對出現的,這也是這種語言的特征。例如:“<title>小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com</title>”。

          第一個<title>叫做開始標簽,第二個</title>多帶了個/叫結束標簽。標簽之間就是網頁的文本,例如這個例子,就是我們網頁標題的文本“小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com”。所以,標簽的作用就是,給文本打上標記,告訴瀏覽器,怎么顯示這個文本。例如本例,要求瀏覽器把“小游戲,4399小游戲,小游戲大全,雙人小游戲大全 - www.4399.com”顯示成網頁的標題。HTML文檔=文本+標簽,這就是所謂超文本。

          3 超文本標記語言的一個簡單實例

          在上面我講了什么是HTML語言,及其特征,下面我們通過一個實例進一步認識他:

          <html>

          <body>

          <h1>學習VBA語言</h1>

          <p>為了更好的掌握VBA的各個知識點,您可以參考我的第一套教程:VBA代碼解決方案</p>

          </body>

          </html>

          我們把上面的幾行代碼錄入到記事本中,保存成.html文件。HTML基礎學習.HTML

          然后正常雙擊大家這個文件,就會是一個瀏覽器文件了:

          本節知識點回向:

          什么是HTML語言?特征是什么?

          本節參考文件:HTML基礎學習.html

          我20多年的VBA實踐經驗,全部濃縮在下面的各個教程中,教程學習順序:

          【分享成果,隨喜正能量】修持好了內心,心平氣和,就不與瑣事較勁,不與挫折較勁,不與不愉較勁。生活也才順暢,人生自然福氣滿滿。 ??


          主站蜘蛛池模板: 日本一区二区在线播放| 精品无码综合一区二区三区| a级午夜毛片免费一区二区| 91视频一区二区| 无码精品人妻一区二区三区影院 | 亚洲综合无码一区二区| 一区二区不卡视频在线观看| 乱码人妻一区二区三区| 久久精品无码一区二区无码| 国产成人精品一区二区秒拍| 精品无码综合一区| 亚洲一区二区视频在线观看| 国产精品一区二区AV麻豆| 午夜视频一区二区| 亚洲AV无码一区二区三区鸳鸯影院| 色欲AV蜜臀一区二区三区| 久久国产视频一区| 亚洲国产一区国产亚洲| 亚洲AV无码一区二区三区系列 | 一区二区视频传媒有限公司| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 亚洲熟女综合色一区二区三区| 日韩爆乳一区二区无码| 91无码人妻精品一区二区三区L| 久久精品国产第一区二区三区 | 国产一区二区三区不卡在线观看 | 国产日韩精品一区二区三区| 国产日产久久高清欧美一区| 无码少妇A片一区二区三区| 在线免费观看一区二区三区| 国产午夜一区二区在线观看| 在线|一区二区三区四区| 又紧又大又爽精品一区二区| 亚洲免费一区二区| 亚洲av午夜福利精品一区| 亚洲AV无码一区二区三区久久精品| 国产精品日韩欧美一区二区三区| 国产一区二区三区视频在线观看| 蜜桃视频一区二区三区| 国产av一区二区精品久久凹凸| 久久精品综合一区二区三区|