整合營銷服務商

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

          免費咨詢熱線:

          「HTML4」HTML入門

          1. 標簽:又稱元素,是HTML的基本組成單位雙標簽(絕大多數都是雙標簽):<標簽名>標簽體</標簽名>第一個標簽叫起始標簽,第二個標簽叫結束標簽例:<marquee>尚硅谷,讓天下沒有難學的技術!</marquee>單標簽:<標簽名/>/可以省略例:<input>
          2. 標簽名不區分大小寫,但推薦小寫,因為小寫更規范
          3. 標簽之間的關系:并列關系、嵌套關系,可以使用 tab 鍵進行縮進
          4. 1
            2
            3
            4
            5
            <marquee>
            尚硅谷,讓天下沒有難學的技術!
            <input>
            </marquee>
            <input>

          標簽屬性

          1. 用于給標簽提供附加信息
          2. 可以寫在起始標簽或單標簽中,形式如下:<標簽名 屬性名="屬性值" 屬性名="屬性值">
          3. 1
            2
            <marquee loop="1" bgcolor="orange">尚硅谷,讓天下沒有難學的技術!</marquee>
            <input type="password">
          4. 有些特殊的屬性,沒有屬性名,只有屬性值,如:<input disabled>

          不同的標簽,有不同的屬性;也有一些通用屬性(在任何標簽內都能寫)屬性名、屬性值不能亂寫,都是W3C規定好的屬性名、屬性值,都不區分大小寫,但推薦小寫雙引號,也可以寫成單引號,甚至不寫,但推薦寫雙引號標簽中不要出現同名屬性,否則后寫的會失效,例如:<input type="text" type="password">

          基本結構

          1. 想要呈現在網頁中的內容寫在body標簽中
          2. head標簽中的內容不會出現在網頁中
          3. head標簽中的title標簽可以指定網頁的標題
          4. 1
            2
            3
            4
            5
            6
            7
            8
            <html>
            <head>
            <title>網頁標題</title>
            </head>
            <body>
            ......
            </body>
            </html>

          注釋

          1. 特點:注釋的內容會被瀏覽器所忽略,不會呈現到頁面中,但源代碼中依然可見
          2. 作用:對代碼進行解釋和說明
          3. 寫法
          4. 1
            2
            3
            4
            <!-- 下面的文字只能滾動一次 -->
            <marquee loop="1">尚硅谷</marquee>
            <!-- 下面的文字可以無限滾動 -->
            <marquee>尚硅谷123</marquee>
          5. 注釋不可以嵌套

          文檔聲明

          1. 作用:告訴瀏覽器當前網頁的版本
          2. 寫法
            1. 舊寫法:要依網頁所用的HTML版本而定,寫法有很多參考:W3C QA - 可在 Web 文檔中使用的 Doctype 聲明的推薦列表
            2. 新寫法:W3C 推薦使用 HTML 5 的寫法
            3. 1
              2
              3
              4
              5
              <!DOCTYPE html>

              <!DOCTYPE HTML>

              <!doctype html>
          3. 文檔聲明必須在網頁的第一行,且在html標簽的外側

          字符編碼

          1. 計算機對數據的操作存儲時,對數據進行:編碼讀取時,對數據進行:解碼
          2. 編碼、解碼,會遵循一定的規范 —— 字符集
          3. 常見的字符集ASCII:大寫字母、小寫字母、數字、一些符號,共計128個ISO 8859-1:在 ASCII 基礎上,擴充了一些希臘字符等,共計是256個GB2312:繼續擴充,收錄了 6763 個常用漢字、682個字符GBK:收錄了的漢字和符號達到 20000+ ,支持繁體中文UTF-8 :包含世界上所有文字與符號
          4. 為了讓瀏覽器在渲染html文件時,不犯錯誤,可以通過meta標簽配合charset屬性指定字符編碼
          5. 1
            2
            3
            <head>
            <meta charset="UTF-8"/>
            </head>

          設置語言

          1. 主要作用讓瀏覽器顯示對應的翻譯提示有利于搜索引擎優化
          2. 具體寫法:<html lang="zh-CN">
          3. lang屬性的編寫規則語言-國家/地區zh-CN :中文-中國大陸(簡體中文)zh-TW :中文-中國臺灣(繁體中文)zh :中文en-US :英語-美國en-GB :英語-英國語言—具體種類(已不推薦使用)zh-Hans :中文—簡體zh-Hant :中文—繁體W3School 上的說明:《語言代碼參考手冊》 、《國家/地區代碼參考手冊》 W3C官網上的說明:《Language tags in HTML》

          標準結構

          1. HTML標準結構如下
          2. 1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            <!DOCTYPE html>
            <html lang="zh-CN">

            <head>
            <meta charset="UTF-8">
            <title>Document</title>
            </head>

            <body>

            </body>

            </html>

          VSCode 刪除行快捷鍵:Ctrl+Shift+K

          1. 輸入!,隨后回車即可快速生成標準結構
          2. 配置VScode 的內置插件 emmet ,可以對生成結構的屬性進行定制
          3. 在存放代碼的文件夾中,存放一個 favicon.ico 圖片,可配置網站圖標

          級版HTML視頻教程(全網原創首發?。?/p>

          什么是HTML?HTML指的是超文本標記語言,它是從事網頁設計工作的基礎,也是網站開發者必須熟練掌握的一門標記語言。應廣大學員的強烈要求,我愛自學網特推出《HTML基礎教程》,希望能得到廣大學員的支持。



          學習交流

          標 題

          第一課:HTML語言框架和相關標簽95 1-1 學習html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標簽和段標簽29866 1-6 文字屬性標簽28853 1-7 文字格式化標簽26888 1-8 body標簽27570 1-9 標題標簽25212

          第二課:常用標簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動標簽23217 2-10 轉義字符22227

          第三課:表格標簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066

          您說說看 我發明的...是不是很牛逼呀[滑稽]

          總 高級版學習資料文件高達10G!??!

          總 高級版學習高清視頻資料的高達35G!!!

          需要的話我后期會更新,所以關注我,學到的好東西都是你自己的哦[滑稽]

          那么大概內容就更新到這里

          本教程后期會逐一更新高清視頻學習資料+超詳細的學習資料教程!

          別忘了四連!!【點贊 收藏 關注 投幣】

          我怕你到時候想找我都找不到了~[鮮花]

          注:本人原創首發,未經允許禁止轉載/抄襲,如有違法,本人將有權追究法律責任!??!

          單的工作過程

          表單的信息發送與處理過程可以簡單的進行圖示,如下圖。

          以注冊會員為例,用戶在自己的電腦上打開相應的注冊表單頁面填寫信息,完成填寫后點擊提交按鈕,也就是圖中1所示過程。

          這時瀏覽器會將這些信息發送給處理這些信息的服務器,服務器上有使用類似asp或php寫成的相應的處理程序,處理完成后,生成一個反饋信息,也就是2到3的過程。

          然后服務器將處理后的信息發送給個人電腦,個人電腦在瀏覽器上通過一個新頁面來提示用戶處理結果。

          這里就涉及到一個問題,一個網站會有針對不同用戶的信息注冊表單以及相應的信息處理程序,比如我們注冊頭條號就有"個人"、"企業"、"媒體"和"國家機構"的區分。如何使不同的表單找到相應的處理程序呢?在<form>標簽中,有一個action屬性就是為這個表單信息指定處理程序的。

          <form>中的action屬性

          調用程序

          <form>的action屬性實際上就是為表單提示處理程序所在的路徑,如果程序和頁面在一個服務器中存儲,那使用相對路徑即可,如果在其他服務器,則要使用絕對路徑。示例代碼如下:

          <form action="form_action.asp" method="get">
          <p>First name: <input type="text" name="fname" /></p> 
          <p>Last name: <input type="text" name="lname" /></p> 
          <input type="submit" value="Submit" />
          </form>

          這段代碼中的"form_action.asp"程序和這個表單頁面在一個文件夾中,故直接寫名稱即可調用。

          發送郵件

          action屬性除了調用程序外,也可以發送郵件,示例代碼如下:

          <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
          <h3>這個表單會把電子郵件發送到 W3School。</h3>
          姓名:<br />
          <input type="text" name="name" value="yourname" size="20"><br />
          電郵:<br /><input type="text" name="mail" value="yourmail" size="20"><br />
          內容:<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
          <input type="submit" value="發送">
          <input type="reset" value="重置">
          </form>

          這段代碼中。發送郵件的寫法是這樣的:action="MAILTO:someone@w3school.com.cn",通過MAILTO:告訴瀏覽器,這里要發送郵件!然后輸入相應的郵箱地址,這樣就會把表單中的信息以郵件的形式發送到相應的郵箱中了。

          大家可以把郵箱地址改成自己的郵箱試一下,瀏覽器會讓大家選擇發送郵件的程序。如圖所示:

          使用這個功能我們可以寫一個簡單的郵件發送頁面,示例代碼如下:

          <form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
          主題:<input name="subject" type="text"><br>
          抄送:<input name="cc" type="text"><br>
          密送:<input name="bcc" type="text"><br>
          正文:<textarea name="body"></textarea><br>
          <input type="submit">
          </form>

          這樣的寫法大家可能會發現問題,即如果一個網站注冊用戶超過100人以后,靠這種手動輸入用戶郵箱的方法發送郵件簡直就是折磨人?。?/p>

          實際上,在網站中,我們會把會員或注冊用戶的郵箱存在數據庫中,通過調用數據庫中的用戶郵箱的程序語句來替換action中的具體郵箱地址即可,再通過程序,可以針對全部用戶或部分用戶進行群發信息。

          其中,enctype屬性是向服務器聲明上傳信息的形式,也就是向服務器說明發送的數據到底是數字還是英文還是中文還是編程語句。專業一些的說法是"規定在發送表單數據之前如何對其進行編碼。"

          全部屬性值有三個,如圖所示,大家可以簡要理解一下。

          除此之外,我們還發現一個屬性叫做method(方法),通過上面的示例代碼可知,method屬性有兩個屬性值,一個是get一個是post,這是什么意思呢?

          信息上傳的兩種方法

          <form>中的method標簽即為表單信息指定相應的發送方法。

          方法有兩種,一種叫get,這種方法通常用來發送簡短的且低安全要求的信息,特點是速度比較快。

          post經常用來發送體積較大的信息,如果發送一些對安全性要求高的信息,html的官方說明中建議使用post方法。

          我個人認為,現階段大家能記住這兩個方法的主要特點即可。這一篇的內容實際上也是前端學習者對服務器端的運行的了解內容。

          下面為大家附上更為專業的講解,看不懂也沒關系,盡量讀,至少能被專業詞匯洗禮一下!

          method 屬性

          瀏覽器使用 method 屬性設置的方法將表單中的數據傳送給服務器進行處理。共有兩種方法:POST 方法和 GET 方法。

          如果采用 POST 方法,瀏覽器將會按照下面兩步來發送數據。首先,瀏覽器將與 action 屬性中指定的表單處理服務器建立聯系,一旦建立連接之后,瀏覽器就會按分段傳輸的方法將數據發送給服務器。

          在服務器端,一旦 POST 樣式的應用程序開始執行時,就應該從一個標志位置讀取參數,而一旦讀到參數,在應用程序能夠使用這些表單值以前,必須對這些參數進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數。

          另一種情況是采用 GET 方法,這時瀏覽器會與表單處理服務器建立連接,然后直接在一個傳輸步驟中發送所有的表單數據:瀏覽器會將數據直接附在表單的 action URL 之后。這兩者之間用問號進行分隔。

          一般瀏覽器通過上述任何一種方法都可以傳輸表單信息,而有些服務器只接受其中一種方法提供的數據??梢栽?<form> 標簽的 method (方法)屬性中指明表單處理服務器要用方法來處理數據,使 POST 還是 GET。

          POST 還是 GET?

          如果表單處理服務器既支持 POST 方法又支持 GET 方法,那么你該選擇哪種方法呢?下面是有關這方面的一些規律:

          如果希望獲得最佳表單傳輸性能,可以采用 GET 方法發送只有少數簡短字段的小表單。

          一些服務器操作系統在處理可以立即傳遞給應用程序的命令行參數時,會限制其數目和長度,在這種情況下,對那些有許多字段或是很長的文本域的表單來說,就應該采用 POST 方法來發送。

          如果你在編寫服務器端的表單處理應用程序方面經驗不足,應該選擇 GET 方法。如果采用 POST 方法,就要在讀取和解碼方法做些額外的工作,也許這并不很難,但是也許你不太愿意去處理這些問題。

          如果安全性是個問題,那么我們建議選用 POST 方法。GET 方法將表單參數直接放在應用程序的 URL 中,這樣網絡窺探者可以很輕松地捕獲它們,還可以從服務器的日志文件中進行摘錄。如果參數中包含了信用卡帳號這樣的敏感信息,就會在不知不覺中危及用戶的安全。而 POST 應用程序就沒有安全方面的漏洞,在將參數作為單獨的事務傳輸給服務器進行處理時,至少還可以采用加密的方法。

          如果想在表單之外調用服務器端的應用程序,而且包括向其傳遞參數的過程,就要采用 GET 方法,因為該方法允許把表單這樣的參數包括進來作為 URL 的一部分。而另一方面,使用 POST 樣式的應用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程,其中傳輸的內容不能作為傳統 <a> 標簽的內容。

          以上內容來自W3school

          今天的內容結束了,這一篇內容實踐的東西比較少,主要是閱讀與了解。

          至此,HTML表單部分的講解就算告于段落了,如果您有任何疑問請給我留言,如有問題或錯誤請予以斧正!

          如果您喜歡我的教程請關注我,點贊也能讓我充滿動力!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作


          主站蜘蛛池模板: 在线观看精品一区| 国产情侣一区二区| 国产乱码精品一区二区三区中文| 一区二区精品久久| 无码AV动漫精品一区二区免费| 无遮挡免费一区二区三区| 国产一区二区四区在线观看 | 国产成人无码AV一区二区在线观看 | 亚洲熟妇无码一区二区三区导航| 亚洲一区二区影视| 日本无码一区二区三区白峰美 | 国产嫖妓一区二区三区无码| 一区二区三区在线观看视频| 国产日韩AV免费无码一区二区| 亚洲AV无码一区东京热| 毛片无码一区二区三区a片视频| 国产一区在线观看免费| 久久婷婷久久一区二区三区| 国产在线乱子伦一区二区| 成人免费一区二区三区在线观看| 无码8090精品久久一区| 日本伊人精品一区二区三区| 精品一区二区ww| 精品国产亚洲一区二区在线观看 | 欧美成人aaa片一区国产精品| 日本一区中文字幕日本一二三区视频 | 久久国产精品免费一区二区三区 | 日本无卡码一区二区三区| 国产成人一区二区三区电影网站| 中文字幕VA一区二区三区| 蜜芽亚洲av无码一区二区三区| 一区二区在线免费视频| 日韩一区二区视频| 精品乱人伦一区二区三区| 国产在线步兵一区二区三区| 亚洲国产精品一区| 一区二区三区视频免费观看 | 午夜爽爽性刺激一区二区视频| 中文字幕VA一区二区三区| 美女视频一区二区三区| 亚洲国产视频一区|