html的基礎知識

時間 2020-10-06

標籤 html 前端瀏覽器框架 ide 學習搜索引擎 url htm 欄目 HTML 简体版

原文原文鏈接

本人對前端所知甚少，遂把基礎知識筆記記錄於下，方面之後學習翻看。有點凌亂。
html中的標籤是前端的基礎。html是一種超文本標記語言。裏面有不少的簡單標籤。總體結構以下：
<html>
<head> ----幫助瀏覽器去解析
<meta />
<title>
</title>
</head>
<body>html

</body>前端

</html> -----根標籤瀏覽器

說明：html根標籤，一個頁面有且只有一個根標籤
head標籤中的內容不會被顯示，幫助瀏覽器解析
title：網頁的標題標籤，默認會顯示在網頁的標題欄上，搜索引擎
在檢索頁面時，會首先檢索title標籤中的內容，它會影響到網頁在搜索引擎的排名框架

1.標籤的屬性：
處理標籤的內容，在開始標籤裏添加，實質上是一個名值對
屬性名=「屬性值」一個標籤能夠有多個屬性，而且每一個屬性用空格隔開
<font color="red" size="7">個人</font> ide

2.h5的文檔聲明寫在網頁的最上邊。<! doctype html>
3.網頁出現亂碼的解決辦法：
<meta charset="utf-8" />---設置網頁的元數據，好比網頁字符集
--自結束標籤學習

4.內容標題標籤 ---語義化標籤
<h1>一級標題</h1>
<h2>一級標題</h2>
<h3>一級標題</h3>
<h4>一級標題</h4>
<h5>一級標題</h5>
<h6>一級標題</h6>ui

5.<p></p>
p標籤中的文字，默認會獨佔一行，段與段之間有間距
在html中，字符之間再多的空格，瀏覽器也會當作一個空格，換行也會當作一個
<br />表示一個換行，br標籤是自結束標籤
<hr />表示水平線，也是一個自結束標籤搜索引擎

6.實體：
在html中，> <特殊字符不能直接使用。特殊符號是實體，轉義字符
$實體的名字;
< ---- $lt;url

--- $gt;
空格----- $nbsp;
版權符號--------- $copy;htm

7.圖片標籤：

img標籤引入外部圖片
img標籤也是自結束標籤
src : 設置一個外部圖片的路徑
alt ：設置在圖片不能顯示時的描述
搜索引擎根據alt來識別不一樣的圖片

width:寬度單位爲px
height：高度
通常開發中，除了自適應頁面，不建議設置width和height
<img src="文件名" alt="這是一隻大松鼠"/>
相對路徑：相對於當前資源所在目錄的位置

../表示返回當前文件夾的目錄
../../返回幾個目錄就寫幾個../

8.圖片的格式：
JPEG（JPG）：支持的顏色比較多，圖片能夠壓縮，可是不支持透明,
通常使用JPEG來保持照片等顏色豐富的圖片
GIF:支持的顏色少，只支持簡單的透明，支持動態圖，
圖片顏色單一或者動態圖時可使用

PNG：支持顏色多，而且支持複雜的透明，能夠用來顯示顏色複雜的透明圖片

圖片使用原則：
效果不一致，使用效果好的
效果一致，使用小的

9.meta 標籤還能夠設置網頁的關鍵字

name 中的內容是對content值的描述
<meta name="keywords" content="HTML5" />

meta 能夠用來作請求的重定向
<meta http-equiv="refresh" content="5:url="http://www.baidu.com"" />

10.html的語法規範：
1.html中不區分大小寫，通常是小寫
2.html中的註釋不能嵌套使用
3.html中標籤必須結構完整，要麼成對出現，要麼自結束

11.超連接 a標籤
href :指向跳轉的目標地址，能夠寫一個相對路徑，或者完整的地址

<a href="http://www.baidu.com"></a>;
a標籤中的target屬性能夠用來指定打開連接的位置
可選值：
_self:默認值
_blank：在一個新的窗口中打開咱們的連接
能夠設置爲一個內聯框架的name屬性值，連接將在指定的內聯框架中打開

<center></center>標籤中的內容表示居住的標籤
若是將連接地址設置爲#，點擊連接後自動跳轉到頂部位置
html中有一個屬性，每一個元素都能設置，該屬性能夠做爲標籤的惟一標示。id
id屬性在同一個頁面中只能有一個，不能重複。 #+id屬性值
<a href="#button"></a>

發送電子郵件的超連接，點擊連接後默認打開計算機中的點擊郵件客戶端連接href="mailto:郵件地址"