零基础学网页开发入门(制作博客案例)适应手机端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.个别特殊符号举例

&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}

本文分享自微信公众号 - 编程创造城市(bcczcs)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券