2019翔工作室前端培训(一)

2024年1月15日 91次阅读 来源: 默之

翔工作室介绍

翔工作室，成立于2000年10月，19年以来一直负责学生在线的运营维护，并为矿大师生设计开发了矿友，导航站，矿大头像戳，学工处官网，矿大文库,易班场地申请系统等众多互联网产品。是矿大卓越的科技、媒体和通信(Technology,Media,Telecom)解决方案的提供者。我们的成员来自全校多个学院，十几年来老成员遍布百度，阿里，京东，今日头条，小米等各个互联网公司.

  • 技术组

    • 前端组 (HTML, CSS[bootstrap, elementUI], JavaScript[vue.js, React, node.js])
    • 后端组 (云服务器, python, Golang)
    • 移动组 (Android, ios)
  • 办公组
  • 运营组
  • 视频组
  • 视觉组
  • 易班组

Web入门

建立好你自己的第一个在线网站

  1. 所需要的基础 Web 开发软件

    • 计算机
    • ** 文本编辑器 (Visual Studio Code, Sublime, Atom, Brackets)
    • ** 浏览器 (FireFox, Chrome, Opera, Safari, IE)
    • 图像编辑器 (PS)
    • 版本控制系统 (git, github)
    • 自动化构建工具(grunt, gulp)
    • 模板，库，框架
    • ** 本地Web服务器
    npm install live-server

  2. 写代码之前，应该先做好规划。将展示什么信息？将使用什么样的字体和颜色。

    • 你的网页内容是什么
    • 你的主题中要展示什么信息
    • 你的网页长得什么样

    • 设计出一个草稿图

      • 文本
      • 主题颜色
      • 图像
      • 字体

  3. 一个网站包含很多文件：文本内容、代码、样式表、媒体内容, 需要合理的文件结构

    • 将所有关联的文件放在一个能反映服务器上文件结构的单独的文件夹里
    • 文件夹名和文件都使用小写字母，且没有空格
    • 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>

换行元素
语法:<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; 表示关闭×号
  • 注意：
  1. 段落标记自己不能嵌套自己(p)
  2. 块级中嵌套行内元素

链接

<a>翔工作室</a>
<a href="">翔工作室</a>
<a href="https://atcumt.com/">翔工作室</a>
    原文作者：默之
    原文地址: https://segmentfault.com/a/1190000020122152
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞