翔工作室介紹
翔工作室，成立於2000年10月，19年以來一直負責學生在線的運營維護，併爲礦大師生設計開發了礦友，導航站，礦大頭像戳，學工處官網，礦大文庫,易班場地申請系統等衆多互聯網產品。是礦大卓越的科技、媒體和通信(Technology,Media,Telecom)解決方案的提供者。我們的成員來自全校多個學院，十幾年來老成員遍佈百度，阿里，京東，今日頭條，小米等各個互聯網公司.
-
技術組
- 前端組 (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 -
寫代碼之前，應該先做好規劃。將展示什麼信息？將使用什麼樣的字體和顏色。
- 你的網頁內容是什麼
- 你的主題中要展示什麼信息
- 你的網頁長得什麼樣
-
設計出一個草稿圖
- 文本
- 主題顏色
- 圖像
- 字體
-
一個網站包含很多文件：文本內容、代碼、樣式表、媒體內容, 需要合理的文件結構
- 將所有關聯的文件放在一個能反映服務器上文件結構的單獨的文件夾裏
- 文件夾名和文件都使用小寫字母，且沒有空格
- 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文檔解讀
- <!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>鏈接
<a>翔工作室</a>
<a href="">翔工作室</a>
<a href="https://atcumt.com/">翔工作室</a>