零基础学网页开发入门（制作博客案例）适应手机端div+css+js的综合介绍
零基础学网页开发入门（制作博客案例）适应手机端div+css+js的综合介绍
此图为静态截图效果
一、学前必备
1.网页的理解
为他人提供某些服务。不损害他人利益的，符合国家规定的网页服务。
2.文件扩展名
提问：如何使得文件的扩展名显示出来？
win7系统下
组织---文件夹和搜索选项---查看---去掉勾（隐藏已知文件类型的扩展名）
win10系统下
可以直接到查看菜单下显示隐藏的扩展名
在操作系统中不同的文件扩展名有不同的表现形式。
word扩展名 doc或者docx
excel扩展名 xls或者xlsx
ppt扩展名 ppt或者pptx
网页的扩展名 html 或者htm
3.认识html
html翻译一下：hype text mark language 超文本标记语言
html是静态的语言。
在浏览器中访问网页，在本质上其实就是访问一个文件。
每个服务器上的网站服务，默认情况下把index为文件名的文件作为一张网页的首页。
以下这些都是动态语言的表现形式：
.do
.jsp
.asp
.aspx
.php
这些动态语言的表现最终都会被服务器翻译成html来解释。
4.web前端开发工具推荐
hbuilder网页web前端开发工具，下载地址。
www.dcloud.io
二、网页开发基础
1.网站文件结构：
- 1.css文件夹 用来存储网页的皮肤样式
- 2.img文件夹 用来存储网页的图片
- 3.js文件夹 用来存储控制网页用户交互的文件以及dom操作
- 4.other 存储其它文件
- 5.index.html 是一个网站的首页
2.html基础
在前端网页开发过程中，html起到非常重要的作用。
html书写规则：
1.标签喜欢成对出现。<html> </html>
2.个别标签可以简写。<meta /> <br />
3.书写标签的时候，要对齐开始标签和结束标签
4.子级的标签要有缩进
5.所有的符号都英文输入法半角的方式。
html文档代码解释:
<!DOCTYPE html>这个代码出现在html文件的第一行。规定了这个文档时html格式的，可以让浏览器按照html5的方式进行解释。
html基础结构：
<html>标签 为一个网页的根标签
<head>标签 为网页的头部，可以存储网页的标题、样式的链接和其它综合配置
<body>标签 为网页的主体，所有网页的内容表现就写在这里
html网页基础代码：
<html>
<head>
<title>效实中学，我最棒！</title>
</head>
<body>刘金玉编程</body>
</html>
技巧提示：
查看一个网页的源代码的技巧：看到的是html的代码。
通过使用谷歌浏览器右键“查看源代码”。或者审查元素（检查）。
html5中的文档规范：
<!DOCTYPE html>在网页的第一行，是告诉浏览器我的html代码支持html5规范
html5简称h5
<meta charset="utf-8" />当前页面支持解析为utf-8编码。
三、HTML标签基础
每个标签都可以有自己的属性，有些属性是标签特有的，也可以自定义自己的属性。
meta标签特有charset属性
a标签特有href属性和target属性
img标签特有src属性
注意：属性书写格式，举例：
<标签名称 属性名称="属性的值" >内容</标签名称>
<标签名称 属性名称="属性的值" />
1.标题标签<hn>
不同标题显示出来的文字大小是不同的。
<h1>标签 表示一级标题
<h2>标签 二级标题
...
<h6> 六级标题
默认情况下<hn>标题标签是有默认换行的，这里的n表示一个数字。
那么，<h0>是什么？
这个标签默认是没有的，这是自定义标签，就是说，我们可以创造自己的标签，知识这个标签无法被浏览器识别为已有功能的标签而已。
举例自定义标签：
<h0>编程创造城市</h0>
2.链接标签<a>
<a>标签表示链接
这个标签中的href属性表示链接的目标。
target="_blank" 表示在新的标签中打开链接目标。
3.图片标签<img>
<img>标签用来表示图片
src属性可以填写图片来源。
width可以表示图片的宽度。
height可以表示图片的高度。
如果只使用了width，那么高度会进行等比例缩放。
如果只使用了height，那么宽度会进行等比例缩放。
4.导航容器标签<nav>
这个标签是html5中的新标签，主要用于导航容器，可以更多适应html5的浏览器，能够被浏览器更好解析，被爬虫机器人更好爬取，也更容器让开发者理解。
5.个别特殊符号举例
©用来表示版权符号
用来表示空格符号
6.关于滚动
使用marquee标签
标签的behavior表示滚动方式
direction表示滚动方向
7.其它标签
所有的html标签其实都是容器。
常用的容器div
div可以呈现瀑布流的效果，可以使得图片逐渐载入。
div容器默认自带换行功能。
我们在web前段开发中，通过采用div+css+js的形式来写我们的网页。
8.手机端设备自适应标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
四、CSS样式学习
1.引入
css文件引入：
css文件要在html文件中链接才能有效果，链接代码举例：
<link rel="stylesheet" type="text/css" href="css/main.css"/>
2.作用
css样式：
用来处理网页的皮肤，比如文字的大小、位置等等
3.格式
css书写格式：
样式名称后面接大括号，大括号中式css的配置内容。举例
h0{
font-size:600px
}
这里的h0对应自定义标签。
4.写法
这里的css属性写法：
属性:属性值
文字大小控制：
font-size:文字大小，单位px，这里的px表示像素。
px表示像素。
5.css选择器
css中对应html中的标签属性对应关系：
#对应id
.对应class
标签名称对应实际的标签
css中如何表示下一级选择器？
使用空格隔开。举例：
#pics img{
}
6.css常用基础属性配置
- css中的字体配置
font-size表示字体大小
font-family表示字体类型
font-weight表示字体粗细
text-decoration可以去除链接的下划线
color表示字体颜色
background-color表示背景颜色
- 容器的外边距
margin-top表示标签距离上方多少像素值
margin-left表示标签距离左边多少像素值
margin-right表示标签距离右方多少像素值
margin-bottom表示标签距离下方多少像素值
margin表示上右下左的顺序写距离
- 容器的内边距
padding-top表示标签内部距离上方多少像素值
padding-left表示标签内部距离左边多少像素值
padding-right表示标签内部距离右方多少像素值
padding-bottom表示标签内部距离下方多少像素值
padding表示标签内部距离上右下左的顺序写距离
- 宽高调整
css中调整大小，我们常常会使用px（像素）来表示，但如果想要适应设备窗体大小变化，就要使用比例：
例如调整宽度为100%在css中的写法如下
width:100%
五、网站代码结构
基础代码结构的分割：
头部toper
主体main
尾部footer
其实这三个部分的名字可以自己去取，比如第一部分用A表示，第二部分用B表示，第三部分用C表示，因为只要在分析完网站结构以后，自己能够明白就可以了，当然，如果想要让代码更加优质，还是需要使用有意义的英文来表示了。
我们可以使用hbuilder编辑器有技巧的快速开发。
使用hbuilder快速编写网站结构代码公式：
#wrapper>#toper+#main+#footer
将光标定位到最后，按一下tab键就可以生成如下代码：
<div id="wrapper">
<div id="toper"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
可以看出这里的#代表标签中的id
其实有点类似于css中的符号对应方式，同样的，符号.表示class
一般情况下，我们规定这个标签用来存放网页所有结构：
<div id="wrapper">网页内部内容结构</div>
六、JS入门
js是javascript的简称。
我们可以使用js来控制我们的网页中的图片等元素。
引入js文件举例使用（文件名称可以自行改变）：
<script src="js/main.js"></script>
js中的消息框，举例提示刘金玉编程几个字：
alert("刘金玉编程")
我们使用一个jquery框架来辅助我们操作html中的内容：
框架的下载地址如下：
http://jquery.com/
使用jQuery框架控制html元素的关键点：
1.必须先要加载jquery文件
2.使用标准格式：
$(function(){
这里是html加载完成后才会执行的代码。
});
在js中定位html元素与css定位html元素的方法是一样。
jquery是js中的一种整合框架。
如何使用jquery来获取html元素呢？
$("#mypic")
如何获取某个元素的属性？
$("#mypic")的attr方法。
当attr方法为一个参数的时候，表示获取某个元素的某个属性
$("#mypic").attr("src") 这个结果会返回src中的值
当attr方法为两个参数的时候，表示设置某个元素的某个属性
$("#mypic").attr("src","img/a (6).jpg") 对src的值进行设置
在js中：
使用var来声明变量。
变量就是用来存储需要的值得量。
变量的赋值格式：
变量名称=变量的值
js中时钟控件
时间间隔方法：
setInterval方法
使用的格式：
sertInterval(需要调用的函数，时间间隔（单位毫秒）)
匿名函数的写法
function(){这里是函数的代码}
欢迎与作者 刘金玉 进行互动交流！！
本节知识index.html文件源代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>刘金玉编程博客</title> <link rel="stylesheet" type="text/css" href="css/main.css"/> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="wrapper"> <div id="toper"> <div class="title1">我的博客</div> <nav> <a href="index.html">首页</a> <a href="aboutme.html">关于我</a> <a href="http://bcczcs.com" target="_blank">编程创造城市</a> </nav> </div> <div id="main"> <marquee behavior="alternate" direction="right" scrollamount="6">我是效实中学的美少男</marquee> <div id="pics"> <img id="mypic" src="img/Desert.jpg" > </div> </div> <div id="footer"> <img src="img/b.jpg"/> <br/> copyright©2019 <a href="https://space.bilibili.com/371514629">刘金玉编程</a> 提供技术支持 </div> </div> </body></html>aboutme.html文件源代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>关于我</title> </head> <body> <div id="wrapper"> <div id="toper"> <div class="title1">我的博客</div> <nav> <a href="index.html">首页</a> <a href="aboutme.html">关于我</a> <a href="http://bcczcs.com" target="_blank">编程创造城市</a> </nav> </div> <div id="main"> 这里是我的相关介绍。<br/> <img src="img/b.jpg" /> </div> <div id="footer"></div> </div> </body></html>main.js文件源代码：
$(function(){ var i=1; setInterval(function(){ if(i>9) i=1; $("#mypic").attr("src","img/a ("+i+").jpg"); i=i+1; },1000) });main.css文件源代码：
body{ margin:0;}.title1{ font-size: 30px; font-family: "华文琥珀"; margin-bottom: 30px; margin-left: 20px;}#toper{ margin-top: 30px;}#toper nav{ margin-left:20px;}#toper nav a{ text-decoration: none; color: #0000FF; margin-right: 10px;}#main marquee{ margin-top: 20px;}#mypic{ width: 100%;}#footer{ text-align: center; margin-top:10px; background-color: gray; color:white; padding: 10px;}#footer img{ width:100px}腾讯云开发者
