整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天開始小編將會給大家講解HTML的入門知識以及做項目會遇到的某些問題以及如何解決此類問題的方法。說道網頁設計，HTML是我們必不可少的一部分。基礎網頁的構成，無論怎么變幻，都是由原聲的HTML代碼組成構成網頁。
下面我就根據(jù)工作中所用和看過的書籍一點一點總結下我們常用的HTML格式和代碼。
一、什么是HTML。
HTM不是一段編程語言，而是一款標記語言，本身不能顯示在瀏覽器中。經過瀏覽器的編釋和編譯，才能正確反映HTML標記語言的內容。HTML從1.0到5.0經歷了巨大的變化，從單一的文本顯示功能到多功能互動，已經成為了一款非常成熟的標記語言。
二、HTML文件的基本結構
<!doctype html>
<html>文件開始標記
<head>文件頭開始的標記
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<title>XX系統(tǒng)</title>
</head>文件頭結束
<body>文件主題的內容
</body>文件主題的結束
</html>文件結束的標記
這里主要說明title和meta(元信息)
<!--說明文件頭-->
<title>XX網站</title>
<!--添加作者信息-->
<meta name="author" content="_永不言棄" >
<!--設置網頁文字及語言 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<!--設置網頁定時(20秒后)跳轉-->
<meta http-equiv="refresh" content="20;url=index.html">
三、HTML主要常用標簽
3.1標題
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.2 標題字對齊屬性align
默認情況下，標題文字是左對齊的。在網頁制作過程中，常常需要選擇對其他的方式，這時我們就需要用到align屬性。
3.3 段落標記p
段落標記是文檔中最常見的標記，<p>用來起始的一個段落。
3.3 換行標記
換行標記<br>作用是在不另起一段的情況下將當前文本強制換行。
3.4 不換行標記nobr
<nobor>表示的是不換行的標記</nobor>
3.5 水平線
<hr/>
四、建立超鏈接
與自身網站頁面有關的連接被稱為內部連接
4.1絕對路徑
絕對路徑是包括服務器規(guī)范在內的完全路徑。絕對路徑不管源文件在什么位置都可以非常精確地找到，除非是目標文檔的位置發(fā)生變化，否則連接不會失效。
4.2相對路徑
為了避免絕對路徑的缺陷，對于在同一站點之中的連接來說，使用相對路徑是一個很好的方法。
4.3 內部連接
<a href="# target="目標窗口的打開方式 " >
屬性值
含義
-self在當前頁面中打開連接
-blank在一個全新的空白窗口中打開連接
-top在頂層框架中打開連接，也可以理解為在根框架中打開連接
-parent在當前框架的上一層里打開連接
4.4 錨點連接
錨點到本頁面中的位置
<a href="#1" >商品名稱</a>
<a href="#2" >產品特點</a>
<a href="#3" >產品規(guī)格</a>
<a neme="1">XX商品</a>
<a neme="2">XX產品特點</a>
<a neme="3">XX規(guī)格</a>
錨點到其他頁面的位置
<a href="index.html#1"></a>對應連接到index.html中name=1的位置
4.5 連接到外部網站
在設置友情鏈接時，需要打開HTTP協(xié)議進行外部連接訪問。
<a href="wwww.baidu.com" >百度</a>
4.6 連接到E-mail
<a href="mailto:郵件地址">。。。</a>
4.7 連接到FTP
FTP代表文件傳輸協(xié)議，一個FTP站點通常包含一些上傳和下載文件的文件目錄。
大部分FTP網站需要使用用戶名和密碼來登錄。
當然還有其他的一些連接方式，例如文件下載，連接到Telnet等。這些都會可以用a標簽實現(xiàn)。
HTML基礎就先講到這里，后面退出DIV設計網頁格式已經網頁分框的實現(xiàn)。
大家在瀏覽網頁的時候，是否思考過這樣一個問題：怎樣才能制作出一個網頁呢？制作出一個網頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁，今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網頁瀏覽器，同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業(yè)的HTML編輯器來編輯HTML。
1、記事本
① 創(chuàng)建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業(yè)編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標題（title），也就是一個網頁的名稱
網頁標題
2、身體（body）
body的部分是整個網頁的重要內容部分，讓人一眼就瀏覽到這個網頁的內容，可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始，以結束標簽終止的元素：元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽，例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現(xiàn)，比如：name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例：
結果：
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式：
l 內部樣式，在HTML元素中使用“style”屬性
l 內部樣式表，在頭部<head>區(qū)域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經打開了制作網頁的大門啦~
文來自為圖靈社區(qū)與CSS魔法的訪談CSS魔法， 原名張鵬，國內知名CSS技術專家，《CSS 揭秘》譯者，QCon 講師，CSS Conf 講師，前百姓網前端架構師。
CSS魔法：對一個專業(yè)的 CSS 開發(fā)者來說，首先，CSS2 的核心知識必須完全掌握。以《CSS權威指南》（第三版）為例，除了 “聲音樣式” 之外，這本書的所有內容都是應該透徹理解的。即使記不住某些冷僻屬性的名稱與行為，也需要知道在哪里可以快速查閱。
接下來，關于 CSS3，很多同學都問過我這樣一個問題：“魔法哥，現(xiàn)在瀏覽器都支持 CSS3 了，我跳過 CSS2 直接學 CSS3 可以嗎？”
在回答這個問題之前，我們需要先搞清楚 “CSS3” 到底是什么。讀過《CSS揭秘》這本書的同學應該都很清楚了，“CSS3” 是一個俗稱，并不是 W3C 的官方術語。基本上它是CSS2 之后更新或新增的 CSS 規(guī)范模塊的合稱。
實際上，CSS3 相對于 CSS2 并不是類似軟件版本更替那樣的升級。CSS2 的全稱是 “CSS Level 2”，后續(xù)的 CSS 規(guī)范并不是完全以替代品的形態(tài)出現(xiàn)的，某些 Level3 的 CSS 規(guī)范模塊（或新增的規(guī)范模塊）往往是基于 CSS2 來擴展的。
因此，對于 CSS 學習者來說，如果買了一本只講 CSS3 新增內容的教程或參考書，那還需要搭配 CSS2 的書來看。事實上，由于篇幅所限，市面上絕大部分以 “CSS3” 為賣點的圖書確實都不會重復講解 CSS2 的內容。看到這里，相信上面的問題在大家心中已經得出答案了吧。
魔法哥自己的學習路徑是這樣的：
如果新入門的同學面對龐雜的 CSS 體系感覺無從下手，不妨參考這條路徑。
CSS魔法：01.首先，推薦大家使用 CSS 預處理器。由于 CSS 并不是編程語言，并不具備抽象能力，當網站的規(guī)模發(fā)展到一定程度之后，原生 CSS 很難解決抽象與復用的問題。而預處理器則正好彌補了 CSS 在這方面的不足。
即使你不打算學習預處理器的特有語法，甚至還有些排斥，那也不妨嘗試利用它的模塊機制來拆分和組織代碼。由于預處理器大多兼容 CSS 原生語法，因此你可以保持原來寫代碼的習慣，僅利用預處理器在模塊化方面的功能。
對于多人合作的團隊來說，通過模塊來拆分代碼尤為重要。雖然引入預處理器會要求你在工作流中加入構建環(huán)節(jié)，但我認為這個成本是完全值得的。
02.做好 CSS 代碼的 “分層”。我設計的 CSS 架構通常都會由“Normalize + Reset → 通用基礎樣式 → UI 組件 → 頁面通用的布局框架 → 單個頁面的布局和樣式”這幾個層級構成，越往左越靠近架構，越往右越靠近業(yè)務。
劃好層級并把代碼寫到正確的層級去，可以帶來很多好處：在團隊分工上，可以把不同層級的代碼交給不同的人來開發(fā)和維護，相當于關注點分離；從架構角度來看，也可以實現(xiàn) “控制復雜度” 這一重要目的。
03.善用工具。比如通過 Lint 程序來保障代碼規(guī)范的執(zhí)行，通過構建工具來讓重復勞動盡可能自動化，通過 Autoprefixer 這樣的工具來加工或生成代碼，等等。俗話說，磨刀不誤砍柴工，多看多聽多試，用開放的心態(tài)去了解和嘗試新工具，往往會有不錯的收獲。
如果想問 “有哪些實用的 CSS 特性”，那我覺得至少要提一下 Flexbox。它是 CSS3 引入的更強大、更易用的布局方式，而且我們在移動端已經可以安全地使用 Flexbox 的基礎特性了。其它的特性，比如高級選擇符、漸變、動畫等高級特性，也非常有價值，我在編寫 UI 框架時都有實際應用。
此外，大家可能還想了解在編寫 CSS 時需要掌握的原則和思路。這里我會推薦《CSS揭秘》這本書中的“CSS 編碼技巧”一節(jié)。我一直想寫篇文章來講述自己多年積累的 CSS 經驗，但一直苦于找不到合適的切入點，總怕掛一漏萬。而當我讀到這一節(jié)時終于釋然——原來已經有人幫我做了這件事情！隨后我也將它親手翻譯了出來，也算了卻了一樁心事。
CSS魔法：確實，近些年前端領域的新技術、新工具、以及新的實踐方式都層出不窮，稍不留神就會有落伍的感覺。而每個人精力都是有限的，面對這樣的局面，難免會有一種疲于奔命的壓迫感。
我自己的應對方式是抓住核心，放棄自己很難精通的、一時用不到的、或者對當下想做的事情價值不大的技術方向。比如一路以來，我放棄了富媒體方向的 Flash，放棄了圖形與游戲方向的 Canvas 和 WebGL，放棄了單頁應用方向的 MV*，放棄了語言方向的 FP ，等等。
當然這些 “放棄” 都是戰(zhàn)略性的，而不是永久性的。畢竟精力有限，不可能面面俱到。不過，一旦某個方向變成自己必須攻克的戰(zhàn)略要地，那我也必然會義無反顧躍入新坑。
除了在技術范疇內作取舍，我還會把一部分精力放在 “人” 身上——就是寫代碼的這群人。個人英雄的時代一去不復返了，單打獨斗能力再強，也難成氣候。因此，幫助身邊的小伙伴快速成長，打造一支梯隊完備、技能互補的前端開發(fā)團隊，往往更具現(xiàn)實意義。有些時候，這也可以成為一種 “突破瓶頸” 的解決方案——每當團隊里的小伙伴攻克了某項新技術時，我都可以寬慰自己：我不會，沒關系，有小伙伴可以頂上！
CSS魔法：哇噢，這個問題完全是面試題的既視感啊！好的，我來好好回答一下，重溫被面試的感覺。
根據(jù) Web 標準的 “分離” 原則，網頁界面由三層構成：結構層、表現(xiàn)層、行為層。這三者在技術上分別由 HTML、CSS、JS （JavaScript）來實現(xiàn)。大家都知道有句話叫 “術業(yè)有專攻”，在網頁上也是一樣，不同的層應該由不同的技術來實現(xiàn)。
在近些年，CSS 的能力得到了不少提升，比如：hover 偽類的增強以及 :checked、:target 等新偽類的出現(xiàn)，令原本只能由 JS 實現(xiàn)的交互功能也可以用 CSS 來實現(xiàn)了。這意味著，在某些場景下，這兩者的功能有重疊的地方。
不過從原理上來說，CSS 只具備修改渲染樹的能力，無法修改 DOM 結構（“渲染樹” 是指 DOM 樹在應用樣式之后產生的、用于渲染網頁界面的數(shù)據(jù)模型）。CSS 可以通過 display、visibility、opacity 等屬性來控制元素的顯隱，但無法把元素從 DOM 樹上刪除或移動，也無法創(chuàng)建新的 DOM 元素。這是 CSS 的能力邊界。
雖然這兩者的功能有一些重疊，但它們并不是互斥的。JS 和 CSS 是可以合作的，而且我們應該擅用這種合作關系，發(fā)揮各自所長。舉例來說，CSS 的聲明式特性比較簡單易懂，在管理樣式方面更加易于書寫和維護。因此，在實現(xiàn)某些動態(tài)效果的時候，我們可以把不同狀態(tài)的樣式以類的形式寫在 CSS 中，然后讓 JS 通過切換元素的類來實現(xiàn)樣式的變化。
CSS魔法：簡單地說：不可能。
首先說一下 “UI” 這個概念。UI 并不是靜態(tài)的布局和樣式，不是設計師發(fā)給我們的 PSD 圖像。UI 是用戶界面，它的核心是交互，而交互需要由 JS 來實現(xiàn)。交互以及交互傳達出的用戶體驗，才是眼下前端的核心價值。
接下來，我們回到實際的開發(fā)場景中來看待這個問題。如果是團隊作戰(zhàn)，那么團隊中的個體當然可以有所側重和取舍。在整個技術棧中，自己放下的某個環(huán)節(jié)只要有小伙伴可以頂上，那就沒啥大問題。不過如果是打算通吃前后端的全棧工程師給自己做職業(yè)規(guī)劃，那么 JS 是繞不開的。
CSS魔法：這要看你給自己的定位是什么。我認為技術工作者大致可以分為兩類。第一類人單純被技術本身所吸引——相信我們都有感觸，技術本身就有一種迷人的美！而第二類人把技術作為手段，他們學習技術的最終目的是通過技術來推動一些事。這兩種技術人都有各自合理的出發(fā)點，并沒有孰對孰錯之分。
那么，如果你是第一類人，那你對自己的規(guī)劃和定位必然是某個領域的技術專家。所有有價值的技術都應該被你吃透，而且相信你自己也會有源源不斷的強烈興趣，去把這些技術掰開了、揉碎了研究到極致。
而如果你是第二類人，那么 “知其所以然” 就不是必須的了。尤其是在團隊中，你可以把 “知其所以然” 的任務交給技術專家，把有限的精力投入到更適合自己的地方去。
CSS魔法：我這些年寫博客始終以初中級開發(fā)者作為主要受眾，創(chuàng)建的“CSS魔法” 微信公眾號也仍然關注前端初學者群體。因此可以聊的經驗有很多，最重要的應該是——“系統(tǒng)學習、打好基礎”，因為真正基礎的東西是不會過時的。
我也曾模仿別人網站的代碼，或是在網上收集別人發(fā)表的各種技巧，然后把找來的一句句代碼拼湊在一起。雖然這種方法通常也可以生效，但我完全不知其所以然，那些代碼片斷對我來說無異于外星人的咒語。由于無人指導，無法系統(tǒng)地學習知識，當時的狀態(tài)就像是在黑暗的迷宮中摸索一樣。
當時在書店里能找到的相關書籍也無非是一些迎合國人 “短平快” 心理的快餐書，什么“現(xiàn)學現(xiàn)用”“代碼速查 300 例” 之類。我是一個喜歡打破沙鍋問到底的人，這些沒頭沒尾的所謂技巧顯然無法滿足我的好奇心，失望而歸。
幾年之后，以圖靈為代表的科技圖書公司開始引進國外的經典教程和參考書。當《精通CSS》《JavaScript 高級程序設計》這些著作捧到我手上時，你可以想像我當時有多么欣喜若狂。
在瘋狂求知的過程中，我發(fā)現(xiàn)，前些年我在網上費盡辛苦收集到的珍稀黑魔法，其實在書里都有著更加全面和系統(tǒng)的講解。當我穩(wěn)固地掌握了 HTML、CSS、JS 的基礎知識之后，我驚訝地發(fā)現(xiàn)，原先那些看似神奇、背都背不下來的外星咒語，早已融入我的血液，成為信手拈來的本能。
現(xiàn)在的孩子們是幸福的，你們生活在一個信息通暢、資源富足的時代。因此不需要眼巴巴地乞求 “大神們” 施舍只言片語的秘技，只要多讀幾頁書，你也可以成為別人眼中的大神！
希望這樣的“CSS魔法”能對大家有所幫助！
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
