前端html页面id命名问题

html-css029

前端html页面id命名问题,第1张

常用id的命名

(1) 页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2) 导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3) 功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

1、用途不同：name主要用于获取提交表单的某表单域信息， 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、框架元素(iframe、frame、 window的名字，用于在其他frame或window指定target )和button等。

而id和class主要是通过css控制设置了id和class的元素的样式。

2、用法不同：定义了id的元素在css中用id选择器“#”来选择，例如 <h1 id="center">My First Heading</h1>，css中用#center{ }来控制其样式，定义了class的元素在css中用类选择器“.”来选择，例如：<h1 class="center">My First Heading </h1>，css中用 .center{ }来控制其样式。

扩展资料：

关于ID和Name的一些注意事项

1、当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。

2、如果页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易 发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。

3、要是不是动态页面，我们 硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那 些对象中在HTML Render时第一个出现的对象。

而这时重复的ID会在引用时自动变成一个数组，id重复的元素按Render的顺序依次存在于数组中。

id你自己想怎么取就怎么取啊，class的话是css里面定义的class，例如：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

<style>

.center

{

text-align:center

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p> 

</body>

</html>

class取的就是css里面定义的center