【想啥学啥】小白入门网页制作（HTML+CSS）
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">没</span>聊刷手机APP，不经意间看到粉笔有个视频教程《1小时教你做出个人网页》。挺好奇点进去，哈哈，一口气把课学完了，蛮有收获~~起码懂了点HTML和CSS，下次爬网页<span style="color: black;">亦</span>能看得懂网页源代码啦。</p><span style="color: black;">1、</span>网页技术简介<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-f7dc9ab697fccc8074b319d53187c35f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>HTML+CSS+JavaScript<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文只<span style="color: black;">触及</span>到HTML和CSS，难度系数高点儿的JavaScript暂不<span style="color: black;">触及</span>。</p>HTML语法HTML代码<span style="color: black;">必须</span>写在标签符号"<>"里面。如<h1> </h1>; <img/>;<p> </p>。HTML标签成对<span style="color: black;">显现</span>，尾标签加上关闭符号"/"区分首尾。例外：<img/>单独<span style="color: black;">显现</span>。标签是<span style="color: black;">能够</span>嵌套<span style="color: black;">运用</span>的。CSS语法遵循键值对规则，基本格式是---k:v。写在标签中的style属性中。style=""<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">---先把干巴巴的语法看个大概，接下来会用例子说明---</p><span style="color: black;">2、</span>网页<span style="color: black;">研发</span><span style="color: black;">工具</span>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-9f0151d16a7d46c3be735a7ce100333f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">非常多</span><span style="color: black;">工具</span>支持写网页，即便是最原始的记事本<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">教程中，用的是最后一个H Builder，我<span style="color: black;">亦</span>依样画葫芦下载并安装好了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下载网址：<a style="color: black;"><span style="color: black;">http://www.</span><span style="color: black;">dcloud.io/</span></a> </p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-fba12029dd5d3d29005f3e63ce7440a2_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>下载完成后，点安装并注册账户<span style="color: black;">就可</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一打卡软件，直接能看到《HBuilder入门》网页，<span style="color: black;">第1</span>次仔细阅读下就<span style="color: black;">晓得</span>大概了~</p><span style="color: black;">3、</span>边做网页边学语法<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新建个web项目First Try，会自带css,img,js三个文件夹以及index.html。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-002c4625c5a7cc54b314db99cd15a405_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html> ##告诉电脑文档类型是html
<html> ##<html> 与 </html> 标签限定了文档的<span style="color: black;">起始</span>点和结束点
<head> ##用于定义文档的头部，描述了文档的<span style="color: black;">各样</span>属性和信息
<meta charset="utf-8" /> ## utf-8，方便识别中文
<title></title> ## 文档的标题
</head>
<body>
</body> ##<body> 与 </body> 之间的文本是可见的页面内容
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">------直接po：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-e23cc29f921d33a8cc165899bf64727c_720w.webp" style="width: 50%; margin-bottom: 20px;"></div><span style="color: black;">第1</span>次做的个人网页<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-0d92b7d652df97aa767cd6c68c6528d3_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-e1806c555a5a6cc0883d40579231032c_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div> ##分区
<p> ##标签定义段落
##列表
<ul>
<li> </li>
</ul>
padding left 从左侧往里靠
……
还有好多要备注，偷懒懒得写了</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个小时的入门课程听下来，上手不难，<span style="color: black;">然则</span>想要做<span style="color: black;">繁杂</span>点的网页，还<span style="color: black;">必须</span>学挺多的。我没打算走前端这个方向，<span style="color: black;">因此</span><span style="color: black;">亦</span>不深入学了。看得懂大致代码，会爬虫就成~</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">文中<span style="color: black;">触及</span>到的素材：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链接：<a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">pan.baidu.com/s/1tt0lkG</span><span style="color: black;">W_xH6eiXM_7EST5g</span></a> <span style="color: black;">暗码</span>：bwlq</p>
大势所趋，用于讽刺一些制作目的就是为了跟风玩梗，博取眼球的作品。 请问、你好、求解、谁知道等。 你的话深深触动了我，仿佛说出了我心里的声音。 论坛外链网http://www.fok120.com/ 回顾历史，我们感慨万千；放眼未来，我们信心百倍。
页:
[1]