2019翔工做室前端培訓(一)

時間 2019-11-16

標籤前端培訓简体版

原文原文鏈接

翔工做室介紹

翔工做室，成立於2000年10月，19年以來一直負責學生在線的運營維護，併爲礦大師生設計開發了礦友，導航站，礦大頭像戳，學工處官網，礦大文庫,易班場地申請系統等衆多互聯網產品。是礦大卓越的科技、媒體和通訊(Technology,Media,Telecom)解決方案的提供者。咱們的成員來自全校多個學院，十幾年來老成員遍及百度，阿里，京東，今日頭條，小米等各個互聯網公司.

技術組html
- 前端組 (HTML, CSS[bootstrap, elementUI], JavaScript[vue.js, React, node.js])
- 後端組 (雲服務器, python, Golang)
- 移動組 (Android, ios)
辦公組
運營組
視頻組
視覺組
易班組

Web入門

創建好你本身的第一個在線網站

所須要的基礎 Web 開發軟件前端
- 計算機
- ** 文本編輯器 (Visual Studio Code, Sublime, Atom, Brackets)
- ** 瀏覽器 (FireFox, Chrome, Opera, Safari, IE)
- 圖像編輯器 (PS)
- 版本控制系統 (git, github)
- 自動化構建工具(grunt, gulp)
- 模板，庫，框架
- ** 本地Web服務器
```
npm install live-server
```
寫代碼以前，應該先作好規劃。將展現什麼信息？將使用什麼樣的字體和顏色。vue
- 你的網頁內容是什麼
- 你的主題中要展現什麼信息
- 你的網頁長得什麼樣
- 設計出一個草稿圖node
  - 文本
  - 主題顏色
  - 圖像
  - 字體
一個網站包含不少文件：文本內容、代碼、樣式表、媒體內容, 須要合理的文件結構python
- 將全部關聯的文件放在一個能反映服務器上文件結構的單獨的文件夾裏
- 文件夾名和文件都使用小寫字母，且沒有空格
- index.html, images文件夾, Style文件夾, script文件夾

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>   <!-- 頁面標題 -->
  </head>
  <body>
    <img src="" alt="My test image"> <!--插入圖像--> 
  </body>
</html>

+ 文件路徑
```
1. 引用一個位於調用的 HTML 文件同級目錄的目標文件，只需直接使用文件名
   好比  my-image.jpg
2. 引用一個子目錄的文件，在路徑前寫下目錄名並加一個斜槓, 好比 subdirectory/my-image.jpg
3. 要引用一個位於調用的 HTML 文件的父級目錄的目標文件，加上兩個點.
```

HTML基礎

HTML是什麼

HTML 不是一門編程語言，而是一種用於定義內容結構的標記語言。HTML 由一系列的元素（elements）組成，這些元素能夠用來包圍不一樣部分的內容，使其以某種方式呈現或者工做

<!-- 開始標籤、結束標籤、內容、 元素、 屬性-->
    <p class="content">個人貓咪脾氣爆:)</p>

屬性應該包含：

1. 在屬性與元素名稱（或上一個屬性，若是有超過一個屬性的話）之間的空格符。
2. 屬性的名稱，並接上一個等號。
3. 由引號所包圍的屬性值。

嵌套元素

也能夠將一個元素置於其餘元素之中 —— 稱做嵌套

right: <p>個人貓咪脾氣<strong>爆</strong>:)</p>
wrong: <p>個人貓咪脾氣<strong>爆:)</p></strong>

空元素

<img src="images/firefox.png" alt="測試圖片">

HTML文檔解讀ios
- <!DOCTYPE html> — 文檔類型。混沌初分，HTML 尚在襁褓（大約是 1991/92 年），DOCTYPE 用來連接一些 HTML 編寫守則，有點像自動校訂等。然而如今已經沒有人關心這些，只是由於歷史緣由必須將它們保留，但沒有實際做用。如今你只須要知道這些就能夠。
- <html></html> — <html> 元素。這個元素包含了整個頁面的內容，有時也被稱做根元素。
- <head></head> — <head> 元素。這個元素放置的內容不是展示給用戶的，而是包含例如面向搜索引擎的搜索關鍵字（keywords）、頁面描述、CSS 樣式表和字符編碼聲明等。
- <meta charset="utf-8"> — 這個元素指定了當前文檔使用 UTF-8 字符編碼，UTF-8 包括絕大多數人類已知語言的字符。基本上 UTF-8 能夠處理任何文本內容，還能夠避免之後出現某些問題，咱們沒有任何理由再選用其餘編碼。
- <title></title> — <title> 元素。這個元素設置頁面的標題，顯示在瀏覽器標籤頁上，同時做爲收藏網頁的描述文字。
- <body></body> — <body> 元素。這個元素包含指望讓用戶在訪問頁面時看到的內容，能夠是文本、圖像、視頻、遊戲、可播放的音軌或其餘內容。

圖像

<img src="images/firefox.png" alt="測試圖片">

<!--
替換文字屬性 alt:
alt 文本應向用戶完整地傳遞圖像要表達的意思
-->

標記文本

標題元素
<h1>主標題</h1>
<h2>頂層標題</h2>
<h3>子標題</h3>
<h4>次子標題</h4>

段落
<p>這是一個段落</p>

列表
無序列表（Unordered List）中項目的順序並不重要，就像購物列表。用一個 <ul> 元素包圍。
有序列表（Ordered List）中項目的順序很重要，就像烹調指南。用一個 <ol> 元素包圍。

<p>Mozilla 是一個全球社區，這裏彙集着來自五湖四海的</p>
    
<ul> 
  <li>技術人員</li>
  <li>思考者</li>
  <li>建造者</li>
</ul>

<p>咱們致力於……</p>

換行元素
語法:<br>或<br/>
做用:讓文本換行顯示

水平線
語法:<hr>或<hr/>
做用:在網頁中表示一根水平線

屬性:
size:表示水平線的尺寸(高度),取值以px爲單位的數字.
width:表時水平線的寬度,取值以px爲單位的數字或者百分比
align:水平線的對齊方式,取值left/center/right
color:水平線的顏色,取值爲合法的顏色值

預格式化
語法:\<pre>\</pre>
做用:保留HTML中回車和空格   --我發現:文字要比正常的小

分區元素

塊分區元素
做用:用於頁面中佈局效果
語法:\<div>\</div>

行分區元素
做用:在網頁中處理同一行文本的不一樣樣式
語法:<span></span>

行內元素與塊級元素

塊級元素
在網頁中獨佔一行,內容從上往下顯示就是塊級.常見的塊級元素:

標題元素h1~h6
段落元素p
div (pre)

行內元素
在網頁中,多個元素在一行中從左往右顯示.
常見的行內元素: a/b/u/i/s/sub/sup/span

行內塊 
顯示呈行內元素的效果,可是具有塊級的特色(好比:可設置寬高)
    
table

特殊字符：
&nbsp;表示一個空格
&lt;  表示"<"
&gt; 表示">"
&lt;p&gt; &lt;/p&gt; 
<p></p>
&copy; 表示版權符號©
&yen;   表示¥
&reg;表示註冊商標®
&times; 表示關閉×號

注意：

段落標記本身不能嵌套本身(p)
塊級中嵌套行內元素

連接

<a>翔工做室</a>
<a href="">翔工做室</a>
<a href="https://atcumt.com/">翔工做室</a>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。