零基础网页开发入门(博客案例)适应手机端div+css+js介绍

一、学前必备

1
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 /> 

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>hello world</h0>

2.链接标签

A标签表示链接

这个标签中的href属性表示链接的目标。

target=”_blank” 表示在新的标签中打开链接目标。

3.图片标签

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>

HTML复制

可以看出这里的#代表标签中的id

其实有点类似于css中的符号对应方式,同样的,符号.表示class

一般情况下,我们规定这个标签用来存放网页所有结构:

<div id=”wrapper”>网页内部内容结构</div>

六、JS入门

js是javascript的简称。

我们可以使用js来控制我们的网页中的图片等元素。

引入js文件举例使用(文件名称可以自行改变):

<script src="js/main.js"></script>

js中的消息框,举例提示hello world几个字:

alert("hello world")

我们使用一个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(){这里是函数的代码}

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞28赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片