零基础学网页开发入门(制作博客案例)适应手机端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  是一个网站的首页

2a6ce49aa8d7591aaf05a428995853e1.png

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.个别特殊符号举例

&copy;用来表示版权符号

&nbsp;用来表示空格符号


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&copy;2019 &nbsp;&nbsp;<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
}
相关文章
|
12天前
|
机器学习/深度学习 自然语言处理 JavaScript
GEE机器学习——最大熵分类器案例分析(JavaScript和python代码)
GEE机器学习——最大熵分类器案例分析(JavaScript和python代码)
15 0
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
16 0
|
13天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
9 0
|
15天前
|
前端开发
css3 纯代码案例
css3 纯代码案例
23 0
|
16天前
|
前端开发 JavaScript API
|
16天前
|
前端开发 JavaScript API
网页开发者必看!5种JS跳转页面技巧,提升用户交互体验
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
18天前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
20 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
18天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
18天前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
23 0
|
18天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
46 0

相关产品

  • 云迁移中心