国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<li id="9afsg"><listing id="9afsg"><th id="9afsg"></th></listing></li>

<thead id="9afsg"></thead>

<label id="9afsg"><font id="9afsg"><strong id="9afsg"></strong></font></label><bdo id="9afsg"></bdo>

<menuitem id="9afsg"></menuitem>

<pre id="9afsg"></pre>

前端-01Html5基本知識(shí)

2年前作者：:Concerto分類(lèi)：Toy博客閱讀(37)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了前端-01Html5基本知識(shí)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

1 基本

1.1 第一個(gè)前端程序

內(nèi)容

<html>
    <head>
        <title>我的網(wǎng)頁(yè)</title>
    </head>
    <body>
        Hello,我的第一個(gè)網(wǎng)頁(yè)
    </body>
</html>

使用瀏覽器打開(kāi)

前端-01Html5基本知識(shí)

1.2 工具安裝

瀏覽器

谷歌瀏覽器

前端-01Html5基本知識(shí)

前端-01Html5基本知識(shí)

清緩存

ctrl+shift+delete

前端-01Html5基本知識(shí)

vscode

生成瀏覽器文件.html的快捷方式

!+回車(chē)

前端-01Html5基本知識(shí)

前端-01Html5基本知識(shí)

常用快捷鍵

前端-01Html5基本知識(shí)

快速打開(kāi)瀏覽器

插件open in browser 安裝，就會(huì)多出兩個(gè)選項(xiàng)來(lái)

前端-01Html5基本知識(shí)

2 Html5

2.1 介紹

概念

是一種用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言，被稱(chēng)為超文本標(biāo)記語(yǔ)言，本質(zhì)是標(biāo)記語(yǔ)言，標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽，一般用

DOCTYPE聲明

DOCTYPE是document type(文檔類(lèi)型)的縮寫(xiě)。

<!DOCTYPE html>
是H5的聲明位于文檔的最前面，甚至在<html>之前

作用是網(wǎng)頁(yè)必備的組成部分，避免瀏覽器的怪異模式

前端-01Html5基本知識(shí)

html5的基本骨架

html標(biāo)簽
head標(biāo)簽
- 必須包含title標(biāo)簽
- meta標(biāo)簽：一般是限定utf-8編碼格式，注意是一個(gè)單標(biāo)簽
body標(biāo)簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我的第一個(gè)網(wǎng)頁(yè)
</body>
</html>

2.2 標(biāo)簽之標(biāo)題

標(biāo)題介紹

從h1到h6從大到小，雙標(biāo)簽

<h1>一級(jí)標(biāo)簽</h1>
<h2>二級(jí)標(biāo)簽</h2>
<h3>三級(jí)標(biāo)簽</h3>
<h4>四級(jí)標(biāo)簽</h4>
<h5>五級(jí)標(biāo)簽</h5>
<h6>六級(jí)標(biāo)簽</h6>

案例

<!DOCTYPE html>
<html>
?
<head>
    <meta charset="UTF-8">
?
    <title>Document</title>
</head>
?
<body>
    <h1>一級(jí)標(biāo)題</h1>
    <h2>二級(jí)標(biāo)題</h2>
    <h3>三級(jí)標(biāo)題</h3>
    <h4>四級(jí)標(biāo)題</h4>
    <h5>五級(jí)標(biāo)題</h5>
    <h6>六級(jí)標(biāo)題</h6>
</body>
?
</html>

前端-01Html5基本知識(shí)

快捷鍵

h$*6+回車(chē)

網(wǎng)頁(yè)案例

https://www.mi.com/shop

前端-01Html5基本知識(shí)

標(biāo)題標(biāo)簽位置擺放

align="left center | right"
默認(rèn)為左的，可以設(shè)置屬性變成右邊

前端-01Html5基本知識(shí)

2.3 標(biāo)簽之段落、換行、水平線(xiàn)

概念

段落§：通過(guò)段落去承載文本

換行(br)

水平線(xiàn)(hr)

段落

運(yùn)用

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
?
<body>
    <p>我是一個(gè)段落標(biāo)簽</p>
</body>
?
</html>

前端-01Html5基本知識(shí)

網(wǎng)頁(yè)案例

前端-01Html5基本知識(shí)
3. 換行

運(yùn)用

注意是單標(biāo)簽

<!DOCTYPE html>
<html lang="en">
?
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
?
<body>
    <p>我是一個(gè)段落標(biāo)簽</p>
    <p>如果您希望在不產(chǎn)生一個(gè)<br>新段落的情況下進(jìn)行換行</p>
</body>
?
</html>

前端-01Html5基本知識(shí)

水平線(xiàn)

運(yùn)用

前端-01Html5基本知識(shí)

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>我是一個(gè)段落標(biāo)簽</p>
    <p>如果您希望在不產(chǎn)生一個(gè)<br>新段落的情況下進(jìn)行換行</p>
    <hr color="red" width="300px" size ="10px" align = "left">
</body>

</html>

前端-01Html5基本知識(shí)

2.4 標(biāo)簽的圖片

概念

使用標(biāo)簽定義HTML頁(yè)面中的圖像

<img scr="" alt="" title="" width="" height="">

運(yùn)用

用法

前端-01Html5基本知識(shí)

scr

圖片必須和代碼在同一個(gè)文件夾下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="1683454588303.jpg" >
</body>
</html>

效果

前端-01Html5基本知識(shí)

alt

<body>
    <img src="1683454588303.jpg" alt = "我的qq頭像">
</body>

當(dāng)圖片獲取不到的時(shí)候，會(huì)顯示alt的名字，即代替文本

前端-01Html5基本知識(shí)

width

<body>
    <img src="1683454588303.jpg" alt = "我的qq頭像" width="300px">
</body>

height

<body>
    <img src="1683454588303.jpg" alt = "我的qq頭像" width="300px" height="300px">
</body>

title

鼠標(biāo)邊邊會(huì)出現(xiàn)文字提示

前端-01Html5基本知識(shí)

關(guān)于scr的補(bǔ)充

絕對(duì)路徑
相對(duì)路徑

子級(jí)關(guān)系/

前端-01Html5基本知識(shí)

父級(jí)關(guān)系…/

前端-01Html5基本知識(shí)

同級(jí)關(guān)系./

2.5 超文本鏈接

概念

使用來(lái)設(shè)置超文本鏈接，其中href屬性來(lái)描述鏈接的地址

<a href="url">鏈接文本</a>

運(yùn)用

<body>
    <a >百度</a>
</body>

記得寫(xiě)全https://

圖片也可以當(dāng)作跳轉(zhuǎn)的中介

<body>
    <a >
        <img src="1683454588303.jpg" alt="qq頭像" width="300px">
    </a>
</body>

2.6 文本標(biāo)簽

基本使用

前端-01Html5基本知識(shí)

<body>
    <em>月月</em>
    <b>月月</b>
    <i>月月</i>
    <strong>月月</strong>
    <del>月月</del>
    <span>月月</span>
</body>

前端-01Html5基本知識(shí)

嵌套

<body>
	<p>我喜歡吃<em>em白菜</em></p>
</body>

前端-01Html5基本知識(shí)

2.7 列表標(biāo)簽之有序列表

有序列表

基本使用

<body>
    <ol>
        <li>蘋(píng)果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龍果</li>
    </ol>
</body>

前端-01Html5基本知識(shí)

ol屬性

前端-01Html5基本知識(shí)

<body>
    <ol type ="1">
        <li>蘋(píng)果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龍果</li>
    </ol>

    <ol type ="a">
        <li>蘋(píng)果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龍果</li>
    </ol>
</body>

前端-01Html5基本知識(shí)

嵌套

也可以嵌套，li中再套一組ol

<body>    
	<ol>
        <li>水果</li>
        <li>
            蔬菜
            <ol>
                <li>白菜</li>
                <li>油菜</li>
            </ol>
        </li>
    </ol>
</body>

前端-01Html5基本知識(shí)

2.8 無(wú)序列表

概念

<ul>
    <li>蘋(píng)果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>
</body>

前端-01Html5基本知識(shí)

ul屬性

前端-01Html5基本知識(shí)

<body>
<ul type ="disc">
    <li>蘋(píng)果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type ="circle">
    <li>蘋(píng)果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type = "squre">
    <li>蘋(píng)果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<ul type = "none">
    <li>蘋(píng)果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

</body>

前端-01Html5基本知識(shí)

嵌套

也可以嵌套的

實(shí)際運(yùn)用

百度新聞

小米

前端-01Html5基本知識(shí)

輔助以css

快捷鍵

ul>li*2

2.9 標(biāo)簽之表格

概念

表格：

行：，有幾行就幾個(gè)tr

單元格(列)：，有幾列就在tr中寫(xiě)幾列，中間可以寫(xiě)文本的

運(yùn)用

三行三列的單元格

<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

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

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

前端-01Html5基本知識(shí)

快捷鍵

table <tr*2>td{單元格}

    table>tr*3>td*3{哦哦}

回車(chē)成這樣
    <table>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
        <tr>
            <td>哦哦</td>
            <td>哦哦</td>
            <td>哦哦</td>
        </tr>
    </table>

屬性

基本屬性

前端-01Html5基本知識(shí)

以后用css調(diào)整的多

運(yùn)用

<table border="1">
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
    <tr>
        <td>哦哦</td>
        <td>哦哦</td>
        <td>哦哦</td>
    </tr>
</table>

效果

前端-01Html5基本知識(shí)

寬高也可以設(shè)置，也可以后css調(diào)整

單元格合并

水平合并colspan

<body>
    <p>合并單元格</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td>yes3</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
            <td>yes6</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>

垂直合并rowspan

<body>
    <p>水平合并單元格3,4以及垂直合并單元格3，6</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td rowspan="2">yes3 yes6</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>

效果

前端-01Html5基本知識(shí)

如果合并四個(gè)，先水平合并，后垂直合并

2.10 表單

引入

前端-01Html5基本知識(shí)

屬性

表單一般包括容器和控件，控件包含輸入框和按鈕

<form action="url" method ="get|post" name="myform"></form>

action服務(wù)器地址，method請(qǐng)求類(lèi)型，name表單名字

組成

表單標(biāo)簽，表單域(輸入框)，表單按鈕

<form>
    <input type ="text">
    <input type = "submit">
</form>

前端-01Html5基本知識(shí)

補(bǔ)充表單元素

文本框

    <form>
        用戶(hù)名：<input type ="text">
    </form>

前端-01Html5基本知識(shí)

密碼框

    <form>
        Password：<input type ="password" name = "pwd">
    </form>

前端-01Html5基本知識(shí)

密碼是小黑圓點(diǎn)

提交按鈕

   <form>
        <input type = "submit" value = "Submit">
    </form>

前端-01Html5基本知識(shí) 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-439726.html

到了這里，關(guān)于前端-01Html5基本知識(shí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

【前端知識(shí)】React 基礎(chǔ)鞏固(七)——JSX 的基本語(yǔ)法
JSX 是一種 JS 的語(yǔ)法擴(kuò)展（extension），也可以稱(chēng)之為 JavaScript XML，因?yàn)榭雌饋?lái)就是一段 XML 語(yǔ)法它用于描述我們的 UI 界面，并且其可以和 JS 融合在一起使用它不同于 Vue 中的模塊語(yǔ)法，不需要專(zhuān)門(mén)學(xué)習(xí)模塊語(yǔ)法中的指令 React 認(rèn)為渲染邏輯本質(zhì)上與其他UI邏輯存在內(nèi)在耦合
2024年02月10日
瀏覽(68)
【前端知識(shí)】React 基礎(chǔ)鞏固(三十九)——React-Router的基本使用
Router中包含了對(duì)路徑改變的監(jiān)聽(tīng)，并且會(huì)將相應(yīng)的路徑傳遞給子組件。 Router包括兩個(gè)API： BrowserRouter使用history模式 HashRouter使用hash模式（路徑后面帶有#號(hào)）嘗試在項(xiàng)目中使用HashRouter：安裝Router 在 index.js 中引入并使用HashRouter Routes：包裹所有的Route，在其中匹配一個(gè)路由（
2024年02月14日
瀏覽(27)
【前端基礎(chǔ)篇】HTML5 + CSS3 入門(mén)知識(shí)
萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改（這是一項(xiàng)推薦標(biāo)準(zhǔn)、外語(yǔ)原文：W3C Recommendation） HTML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。 HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。 HTML5 簡(jiǎn)
2024年02月09日
瀏覽(24)
前端酷炫合集--炫酷Html5 Canvas做一個(gè)霧狀擴(kuò)散火焰動(dòng)畫(huà)
2024年01月23日
瀏覽(25)
【前端web入門(mén)第一天】01 開(kāi)發(fā)環(huán)境、HTML基本語(yǔ)法文本標(biāo)簽
文章目錄: 1. 準(zhǔn)備開(kāi)發(fā)環(huán)境 1.1 vs Code基本使用 2.HTML文本標(biāo)簽 2.1 標(biāo)簽語(yǔ)法 2.2 HTML基本骨架 2.3 標(biāo)簽的關(guān)系 2.4 注釋 2.5 標(biāo)題標(biāo)簽 2.6 段落標(biāo)簽 2.7 換行與水平線(xiàn)標(biāo)簽 2.8 文本格式化標(biāo)簽 VSCode與谷歌瀏覽器離線(xiàn)版,安裝包評(píng)論區(qū)自提. VSCode默認(rèn)安裝位置:C:UsershpAppDataLocalProgramsMic
2024年01月25日
瀏覽(58)
前端超好玩的小游戲合集來(lái)啦--周末兩天用html5做一個(gè)3D飛行兔子蘿卜小游戲
2024年02月03日
瀏覽(25)
Web數(shù)據(jù)庫(kù)基本知識(shí),SQL基本語(yǔ)法
當(dāng)我們談?wù)撜麄€(gè)技術(shù)棧時(shí)，實(shí)際上涉及了一系列步驟，而在Web開(kāi)發(fā)中，這些步驟可以被具體化為以下幾個(gè)階段： DBMS-GUI-翻譯器-查詢(xún)語(yǔ)言在web中具體如下: postgreSQL-Hasura-Apollo+ts-GraphQL 具體解釋 DBMS（數(shù)據(jù)庫(kù)管理系統(tǒng)）：作用：數(shù)據(jù)庫(kù)管理系統(tǒng)允許我們直接使用SQL語(yǔ)言來(lái)操作數(shù)
2024年02月03日
瀏覽(63)
光耦基本知識(shí)
?1、光耦的種類(lèi)? ? ? ? ? 高速光耦、低速光耦； ? ? ? ? ? ? ? ? 高速：6N137，HCPL-2601 ? ? ? ? ? ? ? ? 低速：PC817 ???????? 線(xiàn)性光耦、非線(xiàn)性光耦； ????????以6N136與6N137為例 ????????6N136是1Mbps的高速光耦，但是輸出端采用的是晶體管，所以輸出電流的大小
2024年02月02日
瀏覽(47)
python基本知識(shí)學(xué)習(xí)
在控制臺(tái)輸出Hello,World! 單行注釋?zhuān)阂?開(kāi)頭多行注釋?zhuān)?選中要注釋的代碼Ctrl+/ 三單引號(hào) 三雙引號(hào) 第一個(gè)字符必須是字母表中字母或下劃線(xiàn) _ 。標(biāo)識(shí)符的其他的部分由字母、數(shù)字和下劃線(xiàn)組成。標(biāo)識(shí)符對(duì)大小寫(xiě)敏感。標(biāo)識(shí)符也叫變量名，變量名就是一個(gè)變量的名字，例如
2024年02月15日
瀏覽(22)
camera 硬件基本知識(shí)
參考博客：1.【Camera專(zhuān)題】Qcom-你應(yīng)該掌握的Camera調(diào)試技巧2_c楓_擼碼的日子的博客-CSDN博客_outputpixelclock 2.浩瀚之水_csdn的博客_CSDN博客-深度學(xué)習(xí),嵌入式Linux相關(guān)知識(shí)匯總,Caffe框架領(lǐng)域博主 3.一個(gè)早起的程序員的博客_CSDN博客-FPGA,PCIe應(yīng)用實(shí)戰(zhàn),PCI-E理論剖析領(lǐng)域博主一、硬件相關(guān)
2024年02月15日
瀏覽(27)

<pre id="y9s9u"></pre>

<abbr id="y9s9u"><kbd id="y9s9u"><strong id="y9s9u"></strong></kbd></abbr><em id="y9s9u"><abbr id="y9s9u"><kbd id="y9s9u"></kbd></abbr></em>

<strike id="y9s9u"></strike>

<pre id="y9s9u"></pre>