整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

java零基础到项目实战-HTML入门

java零基础到项目实战:HTML入门

在前面:java作为一门世界级编程语言金字塔顶尖的语言。需要大量的练习、练习、练习来巩固自己所获得的知识。冰冻三尺非一日之寒,希望大家在学习java的日子里一定一定要坚持不懈,严格要求。多练,多问,多百度。祝大家早日成为一名优秀的软件工程师!

文章摘要:此篇文章会带领大家创建一个html最简单的页面,以及在页面中增加一些简单的内容。

我先给大家放2张我以前教学的时候,开课前给学生画的图:

这2张图应该已经比较清晰明了的告诉你,学习java前端需要具备的一些主观和客观方面的东西,我就不多做解释了,以后我的文章中,会以代码图片及展现效果居多,尽量减少文字的占比。让大家对所学的知识有一个更直观的感受。

言归正传,想要编写html代码,首先需要一个后缀为.html的文件,这个文件怎么创建呢?最简单的方式,建一个txt,然后把后缀改为.html,用编辑器打开,就可以编写代码了。

当然,txt界面太丑,笔者这里选用sublime,该编辑器也可以直接加载一个html模板,选择菜单→新建文件(模板)→html,当然,前提要先设置好这个模板,具体设置方法这里就不做详细介绍了,百度上一大堆。新建完成后,产生一个代码如下的页面:

然后在<body></body>标签体之间打入一行代码

用浏览器打开该文件,显示如下图,说明这个html文件已经创建成功了,能够正常的编写代码。

零基础的同学一定对刚才的代码比较疑惑,虽然照着写能实现功能,但是这些代码各自又都是什么意义呢? 我用注释的方式上图来告诉大家:

首先,html 的标签分为自闭和标签和闭合标签

自闭和标签:就是没有结束标签,比如上图的<meta>标签,该标签是没有结束标签相呼应的。

闭合标签:有开始和结束标签,比如上图的<html><body><h1>标签,他们都有一个</html></body></h1>相呼应

在上图中,我用过了比较多的 < !-- -- >标签,这是html里的注释标签,在编写代码的过程中,勤加注释是一个非常非常好的习惯,不仅方便了他人也方便了以后自己代码的维护。所以说,不加注释的代码都是在耍流氓。

我们80%的页面标签代码都会写在<body></body>标签里面,什么是标签,至少包含< > 和标签元素,比如<div><a><p><input>等,标签还有标签属性和属性值,标签属性和属性值在第一个标签内容中,如果是多个标签则以空格符号分割 ,如图:

Div 是整个html中最常用的一个标签元素,<div></div>类似于一个盒子,里面可以承载各种各样的元素标签,大家看到的所有的网站都是靠着div一个个的盒子规划开来,最后拼接在一起的,形成了一个完整的页面。

那么如何去建立一个div呢?首先,我们在html的<body></body>标签中加入一个<div></div>标签 ,但是单纯的加入标签并不会在页面中产生肉眼可见的东西,因为我们还要定义这个div的宽,高,背景色,边框等等,详见如下代码:

这样的一行代码,最后展现出来的效果是:

我们来一点点的剖析这一行代码:

Style:style 是元素标签里的一个标签属性,他的作用是可以定义该标签的样式。里面的样式格式是xxx:xxx; 每一组样式都是这样的定义,冒号用来隔开样式属性和样式属性值,最后以分号结尾.

width:定义该元素的宽

height:定义该元素的高

background:定义该元素的背景颜色(也可使用red,yellow等颜色定义)

border:定义该元素的边框

4px 代表边框粗细,

solid 代表边框样式, 边框样式又分为solid(实框)、dotted(虚框)

red代表边框颜色,边框颜色也可用#ccc,#112233这种形式表现

Div里可以放入文字、图片、标签元素等各式各样的东西。下面我演示一下如何放入照片:

首先,放入照片要使用到<img>标签,这是一个自闭和标签,所有没有结束标签。

Src代表图片的路径,width,height 代表图片的宽度和高度 ,alt是图片的描述

这个路径可以是相对路径,也可以是绝对路径。

相对路径:就是相对于这个网页的路径,比如图片和网页在同一个文件夹下,那么src处就直接填图片的文件名字就可以,若建了一个文件夹images,图片放在该文件夹中,同时这个文件夹和网页在同一个位置,那么src所填的就是images/图片名字.jpg

绝对路径:即从头开始写路径,如src=“C:/xxx/xxx/xxx/xxx.jpg”

假设我现在的图片位置和网页位置同处一处

最后的效果:

我这里改大了DIV的宽度和高度,若图片所设的宽高大于DIV的宽度高度,那么将会发生溢出的情况,同学们可以自己去试一下,这种溢出的情况也有对应的标签可以做调整,这个我们后面再讲。

这边特别提醒一点,如果div没有设定宽度width,则默认为等同浏览器宽度的宽度,若div没有设定高度,则该div根据div中内容进行高度的伸缩,div中的内容有多高,div就有多高,如图,我把width和height全部去掉:

上图width和height全部去掉,所以,width默认跟浏览器宽度等宽,高度为图片的高度。

文字的话就比较简单了,代码贴上:

最后结果:

第二句文字才是div创建出来的文字,我解释一下style里面的样式:

Font-size:文字大小,px为单位(像素)

Font-family:文字样式,分为很多,这个可以去word文档里找找

Font-weight:文字加粗,bold是一种默认加粗的大小。

End.

来源:公众号“java编程”

运行人员:中国统计网小编(微信号:itongjilove)

微博ID:中国统计网

中国统计网,是国内最早的大数据学习网站,公众号:中国统计网

http://www.itongji.cn

发一个产品,如果没有一个指导方针,就像你在野外迷了路一样,始终找不到方向。为此,我在搞清楚Django的框架之后,整理出了一套开发流程。有流程的指导,项目才能有条不紊地展开,功能实现才能事半功倍。

3.1 构建项目

构建一个项目sales,无论是用django-admin startproject sales命令,还是用PyCharm或Eclipse开发工具,一次就够了。

3.2 配置项目

打开settings.py配置文件,在底部找到LANGUAGE_CODE和TIME_ZONE,将其改成支持简体中文模式,默认是英文的,至于繁体字等代号,请自行查询。

LANGUAGE_CODE='zh-hans'

TIME_ZONE='Asia/Shanghai'

有关数据库的配置也在这时进行,默认为sqlite的配置信息,这也是咱们开始时使用的数据库。

DATABASES={
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }

如果是Mysql数据库,配置信息会多几个参数,其他关系数据库,除了ENGINE不同外,其他的参数是差不多的。

DATABASES={
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '',  # 数据库名称
        'USER': '',  # 连接账户
        'PASSWORD': '',  # 连接密码
        'HOST': '',  # IP地址
        'PORT': '',  # 端口号
    }
}

Django3.0支持PostgreSQL 9.5和更高版本,低版本的不支持。Django3.0支持Oracle 12.2和18c,低版本的不支持。

3.3 构建应用

为了保持每个App的独立性,在用python3 manage.py startapp base命令构建base等应用之后,新建urls.py、新建templates文件夹(右键base-【New】-【Directory】)和静态文件夹static,在static下面,新建css、images和js目录,完成之后目录如下,请依样画葫芦。

你没看错,在templates和static下面还有一个base,为什么需要这样,下一节3.4中有说明,往下看就对了。

3.4 配置应用

打开settings.py文件,目标锁定到INSTALLED_APPS节点,在末尾加上base和逗号。

INSTALLED_APPS=[
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'base',
]

在配置base时,发现INSTALLED_APPS里面已经存在很多默认的应用了,正是因为有它们,才让Django功能强大了不少。如下的备注信息不要添加到settings.py文件中,你了解一下它们有什么用就可以了。

'django.contrib.admin',    # 管理员站点
'django.contrib.auth',     # 认证授权系统 
'django.contrib.contenttypes', # 内容类型框架
'django.contrib.sessions',  # 会话框架
'django.contrib.messages',  # 消息框架
'django.contrib.staticfiles', # 管理静态文件(图片、css等)的框架

1. 配置模板

找到TEMPLATES节点,找到里面的'DIRS':项,配置信息如下。这里的django.template.backends.django.DjangoTemplates应用,专门用来管理模板,它会收集整个项目templates下的文件。

如果一个项目中,有多个templates存在,而且模板文件(html)有重名的情况,那找到的不一定就是你想要的。为了区分,就需要多加一层(base)目录,名字一般是应用名称。

'DIRS': [os.path.join(BASE_DIR, 'templates')],

2. 配置静态文件

Django中的静态文件,是指图片、CSS、Javascript等文件,模板定位到settings.py底部,确定有STATIC_URL这个节点,如果没有,自行补上。。这个是静态文件的目录名称。

django.contrib.staticfiles应用对整个项目的静态文件进行收集统一管理,其原理跟模板是一样的,也需要在static文件夹下,加多一层(base)目录,名字一般是应用名称。

STATIC_URL='/static/'

好了,流程中基本的配置工作,到这就讲完了,有关models、模板、静态文件等内容,后面会逐步讲解,你关注我就对了。

好了,有关Django3.0项目开发流程的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。我在分享Python,前端、Java和App方面的干货。关注我,没错的。

#Python##Django##程序员##Web##项目实战#

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

[XHTML+CSS]项目实战二视频教程:温州广厦[1]