Html-簡單介紹

時間 2019-11-20

標籤 html 簡單介紹欄目 HTML 简体版

原文原文鏈接

目錄html

爲咱們開發的應用程序提供一個與用戶進行交互的界面，前端分爲HTML五、CSS三、JavaScript三大部分。前端

HTML5基本介紹

1.定義

HTML5（Hypertext markup language）就是html語言，又稱爲超文本標記語言，其中的超指的就是它能表達的內容不單單只是文字，還包括圖片、音頻、視頻、超連接等等。html語言開發的文件是以.html爲後綴，能夠雙擊直接在瀏覽器中打開，被瀏覽器解析被顯示給用戶查看。html5

2.組成：由轉義字符、指令、標籤三大部分組成

轉義字符：特殊字符數字的組合，會被解析爲特殊的含義。被&;包裹，內容爲特殊的字母或數字組成。詳細的轉義字符可點擊轉義字符查看

1. 空格：&nbsp;
2. 字符"：&quot;
3. 字符&：&amp;
4. 字符<：&lt;
5. 字符>：&gt;
6. 版權©：&copy;

指令：被<>包裹，以!開頭的特殊符號，稱之爲指令，指令中不區分大小寫

1.文檔指令：<!doctype html>  <!--須要出如今一個html文件的最上方，表明該文件採用html5語法進行編寫文件的-->
2.註釋指令：<!-- -->  <!--這裏書寫的就是註釋內容，不會被瀏覽器解析展現給用戶看-->

標籤：被<>包裹，以字母開頭，能夠結合數字、-鏈接符等合法字符的特殊字符，稱之爲標籤。標籤中不區分大小寫，有系統標籤與自定義標籤兩種

<!-- 頁面結構相關的系統標籤 -->
1. 頁面根標籤：<html></html>
2. 頁面頭標籤：<head></head>
3. 頁面體標籤：<body></body>
4. 頁面標題標籤：<title></tile>
5. 元標籤：<meta />
6. 連接標籤：<link />
7. 樣式標籤：<style></style>
8. 腳本標籤：<script></script>

<!-- 簡單的系統標籤 -->
1. 標題標籤：<h1></h1> ... <h6></h6>
2. 段落標籤：<p></p>
3. 換行標籤：<br />
4. 分割線標籤：<hr />
5. 行文本標籤：<span></span>
6. 斜體標籤：<i></i>
7. 加粗標籤：<b></b>
8. 圖片標籤：<img />
9. 超連接標籤：<a></a>
7. "架構"標籤：<div></div>

<!-- 複雜的系統標籤 -->
1. 無需列表標籤：<ul><li></li></ul>
2. 表格標籤：<table><!-- 包含大量的表格子標籤 --></table>
3. 表單標籤：<form><!-- 包含大量的表單子標籤 --></form>

自定義標籤：知足合法命名的全部標籤
<num></num>
<s1-t></s2-t>

註釋：html語言中，系統建議只使用系統標籤，不建議使用自定義標籤瀏覽器

Html網頁骨架

<!--文檔指令，必須出如今html文件的最上方，一個html文件只出現一次，html表示該文件採用html5語法進行編寫-->
<!DOCTYPE html>
<!--根標籤,一個html文件只出現一次，只有head和body兩個子標籤-->
<html lang="en">
    
<!--頭標籤：樣式、腳本、後勤操做：頁面編碼、頁面標籤標題圖標，一個html文件只出現一次-->
<head>  
    <!--聲明編碼，表明標籤結束的/可省略-->
    <meta charset="UTF-8" />  
    <!--頁面標題標籤，用來顯示頁面標籤標題-->
    <title>Title</title> 
    <!--用來存放出如今head中的CSS3樣式代碼的標籤-->
    <style></style>
    <!--用來存放出如今head中的JavaScript腳本代碼的標籤-->
    <script></script>
<!--頁面頭標籤的結束標識-->  
</head>
    
<!--體標籤：頁面顯示內容存放區域、樣式、腳本，一個html文件只出現一次-->   
<body>
    ...  <!-- 頁面內容-->
<!--頁面體標籤的結束標識-->
</body>
    
<!--頁面根標籤的結束標識-->
</html>

補充

<!-- 關鍵詞元標籤，讓該頁面更容易被百度這樣的搜索引擎經過關鍵詞搜索到 -->
<meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語">
<!-- 網頁描述元標籤，也是輔助於讓頁面更容易被搜索引擎搜索到 -->
<meta name="description" content="80字之內的一段話，介紹該網站">
<!-- 屏幕適配元標籤，讓該頁面適配移動端屏幕尺寸 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<!-- 設置頁面標籤圖片連接標籤 -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />

下一篇：http://www.javashuo.com/article/p-birbmsfj-w.html架構