【前端】零基础带你入门前端＜一＞

零基础带你入门前端

软件介绍

推荐一：vs code
优势：
1，开源免费
2，自己想用什么功能直接安装插件
3, 安装就直接在官网上下载安装

推荐二：HBuilder X

优势：
1，适合新人，便于操作（我个人也挺喜欢）
2，和 sublime Text 都能给一种很清新简单的感觉，用着很舒服（仅个人建议）

其他
像 sublime Text 等都很好，可根据自己的喜欢进行安装。

创建html

用HBuilder X 为例：

点击文件 —— 新建 —— html文件 —— 修改名称

用sublime Text为例：

文件 —— 新建 —— 保存 —— 桌面 —— 给文件重新命名 —— 改为以点html为文件 —— 双击打开

注：
1，修改名称最好使用英文，中文可能会导致乱码
2，文件必须以点html为后缀，因为网页是以点html为后缀的
3，单词与单词之间直接用中划线或者下划线连接的

标签介绍

前言：在学习前端的最开始就是学会简单的使用一些标签，来做一个小型的项目，比如：显示一个汽车排行的页面，或者简单的抽奖等

标签：

注：标签出现的形式都是成对出现的，形式为: <> </>

<html></html>//跟标签
<head></head>/*文档的头部*/
<body></body>/*文档的主题*/

这三个标签最为重要，组成了一个前端的框架，如下：

<html>
<head>       ....    </head>
<body>       ....    </body>
</html>

在根据自己像完成的页面，进行添加色彩吧！

<h1></h1>/*h1-h6都是写文章的标题*/
<p></p>/*段落*/
<u></u>/*下划线*/
<b></b> <strong></strong>/*字体加粗*/
<i></i> <em></em> /*字体变斜*/
<del></del>/*中划线*/

实体字符集

&nbsp; /*空格 不要忘记后面的分号 多个空格则用多个&nbsp;*/
&lt; /* 小于符号< */
&gt;/*大于符号>*/
<br></br> /* 单标签  回车 */
<hr></hr> /*单标签  分割符*/
<!--内容--> /*添加注释*/

打印

console.log('')

容器 (结构化)

<div></div> //写文本 
<span></span>//写文本

容器的好处：

1，方便，可以省略重复的工作
2，span：局部加样式
3，div: 全体样式

样式：想要添加文字的颜色，文字对齐左对齐或者右对齐等

<p style = 'color:red';float:right;>哈哈</p>

哈哈打印出来的形式是：红色的哈哈，在电脑的右边

特殊说明

1，32位操作系统，在建立文件后缀为3位，即htm
2，首页创建为 index.html
3，快捷键 " ! + tab键 " 打开出现框架

我们刚刚建立好的文档，会自动出来前端的框架，里面有特殊几行说明一下：

<!DOCTYPE html>

此代码：html 5文档声明，html是超文本标记语言

<meta charset="utf-8">

此代码：用来处理乱码

<html lang = "zh">

此代码：浏览器显示的是中文，zh是中拼音的首两个字母；若显示英文则用en

运行

以 HBulider X 比例

点击最上面的运行 —— 运行到浏览器 —— Chrome（最好用谷歌浏览器）

小项目 —— 抽奖

假定张三李四王麻子三个人进行抽奖

思路
一般大型活动的时候，抽奖的人数基数很大，所以这个时候需要用到数组的形式来存取人名，数组都是零开始的

取出李四

let names = ['张三'，'李四'，'王麻子']
console.log(names[1])

length属性可以查看元素

console.log(names.length)

由于抽奖是随机的，所以要用到数学中的的随机数

console.log(Math.random())

这个random的范围总是在0 - 1之间，在实际的抽奖过程中，人的基数很大的时候，假定0 - 80多个，则需要扩大

取整

Math.floor 向下取整，例：1.42 以及1.9 —— 取整为1
Math.ceil 向上取整，例：1.92以及1.4 —— 取整为2

声明变量


let randomIndex = Math.random() * names.length
let index = Math.floor(randomIndex)
console.log([index])

在之前可以定义一个id 通过id来获取元素

<h1 id = "screen">hello</h1>
console.log(document.getlement By Id('screen'))用id连接起来获取元素

调试打断点

1, 在sources找到相关文件进行点击
2，直接加一行debugger的代码

小项目—— 汽车的排行榜

前言：主要为介绍两个标签，分别是有序列表与无序列表

ol 为有序列表

<h1>汽车排行榜<h1>
<ol>
<li>宝马</li>
<li>大众</li>
<li>五菱</li>
</ol>

显示为：

ul为无序列表

<h1>汽车排行榜</h1>
<ul>
<li>宝马</li>
<li>大众</li>
<li>五菱</li>
</ul>

显示为：

排序与倒序

<ol type = "a" start = "2" reversed = "reversed">

type = “a” 排列的时候是以A B C 以此向下排列
start = “3” 排列的时候是以 II III IV V 以此向下排列
reversed = "reversed"是倒序是以假定从3开始，以3 2 1 0 的顺序依次向下排列

空心的小圆点与实心的小黑圆点

<ul type = "circle">//空心的小圆点
<ul type = "disc">//实心的小黑圆点