Web開發基礎之HTML是什么

這篇文章主要為大家展示了“Web開發基礎之HTML是什么”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Web開發基礎之HTML是什么”這篇文章吧。

　　HTML 提供頁面上的內容（結構和內容）

　　CSS 對網頁進行美化（樣式）

　　JavaScript對網頁上的內容進行控制（控制）

　　常用開發工具：

　　輕量文本型：VSCode、Sublime

　　重量IDE型：WebStrom

　　什么是HTML

　　HTML（英文 Hyper Text Markup Language 的縮寫）中文譯為超文本標記語言

　　通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述

　　打開網絡上的一個頁面，通過瀏覽器調試工具查看源代碼

　　HTML的格式

　　基本格式

　　html標簽：所有html標簽的根節點

　　head標簽：描述網頁的一些信息，里面的內容不會被顯示呈現

　　title標簽：網頁的標題

　　body標簽：頁面的主題部分，主要編寫開發的內容

　　Tip:通過編輯器快速創建html的頁面結構

　　在vscode中新建一個html文件后，輸入！按tab鍵，可以快速生成一個HTML5標準的一個頁面結構。

　　雙標簽

　　語法格式

　　<標簽名> 在整個標簽的最前面，稱為“開始標簽（start tag）”

　　</標簽名> 在整個標簽的最后面，稱為“結束標簽（end tag）”

　　結束標簽只是比開始標簽，在前面多了一個關閉符“/”。

　　單標簽

　　語法格式

　　例如

　　UTF-8 是目前最常用的字符集編碼方式，常用的字符集編碼方式還有 gbk 和 gb2312

　　GB2312 簡單中文  包括6763個漢字

　　BIG5   繁體中文 港澳臺等用

　　GBK 包含全部中文字符    是 GB2312 的擴展，加入對繁體字的支持，兼容 GB2312

　　UTF-8 則包含全世界所有國家需要用到的字符

　　Tip：以后我們統一使用UTF-8字符集就可以了，避免出現字符集不統一而引起亂碼的情況。

　　標題標簽

　　語法

　　標題標簽按1-6大小從大到小，如下圖 默認提供1-6個標題標簽，如果寫h7則是普通文字

　　段落標簽

　　單詞縮寫： paragraph  段落

　　使用段落標簽，可以使網頁中的文本文字，呈現出一個一個段落的格式。

　　語法：

　　水平線標簽

　　換行標簽

　　單詞縮寫：  break   打斷 ,換行在HTML中，默認換行是需要在瀏覽器窗口的最右端才會自動換行，這樣在每個設備中呈現的效果不一致。如果需要進行某段文本的強制換行，就需要使用到換行標簽。

　　語法：

　　練習：實現一個簡單新聞頁面

　　div span標簽

　　div   division  的縮寫   分割， 分區的意思  其實有很多div 來組合網頁。 塊級元素

　　span  跨度，跨距；范圍，行內元素

　　語法

　　標簽屬性

　　在使用HTML制作網頁的時候，如果想讓標簽提供更多的信息，可以使用標簽的一些屬性進行設置。

　　語法

　　例

　　width  屬性，值 200   控制寬度

　　align 屬性，值 left     控制橫向對其方式

　　默認hr標簽占據了整行，設置以上屬性以后寬度就只有設置的200

　　默認hr是居中對齊，設置左對齊

　　圖片標簽

　　單詞縮寫：image 圖像（單標簽）

　　語法

　　通過src屬性，進行設置圖像文件的路徑和文件名。是img標簽的必須屬性。

　　圖片標簽屬性

　　src可以是網絡路徑，可以的本地絕對路徑或者相對路徑，前提是路徑存在圖片有效，否則使用設置的文本代替

　　鏈接標簽

　　單詞縮寫：anchor 錨

　　語法

　　示例

　　跳轉 默認直接覆蓋當前頁面跳轉，加target="_blank"新打開一個頁面跳轉

　　跳轉需要加協議例如http否則會在當前目錄絕對路徑加跳轉鏈接

　　特殊字符標簽

　　html中一些標簽，具有特殊含義，會被瀏覽器直接解析 ,如果需要輸出這些標簽，需要使用到轉義、替代語法。

　　例如需要在頁面顯示：  <p>標簽經常用于段落 直接寫在html文本里面會把<p>當成標簽解析，頁面并不會顯示

　　需要寫成如下格式

　　注釋標簽

　　注釋標簽，可以給HTML文檔中添加一些便于閱讀和理解的文字，并且此標簽中的內容，不會直接展示出來，只有通過源代碼的方式才可以看到。

　　語法

　　也可以直接選中需要注釋的語句 ctrl+/注釋

　　列表標簽

　　語法

　　①在<ul></ul>標簽中，只能嵌套<li></li>標簽，其他標簽的直接嵌套是語法是不被允許的。

　　②<li></li>標簽中作為一個容器，可以容納其他的標簽元素。

　　③無序列表具有默認樣式，可以CSS進行修飾。

　　頁面顯示

　　ol有序標簽

　　在前面加序號

　　頁面顯示

　　表格標簽

　　語法

　　表格屬性

　　①可以使用th標簽設置表頭 　　即把td改成th可以把表頭設置成標題模式加粗

　　②之后可以使用CSS修飾表格的樣式

　　示例：

　　一個主機列表表格

　　頁面顯示

　　修改設置

　　顯示效果

　　表單

　　在HTML中，form標簽用來定義一個表單。用來實現用戶的相關信息的收集和傳遞，和后端進行交互。form中的所有內容都會被提交給服務器。

　　語法：

　　常用屬性：

　　action  值為提交到后端接收的URL地址

　　method 設置表單的提交方式   值為get或者post

　　表單控件組成

　　表單中的提供了多種表單空間，單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。

　　input控件

　　input控件為表單中，最常使用的，也是需要重點掌握的。基本標簽屬性為type屬性

　　用來定義不同的控件類型。

　　其他常見屬性

　　textarea控件（文本域）

　　當需要輸入大量信息的時候，就可以使用textarea標簽。實現多行文本的輸入框。

以上是“Web開發基礎之HTML是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！