目錄
2.B/S網路模式(結構)
3.HTML簡介
4.HTML標記的格式
5.書寫HTML標記的規範
6.一個網頁的HTML結構
7.的常用屬性
8.HTML字體修飾標記
9.代碼編輯器
10.網頁顏色表示
12.HTML排版标记
14.HTML字符实体
15.项目符号标记(无序列表):块元素
16.編號列表(有序列表)
首頁 web前端 html教學 php學習第一天之HTML篇

php學習第一天之HTML篇

Sep 14, 2016 am 09:24 AM

2.B/S網路模式(結構)

B/S,browser/Server瀏覽器/伺服器結構。在這種模式下,客戶端不需要安裝任何的軟體(除了瀏覽器軟體),所有的其它的功能都集中到了伺服器上。客戶端基本上是零維護。

php學習第一天之HTML篇

php學習第一天之HTML篇

3.HTML簡介

HTML,HyperText Markup Language超文本標註語言,是SGML的一個應用。是一種標準,一種規範,一種標誌(標記)。

例如:北京傳智

各種標記的作用:就是告訴瀏覽器這個內容該如何顯示。

php學習第一天之HTML篇

靜態網頁的副檔名:.html   .htm

動態網頁(包含伺服器端程式)的副檔名:.php  .jsp  .aspx等

 

超文本:是指加了超連結的文字。

 

4.HTML標記的格式

雙邊標記:內容標記>

舉例:廣州傳智

單邊標記:

 

 

一個人有哪些特質:姓名、年齡、學歷、畢業院校、身高、體重等

同理:人是一個類別,張三是類別中的一個具體的對象。

 

5.書寫HTML標記的規範

1)HTML標記不區分大小寫,建議大家使用小寫,為了向後相容。如:

2)一個標記可以有屬性,也可以沒有屬性。如果有屬性的話,屬性和標記間用空格隔開(至少一個),屬性與屬性之間用空格隔開。屬性必須放在開始標記中,不能放在結束標記中。

例如:

沒有屬性:

3)屬性值一般情況下,都需要加引號(不加也不為錯)。

4)HTML的數值屬性值,不需要加單位(px),但CSS中的數值的屬性值必須加單位。

HTML中的寫法:

CSS中的寫法:

5)標記之間可以嵌套,但只能是順序嵌套,也就是一層套一層,不能交叉嵌套。

6.一個網頁的HTML結構

網頁標題

網頁的主體內容

結構說明:

瀏覽器遇到該標籤時,就把內容按網頁格式來翻譯。包含兩個子標記:

定義網頁檔案頭資訊的,該標記中的內容在瀏覽器中是不可見,一般扮演一個特殊的角色。

定義網頁的標題的,是的子標記。

是網頁的主體內容,網頁中99%的內容或標記,都是放在中。 中的內容是可見的。

 

7.的常用屬性

bgColor:設定網頁背景顏色,例如:

background:設定網頁的背景圖片URL,例如:

 

8.HTML字體修飾標記

加粗    bold

斜體     italic

底線   underline

刪除線   strike

上標

  下標

字體標記

常用的屬性

Size:字體大小,取值:1-7,1小7大。

Color:字體顏色,例如:red或RGB(255,0,0)或#FF0000

Face:字體類型,例如:face=「黑體」

舉例:內容物


水平線,是單邊標記

常用的屬性:

Size:水平線的粗細

Width:水平線的寬度

Color:水平線的顏色

noshade:純色顯示,不含陰影效果

 

 

9.代碼編輯器

1)增強文字編輯器:Editplus  Notepad

特色:軟體小、佔用系統資源少、文法顏色

缺點:沒有程式碼提示功能

 

 

2)IDE整合開發環境:Zend Studio

特色:軟體較大、佔用系統資源多、語法顏色、程式碼提示功能、PHP程式的偵錯功能、資料庫配置等

缺點:收費

 

3)可視化的網頁程式碼編輯工具:Dreamweaver

第一步:建立站點,站點-管理站點

一個站點,就是一個網站,一個網站由多個目錄或檔案構成。

php學習第一天之HTML篇

第二步:設定代碼字號大小  CTRL+U  編輯-首選參數-字體

php學習第一天之HTML篇

第三步:設定新網頁時的預設編碼:CTRL+U  編輯-首選參數-新文件

php學習第一天之HTML篇

UTF-8是多國語言編碼,只要你有對應的輸入法,就能顯示不同國家的語言。

 

 

 

如何保證網頁不會出現亂碼的問題?

1)  你的編輯器的預設編碼,要設定為UTF-8

2)  你的HTML程式碼中,標記,也要設定對應的UTF-8編碼

3)  你的PHP網頁的編碼也要設定為UTF-8

4)  你的MySQL讀取的資料編碼也要設定為UTF-8

 

第四步:設定DW的預設瀏覽器:CTRL+U  編輯-首選參數-在瀏覽器中預覽

php學習第一天之HTML篇

DOM瀏覽器,標準瀏覽器,Firefox瀏覽器

 

10.網頁顏色表示

用英文單字表示:red  green   blue

用10進位表示:RGB(255,0,0)  RGB(0,255,0)  RGB(0,0,255)

用16進位表示:#FF0000      #00FF00       #0000FF

 

RGB色彩模式

自然界中的所有顏色,都可以透過紅(R)、綠(G)、藍(B)三種基色相互混合而成,RGB又叫三原色。

RGB色彩模式,又叫加色模式。任何兩種顏色相加,可以產生其它顏色。

在計算機中,每個基色用1個位元組來表示(8位元二進制,假設如11011011),共可以表示256(0-255個亮度等級)種顏色

RGB共可以混合出多少种颜色? 256 * 256 *256=1677万种色

在网页中的写法:

红色:RGB(255,0,0)

绿色:RGB(0,255,0)

蓝色:RGB(0,0,255)

黄色:RGB(255,255,0)

 

 

二进制:0、1                                                   运算规则:逢二进一

十进制:0、1、2、3、4、5、6、7、8、9                           运算规则:逢十进一

十六进制:0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F     运算规则:逢十六进一

网页颜色用十六进制表示:

红色:#FF0000       用两位16进制来表示1位10进制

绿色:#00FF00

蓝色:#0000FF

黄色:#FFFF00

 

 

在不同的浏览器下,10进制显示存在不兼容性,最好的是16进制表示方法。

在HTML中10进制表示颜色,没有效果;但在CSS中可以使用10进制表示。

11. php學習第一天之HTML篇

12.HTML排版标记

代表一个段落


换行


水平线,noshade属性没有属性值

:一级标题最大

…………

六级标题最小

常用的属性:

align:水平对齐,取值: left、center、right

 

登入後複製
登入後複製
登入後複製
预排版标记,将保留代码所有的空白(连续的空格或换行),换句话说:该标记中的内容会原封不动的输出。

在PHP中输出数组时,用

登入後複製
登入後複製
登入後複製
保留空白输出。

php學習第一天之HTML篇

13.

这两个标记,如果单独使用,没有任何效果,一般要结合CSS来使用。

这两个标记,虽然没有任何意义,但在DIV+CSS中又是用的最多的。

相当于两个小的容器,里面用来存放其它内容,方便排版布局。

块元素和行内元素

块元素:单独占取通栏的宽度,前后的元素必须另起一行排版。比如:

登入後複製
登入後複製
登入後複製

行内元素:多个行内元素排在同一行,行内元素没有宽度,宽度是由内容来决定。比如:

 

14.HTML字符实体

      代表一个半角空格

>       大于号

<        小于号

&      &

¥       人民币

©      版权

×      乘号

÷       除号

 

 

15.项目符号标记(无序列表):块元素

  • 内容1
  • 内容2

常用的属性:

Type:項目符號的類型,取值:disc(實心圓點)、circle(小圓圈)、square(小方塊)

 

 

16.編號列表(有序列表)

    「a」 start=「3」>

      

  •       

  •        

    常用的屬性:

    Type:編號型,取值:1(數字)、a、A、i(小羅馬)、I(大羅馬)

    Start:編號的起始數,該值是一個數字。如:start=3

     

    轉載自—重蔚自留地
  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
    威爾R.E.P.O.有交叉遊戲嗎?
    1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    &gt; gt;的目的是什麼 元素? &gt; gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

    本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

    &lt; datalist&gt;的目的是什麼。 元素? &lt; datalist&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

    本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

    &lt; meter&gt;的目的是什麼。 元素? &lt; meter&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

    本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

    視口元標籤是什麼?為什麼對響應式設計很重要? 視口元標籤是什麼?為什麼對響應式設計很重要? Mar 20, 2025 pm 05:56 PM

    本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

    HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

    HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

    &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

    本文討論了&lt; iframe&gt;將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

    HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

    HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

    HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

    AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

    See all articles