html的學(xué)習(xí)

發(fā)布時(shí)間：2020-06-15 21:07:38 來(lái)源：網(wǎng)絡(luò) 閱讀：354 作者：馨星欄目：web開(kāi)發(fā)

html語(yǔ)法的學(xué)習(xí)

什么是html

html: 超級(jí)文本標(biāo)記語(yǔ)言(HyperText Markup Language)（不是編程語(yǔ)言）

"超文本"：字面意思，比普通文本更加高級(jí)；頁(yè)面內(nèi)可以包含圖片，鏈接等非文字內(nèi)容。
"標(biāo)記"：使用標(biāo)簽的方法將需要的內(nèi)容包括起來(lái)。
html是做什么的？

html用于編寫(xiě)網(wǎng)頁(yè)。對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行排版。
html代碼：用于展示需要展示的數(shù)據(jù)。
CSS代碼：使顯示的數(shù)據(jù)更加好看。
JavaScript代碼：使整個(gè)頁(yè)面顯示的數(shù)據(jù)具有動(dòng)畫(huà)效果。

網(wǎng)頁(yè)根據(jù)內(nèi)容是否改變分為：靜態(tài)頁(yè)面、動(dòng)態(tài)頁(yè)面

靜態(tài)頁(yè)面：代碼編寫(xiě)好后，在瀏覽器里面看到的頁(yè)面內(nèi)容就不再改變了。html編寫(xiě)的就是靜態(tài)頁(yè)面。
動(dòng)態(tài)頁(yè)面：在瀏覽器里面會(huì)根據(jù)不同的情況展示不同的頁(yè)面。（例如登陸成功后顯示的用戶(hù)名，不同人登陸所顯示的用戶(hù)名是不同的）
html語(yǔ)言的特點(diǎn)
html文件不需要編譯，可以直接通過(guò)瀏覽器閱讀。
html文件的擴(kuò)展名是.html 或者.htm
html結(jié)構(gòu)都是由標(biāo)簽組成的
- 標(biāo)簽名是預(yù)先定義好的，我們只需要根據(jù)需要拿來(lái)用就可以了。
- 標(biāo)簽名不區(qū)分大小寫(xiě)。
- 通常情況下，一組標(biāo)簽是由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的。例如：<a></a>
- 有些標(biāo)簽沒(méi)有結(jié)束標(biāo)簽，這些標(biāo)簽建議使用 / 結(jié)尾。例如：<img/>
html結(jié)構(gòu)大體分為兩類(lèi)：頭head , 和體 body
一個(gè)Html文件的模板

html5的固定格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

<html> 是整個(gè)頁(yè)面的根標(biāo)簽，理論上一個(gè)html頁(yè)面只需要一個(gè)，它里面包含了頭<head>和體<body>這兩個(gè)標(biāo)簽。
- <head>為頭標(biāo)簽，用于引入腳本，導(dǎo)入樣式，提供元信息等，一般在瀏覽器里面不顯示這些信息。
  - <title>子標(biāo)簽用于顯示瀏覽器的標(biāo)題。
- <body>體標(biāo)簽，是整個(gè)網(wǎng)頁(yè)的主體，大部分的代碼都在此標(biāo)簽內(nèi)。

html開(kāi)發(fā)環(huán)境的搭建

為了更加快捷方便地編寫(xiě)Html，我們安裝較為流行的前端IDE(集成開(kāi)發(fā)環(huán)境) HBuilder 。
html的學(xué)習(xí)

注釋的使用：

注釋的格式： 快捷鍵為：ctrl + /

常用的排版標(biāo)簽

1. 標(biāo)題標(biāo)簽： <h2>
html提供了<hn>系列的標(biāo)簽，包含了：<h2> <h3> <h4> <h5> <h6> <h7> ，定義了<h2> 為最大的標(biāo)題，<h7> 為最小的標(biāo)題。
2. 水平線標(biāo)簽：<hr>

<hr> 在html頁(yè)面中插入一條水平分割線，用于定義內(nèi)容中的主題變化。
- size 屬性：水平線的高度，單位像素（hx）
- noshade 屬性：沒(méi)有陰影，取值：noshade，表示顯示純色。
  例如：
```

<hr />
<hr size="5" />
<hr noshade="noshade" />
```
  3. 字體標(biāo)簽： <front>
<front> 用于設(shè)置字體的尺寸，字體，顏色等。
- size 屬性：用于設(shè)置字體的大小，可能的值：從1到7的數(shù)字。瀏覽器默認(rèn)是3。
- color屬性：設(shè)置字體的顏色
  - 顏色的取值：#xxxxxx 或者 colorname
    - #xxxxxx 表示使用紅綠藍(lán)三原色設(shè)置顏色。
      - 紅綠藍(lán)分別取值范圍：00~FF ，此處使用的是16進(jìn)制。
      - #000000 表示黑色，#FFFFFF 白色
      - 紅綠藍(lán)2為取值相同時(shí)可以省略為1位。例如：#112233可以簡(jiǎn)化為：#123
    - colorname :使用英文單詞確定顏色。red紅色，blue藍(lán)色，green綠色，等等，在IDE中有顏色提示。
      例如：
```

<front size="7">字體最大</front>
<front color="#FF0000">顏色為紅色</font>
<front color="blue">顏色為藍(lán)色</front>
```
      4. 格式化標(biāo)簽：<b> <i>
      <b> 粗體
      <i> 斜體
      例子：
```

<b>粗體</b>
<i>斜體</i>
```
      5. 段落標(biāo)簽：<p> <br/>
      <p> 定義段落。p標(biāo)簽會(huì)自動(dòng)在文字的前后創(chuàng)建一些空白，形成段與段分明的效果
      <br/> 插入單個(gè)換行
      例子：

<!--段落-->
<p>段落1</p>
<p>段落2</p><br/>

6. 圖片標(biāo)簽：<img>

<img> 在html 中引用一張圖片
- src 屬性：指定需要顯示圖片的URL路徑。(路徑可以是絕對(duì)路徑也可以是相對(duì)路徑)
- alt 屬性：圖片無(wú)法顯示時(shí)的替代文本。
- width: 設(shè)置圖片的寬度
- heigth: 設(shè)置圖片的高度
  例子：

<!--顯示test.png圖片-->
<img src="../img/test.png" alt="示例圖片" width="200px" heigth:"200px" title="鼠標(biāo)移上顯示的文字" />

7. 列表標(biāo)簽：<ul> <ol>

<ol> 定義有序列表
- type 屬性：列表的類(lèi)型，取值有：A，a ，I，i，1 等
<ul> 定義無(wú)序列表
- type屬性：符號(hào)的類(lèi)型，取值：disc 實(shí)心圓，square 方塊，circle 空心圓
定義列表項(xiàng)。是<ul>或<ol> 的子標(biāo)簽
例如：

<!--列表標(biāo)簽-->
    <ul type="circle"> <!--以空心圓顯示無(wú)序列表-->
        <li>無(wú)序列表1</li>
        <li>無(wú)序列表2</li>
        <li>無(wú)序列表3</li>
    </ul>

    <ol type="I"> <!--以阿拉伯?dāng)?shù)字顯示有序列表-->
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

顯示效果：
html的學(xué)習(xí)

8. 超鏈接標(biāo)簽：<a>

<a>標(biāo)簽是超鏈接，是在html中提供一種可以訪問(wèn)其他位置的實(shí)現(xiàn)方式
- href : 用于確定需要顯示頁(yè)面的路徑(URL)
- target: 確定以何種方式打開(kāi)href 中的頁(yè)面。長(zhǎng)取得值：_blank 、 _self等
- _blank 在新窗口中打開(kāi)href確定的頁(yè)面。
- _self 默認(rèn)。使用href 中的頁(yè)面替換當(dāng)前的頁(yè)面。
  例如：

<!--超鏈接-->
<a  target="_blank">
訪問(wèn)百度網(wǎng)，并在新窗口中打開(kāi)鏈接
</a>

效果：
html的學(xué)習(xí)

9. 表格標(biāo)簽：<table > <tr> <td>
html表格標(biāo)簽是由<table>標(biāo)簽以及一個(gè)或者多個(gè)<tr><td><th>標(biāo)簽組成的

<table> 是父標(biāo)簽，相當(dāng)于整個(gè)表格的容器
- border 表格邊框的寬度
- width 表格的寬度
- cellpadding 單元邊沿與其內(nèi)容之間的空白
- cellspacing 單元格與單元格之間的空白
- bgcolor 表格的背景顏色
<tr> 標(biāo)簽用于定義行
<td>標(biāo)簽用于定義表格的單元格(1列)
- colspan 單元格可橫跨的列數(shù)
- rowspan 單元格可橫跨的行數(shù)
- align 單元格內(nèi)容的水平對(duì)齊方式，取值：left 左，right 右，center 居中
- nowrap 單元格中的內(nèi)容是否折行
<th> 標(biāo)簽用于定義表頭，單元格的內(nèi)容默認(rèn)居中，加粗
例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的跨行跨列操作</title>
    </head>
    <body>
        <table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
            <tr>
                <td colspan="2">
                    <img src="../../img/hl1.jpg"  height="100%" width="100%"/>
                </td>

                <td>13</td>
                <td>14</td>
            </tr>

            <tr>
                <td>21</td>
                <td colspan="2" rowspan="2">
                    <table border="3px" align="center" width="100%" height="100%" cellspacing="0px" cellpadding="0px">
                        <tr>
                            <td>11</td>
                            <td>12</td>
                            <td>13</td>
                        </tr>

                    </table>
                </td>

                <td>24</td>
            </tr>

            <tr>
                <td>31</td>

                <td rowspan="2" align="center">34</td>
            </tr>

            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>

            </tr>
        </table>
    </body>
</html>

效果：
html的學(xué)習(xí)

向AI問(wèn)一下細(xì)節(jié)

html的學(xué)習(xí)

html語(yǔ)法的學(xué)習(xí)

什么是html

html是做什么的？

html語(yǔ)言的特點(diǎn)

一個(gè)Html文件的模板

html開(kāi)發(fā)環(huán)境的搭建

常用的排版標(biāo)簽

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

html是做什么的？