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>