html基礎（全）

html簡介

目錄

什么是網頁

什么是 HTML

常用瀏覽器

WebE標準的構成

基本語法概述

第一個HTML頁面

文檔類型聲明標簽

?lang 語言種類

字符集

標題標簽

段落和換行標簽

文本格式化標簽

div和span標簽

?圖像標簽和路徑

超鏈接標簽

表格的主要作用

?表頭單元格標簽

列表

無序列表

有序列表

?表單域? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ? ? ?

1. 網頁
我們接下來是進行的網頁開發, 這里首先介紹下網頁的相關概念:
1. 什么是網頁?
2. 什么是HTML?
3. 網頁的形成?

什么是網頁

什么是 HTML

HTML 指的是超文本標記語言 (Hyper Text Markup Language) ，它是用來描述網頁的一種語言。
HTML 不是一種編程語言，而是一種標記語言 (markup language)。
標記語言是一套標記標簽 (markup tag)。

所謂超文本，有 2 層含義：
1. 它可以加入圖片、聲音、動畫、多媒體等內容（超越了文本限制 ）。
2. 它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本 ）。

網頁的形成

網頁是由網頁元素組成的，這些元素是利用html標簽描述出來，然后通過瀏覽器解析來顯示給用戶的。

網頁總結

網頁時圖片.鏈接文字聲音視頻等元素組成，其實就是一個html文件

網頁生成制作：由前端人員書寫HTML文件，然后瀏覽器打開，就能看到頁面了

HTML：超文本標記語言，用來制作網頁的一門語言，由標簽組成，比如 圖片標簽 鏈接標簽 視頻標簽等....

常用瀏覽器

瀏覽器份額排行榜

WebE標準的構成

主要包括結構，表現和行為三個方面

標準說明
結構結構用于對網頁元素進行整理和分類，現階段主要是HTML
表現表現用于設置網頁元素的版式，顏色，大小等外觀版式，主要指的是CSS
行為行為指的是網頁模型的定義及交互的編寫JaveScript

web標準的提出體驗方案：結構，樣式，行為相分離

HTML語法規范

基本語法概述

1.HTML標簽是由尖括號包圍的關鍵字，例如<html>.

2.HTML標簽通常是成對出現的，我們稱為雙標簽。

3.有些特殊的標簽必須是單個的標簽，我們稱為單標簽。

標簽關系

標簽關系可以分為兩類：包含關系和并列關系

<html> <body></body><html>
<head></head>
<body></body>

第一個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>
</head>
<body>也就這樣吧
</body>
</html>

每一個網頁都會有一個基本的結構標簽，內容頁面也在這些基本標簽上編寫

標簽名定義說明
<html></html>HTML標簽頁面中最大的標簽，我們稱之為根標簽
<head></head>文檔的頭部在head標簽中我們必須設置的標簽是title
<body></body>文檔的主體元素包含頁面的所有內容
<title></title>文檔的標題讓頁面擁有屬于自己的頁面標題

文檔類型聲明標簽

文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。

<!DOCTYPE html>

這句代碼的意思是: 當前頁面采取的是 HTML5 版本來顯示網頁.

注意: 1. 聲明位于文檔中的最前面的位置，處于標簽之前。 2. 不是一個 HTML 標簽，它就是 文檔類型聲明標簽。

?lang 語言種類

<html lang="en">

用來定義當前文檔顯示的語言。

1. en定義語言為英語

2. zh-CN定義語言為中文 簡單來說,定義為en 就是英文網頁, 定義為 zh-CN 就是中文網頁 其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文 這個屬性對瀏覽器和搜索引擎(百度.谷歌等)還是有作用的?

字符集

  <meta charset="UTF-8">

字符集 (Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。 在標簽內，可以通過 標簽的 charset 屬性來規定 HTML 文檔應該使用哪種字符編碼。

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所 有國家需要用到的字符.

?總結 1. 以上三個代碼 vscode 自動生成,基本不需要我們重寫. 2. 文檔類型聲明標簽,告訴瀏覽器這個頁面采取html5版本來顯示頁面. 3.告訴瀏覽器或者搜索引擎這是一個英文網站. 本頁面采取英文來顯示. 4. 必須寫. 采取 UTF-8來保存文字. 如果不寫就會亂碼.具體原理后面分析.

標題標簽<h1>---<h6>

  <h1>我是大標題</h1><h2>我是小一點的標題</h2><h3>我比它還小</h3><h4>111</h4><h5>2222</h5><h6>4444</h6>

單詞 head 的縮寫，意為頭部、標題。 標簽語義：作為標題使用，并且依據重要性遞減。 特點： 1. 加了標題的文字會變的加粗，字號也會依次變大。 2. 一個標題獨占一行。

段落和換行標簽

據英國《新科學家》雜志報道，<p>科學家們針對睡眠的原因提出了幾種說法，</p>從養精蓄銳的淺顯理論到涉及記憶處理的復雜理論，都對人類的睡眠進行了全面的開會討論。

標簽語義：可以把 HTML 文檔分割為若干段落。 特點： 1. 文本在一個段落中會根據瀏覽器窗口的大小自動換行。 2. 段落和段落之間保有空隙。

我不想上學，我想睡覺吃飯，<br>打豆豆

單詞 break 的縮寫，意為打斷、換行。 標簽語義：強制換行。 特點： 1.
是個單標簽。 2.
標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

文本格式化標簽

在網頁中，有時需要為文字設置粗體、斜體 或下劃線等效果，這時就需要用到 HTML 中的文本格式化標簽，使 文字以特殊的方式顯示。 標簽語義: 突出重要性, 比普通文字更重要

標簽語義
<strong></strong>加粗
<em></em>傾斜
<del></del>刪除線
<ins></ins>下劃線
<strong>粗體</strong><ins>下劃線<ins><del>刪除線</del><em>傾斜線</em>

div和span標簽

<div>這是一個大盒子</div>
<span>這是一個小盒子</span>

div 是 division 的縮寫，表示分割、分區。span 意為跨度、跨距。 特點： 1.<div>

標簽用來布局，但是現在一行只能放一個。 大盒子

2.<span> 標簽用來布局，一行上可以多個 。小盒子

?圖像標簽和路徑

單詞 image 的縮寫，意為圖像。 src 是標簽的必須屬性，它用于指定圖像文件的路徑和文件名。 所謂屬性：簡單理解就是屬于這個圖像標簽的特性。?

圖像標簽可以擁有多個屬性，必須寫在標簽名的后面

屬性之間不分先后順序

屬性采取鍵值對的格式，key="value"的格式

相對路徑

絕對路徑

超鏈接標簽

<a href="http://www.baidu.com" target="_blank"> 不知道</a>

鏈接分類： 1. 外部鏈接: 例如 < a href="http:// www.baidu.com "> 百度。

2. 內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如 <a href="index.html"> 首頁 。

3. 空鏈接: 如果當時沒有確定鏈接目標時，< a href="#"> 首頁 。

4. 下載鏈接: 如果 href 里面地址是一個文件或者壓縮包，會下載這個文件。

5. 網頁元素鏈接: 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接.

6. 錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置

HTML 中的注釋和特殊字符

如果需要在 HTML 文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。 HTML中的注釋以"--!<"開始“-->”結束。

HTML中的特殊字符

表格的主要作用

表格主要用于顯示、展示數據，因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是后臺展示數據 的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。

表格不是用來布局頁面的,而是用來展示數據的

1.<table></table>是用于定義表格的標簽。

2.<tr></tr> 標簽用于定義表格中的行，必須嵌套在標簽中。

?3.<td></td>?用于定義表格中的單元格，必須嵌套在標簽中。

4. 字母 td 指表格數據（table data），即數據單元格的內容。? ? ? ?

<table><tr ><td >我是單元格的神</td><td>gggg</td></tr>
</table>

?表頭單元格標簽

一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內容加粗居中顯示.標簽表示 HTML 表格的表頭部分(table head 的縮寫）

<table><tr ><th >我是單元格的神</th><th>gggg</th></tr>
</table>

列表

無序列表

  • 標簽表示 HTML 頁面中項目的無序列表，一般會以項目符號呈現列表項，而列表項使用<li>標簽定義。
  • 無序列表的基本語法格式如下 
    <ul><li>大家好</li><li>呀呀呀</li></ul>

    無序列表的各個列表項之間沒有順序級別之分，是并列的。

有序列表

??有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列定義。 在 HTML 標簽中，

  1. 標簽<ol>用于定義有序列表，列表排序以數字來顯示，并且使用<li>標簽來定義列表項。
  2. 標簽來定義列表項。 有序列表的基本語法格式如下： 
      <ol><li>大家好</li><li>呀呀呀</li></ol>

    自定義列表? ? ??

  3. ? ?表單域? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?表單域是一個包含表單元素的區域。 在 HTML 標簽中，用于定義表單域，以實現用戶息的收集和傳遞。會把它范圍內的表單元素信息提交給服務器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????<input>表單元素? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input標簽用于收集用戶的信息? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?在input標簽中，包含一個type屬性根據不同的type屬性值，輸入字段擁有很多種形式? ? ? ? ? ? ??

    <input type="屬性值"/>

    <input/>標簽為單標簽? ? ? ? ? ? ? ? ? ?type屬性設置不同屬性值用來指定不同的控件類型? ? ? ? ? ? ? ?????????????推薦的文檔查閱網站

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/12923.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/12923.shtml
英文地址，請注明出處：http://en.pswp.cn/web/12923.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

記錄300：指令

記錄300：指令

閱讀更多...
純血鴻蒙APP實戰開發——Web獲取相機拍照圖片案例

純血鴻蒙APP實戰開發——Web獲取相機拍照圖片案例

介紹 本示例介紹如何在HTML頁面中拉起原生相機進行拍照&#xff0c;并獲取返回的圖片。 效果預覽圖 使用說明 點擊HTML頁面中的選擇文件按鈕&#xff0c;拉起原生相機進行拍照。完成拍照后&#xff0c;將圖片在HTML的img標簽中顯示。 實現思路 添加Web組件&#xff0c;設置…
閱讀更多...
【SpringBoot】SpringBoot整合jasypt進行重要數據加密

【SpringBoot】SpringBoot整合jasypt進行重要數據加密

&#x1f4dd;個人主頁&#xff1a;哈__ 期待您的關注 目錄 &#x1f4d5;jasypt簡介 &#x1f525;SpringBoot使用jasypt &#x1f4c2;創建我需要的數據庫文件 &#x1f4d5;引入依賴 &#x1f513;配置數據庫文件&#xff08;先不進行加密&#xff09; &#x1f319;創…
閱讀更多...
Anaconda安裝-超詳細版(2024)

Anaconda安裝-超詳細版(2024)

掃盲&#xff1a;先裝Python還是先裝anaconda? 安裝anaconda即可&#xff0c;不需要單獨裝python anaconda 是一個python的發行版&#xff0c;包括了python和很多常見的軟件庫, 和一個包管理器conda。 一、下載Anaconda 安裝包&#xff08;官網和國內鏡像資源&#xff09; …
閱讀更多...
【深度學習】SDXL中的Offset Noise，Diffusion with Offset Noise，帶偏移噪聲的擴散

【深度學習】SDXL中的Offset Noise，Diffusion with Offset Noise，帶偏移噪聲的擴散

https://www.crosslabs.org//blog/diffusion-with-offset-noise 帶有偏移噪聲的擴散 針對修改后的噪聲進行微調&#xff0c;使得穩定擴散能夠輕松生成非常暗或非常亮的圖像。 作者&#xff1a;尼古拉斯古藤伯格 | 2023年1月30日 馬里奧兄弟使用穩定擴散挖掘隧道。左圖顯示了未…
閱讀更多...
Springboot+Vue項目-基于Java+MySQL的高校專業實習管理系統(附源碼+演示視頻+LW)

Springboot+Vue項目-基于Java+MySQL的高校專業實習管理系統(附源碼+演示視頻+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感謝您閱讀本文&#xff0c;歡迎一鍵三連哦。 &#x1f49e;當前專欄&#xff1a;Java畢業設計 精彩專欄推薦&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python畢業設計 &…
閱讀更多...
Linux文件：重定向底層實現原理（輸入重定向、輸出重定向、追加重定向）

Linux文件：重定向底層實現原理（輸入重定向、輸出重定向、追加重定向）

Linux文件&#xff1a;重定向底層實現原理&#xff08;輸入重定向、輸出重定向、追加重定向&#xff09; 前言一、文件描述符fd的分配規則二、輸出重定向&#xff08;>&#xff09;三、輸出重定向底層實現原理四、追加重定向&#xff08;>>&#xff09;五、輸入重定向…
閱讀更多...
關于 vs2019 c++20 規范里的 STL 庫里模板 decay_t＜T＞

關于 vs2019 c++20 規范里的 STL 庫里模板 decay_t＜T＞

&#xff08;1&#xff09; 這個模板&#xff0c;在庫代碼里非常常見。 decay 英文是“衰弱&#xff0c;消減” 的意思&#xff0c;大概能感覺到就是要簡化模板參數 T 的類型&#xff0c;去掉其上的修飾符。因為常用且復雜&#xff0c;故單獨列出其源碼和注釋。先舉例其應用場景…
閱讀更多...
LINQ(五) ——使用LINQ進行匿名對象初始化

LINQ(五) ——使用LINQ進行匿名對象初始化

總目錄 C# 語法總目錄 上一篇&#xff1a;LINQ(四) ——使用LINQ進行對象類型初始化 LINQ 五 ——使用LINQ進行匿名對象初始化 6.2 匿名類型 6.2 匿名類型 可以不用聲明定義一個對象&#xff0c;直接使用new&#xff0c;然后直接賦值即可 string[] names { "Tom",…
閱讀更多...
動態順序表實現

動態順序表實現

目錄 1. 順序表的概念 2. 實現的功能 3. 順序表的定義 4.順序表的實現 4.1 seqlist.c 4.2 seqlist.h 4.3 test.c 5. 順序表的優缺點 5.1優點 5.2缺點 1. 順序表的概念 用一段物理地址連續的內存依次存儲數據元素的線性結構 本質就是數組&#xff0c;在數組基礎上要求…
閱讀更多...
從零手寫實現 tomcat-11-filter 過濾器

從零手寫實現 tomcat-11-filter 過濾器

創作緣由 平時使用 tomcat 等 web 服務器不可謂不多&#xff0c;但是一直一知半解。 于是想著自己實現一個簡單版本&#xff0c;學習一下 tomcat 的精髓。 系列教程 從零手寫實現 apache Tomcat-01-入門介紹 從零手寫實現 apache Tomcat-02-web.xml 入門詳細介紹 從零手寫…
閱讀更多...
基于Springboot的學生心理壓力咨詢評判（有報告）。Javaee項目，springboot項目。

基于Springboot的學生心理壓力咨詢評判（有報告）。Javaee項目，springboot項目。

演示視頻&#xff1a; 基于Springboot的學生心理壓力咨詢評判&#xff08;有報告&#xff09;。Javaee項目&#xff0c;springboot項目。 項目介紹&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三層體系…
閱讀更多...
Yalmip使用教程(8)-常見報錯及調試方法

Yalmip使用教程(8)-常見報錯及調試方法

博客中所有內容均來源于自己學習過程中積累的經驗以及對yalmip官方文檔的翻譯&#xff1a;https://yalmip.github.io/tutorials/ 這篇博客將詳細介紹使用yalmip工具箱編程過程中的常見錯誤和相應的解決辦法。 1.optimize的輸出參數 眾所周知&#xff0c;optimize是yalmip用來求…
閱讀更多...
5.7日學習記錄及相關問題解答

5.7日學習記錄及相關問題解答

1. 閱讀文章 復習 JAVA基礎——接口&#xff08;全網最詳細教程&#xff09; Java之對象的多態性&#xff08;使用生活中通俗的例子講解&#xff09; 新學 JavaWeb——Servlet&#xff08;全網最詳細教程包括Servlet源碼分析&#xff09; 有用 創建Dynamic Web Project工程&…
閱讀更多...
PS濾鏡插件Camera Raw 15.4升級，開啟智能修圖

PS濾鏡插件Camera Raw 15.4升級，開啟智能修圖

前段時間Adobe 更新了photoshop 的智能AI填充功能&#xff0c;深受很多設計師朋友的喜愛。Camera Raw作為PS的一個濾鏡插件對RAW圖片的處理上面有一定的優勢&#xff0c;Camera Raw 15.4升級了&#xff0c;開啟智能修圖木事&#xff0c;一起來看看吧&#xff01; Camera Raw濾鏡…
閱讀更多...
【2024華為HCIP831 | 高級網絡工程師之路】刷題日記（18）

【2024華為HCIP831 | 高級網絡工程師之路】刷題日記（18）

個人名片&#xff1a;&#x1faaa; &#x1f43c;作者簡介&#xff1a;一名大三在校生&#xff0c;喜歡AI編程&#x1f38b; &#x1f43b;???個人主頁&#x1f947;&#xff1a;落798. &#x1f43c;個人WeChat&#xff1a;hmmwx53 &#x1f54a;?系列專欄&#xff1a;&a…
閱讀更多...
ClassificationPrimitive 內部原理

ClassificationPrimitive 內部原理

ClassificationPrimitive 內部原理 發明 ClassificationPrimitive的真是個天才。其原理是利用 webgl 的模板緩沖區實現。 渲染兩次, 首先是繪制模板, 然后繪制真正的內容。 示意圖: function createClass() {const { program, uniforms } WebGLProgram.buildPrograms(gl, …
閱讀更多...
代碼隨想錄算法訓練營第36期DAY22

代碼隨想錄算法訓練營第36期DAY22

DAY22 654最大二叉樹 自己做的時候忽略了&#xff1a;nums.length>1的題給條件。所以每次遞歸都要判斷是否size()>1&#xff0c;不要空的。 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode *rig…
閱讀更多...
牛客網刷題 | BC84 牛牛學數列2

牛客網刷題 | BC84 牛牛學數列2

目前主要分為三個專欄&#xff0c;后續還會添加&#xff1a; 專欄如下&#xff1a; C語言刷題解析 C語言系列文章 我的成長經歷 感謝閱讀&#xff01; 初來乍到&#xff0c;如有錯誤請指出&#xff0c;感謝&#xff01; 描述 這次牛牛又換了個數…
閱讀更多...
sql中的exists和in的區別

sql中的exists和in的區別

在SQL中&#xff0c;EXISTS 和 IN 都用于子查詢&#xff0c;但它們的用法和目的有所不同。 ### EXISTS EXISTS 是一個邏輯運算符&#xff0c;用于檢查子查詢是否返回任何行。如果子查詢返回至少一行&#xff0c;那么 EXISTS 子句的結果為 TRUE&#xff1b;否則&#xff0c;結果…
閱讀更多...
最新文章

Copyright @ 2022~2023