web前端學習之路-第一天
阿新 • • 發佈：2019-02-17
本人做了幾年的Android開發，最近接手的專案裡面，大多數介面都是載入的網頁，為了能夠更好的接手專案，同時也讓自己能夠多學一些，所以準備自學一些web前端的知識。
學前調研
因為自己也不算新手了，所以在IDE的選擇上，我還是準備用比較成熟的，這裡我選擇的是VScode，如果是小白的話，建議用記事本或者其他編輯器。之所以選擇VScode，是因為專案中用到了，同時我也查了關於這個IDE的資料，反饋還是不錯的，可以自己新增一些外掛，同時也有提示，而且很流暢。使用的話還是比較簡單的，大家去查一下簡單的使用教程就可以上手了。
下面說一下新手該如何學習：
視訊下載完了，還沒開始看，今天主要是對著菜鳥教程學習了一些，下面就今天所學總結一下，也加深自己的記憶
html基礎介紹
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>!DOCTYPE html ：宣告為 HTML5 文件
html ：元素是 HTML 頁面的根元素
head ：元素包含了文件的元（meta）資料
title ：元素描述了文件的標題
body ：元素包含了可見的頁面內容
h1 ：元素定義一個大標題
p ：元素定義一個段落
上面應該是最簡單的一個例子了，就像我們編寫的hello world一樣，除了h1和p，剩下的每次建立一個html基本都會編寫，怎麼快速生成呢，
英文!，然後tab鍵，這樣就可以了，理解了上面的含義，以後就不用每次重複敲了。
基本知識點總結
下面概括性的總結一些常用的：
| 標籤 | 含義 |
|---|---|
| p | 表示一個段落 |
| h | h1-h6，標題的重要性依次減弱 |
| hr | 定義一條水平線 |
| br | 插入單個折行（換行） |
| b | 定義粗體文字 |
| em | 定義著重文字 |
| i | 定義斜體字 |
| small | 定義小號字 |
| strong | 定義加重語氣 |
| sub | 定義下標字 |
| sup | 定義上標字 |
| ins | 定義插入字 |
| del | 定義刪除字 |
| code | 定義計算機程式碼 |
| kbd | 定義鍵盤碼 |
| samp | 定義計算機程式碼樣本 |
| var | 定義變數 |
| pre | 定義預格式文字 |
| abbr | 定義縮寫 |
| address | 定義地址 |
| bdo | 定義文字方向 dir屬性設定文字方向 |
| blockquote | 定義長的引用 |
| q | 定義短的引用語 |
| cite | 定義引用、引證 |
| dfn | 定義一個定義專案。 |
注意事項：
- 標籤要儘量小寫，同時要有開始和結束，屬性和屬性值也要儘量小寫，大多數地方應該都是小寫的
- 提示: 在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name=’John “ShotGun” Nelson’
- HTML程式碼中的所有連續的空行（換行）也被顯示為一個空格。
html連結
<a href="http://www.baidu.com/" target="_blank">跳轉到百度</a>使用a標籤，這裡的href中是要跳轉的地址，如果不設定target，那麼預設在原視窗跳轉，如果加上”_blank”，那麼就會新開啟一個視窗。
- href裡也可以是本地的html檔案，這樣就可以做到相互跳轉
- 跳轉的文字，除了文字還可以是圖片和連結
- 這部分以及跳轉到指定位置，在程式碼中體現，發郵件感覺用的不多，以後有需求再看
html頭部
| 標籤 | 含義 |
|---|---|
| head | 定義了文件的資訊 |
| title | 定義了文件的標題 |
| base | 定義了頁面連結標籤的預設連結地址 |
| link | 定義了一個文件和外部資源之間的關係 |
| meta | 定義了HTML文件中的元資料 |
| script | 定義了客戶端的指令碼檔案 |
| style | 定義了HTML文件的樣式檔案 |
暫時先了解相關的定義，以後用的應該會多一些