WEB初学者简介，web入门
一，前端——web簡介
1，什么是web?
? ? ? ? ? ? 使用瀏覽器去訪問的程序，web程序，俗稱：網(wǎng)頁。
? ? ? ? ? ? ? ? ? 細分網(wǎng)站： 電商網(wǎng)站，應(yīng)用網(wǎng)站（OA，CRM），門戶網(wǎng)站
2，什么是web前端？
? ?web程序的代碼存儲在服務(wù)器端
? ? ? ? ? ? ? ?代碼分為兩種：一種運行在瀏覽器（客戶端），一種運行在服務(wù)器（后端程序）
? ? ? ? ? ? ? ?運行在客戶端的代碼：? 前端代碼
? ? ? ? ? ? ? ?運行在后端的代碼：? 后端代碼
3，完成的網(wǎng)站： 前端+后端
二，前端都要學(xué)習(xí)什么？
1，靜態(tài)頁面編寫——按照產(chǎn)品設(shè)計圖編寫，開發(fā)網(wǎng)頁（.html ）文件，可以在瀏覽器運行
? ? ? ?技術(shù)： HTML(5)，css(CSS3)
2,?添加頁面功能： 動態(tài)特性，頁面交互
? ? ?技術(shù)： javascript , JQuery , DOM
3, 和服務(wù)器交互
? ? 技術(shù)： server , php , ajax
4,復(fù)雜開發(fā)： HTML5，框架技術(shù)（bootstrap, node.js , angular.js ）, 移動端開發(fā)，微信開發(fā)
?
三，學(xué)習(xí)方式
1，純手寫代碼
2，學(xué)習(xí)難度： 打字速度， 英文單詞
3，增加代碼量
?
四，學(xué)習(xí)入門
1，web基礎(chǔ)知識
? ? ? ?1. internet?
? ? ? ? ? ? ?全球計算機互聯(lián)網(wǎng)，又稱國際互聯(lián)網(wǎng)，簡稱： 互聯(lián)網(wǎng)、英特網(wǎng)、交互網(wǎng)。
? ? ? ? 2，web程序
? ? ? ? ? ? ?就是運行在internet 之上的一種應(yīng)用程序，俗稱： 網(wǎng)頁。
? ? ? ?3，web 應(yīng)用的作用
? ? ? ? ? 可以吧各種信息和服務(wù)無縫鏈接，提供一個生動的用戶界面。
? ? ? ? 4， 工作原理
? ? ? ? ? ?基于瀏覽器和服務(wù)器還有通信協(xié)議來實現(xiàn)信息的傳輸和展示
? ? ? ? ? 通信協(xié)議： http://
? ? ? ? ? 瀏覽器： IE，Chrome , firefox , Opera , safari
? ? ? ? ? 瀏覽器功能：?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1，想服務(wù)器發(fā)送請求，提交數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2，解析執(zhí)行HTML頁面，提供生動形象頁面給用戶
? ? ? ? ? ? 服務(wù)器：? ? 接收前端的請求（手段程序完成）存儲代碼
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 存儲數(shù)據(jù)
? ? ? ? ? ?后端程序 （用 java , php,? .net 后端程序語言去實現(xiàn)， 他們都能直接操作數(shù)據(jù)庫，并且進行業(yè)務(wù)邏輯處理， 并將結(jié)果返回給前端處理）
? ? ? ? ? ?前端進行數(shù)據(jù)的展示： HTML，CSS，JS（通過瀏覽器解析以后給用戶看）
?
2，HTML概述
1，什么是HTML？
? ? ? ? ? ? HTML（Hyper Text Markup Language ） 超文本標記語言
? ? ? ? ? ?瀏覽器： “解釋和執(zhí)行”? HTML 源碼的工具
2，特點
? ? ?2.1，已 .html 或 .html 為后綴
? ? ?2.2，由瀏覽器解析執(zhí)行
? ? ?2.3，可以嵌套腳本語言 （javascript , vbscript）
? ? ?2.4，用帶有尖叫括號<> 的 " 標記" 來標識
3，HTML 基礎(chǔ)語法
? ? 3.1，標記。 什么是標記？
? ? ? ? ? 標記是由 尖括號 包圍的關(guān)鍵詞，并且是具有相應(yīng)功能的符號，比如 <a>
? ? ? ? ? 注意 ： 標記必須用 尖括號 括起來。
? ? 3.2， 分類
? ? ? 3.2.1，封閉類型
? ? ? ? ? ? ? 又稱為? ?雙標記
? ? ? ? ? ? ?語法 ： <標記> xxxx內(nèi)容xxxxx </標記>
? ? ? ? ? ? ?特點： 必須有開始有結(jié)束， 如果忘記結(jié)束，會影響其他內(nèi)容
? ? ? ? ? ? eg:
? ? ? ? ? ? ? ? ?<標記>內(nèi)容</標記>
? ? ? ?3.2.2, 非封閉類型
? ? ? ? ? ? 又稱? 單標記
? ? ? ? ? ? ?語法： <標記> 或 <標記/>
? ? ? ? ? ? ?eg:? ? ?<br>? ? ? 或? ? <br/>
? ? ? ? ? ? ? ? ? ? ? <img>? ? 或? ?<img/>
? ? ? 3.2.2, 元素
? ? ? ? ? 1，元素即標記（標簽）
? ? ? ? ? ? ? ? ?元素之間可以互相嵌套 ，來形容更為復(fù)雜的頁面結(jié)構(gòu)。
? ? ? ? ? ? ? ? ? 元素嵌套 ： 在一個元素中，又出現(xiàn)另一個元素
? ? ? ? ? ? ? ? ? eg:
? ? ? ? ? ? ? ? ? ? ? ?<p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? 以上寫法正確，推薦
? ? ? ? ? ? ? ? ? ?<p><a><img/></a></p> 正確，但不推薦
? ? ? ? ? ? ? ? ? <p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? ? ? ? ? ? 以上寫法錯誤
? ? ? ?***注意： 1，注意嵌套順序，完整嵌套
? ? ? ? ? ? ? ? ? ? ? ?2，代碼換行縮進? ? ??
? ? ? ?2, 元素的屬性和值
? ? ? ? ? ? ? ? 元素屬性的作用： 用來修飾元素
? ? ? ? ? ? ? ? ? ? ? ? ? 語法：? <標記? 屬性=''值‘’? 屬性=''值''? ...> </標記>
? ? ? ? ? ? ? ? ? ? ? ? ? eg:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? p元素的align屬性值為center , id 屬性值為 p1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<p align ="center" id="p1"></p>
? ? ? ? 3 , 標準屬性（通用屬性）
? ? ? ? ? ? id : 元素在頁面中唯一標識
? ? ? ? ? ? ? ? title : 鼠標移入到文字上時，所提示的文本
? ? ? ? ? ? ? ? class :? CSS中， 引入類選擇器
? ? ? ? ? ? ? ? style :? CSS中， 定義元素的行內(nèi)樣式
? ? ? ? 4，注釋
? ? ? ? ? ? ? ?語法：? ?<! --注釋內(nèi)容-->
? ? ? ? ? ? ? ? ? 注意： 1，注釋本身不能嵌套
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2，不能出現(xiàn)在標記中
?4，HTNL標準結(jié)構(gòu)
? ?4.1 首先聲明文檔類型： < ! doctype? html>
? ?4.2 HTMl頁面： 由一對根標記組成 <html> </html>? 緊跟在?? <! doctype html > 之后
? ?4.3 在根標記中包含量部分：
? ? ? ? ?1，文件頭： <head> </head> 用于定義頁面的全局信息
? ? ? ? ?2，文件主體 ： <body> </body> 頁面的主體內(nèi)容
練習(xí)：? ?新建一個first.html? ,寫出網(wǎng)頁標準結(jié)構(gòu)
?
5，head元素
? ? ? ?是title ,meta , script , style , link 元素的容器
? ? ? 1， <title> 內(nèi)容 </title> 定義網(wǎng)頁的標題
? ? ? 2，<meta?> 定義網(wǎng)頁的基本信息 ： 編碼格式，關(guān)鍵字，描述內(nèi)容等
? ? ? ? ? ?<meta charset='' utf-8 "> 編碼格式
? ? ? ? ? ?<meta name="觀極"? content="關(guān)鍵字">
? ? ? ? ? ?<meta name="description " content="描述內(nèi)容">
? ? 3, <script> </script> 定義或者引用js文件
? ? 4，<style> </style> 定義內(nèi)部樣式表
? ? 5，<link> 引入外部樣式表
? ? 6，body元素
? ? ? ?定義頁面主體內(nèi)容
? ? ? ? ? ? ?屬性：
? ? ? ? ? ? ? ? ? ? ? text : 定義文本顏色
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 取值： 顏色的英文單詞
? ? ? ? ? ? ? ? ? ? ?bgcolor : 定義頁面背景顏色
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 取值：顏色的英文單詞
文本標記：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ? ? ?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ? ? ? ? ? ??
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ? ??
?
?
總結(jié)
以上是生活随笔為你收集整理的WEB初学者简介，web入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里云存储_OSS对象存储
- 下一篇： 产品经理——如何挑选一款高效的原型工具？