2. 程式人生 > >WEB前端-HTML-基礎

WEB前端-HTML-基礎

阿新 • • 發佈：2019-01-18

作為WEB前端的第一篇，先講講WEB大體的情況。
學習WEB前端開發，需要了解三把刀：HTML、CSS、JavaScript
HTML：提供最基本的web語言基礎
CSS：用過Photoshop的朋友應該瞭解一個圖層的概念，css就是實現各種頁面渲染的語言，主要實現的是靜態渲染
JavaScript：跟Java沒有任何關係，是當今最主流的web指令碼語言，主要作用是實現頁面的動態化

講到這裡就順便提一下B/S的最基本的架構圖：
B/S架構、WEB架構
嚴格來講B/S也屬於C/S的一種，只是C變成了被廣泛標準化的瀏覽器，瀏覽器自帶了直譯器、處理方法、API等。

今天主要跟大家分享一下HTML的基礎知識

HTML（Hyper Text Mark-up Language）–超文字標記語言

簡言之 它是製作全球資訊網頁面的標準語言。

下面貼一張來自武sir的HTML結構樹：
HTML、文件樹

先來貼一段HTML程式碼最基本的構成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

DOCTYPE

相當於linux指令碼前的#!/bin/bash, DOCTYPE用來告訴瀏覽器使用什麼規範來解釋程式碼。
常用的有HTML 、 XHTML

有和無的區別：

1、BackCompat：標準相容模式未開啟（或叫混雜模式[Quirks mode]）
2、CSS1Compat：標準相容模式已開啟（或叫嚴格模式[Standards mode]）

這個屬性會被瀏覽器識別並使用，compatMode預設是BackCompat,。
如果沒有，瀏覽器按照自己的方式解析渲染頁面，在不同的瀏覽器就會顯示不同的樣式。
如果添加了，那麼各個廠商的瀏覽器就會按照W3C的標準解析渲染頁面，這樣頁面內容就不會因為瀏覽器不同而出現素材渲染不同的情況。

lang

設定頁面的語言屬性，這裡設定了lang=en,這樣谷歌在載入頁面時就會提示是否翻譯，這是html5的寫法

charset

設定html檔案使用的字符集

< html> < html/>（標籤）

由“一套尖括號+標籤名”組成
html:超文字標記語言，類似於xml、xhtml，是通過一個個成對的標籤來進行配對，實現屬性的配置，並將標籤裡的屬性作用於被標記的內容上。

一個完整的html一般分為三部分：
< html> content < html/>：專案標籤，一個html裡包含首尾，範圍最大的一個標籤，其中標記著整個頭部標籤、內容標籤
< head>content < head/>: 頭部標籤，用於頁面佈局
< body>content < body/>: 內容標籤，頁面的大部分內容都在此處編寫

標籤根據閉合形勢分為：
1、 自閉和標籤
例如 < br /> 只有一套加括號，標籤不成對出現；
2、 非自閉和標籤
例如 < p> content < p/> 由兩套尖括號組成，標籤成對出現；
根據標籤屬性作用域的不同又可以分為：
1、塊級標籤
例如< div> content< div/> 作用域為中間內容所佔的整行；
2、內聯標籤
例如< span> content< span/>作用域為中間內容本身所佔的位置；
PS：具體例項可見最後符的程式碼，用不同顏色來區分。塊級和內聯的區分只是最基本的，到了後面，可以通過其他屬性來相互實現

註釋

html的程式碼註釋方式，其實是一個特殊的自閉和標籤：
完整的形勢為
<!-- 註釋內容 --/>

其他

提一個很書寫規範方面的case：
自閉和標籤  example: < br/>，請在本套的右尖括號“>”前面加上“/”,表示至此已閉合。為了自己和別人以後方便閱讀程式碼;
非自閉和標籤  example：< p> < p/>, 成對的出現的標籤，最後一個叫做閉合標籤，經常有人寫完第一個標籤，就開始寫內容了，寫完內容，就忘了閉合標籤，但是在執行html時，並不報錯，會顯示意想不到的現象，當代碼數量巨大時，排查此類錯誤是非常煩惱並且低階的，請在開始學習是務必養成良好習慣；

另外注意一個格式問題：標籤的尖括號“<” 和標籤名之間是沒有空格的。

下一篇再詳細講一講html的常用標籤

最後來段基礎程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--自閉合標籤-->
    <meta charset="UTF-8">
    <!--標籤屬性 Content=2-->
    <meta http-equiv="Refresh" Content="30; Url=https://www.baidu.com"/>
    <!--使程式碼可以相容IE及其版本-->
    <meta http-equiv="x-ua-compatible" content="IE=edge"/>
    <!--成對標籤-->
    <title>mydome</title>
    <link rel="shortcut icon" href="http://image.so.com/v?q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html#q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html&lightboxindex=5&id=1df6633303e906af8df32c6fa44078ed&multiple=0&itemindex=0&dataindex=20"/>
</head>

<body>
<!--塊級和內聯-->
    <div style="background-color:red">塊級</div>
    <span style="background-color:greenyellow">內聯</span>
    <!--符號，&lt;左尖括號 &nbsp;空格 &gt;右尖括號-->
    &lt;左尖括號  &nbsp; 空格 &gt;右尖括號
    <!--段落和換行-->
    <p>雀巢咖啡<br />巧克力</p>
    <p>蜂蜜柚子茶</p>
    <!--標題，從1至6，逐個變大，可以通過css的樣式來重新定義畫素大小-->
    <h1>脈動</h1>
    <h2>尖叫</h2>
    <h3>可樂</h3>
    <h4>雪碧</h4>
    <h5>醒目</h5>
    <h6>芬達</h6>
    <h6 style="font-size:45">康師傅</h6>
    <!--a標籤：超連結，有錨的作用-->
    <a href="http://www.baidu.com">百度本頁跳轉</a>
    <a href="http://www.baidu.com" target="_blank">百度分頁跳轉</a>
    <!--尋找本頁中對應id的標籤，將其標籤置頂-->
    <a href="#i1">第一章</a>
    <a href="#i1">第二章</a>
    <a href="#i1">第三章</a>
    <!--id可以不寫，如果寫，則唯一，不可重複-->
    <div id="i1" style="height: 500px";>第一章內容</div>
    <div id="i2" style="height: 500px";>第二章內容</div>
    <div id="i3" style="height: 500px";>第三章內容</div>
</body>
</html>

相關推薦

web前端HTML基礎

下劃線 內容 位置 com 目標地址 一是 pre init 不能 一. 字體標簽: h1~h6、<font>、<u>、<b>、<strong>、<em>、<sup>、<sub> 粗體

WEB前端-HTML-基礎

作為WEB前端的第一篇，先講講WEB大體的情況。 學習WEB前端開發，需要了解三把刀：HTML、CSS、JavaScript HTML：提供最基本的web語言基礎 CSS：用過Photoshop的朋友應該瞭解一個圖層的概念，css就是實現各種頁面渲染的語言

WEB前端 | HTML基礎——(3)a標籤、隱藏及浮動

<!doctype html> <html> <head> <meta charset="utf-8"/> <title>浮動</title> <style type="text/css"> .div1,.

前端HTML基礎與css

換行 文件中 不同 spa 平鋪 有序列表 正在 lock 屬性 一. HTML簡介：(使用http協議) 1. 靜態網頁： HTML制作完成，網頁的內容如果沒有人去重新更新或制作的話，內容是永遠一成不變的。 2. 動態網頁： 在不同的

Web前端之基礎知識

border str adding -a ng- lec 時間 索引 apt 學習web前端開發基礎技術須要掌握：HTML、CSS、Javascript 1.HTML是網頁內容的載體 內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，能夠包括文字、圖片、

web前端學習基礎知識3

保留 相互轉換 -1 轉義 至少 控制 前端學習 數字 寫代碼 今天接著給大家講講web前端的基礎知識。 數據運算案例分析：變量值的復制——講數據復制到另一個變量中去 　　　　　　　　 變量的自增或自減——在原有的基礎上進行增加或減少 　　　　　　　　　　　　　　eg

Web前端JQuery基礎

數組下標 新浪 互轉 jquery事件 結果 eap 獲得 isp spa JQuery知識匯總 一、關於Jquery簡介

最適合2018年自學的web前端零基礎系統學習視頻＋資料

TP lar mvc nod 論壇 沒有 根據 webpack git 這份資料整理花了近7天，如果感覺有用，可以分享給更有需要的人。 在看接下的介紹前，我先說一下整理這份資料的初衷： 我的初衷是想幫助在這個行業發展的朋友和童鞋們，在論壇博客等地方少花些時間找資料，把有限的

Web開發——HTML基礎（文件和網站結構）

情況 擁有 navig extern 主動 value 基本 query 搜索引擎優化 　　參考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_we

Web開發——HTML基礎（HTML腳本）

ava 腳本語句 body scrip header back 樣式表 圖片操作 href 1、HTML CSS 　　通過使用 HTML4.0，所有的格式化代碼均可移出 HTML 文檔，然後移入一個獨立的樣式表。 　　舉例1（本例演示如何使用添加到 <head>

Web開發——HTML基礎（HTML塊 <div>/<span> ）

lac 屬性。 api web開發 greate port 一個 另一個 類定義 　　可以通過 <div> 和 <span> 將 HTML 元素組合起來。 1、HTML 塊元素 　　大多數 HTML 元素被定義為塊級元素或內聯元素。 　　編者註：“塊

Web前端-Html部分筆記（五）

HTML 表單 一、表單概述 1、作用： 用於為使用者建立 HTML 表單,用於向伺服器傳輸資料。 表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。 表單還可以包含 menus、textarea、fieldset、legend 和

Web前端-Html部分筆記（四）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。 表格標籤

Web前端-Html部分筆記（三）

下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。 列表標籤

Web前端-Html部分筆記（二）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。 一、常用基

Web前端-Html部分筆記（一）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。 由於是筆記

Web前端開發(基礎學習+坑）

0.基本說明 0.內容為課堂所學基本知識，加自己踩過的坑 1.web基本框架：html+css+JavaScript，html為網頁骨架，css為網頁美化，JavaScript負責頁面動態互動，指令碼等 2.web開發的IDE：visual studio code+Chrome 1.HTML 0.h

web前端開發基礎班課程大綱

前端開發是建立Web頁面或app等前端介面呈現給使用者的過程。前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現網際網路產品的使用者介面互動。Web前端工程師，他是伴隨著web興起而細分進去的行業。Web前端的崗位職責是利用HTML、CSS、JavaScript、

web前端技術基礎課程講解之淺談對soket的理解

淺談對soket的理解 定義： 網路上的兩個程式通過一個雙向的通訊鏈實現資料的交換，這個連結的一端就成為Socket 它是程序通訊的一種，即呼叫這個網路庫的api函式實現分佈在不同主機相關程序之間的資料交換，依照tcp/ip協議分給每個主機的網路地址，如果兩個主機要進行通訊，任何一個程序都要首先知道對方

web前端技術基礎課程詳解之JavaScript面向物件

JavaScript中的面向物件是個老生常談的話題，但是依然有很多小夥伴處於懵逼狀態。面試時候最擔心的就是被問到面向物件相關的內容，自己看過無數的資料，依然對面向物件百思不得其解。到底什麼是原型？什麼是建構函式？什麼是繼承。。。一提到這些概念那真是欲哭無淚、悲憤交加，甚至恨的直咬牙！所以有必要談一次面向物件。