總網頁瀏覽量

2016年9月29日 星期四

[HTML] 學習 003 DOM和CSS

MDN 的第三個教學 - How CSS works

https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_Started/How_CSS_works

沒有中文翻譯了
所以只好邊看邊到處去找參考資料了
大概以我的翻譯能力 和目前什麼都不懂的情況下去給自己說明

以瀏覽器來顯示文件內容(document)的時候,
文件是和樣式板一起顯示的, 這個文件就會分成兩種情況去執行.

1. 瀏覽器會改變標記式語言和CSS到DOM中.
    DOM就表示文件在電腦中的記憶體內.
    DOM便結合了文件內容以及其樣式.

2. 瀏覽器只顯示DOM內容.

標記式語言使用element來定義文件的結構.
使用者會標記這個element, 用的就是 tag,
這個 tag 字串開始為 '<' , 結束為 '>'.
許多的element都是成對的,
在結束的 tag 就會先加上 '/'來表示結尾.

 <head>   </head>
 _        _  <---- tag
 _ _ _ _    _ _ _ _ _ < ----- element

在DOM中會是一個類似 tree 的結構.
每個 element, attribute 和執行的 text 在 DOM 中都變成樹的節點,
最後變成一棵樹.

了解 DOM 是為了幫助設計者設計網頁,
除錯和維護使用的 css,
因為 css 和 DOM 兩兩相關.

從第一次和第二次的練習網頁中都有的程式碼

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>
 
在 DOM 中 p 就如同是 parent.
而 chile 就 strong 和其 text.

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

the markup language  標記式語言
DOM (Document Object Model) 文件物件模型

2016年9月28日 星期三

[HTML] 學習 002 加入css了

MDN 的第二個教學 - 為什麼要用CSS?
https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_started/%E7%82%BA%E4%BB%80%E9%BA%BC%E8%A6%81%E7%94%A8CSS

淺顯易懂 好網站 ㄎ

html 的標籤說明其實可以自己google,
我直接看 wibibi 也是不錯的網站拉,哈哈,
只是用 wibibi 學對我來說好像沒法有效吸收.

如果許多網站介紹的
HTML 著重於內容的描述
CSS 著重於樣式的表現

把內容與樣式分開 利於管理和維護,
可以對於相同標籤同時進行修改,
已可用的標籤來和HTML相比, css 的樣式標籤較多,
不然的話要單獨設計標籤會使得單純的HTML網頁內容龐大,
並利用圖層方式使得網頁有前後關係, 讓使用者設計上更有彈性.

新增一個css檔案叫做style1.css
內容為
   strong {color: red}

而在上一篇 [HTML] 學習 001
所新增的 html來檔拿來修改,
為了和第一次的程式區別所以重新命名為 doc2.html,
修改部分用黑體字表示.

doc2.html
 <html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   <link rel= "stylesheet" href="style1.css">
   </head>
 
   <body>
      <p>
         <strong>C</strong>ascading
         <strong>S</strong>tyle
         <strong>S</strong>heets
      </p>
   </body>
</html>

在上一回有提到 <p> 和 </p> ,
利用標籤就可以使段落與段落之間自動分行,
並有一定的間距, 在預設的縮排效果中是沒縮排的,
這時候就可以用 css 來做樣式的變化.

在 html 裡面link標籤位於head中,
用以控制網頁和外部的資源相互關係,
但是引用的css會因為使用者使用的瀏覽器不同導致不同的結果.


   <link 屬性 屬性值 種類>

之後就會看到差別囉


來和第一次的網頁顯示比對一下

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOUAAAB7CAIAAAAEx9ByAAAQx0lEQVR4nO2daVMb2bmA+7foD/An+Ac3cQqDbIwtkCupfLiV5UOWSqWUqdKtupnMJE7KSYU7gDyeYZnRWLEZsHxtEJK8yCb2SMZgCS1o6ZaEJCR1N4vncj8c3DrdfU4vWiwa3qf6A2q6z9aP3n77SByY2uPrHW7V8PVKyFkOThQDTjYwUVgZZ1fG8w+vwQabxsaujBdWxtnARDHgLAcnKiFnNawvG9OhqeXgBBuYSN6/+tJ7JXj70oOZ4eXPRhYnLy5OjsAGm+Z2cfmzkQczw8Hbl156ryTvX2UDE+XghLa1bfp6YuqKI+Ybe+QZWZ4ZW/f/MRm9x2XW65UMXy8dHvCHAECHr5fq5QSXWU9G7637/7g8M/bIMxLzjbErDg1r2/G1Gr5eDDjfLF5d/dwe+Po3OxvLQj2/v78viqIoigIAGAY5s7+/Lwr17NajwMIvVj+3v1m8WgyQ0wPTvlZCzmLA+fyr0XuTl7dfzh/sN8FRoCuIonhwcLD96pt7k5cj86PFgLMScnbkK4qskYXR5ekr5exzMBXoOqIoVrmt5ekrkYVRdZQ152s5OBHzjd2dvFxOr4KsQI8QRXG38N3dycsx31g5ONGmr5WQk10Zvz89nIr+C2QFeoooiqnvFu5PD7Mr43hWYMLX0prz6fzlR3M/E+psv7sDnH1Evhb66j+fzl0qrZn3tRJy5h9eW/jbUOntYr87ApwXSon7C38byj28JoVYo76WgxPrX4+uzP5UqOf71Xqbzeb3+02dMjU15XA4etQeoEN4ntc5ollZmf3p+tejUhZr1Fc2MLE8ORwP/1m7fOY9ZsUyAvhqRUZGRtbX19X7I5HI0NBQo9HQPj0e/vTbySE2YMbXavj6zoNrszeGa3GvRtG4poODg233kMaZ8ZVhmH434cMRDodHRkZevHiB70SyPnv2TPf0veTi7I3hnQfX0MSWIV93Q86X3tGlWz9ustQKYrGYzWbrQv/ogK8WRaGscVkFQeBL0aVbP37pHd0NOY36WlpzPvKMPPf9kq9lNYpmGCYWiyl2Tk1NSUkC2uNwOFwul81mYxgGhWH0s3SAy+VyOBwOhwPtdLlcaD/uq3SKWsdYLMZgSAe4XC5p59TUlHS8oii8F6ipUpMGBwcZhkFvS/QzfjBevrqn6Ei8bb24BZ1aHj9+jJRFskYiEaNnNivPfb985BlBswSGfGUDE9/8fWhr9SPtkv1+v/oy4Lqga49ERJcZXXX0My4HrpSUZki+Dg4OSuI6HA5cPkGelthsNtSAqakpPPzjZUrvB+lXRF+lU1D70c/IY0EeyP1+PxoEvKcul0samfMWXxFPnjwZGRkxJ6sgCIKQCHz0zd9PUlh9X6vh6/mH1zyfXCi/umGkdHSRJAnw+IquqCSBgF1vAbvk+E4BEx35qgifeF2CKgGQisIVl8r0+/3qHEYjvkpVSOZJakrhFoGKxXuK13U+fUWRdXh4+Pnz56ZOLG/Oez65kH94rRo24Gsl5NxaHLv9l0uNxKzxOmw2WywWwy+tdMnN+iodL/mqkSib9VV9U27bV3VuDb5KSGnAkydPzCrbSN25/ZdLW4tjlZBT39dycOLp3KWlWz9psk81CvX7/bgo6KpLoVHAbs1GfJWuKIqmSCApH8Bv4i6XC0+a0fGSOlJQp+UDeOKBjrTZbGgPKsqgryhPldogZT40X9WJ/hlGkbM+e/bs4sWLJpRtVpZu/eTp3KVycELfVy4wvvjPi0/v/lpoVrSLxW/9uDFSMmAqvqqLwp+3iMmAuhl4+fjzEB4LFQ9JKAtH93Tj8VV4nwhJyYBA9xUdeU6et4gPWEhZ44nss8XfL/7zIhcY1/G1Gr7OrozPfHwh+2KyB30ho8gHAEtDe8CKRCLDw8MGC8l+Nzfz8QV2Rc/X3ZBz4+6Y59PLzeyDrvZCC/AVUMBzzz2fXt64O6blazV8nQuML382vDL3c+2Z1+4CvgJKmpWVuZ/fnx7W8rUScu48uPbXj35YfPNNv9sLnHfym9/e+MMPqL6i4Prt5NC9z3+l+6QFAL1GFMV/3f4t2ddq+Hppzflk7vKNj35UyhC+XAMAH55d9i3B10rIyQXGIwujH//uPzYiX/W7kQDQgpECKlpTiAuM7zy4ujw5/InrQjTig7/TAk4VTGkNOerYvHflydyle/8Y8vzpR1/P/I7Nx0FW4LTB/M9/X0DbrT+P3vf+13fP7pa59MHBQb8bBgAEmHfv3h0dHR0eHh4cHOzv7+/v7/e7SQBA5dx9UQiwNOArYCXAV8BKmPO12eQr1VqBK22ns4nUzmYitZlIvd3OpLOFXIGrVGs9aiUAIIz62mzyuQK3mUglM7kCV6rW9vbqDZ4XeF7Yqzd2qzW2WE5mcq+3tnMFrqctBs4z+r42m3yBK21tp7MFbq/eEDXheSFb4MBaoEfo+Nps8ulsIZnJ6ZqK02g20zv5RGqn2dRbcAYAzKDla7W293Y7ky1wPC8Yl1WiwJVWwi+WVx7/bzACG2xd2ai+Npt8PJnhiuU2TJWo1vY2trYPD4/eAUA3IPvabPLJTC5b4DqRVYqy6Rx7DADdgOxrni0mM7n20gA1yUyutFvtReuLxWIvigVOLQRfm01+M54y+ICVzWZzubz2MTwvvImnDo/edb310Wi062UCpxmCr3m2aDATiMcTa6HwWjCcTme0j8yzxRyrHwtZlg2Hwz6fb2FhIRwO5/N57ePB1/MGwdfNeKrRbBqVNRReC4WD4ceCoJU8oBCr0Q6e5+/cuRMIBIrFIvqaWLFYXF1dvXPnjiAItLPA1/OG0tdKtRZP6gRLhaxroXA6o39KIrVTqzeIjeB5/ssvvyyVSupflUqlmZkZnueJJ1J8jboHGIZh7F58z4D73Lvd5VHoRnFmy1D6mmeLebZoTla9ZABR4ErZAkdshM/n293dlV4uLS35fD7pZblc/uKLL8i9Jfrqtb9X1Ws/sdbssLSK0Hl58tZgGIZh6DWg6tWNOCnIa2eU2L0nZasLjboHGKyDeMPUdertMojXTqjmNPiazOTKlWrXZRVFsVKtJXcI+SjLsqFQCN8zPz+/tLSE7wkGg7lcjtBbkq+kITA3LIqjqS+ltwOCKs/JL6i+Ul5G3QMDdvuAosyo2z4woO8r6TftCYbeTcZ9NVVLp75qzwwoZCVu6/9+STyXlsKGQiHdaSmO48LhMKG3PfHVmK5R9wA1tsl5r047vrq9brmwXrvdK7uBaL5FNDtmsO0D7ii5mlPiK+1hK53Z0ZUVbaZ8nZ2dPTo6wvco8oHj4+PDw0OPx0PorcpX7NZq97auGj4srUMMhUnKS42BlpfXOrAtX6PHXnvrrKh7AO8WzVe8JjxjwdILPAeRJ/qEvVq+SgXZvfJiB9xR6S2H75A1pFNfN94maR8TbCdTnfgqimJ0M6Fuwezs7OHhIb7n5s2bN2/exPcY91U+BGpfFVeSmB0aygVkv1BeBQxKrktyheIrJmzUbUc7tH3F9qL42KpfGgXd3ZQC5UPF4Jk0YWTwFNxrl2na3oOF0td4MkPLBwRBfL3xRlfWf798RTy90WxuJdLqFkQiEUU+oPaV47jV1VX1uaZ9VSmjvAxGdTX6OINf6Tbj6/uo2hJXx1e5roRZEmVDqPk1pWGt4rDdxHuZrEi8lPd6d+prIp2tVGu0AKlQNhgK6364JVHb29tOZ9UtyOVya2tr+B61r4FAoK3nLZKvmsNjeF6AlL+qC5fvadtX6bbailR0X6mK9MJX7Pj++JrNswWupKFd28oWuFKBI8ywHh8fLyws4PNZivmBcrm8sLBAPNF8PiDLLVWzNCZ0PSlLIxjrBWvdClRJtzpqqkVSvUXkKSslH5BGSdoddbuN5a+qY/A3cs99LZUrup8XEJTNF3R9TWZye/UmsRGiKHo8HtrnBR6Pp9kkn2je12ON5y3DuQCGbOpUUZ7yKnfiq/JiYxPMsuRGbVbrELubOAqy95y0mxSAW4cQcs/WMSdJl/S81Utf0SOX7uexCmVD4cfax/O8sJVIv3v3Pa0d+/v78/Pz6PNY9E1H9HnsrVu3aLIeU3xtF3PBVZduzKabpR91flgIvqaz+XRW/xaPKxtPbGsfbPD7LrlcLhAITE9PT09PBwKBD/l9F0U6qv3SAPiD+YeiH3V+YMjfJ4xuJox85UUQxO1kKpVKGwmuB4dH+s0xCXzf5byh9X1tXV8Nki1wxXKlF63nOPIXEoCzCvXvt+LJjPZEgUEKXCm1k//++//rd0+Bs4DW3xtuxlMd/r0hWyzHkzu9yASA84nW33PXanuxzYTu1wtp5Nnig2DE+23Ad38NNti6sumvl7GZSCVSO/WGifUyeF7I5AqbiVS9of/QBgDGMbR+VoErvXq9lcnpfyiATN14m8wVOFjcBeg6JtZ7S2Zyr15vJVI7aClCFHF5Xqg3GrW9ep4tbsZTG2+TifTOXr3R00YD5xbT678WS7uZbCGezLze2n71eiu2mXi9tY3WLdytVCGmAj0F1isGrAT4ClgJ8BWwEuArYCWYVQCwDky/P2ADABOAr4CVAF8BKwG+AlYCfAWsBPgKWAnwFbAS4CtgJcBXwEqAr4CVAF8BK2HAV/kaTf1fQARbZo26YGkHyJbcVK1FpVubYvHjLtTbg05G3cpV5q2Cjq+E/wTRd2eVywJ2E8KSwvKFznrkq1a9Xfc1iv3DDquh5WsUW8dbvqevxvbQ15O3J74gNENaj1KnCNMuaNYLvmJo+HoybKo1eeWDJ48MihX9KBFZf+18Zb34GphuYj6APJH/+wLd83W6HG39Hy+8bSeL9itXnGROFm9X/PMCcoOM1it10tsqSbXILK0K0pqZ6rGnX6dTCN1X+aBpHCO7ceH6yFexxxcHJfyGXpRsrV5sbdFjla/kU2RtUcZMYp8pRyjLkS9+yqgWRJZ1Qt5vM/Wq7VWMH7kK1RDI3w7YArLE63RKoftKDK9ylMGWZp/GKeaLwq+KwlfFwtKt81Ur8lLjiDKRVJ5JTg6wFy1fCctv04dTo17leYrKDF4AxVMqthb2KTdUTke+SqjvSe/3qFcrNxKy8aJUCSF5fkBxmFSRukb9NFTxlEmK01RtpHaoq9FNRMn1kt5wrVhOroIwzq0BUt3ujF7mU0AX8oHW4CpGiZAY0S8ZrSj1yGNl9MhXZZPoIVxKWWWhVvJVjZGKFfVq+0qugjDfoIglioBtpn39xOzzlswLo3c8r/QfHanxlV7UB4yv6h7LsmJSG1XPXhrxlYp2vWbiq6r7JDQvwikPtZ3MZxFzTnJ3ybGI8Ht1USbyV5KvZvJXZYcVr1Vtj7oHmAG7XVY+/t8oCG8U6ujQ66X7qlEFua2q/JXUklMdYrU/L6DcVohP4bJBJmQG+GCps0B6USbmB4i+EucHaDGEeIel3U6UrZEOIj7Ka8ZbrXrpvmpWQZ0S0Hje6uVHMd2hw89jCdOSykxefs1VJconU8hFGZ9/lTeMlEqjOVqNe5683aoYJe+MepaKPv+qIwK1Xi1ftaugzHPLZ/U0rtMp5Px936Wrt7zTH5DOGGffV3mg7q5hbX34CnTA2fdV8w7faZkQWz8w58FX4OwAvgJWAnwFrAT4ClgJ8BWwEuArYCXAV8BKgK+AlQBfASsBvgJWAnwFrAT4ClgJ8BWwEuArYCXAV8BKgK+AlQBfASsBvgJWAnwFrAT4ClgJ8BWwEuArYCXAV8BKgK+AlQBfASsBvgJW4v8BixEMDEjDHNwAAAAASUVORK5CYII=


2016年9月27日 星期二

[HTML] 學習 001 第一個 html 網頁

一曝十寒的學習路 QQ
雖然有計畫 其中也有阻饒
但是好像只是為失敗與不努力找藉口
繼續加油吧

兩個學習網站

https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_started
http://www.w3schools.com/css/

由第一個 MDN 的網站開啟學習之路

Code:

<html>
   <head>
   <meta charset="UTF-8">
   <title>Sample document</title>
   </head>
  
   <body>
      <p>
         <strong>C</strong>ascading
         <strong>S</strong>tyle
         <strong>S</strong>heets
      </p>
   </body>
</html>

<title>  和 </title> 所圍起部分為 '網頁標題'
<head></head> 所圍起的部分稱為 '擋頭 ',
通常以規範和說明網頁的相關資訊,
包含 CSS 或 JavaScript的語法,
直接進行宣告但不會顯示於網頁呈現中.

目前會的宣告語法
連結CSS: <link href ="xxx.css"> 
JS宣告: <script language="javascript" type="text/javascript">

<body></body> 所圍起的部分稱為 '網頁內容',
透過合法 HTML 標籤,
可以在網頁中任意位置加入內容,
再透過 HTML 的標籤或 CSS 樣式來美化.

在 HTML中, 使文字之間產生段落, 分行,
就需要利用標籤來標明, 像是執行樣式的功能.
<p> </p> 作為段落的開始與結束,

<html></html> 所圍起的部分稱為 '網頁部分'

而標籤也可以利用屬性來使得呈現方式更多元,
如背景, 顏色 和 大小等.


strong 是inline element行內元素, 用於強調以粗體表示.

顯示: