HTML，CSS里面关于 id，class，name 属性的区别和用法

1、id: id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称。

用法：若一个标签的id="myid",那么使用它的时候通过”$("#myid")“来获取当前标签或使用“#myid{}”来定义CSS样式。

2、class：根据用户定义的标准对一个或多个元素进行标记和定义，一个标签可以有多个class，例如class="myclass1 myclass2",当前标签就有两个class，分别为myclass1和myclass2。

用法：若一个标签有一个class="myclass",那么获取这个标签可以使用$("myclass"),同时使用”myclass{}“来定义CSS样式。

3、name：从名字可以知道这是用于定义一个标签的名字的属性，name可用于数据获取，常用于表单数据的获取。

用法：若一个输入框的name="myname" ，常用requestgetparameter("myname")来获取当前输入框的值。

获取元素集合的方法有很多，接下来为大家介绍喜爱使用js通过元素class名字获取元素集合的方法

代码如下:

function

getElementsByClassName(n)

{

var

classElements

=

[],allElements

=

documentgetElementsByTagName('');

for

(var

i=0;

i<

allElementslength;

i++

)

{

if

(allElements[i]className

==

n

)

{

classElements[classElementslength]

=

allElements[i];

}

}

return

classElements;

}

HTML

1对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

2xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3Doctype 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE55 拥有IE55的bug

4行内元素有哪些块级元素有哪些

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

5HTML全局属性(global attribute)有哪些

参考资料：

MDN: html global attribute或者W3C HTML global-attributes

accesskey

:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a

可激活元素

class

:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素

contenteditable

: 指定元素内容是否可编辑

contextmenu

: 自定义鼠标右键d出菜单内容

data-

: 为元素增加自定义属性

dir

: 设置元素文本方向

draggable

: 设置元素是否可拖拽

dropzone

: 设置元素拖放类型： copy, move, link

hidden

: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果

id

: 元素id，文档内唯一

lang

: 元素内容的的语言

spellcheck

: 是否启动拼写和语法检查

style

: 行内css样式

tabindex

: 设置元素可以获得焦点，通过tab可以导航

title

: 元素相关的建议信息

translate

: 元素和子孙节点内容是否需要本地化

6什么是web语义化,有什么好处

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息 为什么需要语义化：

去掉样式后页面呈现清晰的结构

盲人使用读屏器更好地阅读

搜索引擎更好地理解页面，有利于收录

便团队项目的可持续运作及维护

7html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过 documentcreateElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

如何区分：

DOCTYPE声明新增的结构元素、功能元素

8 HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：

localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失

sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

9 HTML5 标准提供了哪些新的API？

1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。

2：媒体控制，也很好理解(直译就是回放功能，假如只用html50以下的标签写，以前的音乐播放是不可能实现滚动条的。)

3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存

4：文档编辑，应该是更好的支持对文档的编辑。

5：拖动，可以将文件拖动到某些区域上传

6：跨文档请求，websocket，一种更加高效的通讯方式

7：历史管理，可以通过js管理和插入历史记录

8：MIME头自定义

9：客户端数据存储，localstoage sessionstoage

10：地理位置共享

11：本地数据库

12：索引数据库

10HTML5 应用程序缓存和浏览器缓存有什么区别？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

11常用那几种浏览器测试？有哪些内核(Layout Engine)

(Q1)浏览器：IE，Chrome，FireFox，Safari，Opera。

(Q2)内核：Trident，Gecko，Presto，Webkit。

12请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

13如何实现浏览器内多个标签页之间的通信

调用localstorge、cookies等本地存储方式

14请写出localStorage对象的常用方法。

存储 - localStoragesetItem(key, value) - 如果key存在，更新value

获取 - localStoragegetItem(key) - 如果key不存在，返回null

删除 - localStorageremoveItem(key) - 删除key对应的数据

全部清除 - localStorageclear() - 清空localStorage中所有数据

遍历 - localStoragelength

遍历 - localStoragekey(index)

15如何在HTML5中启用应用程序缓存？

<html manifest="fileNameappcache">

每个指定了manifest的页面在用户对其访问时都会被缓存。

appcache是manifest文件的扩展名

16html5 离线存储

Html5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等 *** 作。

Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 <html manifest='offlinemanifest'> 来引入一个manifest文件，这个文件的路径可以是相对的，也可以是绝对的，如果你的web应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择。

17HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形 *** 作

原生JS有3种方式来获取元素:

getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }

这样就能处理一个元素含有多个classname的情况了

第一步: 先写一个CSS样式文件,在src目录下,新建一个stylecss的样式文件。 input{border:3px solid #ae7000} 1

第二步: 在Xiaojiejiejs里引入,先用import进行引入,第一步: 先写一个CSS样式文件,在src目录下,新建一个stylecss的样式文件。 input{border:3px solid #ae7000} 1

第二步: 在Xiaojiejiejs里引入,先用import进行引入。

以上就是关于HTML，CSS里面关于 id，class，name 属性的区别和用法全部的内容，包括:HTML，CSS里面关于 id，class，name 属性的区别和用法、js通过元素class名字获取元素集合的具体实现、Web前端最全面试宝典- Html篇等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！