web前端開發(fā)基礎(chǔ)班課堂筆記第一天

1园蝠、認識網(wǎng)頁

介紹網(wǎng)頁產(chǎn)生過程,在程序員眼中不應(yīng)該再是美麗的前端頁面而是此頁面顯示效果和布局的技術(shù)手段如何實現(xiàn)隔节,如庖丁解牛。

2寂呛、瀏覽器

認識五大瀏覽器怎诫,Chrome瀏覽器市場占用最多,前端開發(fā)使用必備贷痪。瀏覽器內(nèi)核(理解)——面試用分為渲染引擎和JS引擎幻妓。

  1. Trident(IE內(nèi)核)國產(chǎn)瀏覽器用
  2. Gecko(firefox)火狐瀏覽器,代碼開源插件多劫拢,走向沒落
  3. webkit(Safari)
  4. Chromium/Bink(Chrome)
  5. Presto(Opera)
3肉津、Web標準

結(jié)構(gòu)標準:結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類强胰,主要包括XML和XHTML兩個部分。
樣式標準:表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式妹沙,顏色偶洋,大小等外觀樣式,主要指的是CSS距糖。
行為標準:行為是指網(wǎng)頁模型的定義及交互的編寫玄窝,主要包括DOM和ECMAScript兩個部分。

4悍引、HTML初識

HyperText Markup Language 超文本標記語言
用代碼的形式展現(xiàn)

4.1哆料、HTML骨架格式

<html> <head>頭部 <title>網(wǎng)頁名稱</title>題目 </head> <body> 頁面主體 </body> </html>

  1. html標簽:作用所有html中標簽的根節(jié)點
  2. head標簽:作用用于存放title頁面題目 meta base基礎(chǔ)路徑 style樣式標簽 script link 注意在head標簽中我們必須要設(shè)置的標簽是title
  3. title標簽:作用讓頁面擁有一個屬于自己的標題
  4. body標簽:作用頁面的主體部分,用于存放所有的html標簽如p h a b u is em del ins strong img
4.2吗铐、HTML標簽分類
  1. <標簽名>雙標簽</標簽名>例如 <body> </body>成對出現(xiàn)
  2. <標簽名/>單標簽 例如<hr/ >水平線 <br/ >換行
4.3东亦、HTML標簽關(guān)系
  1. 嵌套關(guān)系 (父子)<head> <title></title> </head>
  2. 并列關(guān)系 <head> <body></body> </head>
5、開發(fā)工具
  1. DreamWeaver
  2. Sublime
  3. WebStorm
  4. HBuilder
  5. Visual Studio Code
    個人建議用Sublime加上插件可以實現(xiàn)各種功能和需求
    有機會各種都接觸一些唬渗,畢竟目前無法定論將來工作時用哪個工具
6典阵、文檔類型

html:xt 按下Tab鍵快速生成標準結(jié)構(gòu)(快捷鍵)
DTD 文檔類型定義Document Type Definition
我們學(xué)的是HTML的下一個版本XHTML

6.1、XHTML是什么镊逝?

可擴展超文本標記語言 Extensible HyperText Markup Language

  1. <!DOCTYPE>后面的第一個標簽必須是<html></html>必須是最后一個標簽
  2. 所有的標簽都必須要有一個相應(yīng)的結(jié)束標簽 例如:<br />
  3. 標準的xtml標簽都要小寫 <head> HEAD
  4. 所有屬性值非空壮啊,必須用雙引號 例如:屬性=“值”
7、字符集

utf-8 目前最常用的字符集編碼方式撑蒜,常用的字符集編碼方式還有g(shù)bk和gb2312
gb2312簡單中文包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK 包含全部中文字符是GB2312的擴展歹啼,加入對繁體字的支持,兼容GB2312
UTF-8 則包含全世界所有國家需要用到的字符
以后在meta標簽內(nèi)設(shè)置charset=UTF-8

8座菠、學(xué)習(xí)HTML常用標簽
  1. 標題標簽6個h1至h6 h1不能亂用會影響SEO
  2. Ctrl+U查看網(wǎng)頁源代碼 Ctrl+F 快速查找 Ctrl+R 快速刷新
  3. p段落標簽/p塊級標簽響應(yīng)式自動換行
  4. 水平線標簽<hr />單標簽
8.1狸眼、文本格式化標簽

加粗<b></b><strong></strong>strong語義化利于SEO
傾斜<i></i><em></em>em語義化利于SEO
刪除<s></s><del></del>推薦使用del
下劃線<u></u><ins></ins>推薦使用ins

8.2、標簽屬性

<標簽名 屬性1="值" 屬性1="值"></標簽名>
標簽屬性用鍵值對形式展現(xiàn)浴滴,之間用空格隔開拓萌,順序不影響結(jié)果
例如<hr width="400">

8.3、圖像標簽

<img src="圖像url" />

  1. alt 圖像不能顯示時的替換文本
  2. title 鼠標懸停時顯示的內(nèi)容(顯示在鼠標右下角)
  3. width 設(shè)置圖像的寬度 height 設(shè)置圖像的高度
  4. border 設(shè)置圖像邊框的寬度 (加數(shù)字顯示邊框)
8.4升略、鏈接標簽

<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>

空鏈接 _self在本窗口打開_blank在新窗口打開(利于SEO)

8.5微王、錨點定位快速定位到目標內(nèi)容(用id屬性聯(lián)系)

<a href="#mao"></a>
需要定位處在標簽內(nèi)寫入id屬性id="mao" 利用mao聯(lián)系兩者

8.6、base標簽和nofollow

<base target="_blank">所有鏈接在新的窗口中打開(基礎(chǔ)路徑)
<a rel="nofollow"> </a> nofollow 作用不讓爬蟲抓取鏈接內(nèi)容

8.7品嚣、特殊字符和注釋標簽

空格 <小于號< >大于號>
&和號&¥人民幣¥ 版權(quán)?
注釋標簽 寫給程序員或自己看的

8.8炕倘、相對和絕對路徑
  1. 圖像文件和html文件位于同一文件夾
    只需輸入圖像文件的名稱即可,如<img src="img.jpg" />
  2. 圖像文件位于html文件的下一級文件夾
    輸入文件夾名和文件名翰撑,之間用/隔開罩旋,如<img src="pages/img.jpg" />
  3. 圖像文件位于html文件的上一級文件夾
    在文件夾名之前加入../ 如果是上兩級需要使用../../以此類推
    <img src="../img.jpg" />
    4.絕對路徑 帶盤符的路徑或者完整的網(wǎng)絡(luò)路徑
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子瘸恼,更是在濱河造成了極大的恐慌劣挫,老刑警劉巖册养,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件东帅,死亡現(xiàn)場離奇詭異,居然都是意外死亡球拦,警方通過查閱死者的電腦和手機靠闭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坎炼,“玉大人愧膀,你說我怎么就攤上這事∫ス猓” “怎么了檩淋?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長萄金。 經(jīng)常有香客問我蟀悦,道長,這世上最難降的妖魔是什么氧敢? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任日戈,我火速辦了婚禮,結(jié)果婚禮上孙乖,老公的妹妹穿的比我還像新娘浙炼。我一直安慰自己,他們只是感情好唯袄,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布弯屈。 她就那樣靜靜地躺著,像睡著了一般恋拷。 火紅的嫁衣襯著肌膚如雪季俩。 梳的紋絲不亂的頭發(fā)上问芬,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天堕阔,我揣著相機與錄音算撮,去河邊找鬼损肛。 笑死挂脑,一個胖子當(dāng)著我的面吹牛军浆,可吹牛的內(nèi)容都是我干的夫植。 我是一名探鬼主播泊业,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼且叁,長吁一口氣:“原來是場噩夢啊……” “哼都哭!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤欺矫,失蹤者是張志新(化名)和其女友劉穎纱新,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體穆趴,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡脸爱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了未妹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片簿废。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖络它,靈堂內(nèi)的尸體忽然破棺而出族檬,到底是詐尸還是另有隱情,我是刑警寧澤化戳,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布单料,位于F島的核電站,受9級特大地震影響点楼,放射性物質(zhì)發(fā)生泄漏扫尖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一盟步、第九天 我趴在偏房一處隱蔽的房頂上張望藏斩。 院中可真熱鬧,春花似錦却盘、人聲如沸狰域。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兆览。三九已至,卻和暖如春塞关,著一層夾襖步出監(jiān)牢的瞬間抬探,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工帆赢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留小压,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓椰于,卻偏偏與公主長得像怠益,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瘾婿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內(nèi)容