![d21d831e0b5ebf58ad2f169b8dd72b07.png](https://i-blog.csdnimg.cn/blog_migrate/525f622f9f41ff8fcd5b96408ca175f4.png)
身在互联网;如果你是不懂技术的产品;如果你是不懂技术的运营;如果你想提高竞争力;如果你不想被技术忽悠;如果你.....
那你干嘛不来学点技术傍身;互怼的时候起码不会是因为是不懂技术的白痴而占领下风;所谓知己知彼百战百胜。
你可以放弃在后台java、PHP、python、c++、c#中挣扎,选择从简单的前端入手;从简单的html、css入手。
“我想学前端,我是小白,怎么办?“
很多朋友都跟我说过这样的诉求,问我可不可以教教ta,想要掌握一点技术。
emmm~~~
好吧,最后给他们推荐了一堆的学习网站。
几天后朋友又来撩。
“我还是不会。。。。。。”
想想也是,推荐给他们的学习资源都是需要点基础才可以看得懂,对于没有基础的小白来说,确实是需要一个开始的学习入口。
本期来撩:
一:开发工具的选择
二:HTML5基本机构
三:实例
一:开发工具的选择
推荐两个本人用过的开发工具
1、HBuilder
https://www.dcloud.io/hbuilderx.html
![9a4ca9fd5d3a55b8d3ea8b26c2f4aefd.png](https://i-blog.csdnimg.cn/blog_migrate/449685c5c9d6aca93c50307421b73fdb.jpeg)
可根据自己的电脑型号进行下载安装(标准版)
2、Visual Studio Code
https://code.visualstudio.com/Download
![b027abcc38b1bc7937423b0c4e926816.png](https://i-blog.csdnimg.cn/blog_migrate/6b888dd3e7e7afbff28816b8af66afab.jpeg)
这两款开发工具很强大,不过初学者的你建议选择HBuilder;因为它容易安装,还是中文;
对于初学程序的小伙伴来说,看到是英文的就觉得很难,就觉得不会,不论是工具还是代码。
接下来我也用HBuilder进行基础课程的讲解。
3、安装谷歌浏览器进行项目调试https://www.google.cn/chrome/
二:HTML5基本结构
创建项目
第一步:打开工具可以选择不登录进入
![b1a54f1fcf63dd20ad5eb259dd287d13.png](https://i-blog.csdnimg.cn/blog_migrate/36d297e9f172454a7cec26883ba0cd08.png)
第二步:右键新建web项目
![e3162bc1e76d13f940abc342d2a2a800.png](https://i-blog.csdnimg.cn/blog_migrate/e4bb9fa6a2f24f9ccc8149dfb61b9698.png)
![416c48aea6f32df5453d547e8ba5ad2e.png](https://i-blog.csdnimg.cn/blog_migrate/956b440cb9172b2658ba8db2892551b8.jpeg)
![f0a1a3a572c322063e01a427637d763c.png](https://i-blog.csdnimg.cn/blog_migrate/949bbb81f8f6b1a16fca734e31d1ccb7.png)
文档很简单:一个简单的 HTML 文档,带有最基本的必需的元素
⚠主要分为head、body两个大部分;html、head、body、meta、title 都称为html的标签;他们都有自己的特性。
(之后会有文章专门解释这些html标签类型的作用,现在我就不细讲了,本章主要是想让你有一个大概的思想)
![b0ea918256f45ca0ba201cacd9310be9.png](https://i-blog.csdnimg.cn/blog_migrate/783a1a0bfb1877be7cbb98deb49bc789.png)
我们先看看这个简单的demo在浏览器中会如何显示
![b8841c0afdafb20651225fb7be2e4ec7.png](https://i-blog.csdnimg.cn/blog_migrate/2d138000ad53b66c40c951eeadb36c2f.jpeg)
![6a3ab76669793e0da4607bb8cd553de9.png](https://i-blog.csdnimg.cn/blog_migrate/4c6096c1364bf9690a67694b5fb1600c.png)
可以看得很清楚
body就是主体,里面的内容显示在浏览器中;
head就是头部,里面的title标签都是呈现在浏览器中的小标题。
此时细心的你会发现很多网站title都会有一些小图标,这个是怎么实现的呢?
![6ef73e4710058d69c031241256544b30.png](https://i-blog.csdnimg.cn/blog_migrate/f04650ff9f928658a5faf7843553356a.png)
首先要准备一张你喜欢的小图命名为favicon.ico
![5c1d334c415c03fa8ca16f2c90a16f58.png](https://i-blog.csdnimg.cn/blog_migrate/dc2c310b852f21ede85055be748f39a7.png)
把图片放在img文件夹中;在head中以link的方式引入(图片引人路径)
![95a06687d7faf42452c04f5c27b125a1.png](https://i-blog.csdnimg.cn/blog_migrate/ea90f7bf76c9545c7f1614e0634da16c.jpeg)
运行程序,我们的小图标就出来了
![b8ef1aad2a3f0bd7b01e5d8237b93a10.png](https://i-blog.csdnimg.cn/blog_migrate/9710cba05312164fe5c1dd05c04a650d.png)
三:实例
1、如何在浏览器中实现一个正方形
第一步:在body标签中输入div标签;
第二步:给div标签增加类名(class)为 square;
![ead8d63f81d04d8d7a14f5509f2fd73f.png](https://i-blog.csdnimg.cn/blog_migrate/e8cbc31f906592b0b17ac9c42d964f23.png)
在页面文档中添加style标签来写css;
“什么是样式?“
平时所看到网页的能看到的静态效果都是由html标签跟css构成;
![66a1f7f8beba51602a373d1c0c311720.png](https://i-blog.csdnimg.cn/blog_migrate/0ba76a44a9dc6004d8f5da5d4216c328.jpeg)
第三步:接下来我们来创建高度200像素;宽度200像素;黑色为填充色的正方形
- 一个像素= 1px;
- 宽度属性:width;
- 高度属性:height;
- 背景属性:background;
![e0ecc6c083f4d9b4adc60c0d1534cc2f.png](https://i-blog.csdnimg.cn/blog_migrate/d18076c00096fa9193c14c0156044f39.jpeg)
![ce9cb4dce8ed3e7240b52908bfff6115.png](https://i-blog.csdnimg.cn/blog_migrate/20573071e79ddd3c787e0f8b7513f7bd.png)
第四步:接下来我们尝试一下让这个三角形有一个黄色的边框
边框属性:border
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
- border-width
- border-style
- border-color
css中加多一个10像素边框的黄色
![689a8c695fccc96f2de4708b575ec86e.png](https://i-blog.csdnimg.cn/blog_migrate/40b545ea90528e92ba7ad608f6b70cf7.png)
![c5e53ee26859b489b6aa1e6acc0e4eb8.png](https://i-blog.csdnimg.cn/blog_migrate/015f736c9db62440e2b615502f55fa89.png)
如果你想挑整正方形的大小颜色,但是又不确定要什么颜色,大小如何
教你小妙招
键盘按下F12浏览器调出模拟器,可以在模拟器中进行调试
![40ace0242f9a447103fb99c8de15d225.png](https://i-blog.csdnimg.cn/blog_migrate/78577480e84d1c983675af6fabf9aa86.jpeg)
2、如何在浏览器中实现一个三角形
开始第二个小demo上三角形的实现;一个高200;底边长200;背景色为红色的下三角型
同样只要一个div就可以了
主要的代码就是css
- 一个像素= 1px;
- 宽度属性:width;
- 高度属性:height;
- 左边框:border-left;
- 右边框:border-right;
- 上边框:border-top;
- 下边框:border-bottom;
![b3bca58d9955c0a685b150cddeed28e6.png](https://i-blog.csdnimg.cn/blog_migrate/915761f36e3f6e357156f8ab218602a7.jpeg)
![8569557b5676f9ad226cb0ff41b461b4.png](https://i-blog.csdnimg.cn/blog_migrate/25d196ca31598c2dfaeffc0ed87a4a6e.png)
是不是觉得很神奇,为什么宽度高度为零怎么可以设置一个三角形出来;
这就是利用边框border的特性来实现的三角形
如果想要知道更多原理,那要接下来更深入的学习前端布局的“盒子”概念
期待下期来撩