在 JAVASCRIPT 中創(chuàng)建 HTML 元素...

能在 JavaScript 中創(chuàng)建一個(gè) HTML 元素嗎？答案是肯定的，你可以在 JavaScript 中創(chuàng)建一個(gè)元素讓我們看看如何？

如果你想在 JavaScript 中創(chuàng)建一個(gè) div 元素——

要在 JavaScript 中創(chuàng)建新元素，我們使用 document.createElement('div')，而不是 div，您可以分配任何 html 標(biāo)簽，例如 p、h1、h2、h3 等，如果您分配 p 標(biāo)簽，它將創(chuàng)建一個(gè) p 標(biāo)簽。

現(xiàn)在，如果你想給它上一堂課，你可以做到——

為了給我們的新 div 一個(gè)類，我們使用 variablename.className = ‘class_name’ ，如上所示。

現(xiàn)在你也可以給它 id —

為了給 newdiv 一個(gè) id，我們的代碼是 variablename.id = ‘id_name’;

現(xiàn)在讓我們看看我們的輸出

現(xiàn)在，從上面的代碼中，我創(chuàng)建了一個(gè)帶有類容器和 id newElement 的 div 元素。

還有另一種方法可以在標(biāo)簽上設(shè)置 class 、 id 、 title 、 name ，讓我們來(lái)看看。

在這里，我定義了 setAttribute() 并在括號(hào)內(nèi)首先定義了標(biāo)題，然后定義了標(biāo)題的名稱。除了標(biāo)題，您可以指定類、id 或任何名稱

現(xiàn)在我們來(lái)看看我們的輸出

您可以清楚地看到，在 div 標(biāo)簽內(nèi)，我們的代碼添加了標(biāo)題，即“新 div”。

現(xiàn)在如果你想在 div 標(biāo)簽內(nèi)添加內(nèi)容怎么辦？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎樣才能做到這一點(diǎn)？下面來(lái)看看吧。

在上面的代碼中，我使用 document.createTextNode() 將我的文本分配給變量?jī)?nèi)容，因此 TextNode 用于為我們的元素提供文本。

所以，我們已經(jīng)成功地向我們的 div 元素添加了一個(gè)文本。

現(xiàn)在，最重要的是，如果您想將內(nèi)容插入現(xiàn)有的 html 代碼以便在瀏覽器中看到它，您可以通過(guò) insertBefore(newNode, referenceNode) 來(lái)完成它的作用是在參考節(jié)點(diǎn)之前插入您的節(jié)點(diǎn)。

所以在這里我從上面的 html 代碼中創(chuàng)建了一個(gè)帶有類容器和 h1 標(biāo)簽的 div 元素。

現(xiàn)在，我定義了一個(gè)名為 maindiv 的變量，并將其分配給具有類容器的 div 元素，并定義了一個(gè)變量 h1 并為其分配了 h1 標(biāo)記。

現(xiàn)在，為了插入我們的節(jié)點(diǎn)，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必須插入的節(jié)點(diǎn)，即我們的 newdiv ，參考節(jié)點(diǎn)是要在其之前插入 newNode 的節(jié)點(diǎn)，即我們的 h1 標(biāo)記。

所以從上面的輸出你可以看到我們已經(jīng)成功地在瀏覽器中顯示了我們的 div 內(nèi)容。

JavaScript 是一種非常有效的語(yǔ)言，你可以在 JavaScritp 中做很多事情，這些只是它的基礎(chǔ)。

謝謝你

、摘要

（OF作品展示）

OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁(yè)，以后我們就可以自己開發(fā)網(wǎng)頁(yè)/網(wǎng)站放到互聯(lián)網(wǎng)上。

主要內(nèi)容：網(wǎng)頁(yè)前端布局

適用人群：Python初學(xué)者，前端初學(xué)者

準(zhǔn)備軟件：pycharm

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

1) 下載完成pycharm, 點(diǎn)擊file-New Project...

2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來(lái)做完整的系統(tǒng)

2. 創(chuàng)建HTML文件

1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File

2）輸入英文的網(wǎng)頁(yè)名字，盡量不要輸入中文/特殊字符

3. HTML格式說(shuō)明

當(dāng)雙擊打開我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

在開始開發(fā)網(wǎng)頁(yè)前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁(yè)做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁(yè)面樣式，可以手繪，也可以在PPT上畫。

2. css名字定義

我們先學(xué)習(xí)一個(gè)比較簡(jiǎn)單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下

四、網(wǎng)頁(yè)開發(fā)

1. body部分

根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網(wǎng)頁(yè)測(cè)試

1）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行

2）目前看到的網(wǎng)頁(yè)內(nèi)容從上到下顯示

3. head部分

首先我們簡(jiǎn)要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來(lái)實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：

(注：style中的#main對(duì)應(yīng)body中的id=main, .main對(duì)應(yīng)class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運(yùn)行結(jié)果：

2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運(yùn)行結(jié)果：

3）圖片之間靠太近，圖片大小不一致，文字沒(méi)居中，我們?cè)?lt;style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運(yùn)行結(jié)果：

五、總結(jié)

今天我們學(xué)會(huì)了flex布局，今后所有的網(wǎng)頁(yè)排版都可以實(shí)現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對(duì)網(wǎng)頁(yè)上的實(shí)現(xiàn)有什么不懂的，盡請(qǐng)留言，OF一定會(huì)一一解答的。

一部分：HTML簡(jiǎn)介

什么是HTML？

HTML代表超文本標(biāo)記語(yǔ)言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。

HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。

HTML的基本結(jié)構(gòu)

每個(gè)HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：

<!DOCTYPE html>
<html>
<head>
    <title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
    <!-- 內(nèi)容在這里 -->
</body>
</html>

讓我們逐步解釋這個(gè)結(jié)構(gòu)：

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文檔的根元素。所有其他元素都包含在<html>標(biāo)簽內(nèi)。
<head>：包含與文檔相關(guān)的元信息，如頁(yè)面標(biāo)題、字符集聲明和外部樣式表鏈接。
<title>：定義網(wǎng)頁(yè)的標(biāo)題，顯示在瀏覽器標(biāo)簽頁(yè)上。
<body>：包含網(wǎng)頁(yè)的主要內(nèi)容，如文本、圖像和其他媒體。

HTML標(biāo)簽和元素

HTML標(biāo)簽是由尖括號(hào)括起來(lái)的名稱，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對(duì)出現(xiàn)，有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽。例如：

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

<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個(gè)標(biāo)簽之間。標(biāo)簽定義了元素的類型和結(jié)構(gòu)。

有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。

HTML注釋

在HTML中，你可以使用注釋來(lái)添加說(shuō)明性文字，注釋不會(huì)在瀏覽器中顯示。HTML注釋使用結(jié)尾，如下所示：

<!-- 這是一個(gè)注釋 -->

注釋通常用于添加文檔說(shuō)明、調(diào)試代碼或標(biāo)記未來(lái)的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見(jiàn)的文本元素：

<p>：定義一個(gè)段落。
<h1>到<h6>：定義標(biāo)題，<h1>是最高級(jí)別的標(biāo)題，<h6>是最低級(jí)別的標(biāo)題。
<strong>：定義強(qiáng)調(diào)文本，通常以粗體顯示。
<em>：定義強(qiáng)調(diào)文本，通常以斜體顯示。
<a>：定義超鏈接，允許用戶點(diǎn)擊跳轉(zhuǎn)到其他頁(yè)面。

示例：

<p>這是一個(gè)段落。</p>
<h1>這是一個(gè)標(biāo)題</h1>
<p><strong>這是強(qiáng)調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問(wèn)<a href="https://www.example.com">示例網(wǎng)站</a></p>

圖像

要在網(wǎng)頁(yè)中插入圖像，可以使用<img>標(biāo)簽。它是一個(gè)自封閉標(biāo)簽，需要指定圖像的src屬性來(lái)指定圖像文件的路徑。

示例：

htmlCopy code
<img src="image.jpg" alt="圖像描述">

src：指定圖像文件的路徑。
alt：提供圖像的替代文本，用于無(wú)法加載圖像時(shí)的文字描述。

鏈接

通過(guò)使用<a>標(biāo)簽，可以在網(wǎng)頁(yè)中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。

示例：

<a href="https://www.example.com">訪問(wèn)示例網(wǎng)站</a>

href：指定鏈接的目標(biāo)URL。

列表

HTML支持有序列表（<ol>）、無(wú)序列表（<ul>）和定義列表（<dl>）。

無(wú)序列表

無(wú)序列表使用<ul>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。

示例：

<ul>
    <li>項(xiàng)目1</li>
    <li>項(xiàng)目2</li>
    <li>項(xiàng)目3</li>
</ul>

有序列表

有序列表使用<ol>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。

示例：

<ol>
    <li>第一項(xiàng)</li>
    <li>第二項(xiàng)</li>
    <li>第三項(xiàng)</li>
</ol>

定義列表

定義列表使用<dl>標(biāo)簽定義，每個(gè)定義項(xiàng)目使用<dt>標(biāo)簽定義術(shù)語(yǔ)，使用<dd>標(biāo)簽定義描述。

示例：

<dl>
    <dt>術(shù)語(yǔ)1</dt>
    <dd>描述1</dd>
    <dt>術(shù)語(yǔ)2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表單

HTML表單允許用戶與網(wǎng)頁(yè)進(jìn)行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：

<form>元素

<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表單元素在這里 -->
</form>

action：指定表單數(shù)據(jù)提交的目標(biāo)URL。
method：指定提交方法，通常是"post"或"get"。

輸入字段

輸入字段用于接收用戶輸入的數(shù)據(jù)，常見(jiàn)的輸入字段類型包括文本框、密碼框、單選按鈕、復(fù)選框等。

文本框

文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。

示例：

<input type="text" name="username" placeholder="用戶名">

type：指定字段類型。
name：指定字段的名稱。
placeholder：設(shè)置文本框的占位符文本。

密碼框

密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密碼">

單選按鈕

單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定單選按鈕組的名稱。
value：指定每個(gè)選項(xiàng)的值。

復(fù)選框

復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">訂閱新聞

下拉列表

下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項(xiàng)。

示例：

<select name="country">
    <option value="us">美國(guó)</option>
    <option value="ca">加拿大</option>
    <option value="uk">英國(guó)</option>
</select>

name：指定下拉列表的名稱。
每個(gè)<option>標(biāo)簽表示一個(gè)選項(xiàng)，使用value屬性定義選項(xiàng)的值。

第四部分：HTML樣式和CSS

HTML用于定義網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁(yè)看起來(lái)更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。

內(nèi)聯(lián)樣式

可以在HTML元素內(nèi)部使用style屬性來(lái)定義內(nèi)聯(lián)樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個(gè)藍(lán)色的段落。</p>

外部樣式表

外部樣式表將樣式規(guī)則保存在獨(dú)立的CSS文件中，并通過(guò)<link>標(biāo)簽將其鏈接到HTML文檔。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中鏈接外部樣式表：

<link rel="stylesheet" type="text/css" href="style.css">

這使得可以在整個(gè)網(wǎng)站上共享相同的樣式。

總結(jié)

HTML是構(gòu)建現(xiàn)代網(wǎng)頁(yè)的基礎(chǔ)。通過(guò)學(xué)習(xí)HTML的基本語(yǔ)法和元素，你可以創(chuàng)建吸引人且功能強(qiáng)大的網(wǎng)頁(yè)。無(wú)論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來(lái)呈現(xiàn)內(nèi)容和實(shí)現(xiàn)用戶交互。

這篇文章提供了HTML的基礎(chǔ)知識(shí)，但HTML是一個(gè)廣泛的主題，還有許多高級(jí)特性和技巧等待你探索。希望這篇文章對(duì)你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁(yè)。繼續(xù)學(xué)習(xí)和實(shí)踐，你將成為一個(gè)熟練的網(wǎng)頁(yè)開發(fā)者。

在線咨詢

上一篇：用HTML制作一個(gè)簡(jiǎn)單頁(yè)面（代碼閱讀練習(xí)）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：HTML 基礎(chǔ)的<td> 標(biāo)簽

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

在 JAVASCRIPT 中創(chuàng)建 HTML 元素...

、摘 要

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

2. 創(chuàng)建HTML文件

3. HTML格式說(shuō)明

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

2. css名字定義

四、網(wǎng)頁(yè)開發(fā)

1. body部分

2. 網(wǎng)頁(yè)測(cè)試

3. head部分

五、總 結(jié)

一部分：HTML簡(jiǎn)介

什么是HTML？

HTML的基本結(jié)構(gòu)

HTML標(biāo)簽和元素

HTML注釋

第二部分：HTML基本元素

文本

圖像

鏈接

列表

無(wú)序列表

有序列表

定義列表

第三部分：HTML表單

<form>元素

輸入字段

文本框

密碼框

單選按鈕

復(fù)選框

下拉列表

第四部分：HTML樣式和CSS

內(nèi)聯(lián)樣式

外部樣式表

總結(jié)

您的項(xiàng)目需求

、摘要

五、總結(jié)