整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在前面：java作為一門世界級編程語言金字塔頂尖的語言。需要大量的練習(xí)、練習(xí)、練習(xí)來鞏固自己所獲得的知識。冰凍三尺非一日之寒，希望大家在學(xué)習(xí)java的日子里一定一定要堅(jiān)持不懈，嚴(yán)格要求。多練，多問，多百度。祝大家早日成為一名優(yōu)秀的軟件工程師！
文章摘要：此篇文章會帶領(lǐng)大家創(chuàng)建一個(gè)html最簡單的頁面，以及在頁面中增加一些簡單的內(nèi)容。
我先給大家放2張我以前教學(xué)的時(shí)候，開課前給學(xué)生畫的圖：
這2張圖應(yīng)該已經(jīng)比較清晰明了的告訴你，學(xué)習(xí)java前端需要具備的一些主觀和客觀方面的東西，我就不多做解釋了，以后我的文章中，會以代碼圖片及展現(xiàn)效果居多，盡量減少文字的占比。讓大家對所學(xué)的知識有一個(gè)更直觀的感受。
言歸正傳，想要編寫html代碼，首先需要一個(gè)后綴為.html的文件，這個(gè)文件怎么創(chuàng)建呢？最簡單的方式，建一個(gè)txt，然后把后綴改為.html，用編輯器打開，就可以編寫代碼了。
當(dāng)然，txt界面太丑，筆者這里選用sublime,該編輯器也可以直接加載一個(gè)html模板，選擇菜單→新建文件(模板)→html,當(dāng)然，前提要先設(shè)置好這個(gè)模板，具體設(shè)置方法這里就不做詳細(xì)介紹了，百度上一大堆。新建完成后，產(chǎn)生一個(gè)代碼如下的頁面：
然后在<body></body>標(biāo)簽體之間打入一行代碼
用瀏覽器打開該文件，顯示如下圖，說明這個(gè)html文件已經(jīng)創(chuàng)建成功了，能夠正常的編寫代碼。
零基礎(chǔ)的同學(xué)一定對剛才的代碼比較疑惑，雖然照著寫能實(shí)現(xiàn)功能，但是這些代碼各自又都是什么意義呢？ 我用注釋的方式上圖來告訴大家：
首先，html 的標(biāo)簽分為自閉和標(biāo)簽和閉合標(biāo)簽
自閉和標(biāo)簽：就是沒有結(jié)束標(biāo)簽，比如上圖的<meta>標(biāo)簽，該標(biāo)簽是沒有結(jié)束標(biāo)簽相呼應(yīng)的。
閉合標(biāo)簽：有開始和結(jié)束標(biāo)簽，比如上圖的<html><body><h1>標(biāo)簽，他們都有一個(gè)</html></body></h1>相呼應(yīng)
在上圖中，我用過了比較多的 < !-- -- >標(biāo)簽，這是html里的注釋標(biāo)簽，在編寫代碼的過程中，勤加注釋是一個(gè)非常非常好的習(xí)慣，不僅方便了他人也方便了以后自己代碼的維護(hù)。所以說，不加注釋的代碼都是在耍流氓。
我們80%的頁面標(biāo)簽代碼都會寫在<body></body>標(biāo)簽里面,什么是標(biāo)簽，至少包含< > 和標(biāo)簽元素，比如<div><a><p><input>等，標(biāo)簽還有標(biāo)簽屬性和屬性值，標(biāo)簽屬性和屬性值在第一個(gè)標(biāo)簽內(nèi)容中，如果是多個(gè)標(biāo)簽則以空格符號分割 ，如圖：
Div 是整個(gè)html中最常用的一個(gè)標(biāo)簽元素，<div></div>類似于一個(gè)盒子，里面可以承載各種各樣的元素標(biāo)簽，大家看到的所有的網(wǎng)站都是靠著div一個(gè)個(gè)的盒子規(guī)劃開來，最后拼接在一起的，形成了一個(gè)完整的頁面。
那么如何去建立一個(gè)div呢？首先，我們在html的<body></body>標(biāo)簽中加入一個(gè)<div></div>標(biāo)簽 ，但是單純的加入標(biāo)簽并不會在頁面中產(chǎn)生肉眼可見的東西，因?yàn)槲覀冞€要定義這個(gè)div的寬，高，背景色，邊框等等，詳見如下代碼：
這樣的一行代碼，最后展現(xiàn)出來的效果是：
我們來一點(diǎn)點(diǎn)的剖析這一行代碼：
Style:style 是元素標(biāo)簽里的一個(gè)標(biāo)簽屬性，他的作用是可以定義該標(biāo)簽的樣式。里面的樣式格式是xxx:xxx; 每一組樣式都是這樣的定義，冒號用來隔開樣式屬性和樣式屬性值，最后以分號結(jié)尾.
width:定義該元素的寬
height:定義該元素的高
background:定義該元素的背景顏色(也可使用red,yellow等顏色定義)
border:定義該元素的邊框
4px 代表邊框粗細(xì)，
solid 代表邊框樣式, 邊框樣式又分為solid(實(shí)框)、dotted(虛框)
red代表邊框顏色,邊框顏色也可用#ccc,#112233這種形式表現(xiàn)
Div里可以放入文字、圖片、標(biāo)簽元素等各式各樣的東西。下面我演示一下如何放入照片：
首先，放入照片要使用到<img>標(biāo)簽，這是一個(gè)自閉和標(biāo)簽，所有沒有結(jié)束標(biāo)簽。
Src代表圖片的路徑，width,height 代表圖片的寬度和高度 ,alt是圖片的描述
這個(gè)路徑可以是相對路徑，也可以是絕對路徑。
相對路徑：就是相對于這個(gè)網(wǎng)頁的路徑，比如圖片和網(wǎng)頁在同一個(gè)文件夾下，那么src處就直接填圖片的文件名字就可以，若建了一個(gè)文件夾images，圖片放在該文件夾中，同時(shí)這個(gè)文件夾和網(wǎng)頁在同一個(gè)位置，那么src所填的就是images/圖片名字.jpg
絕對路徑：即從頭開始寫路徑，如src=“C:/xxx/xxx/xxx/xxx.jpg”
假設(shè)我現(xiàn)在的圖片位置和網(wǎng)頁位置同處一處
最后的效果：
我這里改大了DIV的寬度和高度，若圖片所設(shè)的寬高大于DIV的寬度高度，那么將會發(fā)生溢出的情況，同學(xué)們可以自己去試一下，這種溢出的情況也有對應(yīng)的標(biāo)簽可以做調(diào)整，這個(gè)我們后面再講。
這邊特別提醒一點(diǎn)，如果div沒有設(shè)定寬度width,則默認(rèn)為等同瀏覽器寬度的寬度，若div沒有設(shè)定高度，則該div根據(jù)div中內(nèi)容進(jìn)行高度的伸縮，div中的內(nèi)容有多高，div就有多高，如圖，我把width和height全部去掉：
上圖width和height全部去掉，所以，width默認(rèn)跟瀏覽器寬度等寬，高度為圖片的高度。
文字的話就比較簡單了，代碼貼上：
最后結(jié)果：
第二句文字才是div創(chuàng)建出來的文字，我解釋一下style里面的樣式：
Font-size:文字大小，px為單位(像素)
Font-family:文字樣式，分為很多，這個(gè)可以去word文檔里找找
Font-weight：文字加粗，bold是一種默認(rèn)加粗的大小。
End.
來源：公眾號“java編程”
運(yùn)行人員：中國統(tǒng)計(jì)網(wǎng)小編（微信號：itongjilove）
微博ID：中國統(tǒng)計(jì)網(wǎng)
中國統(tǒng)計(jì)網(wǎng)，是國內(nèi)最早的大數(shù)據(jù)學(xué)習(xí)網(wǎng)站，公眾號：中國統(tǒng)計(jì)網(wǎng)
http://www.itongji.cn
發(fā)一個(gè)產(chǎn)品，如果沒有一個(gè)指導(dǎo)方針，就像你在野外迷了路一樣，始終找不到方向。為此，我在搞清楚Django的框架之后，整理出了一套開發(fā)流程。有流程的指導(dǎo)，項(xiàng)目才能有條不紊地展開，功能實(shí)現(xiàn)才能事半功倍。
構(gòu)建一個(gè)項(xiàng)目sales，無論是用django-admin startproject sales命令，還是用PyCharm或Eclipse開發(fā)工具，一次就夠了。
打開settings.py配置文件，在底部找到LANGUAGE_CODE和TIME_ZONE，將其改成支持簡體中文模式，默認(rèn)是英文的，至于繁體字等代號，請自行查詢。
LANGUAGE_CODE='zh-hans'
TIME_ZONE='Asia/Shanghai'有關(guān)數(shù)據(jù)庫的配置也在這時(shí)進(jìn)行，默認(rèn)為sqlite的配置信息，這也是咱們開始時(shí)使用的數(shù)據(jù)庫。
DATABASES={
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
如果是Mysql數(shù)據(jù)庫，配置信息會多幾個(gè)參數(shù)，其他關(guān)系數(shù)據(jù)庫，除了ENGINE不同外，其他的參數(shù)是差不多的。
DATABASES={
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': '', # 數(shù)據(jù)庫名稱
'USER': '', # 連接賬戶
'PASSWORD': '', # 連接密碼
'HOST': '', # IP地址
'PORT': '', # 端口號
}
}Django3.0支持PostgreSQL 9.5和更高版本，低版本的不支持。Django3.0支持Oracle 12.2和18c，低版本的不支持。
為了保持每個(gè)App的獨(dú)立性，在用python3 manage.py startapp base命令構(gòu)建base等應(yīng)用之后，新建urls.py、新建templates文件夾(右鍵base-【New】-【Directory】)和靜態(tài)文件夾static，在static下面，新建css、images和js目錄，完成之后目錄如下，請依樣畫葫蘆。
你沒看錯(cuò)，在templates和static下面還有一個(gè)base，為什么需要這樣，下一節(jié)3.4中有說明，往下看就對了。
打開settings.py文件，目標(biāo)鎖定到INSTALLED_APPS節(jié)點(diǎn)，在末尾加上base和逗號。
INSTALLED_APPS=[
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'base',
]在配置base時(shí)，發(fā)現(xiàn)INSTALLED_APPS里面已經(jīng)存在很多默認(rèn)的應(yīng)用了，正是因?yàn)橛兴鼈儯抛孌jango功能強(qiáng)大了不少。如下的備注信息不要添加到settings.py文件中，你了解一下它們有什么用就可以了。
'django.contrib.admin', # 管理員站點(diǎn)
'django.contrib.auth', # 認(rèn)證授權(quán)系統(tǒng)
'django.contrib.contenttypes', # 內(nèi)容類型框架
'django.contrib.sessions', # 會話框架
'django.contrib.messages', # 消息框架
'django.contrib.staticfiles', # 管理靜態(tài)文件(圖片、css等)的框架1. 配置模板
找到TEMPLATES節(jié)點(diǎn)，找到里面的'DIRS':項(xiàng)，配置信息如下。這里的django.template.backends.django.DjangoTemplates應(yīng)用，專門用來管理模板，它會收集整個(gè)項(xiàng)目templates下的文件。
如果一個(gè)項(xiàng)目中，有多個(gè)templates存在,而且模板文件(html)有重名的情況，那找到的不一定就是你想要的。為了區(qū)分，就需要多加一層(base)目錄，名字一般是應(yīng)用名稱。
'DIRS': [os.path.join(BASE_DIR, 'templates')],2. 配置靜態(tài)文件
Django中的靜態(tài)文件，是指圖片、CSS、Javascript等文件，模板定位到settings.py底部，確定有STATIC_URL這個(gè)節(jié)點(diǎn)，如果沒有，自行補(bǔ)上。。這個(gè)是靜態(tài)文件的目錄名稱。
django.contrib.staticfiles應(yīng)用對整個(gè)項(xiàng)目的靜態(tài)文件進(jìn)行收集統(tǒng)一管理，其原理跟模板是一樣的，也需要在static文件夾下，加多一層(base)目錄，名字一般是應(yīng)用名稱。
STATIC_URL='/static/'好了，流程中基本的配置工作，到這就講完了，有關(guān)models、模板、靜態(tài)文件等內(nèi)容，后面會逐步講解，你關(guān)注我就對了。
好了，有關(guān)Django3.0項(xiàng)目開發(fā)流程的內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說編程。我在分享Python，前端、Java和App方面的干貨。關(guān)注我，沒錯(cuò)的。
#Python##Django##程序員##Web##項(xiàng)目實(shí)戰(zhàn)#
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
[XHTML+CSS]項(xiàng)目實(shí)戰(zhàn)二視頻教程：溫州廣廈[1]
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
