html的學習

發布時間：2020-06-15 21:07:38 來源：網絡閱讀：356 作者：馨星欄目：web開發

html語法的學習

什么是html

html: 超級文本標記語言(HyperText Markup Language)（不是編程語言）

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

html用于編寫網頁。對網頁的內容進行排版。
html代碼：用于展示需要展示的數據。
CSS代碼：使顯示的數據更加好看。
JavaScript代碼：使整個頁面顯示的數據具有動畫效果。

網頁根據內容是否改變分為：靜態頁面、動態頁面

靜態頁面：代碼編寫好后，在瀏覽器里面看到的頁面內容就不再改變了。html編寫的就是靜態頁面。
動態頁面：在瀏覽器里面會根據不同的情況展示不同的頁面。（例如登陸成功后顯示的用戶名，不同人登陸所顯示的用戶名是不同的）
html語言的特點
html文件不需要編譯，可以直接通過瀏覽器閱讀。
html文件的擴展名是.html 或者.htm
html結構都是由標簽組成的
- 標簽名是預先定義好的，我們只需要根據需要拿來用就可以了。
- 標簽名不區分大小寫。
- 通常情況下，一組標簽是由開始標簽和結束標簽組成的。例如：<a></a>
- 有些標簽沒有結束標簽，這些標簽建議使用 / 結尾。例如：<img/>
html結構大體分為兩類：頭head , 和體 body
一個Html文件的模板

html5的固定格式

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

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

html開發環境的搭建

為了更加快捷方便地編寫Html，我們安裝較為流行的前端IDE(集成開發環境) HBuilder 。
html的學習

注釋的使用：

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

常用的排版標簽

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

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

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

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

<b>粗體</b>
<i>斜體</i>
```
      5. 段落標簽：<p> <br/>
      <p> 定義段落。p標簽會自動在文字的前后創建一些空白，形成段與段分明的效果
      <br/> 插入單個換行
      例子：

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

6. 圖片標簽：<img>

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

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

7. 列表標簽：<ul> <ol>

<ol> 定義有序列表
- type 屬性：列表的類型，取值有：A，a ，I，i，1 等
<ul> 定義無序列表
- type屬性：符號的類型，取值：disc 實心圓，square 方塊，circle 空心圓
定義列表項。是<ul>或<ol> 的子標簽
例如：

<!--列表標簽-->
    <ul type="circle"> <!--以空心圓顯示無序列表-->
        <li>無序列表1</li>
        <li>無序列表2</li>
        <li>無序列表3</li>
    </ul>

    <ol type="I"> <!--以阿拉伯數字顯示有序列表-->
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

顯示效果：
html的學習

8. 超鏈接標簽：<a>

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

<!--超鏈接-->
<a  target="_blank">
訪問百度網，并在新窗口中打開鏈接
</a>

效果：
html的學習

9. 表格標簽：<table > <tr> <td>
html表格標簽是由<table>標簽以及一個或者多個<tr><td><th>標簽組成的

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

<!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的學習

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

html的學習

html語法的學習

什么是html

html是做什么的？

html語言的特點

一個Html文件的模板

html開發環境的搭建

常用的排版標簽

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

html的學習

html語法的學習

什么是html

html是做什么的？

html語言的特點

一個Html文件的模板

html開發環境的搭建

常用的排版標簽

猜你喜歡

最新資訊

相關推薦

相關標簽