文主要內(nèi)容

• html 的常見元素
• html 元素的分類
• html 元素的嵌套關(guān)系
• html 元素的默認樣式和 CSS Reset
• html 常見面試題

html 的常見元素

html 的常見元素主要分為兩類：head 區(qū)域的元素、body 區(qū)域的元素。下面來分別介紹。

1、head 區(qū)域的 html 元素

head 區(qū)域的 html 元素，不會在頁面上留下直接的內(nèi)容。

• meta
• title
• style
• link
• script
• base

base元素的介紹：

<base href="/">

base 標簽用于指定基礎(chǔ)的路徑。指定之后，所有的 a 鏈接都是以這個路徑為基準。

2、html 元素（body 區(qū)域）

body 區(qū)域的 html 元素，會直接出現(xiàn)在頁面上。

• div、section、article、aside、header、footer
• p
• span、em、strong
• 表格元素：table、thead、tbody、tr、td
• 列表元素：ul、ol、dl、dt、dd
• a
• 表單元素：form、input、select、textarea、button

div 是最常見的元素，大多數(shù)場景下，都可以用div（實在不行就多包幾層div）。可見，div 是比較通用的元素，這也決定了 div 的的語義并不是很明確。

常見標簽的重要屬性：

• a[href,target]
• img[src,alt]
• table td[colspan,rowspan]。設(shè)置當前單元格占據(jù)幾行幾列。在合并單元格時，會用到。
• form[target,method,enctype]
• input[type,value]
• button[type]
• selection>option[value]
• label[for]

html 文檔的大綱

我們平時在寫論文或者其他文檔的時候，一般會先列出大綱，然后再寫具體的內(nèi)容。

同樣，html 網(wǎng)頁也可以看成是一種文檔，也有屬于它的大綱。

一個常見的html文檔，它的結(jié)構(gòu)可以是：

    <section>
        <h1>一級標題</h1>

        <section>
            <h2>二級標題</h2>
            <p>段落內(nèi)容</p>
        </section>

        <section>
            <h2>二級標題</h2>
            <p>段落內(nèi)容</p>
        </section>

        <aside>
            <p>廣告內(nèi)容</p>
        </aside>

    </section>

    <footer>
        <p>某某公司出品</p>
    </footer>

查看網(wǎng)頁大綱的工具

我們可以通過 http://h5o.github.io/ 這個工具查看一個網(wǎng)頁的大綱。

使用方法：

（1）將網(wǎng)址 http://h5o.github.io/ 保存到書簽欄

（2）去目標網(wǎng)頁，點擊書簽欄的網(wǎng)址，即可查看該網(wǎng)頁的大綱。

這個工具非常好用，既可以查看網(wǎng)頁的大綱，也可以查看 markdown 在線文檔的結(jié)構(gòu)。

html 元素的分類

按照樣式分類：

• 塊級元素
• 行內(nèi)元素
• inline-block：比如form表單元素。對外的表現(xiàn)是行內(nèi)元素（不會獨占一行），對內(nèi)的表現(xiàn)是塊級元素（可以設(shè)置寬高）。

按照內(nèi)容分類：

html 元素的嵌套關(guān)系

• 塊級元素可以包含行內(nèi)元素。
• 塊級元素不一定能包含塊級元素。比如 div 中可以包含 div，但 p 標簽中不能包含 div。
• 行內(nèi)元素一般不能包含塊級元素。比如 span 中不能包含 div。但有個特例：在 HTML5 中， a 標簽中可以包含 div。

注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的 ；但是在 html 4.0.1 中， a > div 仍然是不合法的。

html 元素的默認樣式和 CSS Reset

比如下拉框這種比較復雜的元素，是自帶默認樣式的。如果沒有這個默認樣式，則該元素在頁面上不會有任何表現(xiàn)，則必然增加一些工作量。

同時，默認樣式也會帶來一些問題：比如，有些默認樣式我們是不需要的；有些默認樣式甚至無法去掉。

如果我們不需要默認的樣式，這里就需要引入一個概念：CSS Reset。

常見的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS

方案二：

雅虎的 CSS Reset

我們可以直接通過 CDN 的方式引入：

<link rel="stylesheet" type="text/css" href=">

方式三：（比較有爭議）

*{
    margin: 0;
    padding: 0;
}

上面何種寫法，比較簡潔，但也有爭議。有爭議的地方在于，可能會導致 css 選擇器的性能問題。

Normalize.css

上面的幾種 css reset 的解決思路是：將所有的默認樣式清零。

但是，Normalize.css 的思路是：既然瀏覽器提供了這些默認樣式，那它就是有意義的。既然不同瀏覽器的默認樣式不一致，那么，Normalize.css就將這些默認樣式設(shè)置為一致。

html 常見面試題

doctype 的意義是什么

• 讓瀏覽器以標準模式渲染
• 讓瀏覽器知道元素的合法性

HTML、XHTML、HTML5的區(qū)別

• HTML 屬于 SGML
• XHTML 屬于 XML，是 HTML 進行 XML 嚴格化的結(jié)果
• HTML5 不屬于SGML，也不屬于 XML（HTML5有自己獨立的一套規(guī)范），比 XHTML 寬松。

HTML5 有什么新的變化

• 新的語義化元素
• 表單增強
• 新的API：離線、音視頻、圖形、實時通信、本地存儲、設(shè)備能力等。

em 和 i 的區(qū)別

共同點：二者都是表示斜體。

區(qū)別：

• em 是語義化的標簽，表示強調(diào)。
• i 是純樣式的標簽，表示斜體。HTML5 中不推薦使用。

語義化的意義是什么

• 開發(fā)者容易理解，便于維護。
• 機器（搜索引擎、讀屏軟件等）容易理解結(jié)構(gòu)
• 有助于 SEO

哪些元素可以自閉和

自閉和的元素中不能再嵌入別的元素。且 HTML5 中要求加斜杠。

• 表單元素 input
• 圖片 img
• br、hr
• meta、link

form 表單的作用

• 直接提交表單
• 使用 submit / reset 按鈕
• 便于瀏覽器保存表單
• 第三方庫（比如 jQuery）可以整體獲取值
• 第三方庫可以進行表單驗證

所以，如果我們是通過 Ajax 提交表單數(shù)據(jù)，也建議加上 form。

然題目中提到了讀文獻和寫論文兩個方面的需求，我們就從這兩點分別來介紹幾款好用順手的工具。

文獻下載、閱讀及整理

關(guān)于文獻閱讀，大家最頭疼的就是文獻的下載、閱讀及整理這三點。國內(nèi)谷歌學術(shù)登不上去去哪搜文獻？怎么免費下載？英文文獻讀不明白有什么比較好的翻譯軟件？下了那么多的文獻怎么整理？

下面就針對這三個難題為大家推薦幾個網(wǎng)站，幫助大家攻破文獻閱讀的難關(guān)。

01文獻搜索及下載

解決辦法：必應(yīng)學術(shù)+文獻小鎮(zhèn)。

①必應(yīng)學術(shù)

https://cn.bing.com/academic/

如果想在國內(nèi)無壓力搜索國外的內(nèi)容，除了404網(wǎng)站就是必應(yīng)了，而必應(yīng)也有自己的學術(shù)搜索引擎——必應(yīng)學術(shù)。

之前我都使用谷歌學術(shù)的鏡像網(wǎng)站，但是在國內(nèi)嚴格審查了之后，鏡像網(wǎng)站基本也全軍覆沒了，后來也有很多瀏覽器插件可以幫助我們登錄谷歌學術(shù)，但是安裝繁瑣而且過一段時間也不能用了。

后來我想起了必應(yīng)，發(fā)現(xiàn)必應(yīng)的學術(shù)搜索也挺不錯，使用下來也能滿足我的日常需求。

我以“receptor”為關(guān)鍵詞進行搜索舉例。

它可以按照時間范圍搜索，搜索結(jié)果也可以按照相關(guān)性、時間正/倒序及引用數(shù)進行排序。

我們點進第一個鏈接：

就可以進入下載頁面了，但是這個下載是收費的，那么我們怎么免費下載呢？

② 文獻小鎮(zhèn)

http://www.sci-hub.ac.cn/index.html

這個文獻小鎮(zhèn)基本就是鏈接的SCI-HUB，但是有時候SCI-HUB會被封，需要我們不斷換域名找沒被封的，但是文獻小鎮(zhèn)里的基本上什么時候都能用，免去了我們到處去找的麻煩。我們把上面這篇文章的doi號輸進去，就能打開這篇文獻并免費下載了。

點擊“open”。

02文獻閱讀

這里我推薦幾個翻譯軟件，大家各取所需，選用著最順手的那個就行了。

① 知云文獻翻譯

對新人極其友好的翻譯器，但是需要關(guān)注公眾號進行下載，支持百度翻譯、谷歌翻譯、谷歌生物醫(yī)學專用翻譯、有道翻譯和搜狗翻譯，中英皆可以翻譯。最好用的是“谷歌生物醫(yī)學專用翻譯”，但是需要拉幾個新人關(guān)注公眾號獲得積分才行。打開閱讀的文獻，直接選中需要翻譯的語句，即可一鍵翻譯，而且準確性高。此外，左上角打開中，在知云自己的安裝目錄下，還會有兩個翻譯模式，一個對應(yīng)的短語翻譯，一個是長句翻譯，而且支持中英互譯哦。

② 有道詞典

有道詞典是個神器，尤其是在查詞、劃詞、取詞方面特別突出，詞庫中有所有專業(yè)用語的補充包，可以讓你瞬間翻譯出各種專業(yè)的英文單詞，從復雜的有機化合物，到稀奇古怪的動物名，哪里不會點哪里。

③CNKI翻譯助手

/dict.cnki.net

CNKI翻譯助手是一款專業(yè)的學術(shù)翻譯工具，由“中國知網(wǎng)”開發(fā)制作，匯集了從CNKI系列數(shù)據(jù)庫中挖掘的大量常用詞匯、專業(yè)術(shù)語、成語俚語及雙語例句等，形成海量中英在線詞典和雙語平行語料庫。數(shù)據(jù)實時更新，內(nèi)容涵蓋自然科學和社會科學的各個領(lǐng)域。在翻譯的過程中還會有詞匯的文章來源哦~當然僅限于中文文章，但是還是非常好用的，小伙伴們一定要試試。

03文獻管理

我理想中的文獻管理軟件是能將文獻筆記和文獻原文結(jié)合起來，在筆記頁面中可以將PDF 嵌入，這樣就可以將文獻筆記和文獻原文完美地結(jié)合起來了。

這里我推薦用語雀來管理我們的文獻，語雀是一款側(cè)重于項目管理的工具，但我發(fā)現(xiàn)用它來管理文獻也很好用，下面我簡單介紹一下。

我們先建一個空白文檔，界面與普通word并沒有太多差異。

但它的神奇就在于按下"/"之后。

在可以插入的內(nèi)容中我們發(fā)現(xiàn)了有PDF這個選項，這就可以完美實現(xiàn)我們的文獻管理。

我以一篇文章中的一句話為例講解怎么用，假設(shè)這是我們讀了文獻后做的筆記，我們要記錄下是從哪篇文獻中得出來的，也想把原文附上，這樣過一段時間后再回來看就可以結(jié)合全文重新思考。

在文字下方插入PDF后的效果是這樣的。

文獻已經(jīng)嵌入了文檔，而且可以單獨翻頁。

如果覺得嵌入窗口太大了影響文檔顯示，還可以緊湊顯示。

而且在嵌入PDF的時候，這篇文獻已經(jīng)傳到云空間中（注冊用戶就有10 G的云空間），想在本地看只要在頁面中下載就行， 這樣無論你在哪、用誰的電腦都可以下載下來看。這樣就非常方便了。

論文寫作

關(guān)于寫作方面最迫切的需求就是英文語言表達和語法檢查了，下面針對這兩個方面我介紹幾個好用的工具。

01專業(yè)地道的英語表達

① 曼切斯特大學學術(shù)短語庫

網(wǎng)址：phrasebank.manchester.ac.uk/

曼切斯特大學學術(shù)短語庫主要的作用是幫助我們更好地進行SCI寫作，學術(shù)語庫中會結(jié)合SCI論文的各部分，逐一講解如何入手寫作。比如results部分增長的結(jié)果如何陳述，討論中和我們文章結(jié)果不一致的參考文獻該如何討論等等，并且給出了海量的模板供我們套用，可以說是SCI寫作的必備網(wǎng)站。

② Linggle：更準確的詞組搭配

網(wǎng)址：linggle.com/

學術(shù)寫作僅僅依靠翻譯自然是不妥的，一個句子如何表達才能合乎語法規(guī)范呢？Linggle網(wǎng)站基于對英文搭配進行概率統(tǒng)計，提供了更為準確的英文寫作建議。

具體如何使用？Help彈窗給出了幾種適配的通配符搜索方法。下圖已做標注，不再一一闡述。

總的來說，可以幫助我們解決4個方面的問題：

①提供詞組搭配；

②近義詞替換；

③根據(jù)使用概率推薦更優(yōu)詞組；

④給出不同詞性要求下的詞組搭配。

有了這個網(wǎng)站，我們可以輕松擇出不同語境下的最佳表達方式。

02潤色工具

論文寫完后當然要檢查一下是否有語法錯誤，這里除了大名鼎鼎的StyleWriter和Grammarly外又介紹了兩款免費工具，大家可以都試試。

① StyleWriter

StyleWriter模仿專家編輯檢查、剪切和重新排列用戶的文字，以產(chǎn)生清晰可讀的風格。或者，只需點擊一下，用戶就可以進入Microsoft Word重新起草單詞、短語或句子。

StyleWriter的優(yōu)點

• StyleWriter是一個功能很豐富的文本編輯軟件，很好地與word相結(jié)合，實現(xiàn)對論文的編輯和評價。
• StyleWriter能夠提供多樣的論文評分方法，采用不同的顏色、字體、背景色標記建議修改的單詞和句子，讓人感覺高大上，用習慣以后會很方便。
• StyleWriter提供了強大的自定義功能，我們可以通過自定義功能將專業(yè)術(shù)語與StyleWriter相結(jié)合，從而實現(xiàn)專業(yè)論文的評分和修改建議的提供。

StyleWriter的缺點

• 雖然StyleWriter提供了很多論文評分標準，但是對于我們科研人而言，真正有用的就2-3個評分標準，其他都是雞肋。
• StyleWriter是一個為英語為母語的人提供的專業(yè)寫作輔助軟件，更加注重英語寫作風格和習慣的培養(yǎng)，然而我們科研人員更多的時間是用于科學研究，論文寫作水平并不需要達到英語母語的專業(yè)寫作水平，英語論文通順到能夠讓讀者理解我們的表達、闡明我們的觀點就可以了。
• StyleWriter提供了語法糾錯，這也是其他軟件都具備的功能，并沒有太大區(qū)別。
• StyleWriter提供了可讀性建議，只是告訴建議修改和一些固定的例子，但是并沒有指出如何去修改，這和一些常用寫作模板沒有什么區(qū)別，甚至不如模板直接、好用。
• StyleWriter的自定義功能很重要，沒有自定義功能，StyleWriter就成為了一個亂報錯、亂評分的文本軟件；自定義功能要花費我們大量的時間，而且沒有云存儲功能，好不容易定義的類別和專業(yè)單詞，卻不能夠跨平臺使用，一旦換電腦，信息就沒有了。像我這種實驗室一臺電腦，家里一臺電腦的人，不能兩臺電腦上都是用一個賬號，很不方便。

② Grammarly

Grammarly是一款國外廠商開發(fā)的基于AI的在線語法糾正和校對工具，支持的平臺有Windows、Mac、iOS、以及Android。用戶可以上傳英文文檔或者直接在應(yīng)用內(nèi)編輯，它能夠做語法檢查，標點符號糾正，考慮上下文的拼寫檢查，校對用詞（基本版功能，免費）以及進一步提出改進建議、防剽竊（升級版）等。

Grammarly的優(yōu)點：

• 相比于StyleWriter，Grammarly的多平臺使用是很方便的，一旦有了賬戶，那么無論是手機、平板、筆記本，還是臺式機都可以使用它。將Grammarly添加到Microsoft Edge，同樣可以在Gmail、Facebook、Twitter、LinkedIn、Tumblr以及幾乎所有你在網(wǎng)絡(luò)上寫作的地方進行拼寫和語法審查。
• 界面簡潔用法簡單。在windows 系統(tǒng)下發(fā)現(xiàn)了三個Grammarly工具：用于office的插件、獨立軟件和Edge瀏覽器插件。Grammarly還支持百度上的語法和拼寫檢查。

Grammarly的缺點：

• 價格昂貴。付費版可以檢查寫作風格是否一致，檢查句子結(jié)構(gòu)是否清楚，檢查不恰當?shù)恼Z氣或形式，還可以獲取不同寫作風格的建議，包括學術(shù)性、技術(shù)性和創(chuàng)造性。Grammarly是按月收費，但是普通人不可能會長時間大量進行論文寫作修改，大多數(shù)是寫完之后提交檢查，再根據(jù)檢查結(jié)果慢慢修改，對于個人來說利用率較低，性價比偏低。
• 糾錯功能并沒有顯著優(yōu)勢。對比StyleWriter, Grammarly的用法簡單很多，雖然功能差別很大，但在語法檢測上的總體效果相差不多（基于免費版來說）。

③Reverso

免費的網(wǎng)頁插件形式的英語翻譯和語法查詢工具。Reverso不僅針對英語，還包括世界上其他主要語言:西班牙語、法語、意大利語、德語、波蘭語、俄語、阿拉伯語、希伯來語等翻譯。

這是Reverso的官方網(wǎng)站：

www.reverso.net/

Reverso的獨特之處：

1.廣闊的語言工具。如果您的語言需求更強烈，那么Reverso很容易超越基本的字典內(nèi)容和轉(zhuǎn)換功能：它提供專門的商業(yè)、金融、醫(yī)學或技術(shù)術(shù)語。

2.直觀的、強大的、準確的界面。雖然Reverso號稱是一個強大而準確的翻譯平臺，但它的易用性使它適合初學者和專業(yè)人士。

3.學習外語。小軟件另一個重要的意義：讓任何人在短時間內(nèi)掌握任何一門外語，從最相關(guān)的例子開始，這樣你就能讀、寫、說你的語言。

4.免費

Reverso主要提供的功能：

• 翻譯您網(wǎng)頁上選定的文本；
• 根據(jù)上下文的句子建立書簽；
• 保存您的自動搜索結(jié)果；
• 拼寫檢查；
• 多種語言之間的翻譯功能；
• 同義詞查詢，Reverso可以發(fā)現(xiàn)各種各樣的單詞和短語，以豐富你的詞匯量，并更清楚地表達自己；
• 詞性查詢。

④ LanguageTool

LanguageTool是一款語法、文風和拼字校對工具，LanguageTool支持超過20種語言。

這是LanguageTool的官方網(wǎng)站：

https://www.languagetool.org/

我前面介紹的三款英語語法糾錯工具，他們都是英文界面。這些軟件剛開始用起來有些吃力，LanguageTool提供了中文界面！

LanguageTool的主要功能界面也很簡單，基本操作就是輸入需要檢查的段落，LanguageTool顯示檢查結(jié)果。

LanguageTool是我至今體驗過安裝方式最多的一款軟件。它可以安裝到word、瀏覽器、桌面應(yīng)用程序等等。

用鼠標點擊標記的單詞或詞組，會彈出小窗口！

LanguageTool會提示錯誤原因、修改方法、選擇不修改和相關(guān)范例。我覺得這些功能很有實際應(yīng)用價值，不僅能幫助我們檢查錯誤、修改錯誤，還有利于我們學習英語。

總結(jié)一下：

1、支持很多語言的檢查，我只用過英語，感覺還不錯！

2、功能不是很多，但配合word使用，還是很方便的！

3、很適合中國人使用，畢竟是中國人開發(fā)的，這太難得了！

4、提供了源碼，有能力的小伙伴可以研究研究，這是個亮點！

LanguageTool具有三個服務(wù)版本：免費版、高級版和企業(yè)版！

今天就介紹這么多，相信有了以上這么多好用的工具，各位小伙伴的論文撰寫之路會好走很多了~

.1 HTML的起源和發(fā)展

HTML（Hypertext Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標記語言。它的起源可以追溯到1989年，當時一位名叫蒂姆·伯納斯-李的物理學家在CERN（歐洲核子研究中心）工作時，他想尋找一種更好的方式來共享研究論文和其他信息。他開發(fā)了一種名為ENQUIRE的項目，可以通過超鏈接把相關(guān)的文檔連接在一起。之后，他決定開發(fā)一種更具普遍性的系統(tǒng)，這就是HTML的起源。

HTML的發(fā)展歷程可以分為以下幾個階段：

1. HTML 1.0（1991年發(fā)布）：這是HTML的最初版本，只包含很少的標記，如<h1>、<p>、<br>等。它不能包含圖像、表格等高級元素。
2. HTML 2.0（1995年發(fā)布）：這個版本增加了表格、圖像等高級元素，也引入了一些新的標記，如<img>、<table>等。
3. HTML 3.2（1997年發(fā)布）：這個版本增加了表單元素和CSS樣式表。
4. HTML 4.01（1999年發(fā)布）：這個版本增加了一些新的元素和屬性，如<iframe>、<label>等。也引入了一些新的特性，如框架、樣式表和腳本。
5. XHTML 1.0（2000年發(fā)布）：這個版本是HTML的一種XML變體，用更嚴謹、嚴格的方式規(guī)定了標記的使用。它也包括了一些新的標記和屬性。
6. HTML5（2014年發(fā)布）：這個版本是HTML的最新版本，增加了一些新的元素和屬性，如<canvas>、<audio>、<video>等。它還增加了更多的語義標記，使網(wǎng)頁內(nèi)容更易于理解和訪問。

HTML已成為創(chuàng)建網(wǎng)頁的標準語言之一，隨著技術(shù)的不斷進步和應(yīng)用場景的不斷擴大，HTML也在不斷發(fā)展和演變。

1.2 HTML元素和標記

HTML元素是在網(wǎng)頁中創(chuàng)建結(jié)構(gòu)的基本單位，它由開始標記和結(jié)束標記組成，并包含了中間的內(nèi)容。HTML元素可以包含其他元素和標記，以此來構(gòu)建復雜的網(wǎng)頁結(jié)構(gòu)。

HTML標記是一些特殊的代碼，用于將文本轉(zhuǎn)換成瀏覽器中呈現(xiàn)的網(wǎng)頁內(nèi)容。它們起到指示瀏覽器應(yīng)該如何顯示頁面內(nèi)容的作用。

以下是一些常見的HTML標記：

1. <html> 標簽表示 HTML 文檔的根元素；
2. <head> 標簽包含了文檔的頭部信息，如文檔的標題、樣式表等；
3. <title> 標簽用于定義文檔的標題，它會顯示在瀏覽器的標題欄上；
4. <body> 標簽包含了文檔的主要內(nèi)容部分；
5. <h1> 到 <h6> 標簽表示標題，其中 h1 是最高級別的標題；
6. <p> 標簽表示一個段落；
7. <img> 標簽用于插入一個圖片；
8. <a> 標簽表示一個鏈接；
9. <ul> 和 <li> 標簽用于創(chuàng)建無序列表；
10. <ol> 和 <li> 標簽用于創(chuàng)建有序列表；
11. <table>、<tr>、<td> 表示表格和表格的行列。

在每一個標簽中，還可以添加一些屬性來定義標記的特性，例如：

1. class 和 id 屬性可以用于設(shè)置樣式或指定元素的唯一標識符；
2. href 屬性可以用于指定鏈接的目標地址；
3. src 屬性可以用于指定圖片或其他媒體文件的地址；
4. style 屬性可以用于設(shè)置元素的樣式，例如字體大小、顏色等。

需要注意的是，在編寫 HTML 代碼時應(yīng)遵守一定的語法規(guī)則，例如標簽應(yīng)該正確嵌套，屬性值應(yīng)該用雙引號引起來等，這些都是為了保證頁面的正確性和展示效果。

1.3 HTML表單和輸入控件

HTML表單是一個用于收集用戶信息的交互性模塊，它由一組表單元素和相應(yīng)的表單控件組成。以下是一些常見的HTML表單元素和輸入控件：

1. <form> 元素用于創(chuàng)建一個表單，在其中包含各種輸入控件。例如：

<form>
  <!-- 輸入控件 -->
</form>

2. <input> 元素是用于創(chuàng)建一個輸入控件的基本元素。它有多個不同的類型，如文本輸入框、密碼輸入框、單選按鈕、復選框、文件上傳框等。例如：

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密碼：</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="登錄">
</form>

在這個例子中，我們創(chuàng)建了一個包含兩個文本輸入框和一個提交按鈕的表單。第一個輸入框是用于輸入用戶名的，第二個是密碼輸入框。type 屬性指定了這兩個輸入框的類型，其中 type="text" 表示是文本輸入框，type="password" 表示是密碼輸入框。name 屬性用于指定此輸入框的名稱，后續(xù)在后臺可以根據(jù)這個名稱獲取輸入框中的值。id 屬性用于指定此輸入框的唯一標識符，通常與 for 屬性一起使用。

3. <select> 元素是用于創(chuàng)建一個下拉列表的元素，它包含多個 <option> 元素，表示每一個選項。例如：

<form>
  <label for="fruit-select">選擇一個水果：</label>
  <select name="fruit" id="fruit-select">
    <option value="apple">蘋果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
</form>

在這個例子中，我們創(chuàng)建了一個下拉列表用于選擇水果。name 屬性用于指定此下拉列表的名稱，可以在后臺根據(jù)此名稱獲取選擇的值。每一個 <option> 元素包含了選項的文本和值。value 屬性用于指定選項的值，當提交表單時，這個值將被發(fā)送到服務(wù)器。

4. <textarea> 元素用于創(chuàng)建一個多行文本輸入框。例如：

<form>
  <label for="comment">留言：</label>
  <textarea id="comment" name="comment" rows="5" cols="50"></textarea>
</form>

在這個例子中，我們創(chuàng)建了一個多行文本輸入框。rows 屬性用于指定文本框的行數(shù)，cols 屬性用于指定文本框的列數(shù)。這些屬性只是用于設(shè)置文本框的尺寸，它不會限制用戶輸入的文字數(shù)量。

HTML表單和輸入控件提供了一種方便的方式來收集用戶的信息和數(shù)據(jù)。它們不僅可以用于注冊頁面和登錄頁面，還可以用于不同類型的數(shù)據(jù)收集和展示。