HTML基礎學習心得分享

来源:https://www.cnblogs.com/xsd1/archive/2019/11/20/11897187.html
-Advertisement-
Play Games

開始學些Html的時候主要進行一些簡單的靜態網頁的處理： 1、HTML 標題 HTML 標題（Heading）是通過 h1-h6 加中括弧<>等標簽進行定義的。 2、HTML 段落 HTML 段落是通過 標簽進行定義的。 3、HTML 鏈接 HTML 鏈接是通過《a》標簽進行定義的。 4、HTML ...


開始學些Html的時候主要進行一些簡單的靜態網頁的處理：
1、HTML 標題
HTML 標題（Heading）是通過 h1-h6 加中括弧<>等標簽進行定義的。
2、HTML 段落
HTML 段落是通過

標簽進行定義的。
3、HTML 鏈接
HTML 鏈接是通過《a》標簽進行定義的。
4、HTML 圖像
HTML 圖像是通過 標簽進行定義的。
5、HTML 元素
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。
6、HTML 元素語法
a、HTML 元素以開始標簽起始
b、 HTML 元素以結束標簽終止
c、 元素的內容是開始標簽與結束標簽之間的內容
d、 某些 HTML 元素具有空內容（empty content）
e、 空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
f、 大多數 HTML 元素可擁有屬性

HTML的一般結構如下：

<html>----以<html>開始，以</html>結束，表示之間的文檔是HTML

<head>----HTML文檔的頭部，主要放文檔的標題信息

<title>未使用CSS的HTML文件</title>

</head>

<body>----HTML的主體部分 

<h1>未使用CSS的HTML文件</h1>

<hr>----在網頁中插入一條水平線

<p>未使用CSS的HTML文件</p>

</body>

</html>

3.標記語法

(1)標記在使用時必須用尖括弧"<>"括起來；標記的大小寫作用相同；

(2)單標記：<標記名稱>，例如<br>它表示換行；

(3)雙標記：<標記>內容</標記>

例如：<em>第一：</em>，它表示突出對“第一：”的顯示；

(4)：標記可以包含標記本身，即可以嵌套使用

<html>

<head>

<title>請輸入密碼</title>

</head>

<body>

<form>

<table border="1", width="321">

<tr>

<td>請輸入密碼</td>

</tr>

<tr>

<td>密碼<input type="password" name="text1"></td>

</tr>

</table>

</form>

</body>

</html>

 

4. 屬性語法

大多數單標記和雙標記的始標記內部都可以包含一些屬性

<標記名字 屬性1 屬性2 ...>

例如單標記<img>表示在文檔當前位置插入一幅圖片

<img src="1.jpg" width="652px" height="1249px" alt="博客">

其中src屬性規定顯示圖像的路徑，width屬性設置圖像的寬度，height屬性設置圖像的高度，alt屬性規定圖像的代替文本，src屬性為必需屬性，其他屬性為可選屬性。

 

5. HTML文件命名：

(1)文件的擴展名要以.html或.htm結束；

(2)文件名中只可由英文字母、數字或下劃線組成；

(3)文件名中不要包含特殊符號，如空格、￥等；

(4)文件名師區分大小寫的，在Unix和Windows主機中有大小寫的不同；

(5)網站首頁文件名預設是index.htm或index.html；

 

6. 編寫HTML文件的註意事項：

(1)所有標記都要用尖括弧<>括起來；

(2)成對出現的標記不要漏寫；

(3)採用標記嵌套的方式可以為同一個信息應用多個標記，如<tag1><tag2>同一個信息</tag2></tag1>；

(4)在代碼中，不區分大小寫；

(5)任何空格或回車在代碼中都無效，插入空格或回車有專用的標記，分別是&nbsp, <br>；

(6)標記中不要有空格；

(7)標記中的屬性，可以用雙引號("")引起來，也可以不引；

<hr color=red> 等價於 <hr color="red">

 


7.<p></p>表示插入段落文字；

8.繪製表格：三個成對標記<table></table>、<tr></tr>、<td></td>

<table width="650" border="1"> ----<table>是製作表格的標記，其後的屬性依次為表格寬度，邊框粗細

<tr>----<tr>表示插入行，一對<tr>表示一行

<td>----<td>表示一列

HTML基礎教程<br>

作者：王占金等

<br>----<br>表示換行，單標記

定價49.00元<br>

</td>

<td>

<img src="1.jpg" width="69px" height="92" alt="HTML">

</td>

</tr>

<tr>

<td>

搜索引擎營銷-網站流量大提速<br>

作者：（美）亨特<br>

定價：69.80元<br>

</td>

</tr>

 

</table>

 

9. 設置頁面標題：<title>頁面標題</title>；

10. 設置基地網址<base>

(1)<base>標記一般用於設計文件的URL地址；

(2)一個HTML文件只能有一個<base>標記，同時該標記必須放於頭部文件中；

(3)<base href="文件路徑" target="目標視窗">

  href用於設置網頁文件鏈接的地址，target用於設置頁面顯示的目標視窗。

  例如：

<html>

<head>

<title>設置基地網址</title>

<base href="http://www.Broad View.com.cn">

</head>

<body>

2007年1月16日，電子工業出版社<a href="index">博文視點</a>公司召開了一次晚會。

</body>

</html>

 

11.定義元信息<meta>

(1)該標記的主要功能是定義頁面中的一些信息，但這些信息不會出現在網頁中，而會在源文件中顯示；

(2)<meta>標記通過一些屬性來定義文件愛你的信息，例如，文件愛你的關鍵字、作者信息、網頁過期時間等，HTML文件的頭部文件可以有多個<meta>標記；

(3)基本語法：

<meta http-equiv="" name="" content="">

http-equiv屬性用於設置一個http的標題域，但確定值由content屬性決定，name屬性用於設置元信息出現的形式，content用於設置元信息出現的內容。

 

12.設置頁面關鍵字--keywords

(1)基本語法：<meta name="keywords" content="value">

(2)語法說明：keywords用於說明定義的是關鍵字，value用於說明該網頁定義的關鍵字，可以是多個關鍵字；

(3)例子：

<html>

<head>

<title>設置關鍵字</title>

<meta name="keywords" content="電腦、英語、經管、財會、職場"> ----此行代碼表示在該HTML文件中定義的關鍵字為“電腦、英語、經管、財會、職場”，當利用搜索引擎搜索圖書時，輸入任何一個關鍵字都可以搜索到該網頁。

</head>

<body>

......

</body>

</html>

13. 設置頁面過期時間--expires

(1)基本語法： <meta http-equiv="expires" content="value">

(2)語法說明： expires用於設計頁面過期時間，content屬性設置具體過期時間值；

(3)例子：

<html>

<head>

<title>設置頁面過期時間</title>

<meta http-equiv="expires" content="FRI,1 Jun 2017 00 00 00 GMT">

</head>

<body>

......

</body>

</html>

 

14.設置頁面背景

(1)基本語法：<body bgcolor="">

(2)語法說明：bgcolor可以設置網頁的背景顏色；

(3)例子：

<html>

<head> ...</head>

<body style="background-color:blue">----此行代碼表示：將網頁背景顏色設置為藍色，也可以設置為 red white等，也可以十六進位數表示，例如“#00ff00”，或者rgb(0,0,0)的形式

......

</body>

</html>

15.設置頁面邊距

(1)基本語法：<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>

(2)語法說明：topmargin 設置到頂端的距離

leftmargin設置到左邊的距離

rightmargin設置到右邊的距離

bottommargin設置到低端的距離

(3)例子：

<html>

<head>......</head>

<body topmargin=0 leftmargin=20 rightmargin=20 bottommargin=180>

&nbsp;&nbsp;2016年5月9日，陰雨

</body>

</html>

16.設計正文顏色

(1)基本語法：<body text=""> ...</body>

(2)語法說明：利用text屬性設置文檔的顏色時，還可以進行其他設置，例如：背景、字體等；

(3)例子：

<html>

<head>......</head>

<body text="white" bgcolor="red">

&nbsp;&nbsp;2016年5月9日，陰雨

</body>

</html>

17.添加註釋 <!-->

註釋信息不會在網頁中顯示，可以放在HTML文件的任何地方

<!--請在此添加註釋語句-->

18. 添加空格 &nbsp;

在主體中使用，一個&nbsp代表空一個字元

19.添加刪除線 <del></del>

使用成對標記<del></del>，在主體中添加

<body>

<del>請在此輸入需要添加刪除線的文字</del>

</body>

20. 插入特殊符號

符號對應代碼

&&amp

TM &trade

￥&yen

等~~

21.設置文字標註標記<ruby>

<ruby>

被說明的文字（當代最可愛的人）

<rt>

文字的標註（志願者）

</rt>

</ruby>

22.簡單文字修飾（加粗、斜體、下劃線）

<body>

普通文字的顯示<br>

<b>加粗文字的顯示</b>

<i>斜體文字</i>

<u>給文字加下劃線</u>

</body>


23.確定文字上下標-<sup>/<sub>

<body>

<sup>上標內容</sup>

<sub>下標內容</sub>

</body>

24.設置地址文字<address>

在網頁中添加地址文字，是為了更方便地突出顯示聯繫方式，將聯繫人的地址信息突出顯示

<body>

<address>請在此添加地址信息</address>

</body>

25.設置等寬文字 <tt> <samp> <code> <kdd>

多數情況用在英文文字顯示中

<body>

<tt>打字機風格顯示</tt>

<code>等寬文字設置內容</code>

<samp>等寬文字設置內容</samp>

<kdd>鍵盤輸入</kdd>

</body>

26.段落<p></p>----雙標記

回車<br>----單標記，強制性換行，可以放在<p></p>之間使用

預格式化<pre></pre>

利用<pre></pre>標記對網頁中文欄位落進行預格式化，在輸入過程中，按鍵盤上的回車鍵，就可以生成一個段落；

設置段落縮進<backquote>

利用一對<backquote></backquote>標記可以縮進5個字元

插入並設置水平線<hr>

水平線的屬性有：align---水平線對齊方式，取值有3種：left，right和center

width---水平線的長度，如500px

size---水平線的粗細

color---水平線的顏色，如red

noshade---水平線是否有陰影

標題標記<hn>，其中n為數字1-6，共分6級，數字越小，字體越大，表示越重要


27.插入列表

列表類型標記符號

定義列表<dl></dl>

無序列表<ul></ul>

目錄列表<dir></dir>

有序列表<ol></ol>

(1)插入定義列表<dl></dl>

<dl>

<dt>聯繫人<dd>***   ----<dt>定義名稱部分，只在<dl>中使用

<dt>聯繫地址<dd>北京市海澱區----<dd>解釋說明部分，只在<dl>中使用

<dt>郵政編碼<dd>100876

</dl>

輸出結果為：

 

聯繫人

***

聯繫地址

北京市海澱區

郵政編碼

100876

 

(2)插入無序列表<ul></ul>

<ul>

<li>聯繫人：***</li>

<li>聯繫地址：北京市海澱區</li>

<li>郵政編碼：100876</li>

</ul>

輸出結果為：

 

·聯繫人：***

·聯繫地址：北京市海澱區

·郵政編碼：100876

補充：無序列表<ul>中用type屬性來控制行的標號

type=disc 設定一個實心圓點的行標號，表示預設項，如上面所示；

type=circle  設定一個空心圓點作為行標號；

type=square  設定一個方形實心點作為行標號；

(3)插入有序列表<ol></ol>

<ol>


<li>聯繫人：***</li>

<li>聯繫地址：北京市海澱區</li>

<li>郵政編碼：100876</li>

</ol>

 

輸出結果為：

1.聯繫人：***

2.聯繫地址：北京市海澱區

3.郵政編碼：100876

補充：有序列表的順序是由屬性type和start來設置的。type表示標號的類型，start表示列表的標號從第幾項開始

type=1 表示用數字標號（預設項）

type=A 表示用大寫字母

type=a 表示用小寫字母

type=I 表示用大寫羅馬數字

type=i 表示用小寫羅馬數字

(4)嵌套定義列表

<dl>

<dt>網頁三劍客

<dd>Dreamweaver

<dd>Flash

<dd>Fireworks

<dt>編程三劍客

<dd>VB

<dd>VF

<dd>VC

</dl>

 

顯示結果為：

網頁三劍客

Dreamweaver

Flash

Fireworks

編程三劍客

VB

VF

VC

(5)嵌套有序與無序列表

<ul>

<li>水果類

<ol>

<li>蘋果</li>

<li>香蕉</li>

</ol>

</li>


<li>蔬菜類

<ol>

<li>蘿蔔</li>

<li>白菜</li>

</ol>

</li>

</ul>

 

顯示結果為：

·水果類

1.蘋果

2.香蕉

·蔬菜類

1.蘿蔔

2.白菜

 

28.超鏈接

一般而言，一個網站的文件都是在同一個目錄下的

在HTML文件中提供了三種路徑：絕對路徑，相對路徑，根路徑

在HTNL文件中，超鏈接可以分為內部鏈接和外部鏈接。所謂內部鏈接：指網站內部文件之間的鏈接；所謂外部鏈接，指網站內的文件鏈接到站點內容外的文件。

(1)絕對路徑：只文件的完整路徑，包括文件傳輸的協議http，ftp等，一般用於網站的外部鏈接，例如：http://ysu.edu.cn,  ftp://202.206.251.100

(2)相對路徑：只相對於當前文件的路徑，它包含了從當前文件指向目的文件的路徑。同時只要是處於站點文件夾之內，即使不屬於同一個文件目錄下，相對路徑建立的鏈接也適合。採用相對路徑是建立兩個文件之間的相互關係，可以不受站點和所處伺服器位置的影響。

相對位置如何輸入

同一目錄輸入要鏈接的文檔

鏈接上一目錄先輸入"../"，再輸入目錄名

鏈接下一目錄先輸入目錄名，後加"/"

(3)根路徑：適合內部鏈接的建立，一般情況下不使用根路徑，以"/"開頭，後面緊跟文件路徑。

 

29.超鏈接的建立

(1)插入內部鏈接： <a href="index.htm">鏈接內容</a>

(2)插入外部鏈接： <a href="http://ysu.edu.cn">燕山大學</a>

(3)設置圖像映射：

基本語法：<img src="URL" usemap=""></img>

  <map name="">

  <area shape="" coords=" , , " href="URL">

  </map>

語法說明：<img>標記表示插入圖像文件，src表示插入圖像的路徑，<map>標記表示插入圖像的映射；<area>標記表示圖像映射區域；shape屬性表示映射區域形狀：rect表示矩形區域，circle表示橢圓形區域，poly表示多邊形區域；coords表示感應區域的坐標。

30.表格

(1)<table></table>表示插入一個表格；

(2)<tr></tr>表示插入一行，<td></td>表示插入一列；

(3)<caption></caption>表示插入表格標題，用於<table>和<tr>之間；

(4)設置表格表頭<th>：將要作為表頭的一行，列標記<td>改為<th>即可；

(5)設置劃分結構表格<thead>、<tbody>、<tfoot>

   所謂劃分結構表格，指將一個表格分成三個部分在網頁上顯示

   <thead></thead>表示定義一組表頭行

   <tbody></tbody>表示定義表格主體部分

   <tfoot><tfoot>表示為表格添加一個標準

(6)設置表格的標記屬性

<table width="" border="" frame="" rules="">

width設置表格的寬度border設置表格邊框的粗細frame設置表格邊框的樣式rules設置表格內部邊框的屬性

above 顯示上邊框，border顯示上下左右邊框， below顯示下邊框， hsides顯示上下邊框，lhs顯示左邊框，rhs顯示右邊框，void 不顯示邊框，vsides 顯示左右邊框；

all 顯示所有內部邊框

groups 顯示介於行列之間的邊框

none 不顯示內部邊框

cols 顯示列邊框

rows 顯示行邊框

(7)設置表格行：<tr align="" valign="">

align設置行內容的水平對齊：left（左對齊），right，center

valign調整行內容的垂直對齊：top（頂端對齊），middle，bottom，baseline（基線）

(8)設置跨行：rowspan

<table>

<tr>

<td rowspan="2"> &nbsp;</td>

<td> &nbsp;</td>

<td> &nbsp;</td>

</tr>

<tr>

<td> &nbsp;</td>

<td> &nbsp;</td>

</tr>

</table>

顯示結果為一個兩行三列的表格，但是第一列的兩個表格合併為一個了，即跨行。

(9)設置跨列：colspan

<table>

<tr>

<td colspan="2"> &nbsp;</td>

<td> &nbsp;</td>

</tr>

<tr>

<td> &nbsp;</td>

<td> &nbsp;</td>

<td> &nbsp;</td>

</tr>

</table>

顯示結果為：

一個兩行三列的表格，但是第一行的前兩列表格合併為一個表格。

如果你現在正在糾結是否繼續學前端，如果你害怕半途而廢不知道從何開始，如果你覺得這篇文章對你還是有很大幫助的話，不介意的話可以加下我剛剛建立的一個學習交流群，有很多相關資料和學習視頻：907694362


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css樣式重置 移動端適配
    css 預設樣式重置 1 @charset "utf-8"; 2 *{margin:0;padding:0;} 3 img {border:none; display:block;} 4 em,i{ font-style:normal;} 5 body, div, dl, dt, dd, ul, o ...
  • 左右對齊Justify遇到的坑
    遇到的問題 這兩天在開發一個病歷的對外展示頁面，設計稿上label是左右拉伸對齊的，顯示效果如下： 怎麼實現這種效果呢？ 首先想到的是文字中間加空格，但是這種方式太low了，而且不太容易控制。網上查資料，發現用justify可以實現。 但是加上上述樣式後，文字依然沒有左右對齊。 justify為什麼 ...
  • ElementUi中el-table分頁效果
    現實的場景中很經常遇到表格el-table數據過多，為了更好的用戶體驗，所以我們需要用到分頁，一般分頁可以視數據量的大小可分為前端控制和後端控制。 先看下效果（已做脫敏處理） 圖1 前端el-table分頁效果 這裡就把ElementUi官方的例子進行修改來說明 <template> <el-tab ...
  • web前端面試經常遇得到的題型
    1.position的值， relative和absolute分別是相對於誰進行定位的？ § absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。 § fixed （老IE不支持）生成絕對定位的元素，通常相對於瀏覽器視窗或 frame 進行定位。 ...
  • JS基礎語法---一元運算符
    * ++ -- 都是運算符 * ++ 和 -- 可以分為:前+ 和後+ and 前- 和後- * 如果++在後面:如: num++ +10參與運算 * 先參與運算,運算結束後自身再加1 * 如果++在前面:如: ++num+10參與運算 * 先自身加1,然後再參與運算 * Ctrl+/可以把選中的代 ...
  • 10. Javascript 前後端數據加密
    為了加強項目的介面安全程度，需求如下 1 var options = { 2 // 前端需要傳送的數據加密 3 data: { 4 abc: 123, 5 bcd: 123, 6 cds: '撒旦教付貨款12313', 7 }, 8 // 模擬後端返回base64碼 9 key: 'NWxCZUZ3 ...
  • JS基礎語法---分支語句之：三元表達式
    獲取兩個數字中的最大值 用if-else語句 var num1 = 10; var num2 = 100; if (num1 > num2) { console.log(num1); } else { console.log(num2); } 兩個分支,最終的結果是兩個分支中的一個,像這種情況可以使 ...
  • 九宮格抽獎邏輯梳理
    一、頁面佈局 ​ 預設九宮格圖 九宮格占點陣圖 HTML頁面代碼： 二、頁面樣式 九宮格佈局相關CSS頁面樣式： 三、代碼邏輯 Luck幸運抽獎函數方法： 獎品列表DOM拼接： javascript / 獎品列表排序 / let sortList = function(data, el) { var ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類