day21 HTML

什么是HTML?

HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML文件后綴名:htm,html
HTML編輯器:sublime,HBuilderX

HTML使用基礎(chǔ)

HTML初識(shí)

1.標(biāo)簽 - 承載內(nèi)容
2.層疊樣式表 - 渲染頁(yè)面
3.JavaScript - 交互式行為
HTML的格式

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

注釋?zhuān)涸贖TML中注釋使用

<!--  -->

HTML 簡(jiǎn)單操作

1.標(biāo)題
HTML 標(biāo)題(Heading)是通過(guò)<h1> - <h6> 標(biāo)簽來(lái)定義的

2.段落
HTML 段落是通過(guò)標(biāo)簽 <p> 來(lái)定義的

<p>這是一個(gè)段落</p>
<p>這是另外一個(gè)段落</p>

<br>換行

3.列表
1)有序列表<ol>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

顯示結(jié)果
1.Coffee
2.Milk
2)無(wú)序列表<ul>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

顯示結(jié)果

  • Coffee
  • Milk

3)自定義列表<dl>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

顯示結(jié)果
Coffee
- black hot drink
Milk
- white cold drink
注意:列表中可以疊加

4.表格
鍵入<table<tr*>td*>后tab鍵插入表格,<caption>表格名稱(chēng)</caption>
rowspan="2"為列并格2格,align="center" 為居中(align=" "為對(duì)齊)
rowspan="2"為行并格2格

<!--table<tr*4>td*5 -->
        <table border="1">
            <caption>學(xué)生考試成績(jī)</caption>
            <thead>
                <tr>
                    <th width="120">姓名</th>
                    <th width="100">數(shù)學(xué)</th>
                    <th width="100">語(yǔ)文</th>
                    <th width="100">物理</th>
                    <th width="100">化學(xué)</th>
                </tr>
            </thead>
                <tr>
                    <td>王大錘</td>
                    <td>89</td>
                    <td colspan="2" align="center">45</td>
                    <td>56</td>
                </tr>
            <tbody>
                <tr>
                    <td rowspan="2"align="center">李四</td>
                    <td>35</td>
                    <td>78</td>
                    <td>76</td>
                    <td>89</td>
                </tr>
                <tr>
                    <td>78</td>
                    <td>66</td>
                    <td>98</td>
                    <td>56</td>
                </tr>
            </tbody>

4.字符實(shí)體
& - &amp; 空格 - &nbsp;等,見(jiàn)菜鳥(niǎo)教程

5.圖像
<img src="url" alt="some_text">,src后面是圖片地址,可以是本地地址(相對(duì)路徑),也可以是網(wǎng)絡(luò)地址。alt后面是地址失效后顯示的文本內(nèi)容,可自定義

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

width,height分別調(diào)整圖像寬度和高度

6.超鏈接
HTML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。幾乎可以在所有的網(wǎng)頁(yè)中找到鏈接。點(diǎn)擊鏈接可以從一張頁(yè)面跳轉(zhuǎn)到另一張頁(yè)面。
HTML使用標(biāo)簽 <a>來(lái)設(shè)置超文本鏈接,在標(biāo)簽<a> 中使用了href屬性來(lái)描述鏈接的地址。

<a >訪問(wèn)菜鳥(niǎo)教程</a>

使用 target 屬性,你可以定義被鏈接的文檔在何處顯示。
下面的這行會(huì)在新窗口打開(kāi)文檔:

<a  target="_blank">訪問(wèn)菜鳥(niǎo)教程!</a>

6.函數(shù)
HTML中函數(shù)function 函數(shù)名() {函數(shù)體}
自帶函數(shù)window

7.按鍵
在HTML中使用<button></button>來(lái)創(chuàng)建按鍵

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1認(rèn)識(shí)html 1.1什么是html html是超文本標(biāo)記語(yǔ)言超文本:除了文字以外,還可以對(duì)圖片、視頻、音頻、超鏈...
    barriers閱讀 255評(píng)論 0 0
  • 1.結(jié)構(gòu)標(biāo)準(zhǔn) 1.1.什么是html(結(jié)構(gòu)標(biāo)準(zhǔn))html是超文本標(biāo)記語(yǔ)言超文本 - 除了文字以外,還可以對(duì)圖片、視...
    未醒的夢(mèng)_19b0閱讀 369評(píng)論 0 0
  • web基礎(chǔ): 1、web標(biāo)準(zhǔn):(萬(wàn)維網(wǎng)-w3c決定)結(jié)構(gòu)標(biāo)準(zhǔn): HTML -> 決定網(wǎng)頁(yè)上有什么東西(能夠顯示什...
    七夜_174e閱讀 223評(píng)論 0 1
  • 今天開(kāi)始python學(xué)習(xí)的第二階段,進(jìn)入web前端的學(xué)習(xí); 一、web前端簡(jiǎn)介 1、web標(biāo)準(zhǔn)web前端的內(nèi)容:H...
    d4lx閱讀 250評(píng)論 0 0
  • 1. web基礎(chǔ): web標(biāo)準(zhǔn)(萬(wàn)維網(wǎng)-w3c):結(jié)構(gòu)標(biāo)準(zhǔn):HTML --- 決定網(wǎng)頁(yè)上有什么東西(能夠顯示什...
    奈斯凸米特閱讀 219評(píng)論 0 2

友情鏈接更多精彩內(nèi)容