前端開發之基礎知識-HTML（一）

番茄西紅柿發布于2019-04-23 13:41 / 2527人閱讀

摘要：文檔規范文檔規范制定了文檔的編寫規范，可部分遵守，也可全部遵守，看開發要求。標簽行內元素，表示一行中的一小段內容，沒有具體的語義。表示當前文件所在目錄下的上一級目錄，比如表示當前目錄下的上一級目錄下的文件夾中的的圖片。

1.1 html概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

html基本結構

一個html的基本結構如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3     <head>            
 4         <meta charset="UTF-8">
 5         <title>網頁標題title>
 6     head>
 7     <body>
 8           網頁顯示內容
 9     body>
10 html>

第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是lang="zh-CN",不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。

html文檔規范

xhtml制定了文檔的編寫規范，html5可部分遵守，也可全部遵守，看開發要求。

1、所有的標簽必須小寫

2、所有的屬性必須用雙引號括起來

3、所有標簽必須閉合

4、img必須要加alt屬性(對圖片的描述)

html注釋：

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：

1.2 html標題

通過

、

,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：

用作主標題（最重要的），其后是

（次重要的），再其次是

，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。

1 <h1>這是一級標題h1>
2 <h2>這是二級標題h2>
3 <h3>這是三級標題h3>

1.3 html段落、換行與字符實體

html段落

標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>段落title>
 6 head>
 7 <body>
 8     <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 9     文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的
10     標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
11     p>
12 
13     <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方
14     式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網
15     頁可以從一個網頁鏈接跳轉到另外一個網頁。p>
16 body>
17 html>

html換行

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入
來強制換行，代碼如下：

1 <p>
2 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
3 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
4 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
5 p>

html字符實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：

1 
2 <p>
3   一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
4 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
5 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。p>

在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：

1 
2 <p>
3     3 < 5 <br>
4     10 > 5
5 p>

1.4 html塊、含樣式的標簽

html塊

1、div標簽塊元素，表示一塊內容，沒有具體的語義。
2、span標簽行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標簽

1、em標簽行內元素，表示語氣中的強調詞
2、i標簽行內元素，原本沒有語義，w3c強加了語義，表示專業詞匯
3、b標簽行內元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
4、strong標簽行內元素，表示非常重要的內容

語義化的標簽

語義化的標簽，就是在布局的時候多使用語義化的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。

1.5 html圖像、絕對路徑和相對路徑

html圖像

標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。

1 <img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

絕對地址：相對于磁盤的位置去定位文件的地址
相對地址：相對于引用文件本身去定位被引用的文件地址

絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：

“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ ../ ” 表示當前文件所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

云服務器 GPU云服務器前端開發基礎知識 html前端知識 html前端開發 html5前端開發師

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2207.html

Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

shadajin 2019-08-19 11:45 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

asoren 2019-07-01 14:01 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

keithxiaoy 2019-08-23 18:13 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0