HTML中元素的id属性和HTML中的div和span

news/2024/10/20 19:00:32/

一、id属性

注意:

  • 1、在HTML文档当中,任何元素(节点都id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
  • 2、注意:表单提交数据的时候,只和name关系,和id无关。
  • 3、id什么用?
    javascript语言:可以对HTML文档当中的任意节点进行增删改操作。
    javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。
    id的存在让我们获取元素(节点更方便。
  • 4、HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id。
    javascript主要就是对这棵DOM树上的节点进行增删改的。
    DOM(Document)树。
<body id="mybody">
<form id="myform" action="http://localhost:8080"><input type="text" id="myname" name="username"/><input type="password" id="mypwd" name="userpwd"/></form></body>

在这里插入图片描述

二、HTML中的div和span

1、div和span是什么?什么用?

* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子,div嵌套div就是盒子套盒子。
* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。

2、其实最早的网页是采用table进行布局的,但是table不灵活,太死板。

现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。

3、div和span的区别?

div独自占用一行(默认情况下)
span不会独自占用一行,它的长度是封装数据的长度
<div id="div1">朴灿烈</div>
<div id="div2">朴灿烈</div><span id="span1">朴灿烈</span>
<span id="span2">朴灿烈</span>

在这里插入图片描述

4.其它标签

在这里插入图片描述

<header><h1>City Gallery</h1>
</header><nav>London<br>Paris<br>Tokyo<br>
</nav><section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p>
</section><footer>Copyright W3School.com.cn
</footer>

在这里插入图片描述


http://www.ppmy.cn/news/306022.html

相关文章

0-1背包 java,0-1背包问题,java的动态规划如题,代码如下public

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 0-1背包问题&#xff0c;java的动态规划 如题&#xff0c;代码如下 public class dongtaiguihua01 { public static void main(String []args) { int W10;//背包的总重量 int []w {2,2,6,5,4};//物品的相应重量 int []v {6,3,5,4,…

IT专业报考指南:选择正确的学校和课程

引言&#xff1a;随着高考的技术&#xff0c;男怕入错行&#xff0c;女怕嫁错郎&#xff0c;专业的选择也是至关重要的&#xff0c;当准备报考IT专业时&#xff0c;选择适合自己的学校和课程是至关重要的一步。随着信息技术的快速发展和应用范围的不断扩大&#xff0c;IT行业的…

Proxmark3 Easy Gui 5.0、5.13、5.2加强版介绍

一个偶然的机会&#xff0c;入手了一台PM3&#xff0c;学习了不少proxmark3的知识。下面就跟我一起看一看吧。 新版本 最新版本是2019.7.2日发布的 功能说明&#xff1a; * 固件支持-完美支持3.1及以上版本固件&#xff0c;支持Proxmark3-RDV2 DEV4.0 * 智能一键解析通常能解…

ProxmoxVE折腾记录(二)--版本升级

PVE6.0升级 官方F&Q https://pve.proxmox.com/wiki/FAQ#faq-support-table 升级说明 F&Q10条/11条系统版本说明及升级参考&#xff0c;这次准备升级到6.0, 5.4的debian,PVE都过了维护期,用着也不放心, 7.0又刚刚出来就不打算折腾了 先整这个&#xff0c;盘他&#xff0…

数码视讯Q5刷armbian+squeezelite

数码视讯Q5刷armbiansqueezelite 数码视讯Q5机顶盒介绍&#xff1a; 数码视讯Q5 CPU&#xff1a;晶晨S905M 4核1.5G 内存&#xff1a;1g 存储&#xff1a;8G 显卡&#xff1a;Mali-450 接口&#xff1a;HDMI USB2.0&#xff08;两个&#xff09; AV TF卡槽 …

腾讯X5浏览器简单使用

前言&#xff1a; Android中的WebView一直是令人头疼的问题&#xff0c;各种手机内核不一致&#xff0c;版本也不一样&#xff0c;型号众多&#xff0c;导致兼容不好做&#xff0c;自从使用X5WebView&#xff0c;兼容和版本适配问题得到很大提升&#xff0c;本文将给X5WebView…

proxmox的安装及配置

Proxmox全称Proxmox Virtual Environment简称PVE是基于Debian的虚拟机平台。以利用它安装任何你想要的系统&#xff0c;如&#xff1a;Win系统、linux系统&#xff08;黑群晖、centos、ubuntu等&#xff09;、软路由&#xff08;LEDE、OpenWRT、ROS、高恪、爱快、等&#xff09…

Nexus5 Android6.0.1 MOB30H 刷机、获取ROOT、刷入xposed框架

Nexus5 Android6.0.1 MOB30H 刷机、获取ROOT、刷入xposed框架 本文仅供学习交流使用&#xff0c;如侵立删&#xff01; 知识准备 刷机之前需要了解的一些知识 ROM刷机 ROM是ROM image&#xff08;只读内存镜像&#xff09;&#xff0c;常见ROM image有img、zip等格式&…