在 JAVASCRIPT 中创建 HTML 元素...

能在 JavaScript 中创建一个 HTML 元素吗？答案是肯定的，你可以在 JavaScript 中创建一个元素让我们看看如何？

如果你想在 JavaScript 中创建一个 div 元素——

要在 JavaScript 中创建新元素，我们使用 document.createElement('div')，而不是 div，您可以分配任何 html 标签，例如 p、h1、h2、h3 等，如果您分配 p 标签，它将创建一个 p 标签。

现在，如果你想给它上一堂课，你可以做到——

为了给我们的新 div 一个类，我们使用 variablename.className = ‘class_name’ ，如上所示。

现在你也可以给它 id —

为了给 newdiv 一个 id，我们的代码是 variablename.id = ‘id_name’;

现在让我们看看我们的输出

现在，从上面的代码中，我创建了一个带有类容器和 id newElement 的 div 元素。

还有另一种方法可以在标签上设置 class 、 id 、 title 、 name ，让我们来看看。

在这里，我定义了 setAttribute() 并在括号内首先定义了标题，然后定义了标题的名称。除了标题，您可以指定类、id 或任何名称

现在我们来看看我们的输出

您可以清楚地看到，在 div 标签内，我们的代码添加了标题，即“新 div”。

现在如果你想在 div 标签内添加内容怎么办？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎样才能做到这一点？下面来看看吧。

在上面的代码中，我使用 document.createTextNode() 将我的文本分配给变量内容，因此 TextNode 用于为我们的元素提供文本。

所以，我们已经成功地向我们的 div 元素添加了一个文本。

现在，最重要的是，如果您想将内容插入现有的 html 代码以便在浏览器中看到它，您可以通过 insertBefore(newNode, referenceNode) 来完成它的作用是在参考节点之前插入您的节点。

所以在这里我从上面的 html 代码中创建了一个带有类容器和 h1 标签的 div 元素。

现在，我定义了一个名为 maindiv 的变量，并将其分配给具有类容器的 div 元素，并定义了一个变量 h1 并为其分配了 h1 标记。

现在，为了插入我们的节点，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必须插入的节点，即我们的 newdiv ，参考节点是要在其之前插入 newNode 的节点，即我们的 h1 标记。

所以从上面的输出你可以看到我们已经成功地在浏览器中显示了我们的 div 内容。

JavaScript 是一种非常有效的语言，你可以在 JavaScritp 中做很多事情，这些只是它的基础。

谢谢你

、摘要

（OF作品展示）

OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。

主要内容：网页前端布局

适用人群：Python初学者，前端初学者

准备软件：pycharm

二、pycharm操作说明

1. 创建项目

1) 下载完成pycharm, 点击file-New Project...

2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统

2. 创建HTML文件

1）在创建的项目空白处鼠标右键-New-HTML File

2）输入英文的网页名字，尽量不要输入中文/特殊字符

3. HTML格式说明

当双击打开我们创建后的HTML文件，大家会看到下面的界面

三、网页设计

1. 草图绘制

在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。

2. css名字定义

我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下

四、网页开发

1. body部分

根据上述的css名字定义，先填充<body>内的代码，那么我们就完成一半的工作了，代码如下：

<!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. 网页测试

1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行

2）目前看到的网页内容从上到下显示

3. head部分

首先我们简要了解下flex布局，大家可以看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在<div id="main">中，运行结果是3个颜色的内容横向展示了，而不是上下

1）那么我们先从“人物介绍”的布局开始，“人物介绍”居中展现（用flex中justify-content:center），而且下面有一条黑线，OF准备用border样式来实现，所以在<div id=intro>里另加了个<div class=peo>，代码如下：

(注：style中的#main对应body中的id=main, .main对应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>

运行结果：

2）图片部分是3个<div class=bord>横向展示，所以要在框住它们的<div id=pic1>样式中设置flex布局，在<style>里加入以下代码：

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

运行结果：

3）图片之间靠太近，图片大小不一致，文字没居中，我们在<style>里加入以下代码：

.bord{
    padding: 1rem 2rem;
}


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


.word {
    text-align: center;
}

运行结果：

五、总结

今天我们学会了flex布局，今后所有的网页排版都可以实现了，祝愿大家都有所收获，完整的代码如下：

<!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>

今天的知识比较基础但非常实用，每天学会一个小技能，积少成多，以后就能成为大神。如果大家对网页上的实现有什么不懂的，尽请留言，OF一定会一一解答的。

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构：

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
<head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

<p>这是一个段落。</p>

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用结尾，如下所示：

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

<p>：定义一个段落。
<h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
<strong>：定义强调文本，通常以粗体显示。
<em>：定义强调文本，通常以斜体显示。
<a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

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

src：指定图像文件的路径。
alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>

href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

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

action：指定表单数据提交的目标URL。
method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

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

type：指定字段类型。
name：指定字段的名称。
placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

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

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

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

name：指定单选按钮组的名称。
value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>

name：指定下拉列表的名称。
每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

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

在HTML中链接外部样式表：

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

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。

在线咨询

上一篇：用HTML制作一个简单页面（代码阅读练习）-零基础自学网页制作
下一篇：HTML 基础的<td> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在 JAVASCRIPT 中创建 HTML 元素...

、摘 要

二、pycharm操作说明

1. 创建项目

2. 创建HTML文件

3. HTML格式说明

三、网页设计

1. 草图绘制

2. css名字定义

四、网页开发

1. body部分

2. 网页测试

3. head部分

五、总 结

一部分：HTML简介

什么是HTML？

HTML的基本结构

HTML标签和元素

HTML注释

第二部分：HTML基本元素

文本

图像

链接

列表

无序列表

有序列表

定义列表

第三部分：HTML表单

<form>元素

输入字段

文本框

密码框

单选按钮

复选框

下拉列表

第四部分：HTML样式和CSS

内联样式

外部样式表

总结

您的项目需求

、摘要

五、总结