柚子快報邀請碼778899分享:前端 HTML簡單入門教程
柚子快報邀請碼778899分享:前端 HTML簡單入門教程
一、HTML介紹
1.什么是HTML?
HTML中文名字是超文本標(biāo)記語言。超文本:即超越了普通純文本的功能,可以定義除文字外的音視頻、圖片等;標(biāo)記語言:由標(biāo)簽構(gòu)建的語言,標(biāo)簽都是預(yù)定義好的。HTML運行在瀏覽器上。
補充:W3C標(biāo)準(zhǔn):網(wǎng)頁由三部分組成(結(jié)構(gòu):HTML,表現(xiàn):CSS,行為:Javascript)
2.快速入門:
2.1.創(chuàng)建一個名為hello world.html文件
2.2.打開文件,寫入
????????
????????????????
????????
????????
????????????????
hello world
????????????????
乾坤未定,你我皆是黑馬>
????????
`
2.3.保存文件,改后綴名為.html,雙擊文件打開看效果。
3.小結(jié):
3.1.html文本是以.htm或.html結(jié)尾。
3.2.html結(jié)構(gòu)標(biāo)簽:是定義html文檔;
定義關(guān)于文檔信息;3.3.html標(biāo)簽不區(qū)分大小寫。
3.4.html標(biāo)簽屬性值,單雙引號都可以。
3.5.html語法松散(注:但默認(rèn)要正確語法,方便閱讀)。
二、html基礎(chǔ)標(biāo)簽:
1.基礎(chǔ)標(biāo)簽介紹:
1.1.
~:定義標(biāo)題,設(shè)置文本大小
1.2.:定義字體尺寸(size)、顏色(color:英文單詞、rgb、#值1值2值3 這三種設(shè)置顏色,一般用#值1值2值3 )、字體(face)
1.3. :設(shè)置加粗
1.4. :設(shè)置傾斜
1.5.:設(shè)置下劃線
1.6.
1.7.
:設(shè)置為段落
1.8. :設(shè)置換行
1.9.
:定義水平線
2.案例:
2.1.將下面這段文字通過在html中設(shè)置成如圖所示的樣子:
公司簡介
xx教育(股票代碼 003032),隸屬江蘇xx教育科技股份有限公司,注冊資本4億元,是第一個實現(xiàn)A股IPO的教育企業(yè),公司致力于培養(yǎng)高精尖數(shù)字化人才,主要培養(yǎng)人工智能、python+大數(shù)據(jù)開發(fā)、智能制造、軟件、互聯(lián)網(wǎng)、區(qū)塊鏈等數(shù)字化專業(yè)人才及數(shù)據(jù)分析、網(wǎng)絡(luò)營銷、新媒體等數(shù)字化應(yīng)用人才。公司由一批擁有10年以上開發(fā)管理經(jīng)驗,且來自互聯(lián)網(wǎng)或研究機構(gòu)的IT精英組成,負(fù)責(zé)研究、開發(fā)教學(xué)模式和課程內(nèi)容。公司具有完善的課程研發(fā)體系,一直走在整個行業(yè)發(fā)展的前端,在行業(yè)內(nèi)豎立起了良好的品質(zhì)口碑。
民族振興靠人才,中華民族正處于偉大復(fù)興之路上,要贏得國際競爭,需要擁有大量的科技人才,我們將肩負(fù)起民族使命,在三尺講臺誨人不倦 著書立說,為科技行業(yè)培養(yǎng)出大量的優(yōu)秀人才,促進(jìn)民族偉大復(fù)興!我們的使命是:為中華民族偉大復(fù)興而講課,為千萬學(xué)生少走彎路而著書。
探索教育之路,長途漫漫。傳智教育希望可以通過自己的努力,尋找出一條更符合人類自然成長規(guī)律的教育之路,建立起一個新的教育生態(tài)環(huán)境,讓中國的家長和孩子們在現(xiàn)有的教育體系之外,再多一些選擇的機會。因此“探索教育本源,開辟教育新生態(tài)”便成為了所有傳智人為之奮斗的終極愿景,也是所有傳智人共同努力的目標(biāo)。為此,15年來,傳智人不曾有一絲懈怠,相信在傳智人的不懈努力下,大道不遠(yuǎn),終在腳下。
江蘇xx教育科技股份有限公司 版權(quán)所有Copyright 2006-2018?, All Rights Reserved 蘇ICP備16007882
樣式圖:
3、我的代碼示例:
三、圖片音視頻標(biāo)簽
注:height屬性和width屬性有兩種設(shè)置方式:(1)像素:單位是px;(2)百分比;占父標(biāo)簽的百分比。例如寬度設(shè)置為 50%,意思就是占它的父標(biāo)簽寬度的一般(50%)
1、圖片標(biāo)簽,里面可以設(shè)置src(圖片路徑)、width(圖片寬度)、height(圖片高度)等屬性;
2、
3、
4、效果示例:
補充:src屬性的兩個寫法:
1、絕對路徑:將引用的文件所在位置的完整路徑全部寫進(jìn)去src中。
2、相對路徑:相對位置關(guān)系(即引用的文件與當(dāng)前html文件的位置關(guān)系)
2.1.若引用的文件與html文件在同級目錄下寫成 ./xxx.txt或者xxx.txt 因為./可以省略;
? ? ? ? ? xxx/html/02-圖片音頻視頻.html
? ? ? ? ? xxx/html/a.jpg
2.2.若引用的文件是下面這種關(guān)系寫成 ./img/a.jpg或者img/a.jpg 因為./可以省略;
? ? ? ? ? xxx/html/02-圖片音頻視頻.html
? ? ? ? ? xxx/html/img/a.jpg
2.3.若引用的文件是下面這種關(guān)系寫成(不在同一級目錄中) ../img/a.jpg
在該頁面找a.jpg,就需要先回到上一級目錄,該級目錄有img目錄,進(jìn)入該目錄就可以找到 a.jpg圖片。
? ? ? ? ? xxx/html/02-圖片音頻視頻.html
? ? ? ? ? xxx/img/a.jpg
四、超鏈接標(biāo)簽
1、屬性:
1.1 href:指定訪問資源的URL
1.2 target:指定打開資源的方式
1.2.1 _self:默認(rèn)值,在當(dāng)前頁面打開
1.2.2 _blank:在空白頁面打開,即單開一個頁面打開展示該超鏈接對應(yīng)的界面。
代碼演示:
五、列表標(biāo)簽
1、有序標(biāo)簽(type 屬性用來指定標(biāo)記的標(biāo)號的類型(數(shù)字、字母、羅馬數(shù)字等) )
?
?
? ...
2、無序標(biāo)簽(type 屬性用來指定標(biāo)記的形狀)
?
?
? ...
2、代碼演示:
六、表格標(biāo)簽
1、表格標(biāo)簽介紹
table :定義表格
border:規(guī)定表格邊框的寬度
width :規(guī)定表格的寬度
cellspacing:規(guī)定單元格之間的空白
tr :定義行
align:定義表格行的內(nèi)容對齊方式
td :定義單元格
rowspan:規(guī)定單元格可橫跨的行數(shù)
colspan:規(guī)定單元格可橫跨的列數(shù)
th:定義表頭單元格
2、代碼演示:
七、布局標(biāo)簽
1、
2、用于組合行內(nèi)元素(span 標(biāo)簽在瀏覽器上沒有換行效果)。
3、代碼演示:
八、表單標(biāo)簽
1、概念:
類似登陸頁面、注冊頁面等都是表單。主要作用是采集用戶輸入的數(shù)據(jù),將數(shù)據(jù)發(fā)送到服務(wù)端,服務(wù)端會對數(shù)據(jù)庫進(jìn)行操作,比如注冊就是將數(shù)據(jù)保存到數(shù)據(jù)庫中,而登陸就是根據(jù)用戶名和密碼進(jìn)行數(shù)據(jù)庫的查詢操作。
表單:在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能,使用 標(biāo)簽定義表單
表單項(元素):不同類型的 input 元素、下拉列表、文本域等
2、標(biāo)簽介紹:
2.1
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。