整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
認識大前端
１.1 前端就是將效果圖生成網頁，利用html+css+js等技術。
１.2 Pc端 移動端
１.3 用戶體驗
１.4 學習態度
養成一種習慣。
２ 認識網頁
２.1 網頁由文字、圖片、輸入框、視頻、音頻、超鏈接等組成。
２.2 Web標準
W3c組織（萬維網聯盟）
Html 結構標準 相當人的身體
Css 表現標準 相當與給人化妝 變的更漂亮
Js 行為標準 想當與人在唱歌，頁面更靈動。
２.3 基礎班課程安排
Html 2天
Css 7天
Js 3天
２.4 瀏覽器
◆瀏覽器是一個上網的客戶端（軟件）。
１.1 瀏覽器內核
渲染引擎
渲染引擎是兼容性問題出現的根本原因。
瀏覽器和服務器的那點事
１.1 Url地址
Url地址就是咱們說的網址。
１ 認識html
１.1 Hyper text markup language
超文本標記語言。
超文本：超鏈接。（實現頁面跳轉）
１.2 Html結構標準
大家在瀏覽網頁的時候，是否思考過這樣一個問題：怎樣才能制作出一個網頁呢？制作出一個網頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁，今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網頁瀏覽器，同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① 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 屬性總是以名稱/值對的形式出現，比如：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>區域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經打開了制作網頁的大門啦~
盡量確保文檔和模板只包含 HTML 結構，樣式都放到樣式表里，行為都放到腳本里。
統一兩個空格縮進（總之縮進統一即可），不要使用 Tab 或者 Tab、空格混搭。
使用不帶 BOM 的 UTF-8 編碼。
在 HTML中指定編碼 <meta charset="utf-8"> ；
無需使用 @charset 指定樣式表的編碼，它默認為 UTF-8 （參考 @charset）；
省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成為相對地址，避免Mixed Content 問題，減小文件字節數。
其它協議（ftp 等）的 URL 不省略。
通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。
HTML 屬性應該按照特定的順序出現以保證易讀性。
屬性的定義，統一使用雙引號。
a 不允許嵌套 div這種約束屬于語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如a 不允許嵌套 a。
嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。
語義嵌套約束
<li> 用于 <ul> 或 <ol> 下；
<dd>, <dt> 用于 <dl> 下；
<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；
嚴格嵌套約束
inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;
<a>里不可以嵌套交互式元素<a>、<button>、<select>等;
<p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。
更多詳情，參考WEB標準系列-HTML元素嵌套
HTML5 規范中 disabled、checked、selected 等屬性不用設置值。
沒有 CSS 的 HTML 是一個語義系統而不是 UI 系統。
通常情況下，每個標簽都是有語義的，所謂語義就是你的衣服分為外套， 褲子，裙子，內褲等，各自有對應的功能和含義。所以你總不能把內褲套在脖子上吧。– 一絲
此外語義化的 HTML 結構，有助于機器（搜索引擎）理解，另一方面多人協作時，能迅速了解開發者意圖。
文檔類型
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明， 這樣能夠確保在每個瀏覽器中擁有一致的表現。
lang屬性的取值應該遵循 BCP 47 - Tags for Identifying Languages。
以無 BOM 的 utf-8 編碼作為文件格式;
指定字符編碼的 meta 必須是 head 的第一個直接子元素；
優先使用最新版本的IE 和 Chrome 內核
viewport: 一般指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容；
width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度；
device-width: 設備分辨率寬度，輸出設備的屏幕可見寬度；
initial-scale: 初始縮放比例；
maximum-scale: 最大縮放比例；
apple-touch-icon 圖片自動處理成圓角和高光等效果;
apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖;
favicon
在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
