Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
置背景顏色的代碼:
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1>我的自學(xué)課程!</h1>
<p>我的天下我做主。</p>
</body>
</html>
背景色
CSS中,顏色值通常以以下方式定義:
十六進制 - 如:"#ff0000"
RGB - 如:"rgb(255,0,0)"
顏色名稱 - 如:"red"
文字背景色
用font-family來指定字體。
Verdana是一套無襯線字體,它在小字上有結(jié)構(gòu)清晰端整、閱讀辨識容易等高品質(zhì)表現(xiàn),成為許多領(lǐng)域愛用的標(biāo)準(zhǔn)字型之一。
字體
用font-size指定字體大小。
文字大小
使用 text-align指定文本的水平與垂直對齊方式。
對齊方式
HTML的全稱是超文本標(biāo)記語言,英文全稱是HyperText Markup Language。如果您是零基礎(chǔ)的話,看到這個名字,即使是漢語的,估計也會不知所云。
超文本指的是用超鏈接的方法,將各種不同空間的文字信息組織在一起的網(wǎng)狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起,這些相互連接的文本集合稱為"超文本"。超文本是網(wǎng)頁制作一個非常重要的概念,可以說網(wǎng)絡(luò)的精髓就在于"互聯(lián)"。
這些相互關(guān)聯(lián)的信息媒體可能在同一文本中,也可能是其他文件,或是地理位置相距遙遠(yuǎn)的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接,為人們查找,檢索信息提供方便。(孫素華編著.Dreamweaver CS5 Flash CS5 Photoshop CS5網(wǎng)頁設(shè)計從入門到精通:中國青年出版社,2014.10:第16頁)
標(biāo)記語言的概念比較復(fù)雜,簡單來說,HTML并不是程序語言(不同于C或Python),只是一種在網(wǎng)頁中顯示資料排版位置的標(biāo)記結(jié)構(gòu)語言。這句話提煉一下就是"標(biāo)記信息在頁面中排版結(jié)構(gòu)的語言"。
如果讀的不太明白,在下一節(jié)"HTML基本框架"中會對HTML的排版結(jié)構(gòu)規(guī)則進行直觀展示,如果您讀不懂可以盡情的跳過,畢竟我們的重點是怎么用。
HTML框架簡單說就是任何HTML網(wǎng)頁文件中都會包含的基本代碼內(nèi)容。如果我們打算寫一個頁面,就一定要把框架代碼寫入后才能正式開始添加內(nèi)容。框架代碼如下:
<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
這七行代碼是所有HTML頁面所共有的,也就是HTML的框架了。不信我們來驗證一下。
例子一,頭條的文章頁面(電腦版)網(wǎng)址:https://www.toutiao.com/i6785149184245760516/
筆者使用Firefox(火狐)瀏覽器,輸入網(wǎng)址后點擊鍵盤上的F12,,如圖所示
我們可以看到頁面下半部分出現(xiàn)了一個調(diào)控臺。
點擊查看器即可看頁面代碼。代碼如下:
放大一些,大家看看,<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標(biāo)簽是不是一個不少,只是中間多了很多內(nèi)容而已。
一個例子不具有普適性,下面我們再看一個例子,我隨便找了個新聞頁面,網(wǎng)址:https://mil.eastday.com/a/200125113254400.html
使用同樣的方法打開查看器看代碼,如圖:
是不是框架中的代碼一個也不少吧。
所以,大家請在自己的電腦中新建一個txt文件,將HTML框架粘貼到txt文件中,并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。
通過對框架中的代碼進行觀察,細(xì)心的讀者可能已經(jīng)發(fā)現(xiàn)了HTML這種標(biāo)記語言的書寫規(guī)律。
規(guī)律1:每一個語句都是包含在<>尖括號內(nèi)的。這是HTML標(biāo)記語言的基本特點之一,大家一定記牢。
規(guī)律2:除了<!DOCTYPE HTML>這個標(biāo)簽外,其他標(biāo)簽都是成對出現(xiàn)!例如<html>與</html>,<head>與</head>,<body>與</body>。
規(guī)律3:這個規(guī)律通過觀察代碼也不難發(fā)現(xiàn),即<html></html>兩個標(biāo)簽中間夾著<head></head>和<body></body>,我們把<head></head>標(biāo)簽稱為<html></html>標(biāo)簽的子標(biāo)簽,反過來<html></html>標(biāo)簽是<head></head>標(biāo)簽的父標(biāo)簽,<head></head>和<body></body>稱為并列關(guān)系或者兄弟關(guān)系。而<!DOCTYPE HTML>是一個聲明語句,屬于六親不認(rèn)的。
各種關(guān)系如下圖所示:
這樣就回到了之前我們解釋"標(biāo)記語言"的問題上。我們說"標(biāo)記語言"是"標(biāo)記信息在頁面中排版結(jié)構(gòu)的語言",這種父子關(guān)系、兄弟關(guān)系就可以理解為一個頁面的"結(jié)構(gòu)",這種結(jié)構(gòu)又與頁面的排版有關(guān)。
在下一期中,我們會通過練習(xí)來解釋"結(jié)構(gòu)"與排版的關(guān)系。
喜歡的小伙伴請加關(guān)注,有任何問題可以留言給我,歡迎指正批評,感激不盡!
HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
日,有不少的程序員問w3cschool這邊,前端開發(fā)應(yīng)該怎么學(xué)?
有個小白程序員表示,自己走了很多彎路,學(xué)java開發(fā)沒學(xué)透不能就業(yè),現(xiàn)在學(xué)前端又不知道如何下手,前后算起來浪費了不少的時間。
針對此問題,下面w3cschool就給程序員小伙伴們答疑解惑,并分享一些干貨。
前端有三架馬車你一定要學(xué)會“駕馭”,HTML+CSS+Javascript。
照目前看來,網(wǎng)上各種前端學(xué)習(xí)資料又多又雜,確實讓不少入門前端的小伙伴不知所措。要選什么學(xué)習(xí)資料?如何入門前端開發(fā)?
關(guān)于視頻的選擇,直接網(wǎng)上搜“30 Days to Learn HTML & CSS”這個視頻來看。
這個視頻是國外的前端開發(fā)特產(chǎn),大小有1G多吧!
前端開發(fā)可以照前端開發(fā)的視頻進行實戰(zhàn)訓(xùn)練,建議可以一邊開著NotePad++?,一邊看視頻,一邊敲代碼。
另外,可以用有道云,或者是印象筆記稍微做點記錄,這會加快你對html、css的學(xué)習(xí)。
當(dāng)你咨詢了很多的前端工程師,他們都會推薦你從經(jīng)典的w3cschool基礎(chǔ)教程開始,把上面的課程刷一遍。
通過前面兩步的學(xué)習(xí),你基本上算是入門html啦。
但相信也會有些程序員覺得很枯燥,那不妨可以嘗試w3cschool新開發(fā)的html微課。
比如之前的《刀塔傳奇》,很多人每天刷副本都可以樂此不疲,因為游戲升級通關(guān)是比較有趣的。
w3cschool微課同樣采用了闖關(guān)刷副本的模式,你通過每天有趣的刷副本闖關(guān),就可以掌握html重點的概念和編程技能。
會有些前輩會給你推薦《DOM編程藝術(shù)》、《Javascript權(quán)威指南》、《Javascript高級程序設(shè)計》、《鋒利的JQuery》等,但對于新手來說似乎略難。
不妨去看Head first html, xhtml & CSS這兩本簡直是神書,真心經(jīng)典!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。