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
html是什么?html文檔基本結(jié)構(gòu)
html(hyper text markup language):超文本標記語言.它不是一種編程語言,而是一種標記語言,它有一套標記標簽(markup tag).html使用標記標簽來描述網(wǎng)頁.html文檔也叫web頁面
你可以使用html來建立自己的web站點.
網(wǎng)頁主要由3部分組成:
■html:結(jié)構(gòu)(structure)
■css:表現(xiàn)(presentation)
■javascript:行為(behavior)
html實例:
<!doctype html>
<html>
<body>
<h1>我是第一個標題</h2>
<p>我是第一個段落</p>
</body>
</html>
●<html>元素定義了整個html文檔,這個元素有個開始標簽<html>,有個結(jié)束標簽</html>
●<head>元素必須包含文檔的標題(title),可以包含腳本,樣式,meta信息以及其他更多的信息
●<body>元素定義文檔的主體,<body>元素包含文檔的所有內(nèi)容(比如文本,超鏈接,圖像,表格和列表等等)
二 創(chuàng)建你的第一個html頁面
html文件是文本文件,因此你可以使用任何文本編輯器來創(chuàng)建你的第一個網(wǎng)頁.
給大家推薦幾款常用的編輯器:
●Notepad++
●Sublime Text
●HBuilder
●EditPlus
在編輯器中輸入:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>我的第一個段落.</p>
</body>
</html>
保存為first.html(后綴名也可以是.htm,推薦使用.html)
注意:對于中文網(wǎng)頁需要使用<meta charset="utf-8">聲明編碼,否則會出現(xiàn)亂碼.有些瀏覽器會設(shè)置GBK為默認編碼,則你需要設(shè)置為<meta charset="gbk">
<title>標簽定義了html文檔的標題,在所有html文檔中是必需的
<title>元素:
●定義瀏覽器工具欄中的標題
●提供頁面被添加到收藏夾時的標題
●顯示在搜索引擎結(jié)果的頁面標題
<html>
<head>
<meta charset="utf-8">
<title>我的第一個頁面</title>
</head>
<body>
<p>我的第一個段落.</p>
</body>
</html>
在editplus中運行的結(jié)果:
HTML script 元素
<script> 標簽用于定義客戶端腳本,比如 JavaScript。
script 元素既可包含腳本語句,也可通過 src 屬性指向外部腳本文件。
必需的 type 屬性規(guī)定腳本的 MIME 類型。
JavaScript 最常用于圖片操作、表單驗證以及內(nèi)容動態(tài)更新。
下面的腳本會向瀏覽器輸出“Hello World!”:
<script type="text/javascript"> document.write("Hello 天華信息教育!") </script>
<noscript> 標簽
<noscript> 標簽提供無法使用腳本時的替代內(nèi)容,比方在瀏覽器禁用腳本時,或瀏覽器不支持客戶端腳本時。
noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時,才會顯示 noscript 元素中的內(nèi)容:
<script type="text/javascript"> document.write("Hello 天華信息教育!") </script> <noscript>Your browser does not support JavaScript!</noscript>
實例
如何將腳本插入 HTML 文檔。
<html> <body> <script type="text/javascript" > document.write("<h1>Hello 天華信息教育!</h1>") </script> </body> </html>
HTML基礎(chǔ)教程:腳本
如何應(yīng)對不支持腳本或禁用腳本的瀏覽器。
<html> <body> <script type="text/javascript"> document.write("Hello 天華信息教育!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <p>不支持 JavaScript 的瀏覽器將顯示 noscript 元素中的文本。</p> </body> </html>
HTML基礎(chǔ)教程:腳本
希望以上可以解決你們心中的一些疑惑,其中可能會有不對的地方或是需要改進的地方,歡迎留言糾正。感覺還不錯歡迎關(guān)注收藏轉(zhuǎn)載哦
有一個好的編輯器我們可以方便地的開發(fā)項目,編寫代碼,配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。
基于html項目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器,也有免費的,也有收費的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本,我們可以使用記事本編輯html代碼。
使用記事本編寫html的步驟是首先新建一個文本文檔,按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件,然后把文件的后綴名改為.html,使用電腦上的瀏覽器打開就可以查看我們代碼的運行結(jié)果。
雖然記事本也能編寫html代碼,但是效率不高也不方便,所以我們使用專業(yè)的編輯器來開發(fā)項目,編寫代碼和管理項目。
常用html代碼編寫的免費軟件有HBuilderX,vs code,Sublime Text 等等。
HBuilderX官網(wǎng)下載地址:
https://www.dcloud.io/hbuilderx.html
vs code的官網(wǎng)下載地址:
https://code.visualstudio.com/
Sublime Text官網(wǎng)下載地址:
http://www.sublimetext.com/
我們以后的教程都使用HBuilderX,所以下面為了同學(xué)們的學(xué)習(xí)方便,對HBuilderX的下載和安裝做詳細的教程。
一,下載
首先訪問HBuilderX的官網(wǎng)網(wǎng)址:
https://www.dcloud.io/hbuilderx.html
打開上面的HBuilderX下載網(wǎng)址后點擊頁面上download,在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。
在Windows10環(huán)境下下載后的文件是一個壓縮的.zip文件。
二,安裝
鼠標右擊下載下來的壓縮文件進行解壓。
解壓完成后是一個名為HBuilderX的文件夾。
解壓完成后鼠標雙擊HBuilderX文件夾:
雙擊運行名為HBuilderX.exe的應(yīng)用程序文件即可啟動HBuilderX編輯器:
因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序,我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。
小百科:
綠色軟件指一類小型軟件,多數(shù)為免費軟件,最大特點是軟件無需安裝便可使用,可存放于閃存中,移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝,下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值,所以相對一般的軟件來說,綠色軟件對系統(tǒng)的影響幾乎沒有,所以是很好的一種軟件類型。
三,新建項目
HBuilderX編輯器初次啟動時的默認界面是下圖所示:
按照下圖所示可以創(chuàng)建一個新的名為demo1空白項目:
名為demo1的空白項目創(chuàng)建成功后的界面如下圖所示:
接下來在剛我們新建的demo1項目下創(chuàng)建名為helloworld的html文件
鼠標右擊創(chuàng)建的demo1項目選擇新建在選擇.html文件:
在彈出的對話框里填入html文件的名稱:
編寫一段代碼:
運行:
在瀏覽器上觀察效果:
好了,到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。
下面再給大家教一下怎樣修改HBuilderX的主題風格,HBuilderX自身提供了修改軟件主題的功能,使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。
按照以下步驟可以修改HBuilderX的主題,默認主題是綠柔,我們可以改成雅黑,雅藍或者自定義主題:
雅黑主題:
雅藍主題:
好了本節(jié)全部內(nèi)容全部結(jié)束了,希望我準備的內(nèi)容對你有所幫助
你的支持是我的最大動力,若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c贊加關(guān)注!謝謝!
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。