html怎么添加图片

html怎么添加图片,第1张

html添加图片的方法:首先打开编辑器,新建img标签;然后给img标签的属性【src添加一张图片的地址】;最后把html文件拖到浏览器中即可。具体如下:

点击打开html编辑器sublime_text.

我们创建一个html文件,然后【创建一个img标签】。

创建img标签以后,我们给img标签的属性【src添加一张图片的地址】。

我们把html文件拖到浏览器中,然后就可以查看加入图片的效果了。

html简介:

超文本标记语言(HyperTextMarkupLanguage),标准通用标记语言下的一个应用。HTML不是一种编程语言,而是一种标记语言(markuplanguage),是网页制作所必备的。

超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

1、打开Sublime text3,新建一个HTML文档,并且建立好框架。

2、输入代码:

<table>

      <tr>

          <td>Student</td>

          <td><input type="text" name="student"></td>

      </tr>

      <tr>

          <td>Height</td>

          <td><input type="text" name="height"></td>

      </tr>

      <tr>

          <td colspan=2>

              <input type="button" name="add" value="add">

          </td>

      </tr>

  </table>

设立两行文本输入框,并且提示可以增加的按钮。

3、<table id="mainTable">

为标签加上id方便定位。

4、加上监听事件的函数。

onclick="adding()"

然后连接js文档。

<script src="test.js"></script>

5、function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

}

创建函数,然后设定两个变量。一个用于定位标签位置,另一个增加行数在第二行。测试一下,多次点击确实会往下移动。

6、var addTd = addTr.insertCell()

  addTd.innerHTML = "新增"

除了要增加tr还要增加td,并且增加文本提示。

7、稍微修改一下变量名字。再增加文本输入框。

function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

  var td1 = addTr.insertCell()

  td1.innerHTML = "新增"

  var td2 = addTr.insertCell()

  td2.innerHTML = "<input type='text 'name='newnew' >"

}

8、最后就可以看到按钮了。

1、首先打开hbuilder软件新建一个html文件,在html页面上创建一个点击的button按钮:

2、然后为button添加点击时创建一个新的div事件。使用“document.createElement()”创建一个新的div,接着使用innerHTML对新建的div设置内容,最后把div放到body显示:

3、在html里为button按钮添加宇哥点击创建div的事件,完成之后代码就写好了,接下来需要看看效果:

4、保存好html文件后使用浏览器打开,此时还没有创建div:

5、最后点击button按钮,会执行脚本创建div的事件,新的div就创建好了,顺利实现了给HTML标签添加了内容。以上就是用JS给HTML标签添加内容的 *** 作:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6163095.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存