整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          java零基礎(chǔ)到項(xiàng)目實(shí)戰(zhàn):HTML入門

          在前面:java作為一門世界級(jí)編程語言金字塔頂尖的語言。需要大量的練習(xí)、練習(xí)、練習(xí)來鞏固自己所獲得的知識(shí)。冰凍三尺非一日之寒,希望大家在學(xué)習(xí)java的日子里一定一定要堅(jiān)持不懈,嚴(yán)格要求。多練,多問,多百度。祝大家早日成為一名優(yōu)秀的軟件工程師!

          文章摘要:此篇文章會(huì)帶領(lǐng)大家創(chuàng)建一個(gè)html最簡單的頁面,以及在頁面中增加一些簡單的內(nèi)容。

          我先給大家放2張我以前教學(xué)的時(shí)候,開課前給學(xué)生畫的圖:

          這2張圖應(yīng)該已經(jīng)比較清晰明了的告訴你,學(xué)習(xí)java前端需要具備的一些主觀和客觀方面的東西,我就不多做解釋了,以后我的文章中,會(huì)以代碼圖片及展現(xiàn)效果居多,盡量減少文字的占比。讓大家對(duì)所學(xué)的知識(shí)有一個(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é)一定對(duì)剛才的代碼比較疑惑,雖然照著寫能實(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)簽代碼都會(huì)寫在<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)簽則以空格符號(hào)分割 ,如圖:

          Div 是整個(gè)html中最常用的一個(gè)標(biāo)簽元素,<div></div>類似于一個(gè)盒子,里面可以承載各種各樣的元素標(biāo)簽,大家看到的所有的網(wǎng)站都是靠著div一個(gè)個(gè)的盒子規(guī)劃開來,最后拼接在一起的,形成了一個(gè)完整的頁面。

          那么如何去建立一個(gè)div呢?首先,我們?cè)趆tml的<body></body>標(biāo)簽中加入一個(gè)<div></div>標(biāo)簽 ,但是單純的加入標(biāo)簽并不會(huì)在頁面中產(chǎn)生肉眼可見的東西,因?yàn)槲覀冞€要定義這個(gè)div的寬,高,背景色,邊框等等,詳見如下代碼:

          這樣的一行代碼,最后展現(xiàn)出來的效果是:

          我們來一點(diǎn)點(diǎn)的剖析這一行代碼:

          Style:style 是元素標(biāo)簽里的一個(gè)標(biāo)簽屬性,他的作用是可以定義該標(biāo)簽的樣式。里面的樣式格式是xxx:xxx; 每一組樣式都是這樣的定義,冒號(hào)用來隔開樣式屬性和樣式屬性值,最后以分號(hào)結(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è)路徑可以是相對(duì)路徑,也可以是絕對(duì)路徑。

          相對(duì)路徑:就是相對(duì)于這個(gè)網(wǎng)頁的路徑,比如圖片和網(wǎng)頁在同一個(gè)文件夾下,那么src處就直接填圖片的文件名字就可以,若建了一個(gè)文件夾images,圖片放在該文件夾中,同時(shí)這個(gè)文件夾和網(wǎng)頁在同一個(gè)位置,那么src所填的就是images/圖片名字.jpg

          絕對(duì)路徑:即從頭開始寫路徑,如src = “C:/xxx/xxx/xxx/xxx.jpg”

          假設(shè)我現(xiàn)在的圖片位置和網(wǎng)頁位置同處一處

          最后的效果:

          我這里改大了DIV的寬度和高度,若圖片所設(shè)的寬高大于DIV的寬度高度,那么將會(huì)發(fā)生溢出的情況,同學(xué)們可以自己去試一下,這種溢出的情況也有對(duì)應(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.

          來源:公眾號(hào)“java編程”

          運(yùn)行人員:中國統(tǒng)計(jì)網(wǎng)小編(微信號(hào):itongjilove)

          微博ID:中國統(tǒng)計(jì)網(wǎng)

          中國統(tǒng)計(jì)網(wǎng),是國內(nèi)最早的大數(shù)據(jù)學(xué)習(xí)網(wǎng)站,公眾號(hào):中國統(tǒng)計(jì)網(wǎng)

          http://www.itongji.cn

          ava開發(fā)已經(jīng)悄無聲息的走進(jìn)我們的生活中,無論是手機(jī)軟件、手機(jī)Java游戲還是電腦軟件等,只要你使用到電子產(chǎn)品就會(huì)碰到和Java有關(guān)的東西,更多的企業(yè)正采用Java語言開發(fā)網(wǎng)站,也心音了好多志同道合的朋友開始加入Java開發(fā)的行列。千鋒教育強(qiáng)勢推出的Java+大數(shù)據(jù)的新課程,為更多的Java學(xué)習(xí)者打造更加先進(jìn)的Java開發(fā)技術(shù)。

          我們知道在Java的學(xué)習(xí)中,Javaweb是我們的必修階段,而在Javaweb開發(fā)中,我們學(xué)習(xí)的第一課便是HTML5和CSS的入門基礎(chǔ)。我們常說的要瀏覽的網(wǎng)頁就是由HTML語言來編寫的,而CSS就是能讓我們的網(wǎng)頁更加絢麗。通過HTML和CSS的編碼來顯示我們的網(wǎng)頁。所以web開發(fā)的必備技能便是HTML和CSS。

          那什么是HTML呢?HTML就是超文本標(biāo)記語言。下面是千鋒小編為大家準(zhǔn)備的HTML的發(fā)展史,教你一步一步踏入Java的世界。

          HTML1.0-2.0,分別是在1989年和1991年誕生,起初的這兩個(gè)版本只有幾個(gè)基本的標(biāo)簽,而且做出來的網(wǎng)頁也不是很好看,但已經(jīng)支持了超文本。所以幾乎web上的每一個(gè)人都有他們的主頁。

          HTML3是在1995年的時(shí)候誕生,那時(shí)候還誕生了一場漫長而殘酷的瀏覽器戰(zhàn)爭,Netscape和 microsoft都在試圖爭霸世界,每個(gè)瀏覽器都在不斷的增加自己的專用擴(kuò)展包。

          HTML4有1998年誕生,此時(shí)瀏覽器戰(zhàn)爭結(jié)束web標(biāo)準(zhǔn)誕生,HTML的結(jié)構(gòu)和表現(xiàn)分離到兩種語言,一種語言用于實(shí)現(xiàn)結(jié)構(gòu)(HTML);一種語言用于表現(xiàn)(CSS)

          HTML4.01在1999年誕生,與HTML4相比只是做了一些簡單的修補(bǔ),所有的瀏覽器都采用一直的標(biāo)準(zhǔn),除了IE瀏覽器,所以web開發(fā)人員都要單獨(dú)做一些工作。

          XHTML在 2001年誕生,是XML和HTML的結(jié)合,只是XHTML相比于HTML的標(biāo)準(zhǔn)更加嚴(yán)格。但是web開發(fā)人員對(duì)HTML的靈活性更加的擁護(hù)。

          HTML5是沿用了HTML4.01的大部分特性,提供了體現(xiàn)web新發(fā)展的新特性,完全支持XHTML風(fēng)格的代碼,從此HTML5成為大家公認(rèn)的標(biāo)準(zhǔn)。也就是我們現(xiàn)在都在用的版本HTML5。

          HTML5 目標(biāo)是書寫簡潔的HTML代碼,創(chuàng)建更加簡單的web程序。而我們HTML5常用的標(biāo)簽:標(biāo)題標(biāo)簽、段落標(biāo)簽、無序列表標(biāo)簽、有序列表標(biāo)簽等

          我們目前用的CSS3是CSS的新標(biāo)準(zhǔn),是對(duì)CSS2的更新,就像我們美麗的圖片,和我們?cè)谡掌凶龅奶匦В瑢⑽覀兊木W(wǎng)頁裝飾的更加精彩,我們看起來更加舒服。

          高樓之所以能高峨聳立,是因?yàn)橛械鼗臋?quán)利支撐;同樣的Java開發(fā)之所以能夠盡善盡美,是因?yàn)槲覀兊腍TML和CSS的完美助力,學(xué)習(xí)Java開發(fā)從千鋒開始吧!

          千鋒JavaEE+云數(shù)據(jù)講師團(tuán)匯集行業(yè)頂尖師資,以從業(yè)經(jīng)驗(yàn)5年以上的技術(shù)大咖面授教學(xué),原華為技術(shù)官、IBM技術(shù)負(fù)責(zé)人、中興項(xiàng)目負(fù)責(zé)人為首的千鋒講師,撐起國內(nèi)JavaEE+云數(shù)據(jù)教學(xué)第一道防線,力保Java的教學(xué)品質(zhì)。選擇千鋒Java培訓(xùn),是你成功的開始,過程中的努力,讓你的成功成為必然!


          avaScript 的基本語法和對(duì)象體系,是模仿 Java 而設(shè)計(jì)的。但是,JavaScript 沒有采用 Java 的靜態(tài)類型。正是因?yàn)?JavaScript 與 Java 有很大的相似性,所以這門語言才從一開始的 LiveScript 改名為 JavaScript。基本上,JavaScript 這個(gè)名字的原意是“很像Java的腳本語言”。

          JavaScript 語言的函數(shù)是一種獨(dú)立的數(shù)據(jù)類型,以及采用基于原型對(duì)象(prototype)的繼承鏈。這是它與 Java 語法最大的兩點(diǎn)區(qū)別。JavaScript 語法要比 Java 自由得多。

          另外,Java 語言需要編譯,而 JavaScript 語言則是運(yùn)行時(shí)由解釋器直接執(zhí)行。

          總之,JavaScript 的原始設(shè)計(jì)目標(biāo)是一種小型的、簡單的動(dòng)態(tài)語言,與 Java 有足夠的相似性,使得使用者(尤其是 Java 程序員)可以快速上手。


          主站蜘蛛池模板: 91精品福利一区二区| 亚洲国产一区国产亚洲 | 精品国产一区二区三区久久久狼| 亚洲午夜一区二区三区| 久久国产精品最新一区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 北岛玲在线一区二区| 欧美成人aaa片一区国产精品| 久久精品国产免费一区| 国产在线精品一区二区夜色 | 最新中文字幕一区二区乱码| 性色AV一区二区三区| 中文字幕亚洲一区| 狠狠色婷婷久久一区二区三区| 日本夜爽爽一区二区三区| 女同一区二区在线观看| 无码aⅴ精品一区二区三区| 国产伦精品一区二区三区女| 国产91精品一区二区麻豆网站| 无码一区二区三区| 国产成人久久一区二区不卡三区 | 好吊视频一区二区三区| 人妻内射一区二区在线视频| 四虎一区二区成人免费影院网址| 综合一区自拍亚洲综合图区| 国产日韩精品一区二区在线观看| 怡红院美国分院一区二区| 日韩一区二区三区不卡视频| 国产成人精品视频一区| 一区二区免费国产在线观看| 变态调教一区二区三区| 熟女大屁股白浆一区二区| 日本高清成本人视频一区| 亚洲AV乱码一区二区三区林ゆな| 午夜DV内射一区二区| 欧美日韩国产免费一区二区三区| 成人毛片一区二区| 精品国产不卡一区二区三区| 亚洲爆乳无码一区二区三区| 天堂va在线高清一区| 日本一区二区在线免费观看|