【前端】零基础带你入门前端 < 一 >

软件介绍

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

推荐二:HBuilder X

2
优势:
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>

显示为:
3
ul为无序列表

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

显示为:
5
排序与倒序

<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">//实心的小黑圆点

完结

最近很喜欢一话

共勉

低质量的社交不如高质量的独处

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页