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

html-css017

HTML,CSS里面关于 id,class,name 属性的区别和用法,第1张

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" ,常用request.getparameter("myname")来获取当前输入框的值。

比如两个input标签,name的值一个是a一个是b,是name的值为a的标签添加背景色

input[name="a"]{

    bakcground:#ccc

}

HTML、 CSS、 JavaScript三者的关系

网页主要由三部分组成: 结构( Structure) 、 表现( Presentation) 和行为( Behavior)

HTML —— 结构, 决定网页的结构和内容( “是什么”)

CSS —— 表现( 样式) , 设定网页的表现样式( “什么样子”)

JavaScript( JS) —— 行为, 控制网页的行为( “做什么”)

一、 HTML语言

1.1什么是HTML语言( HTML概述)

英文全称: Hyper Text Markup Language

中文全称: 超文本标记语言

HTML 语言是制作网页的最基本语言, 并且只能通过web浏览器显示出来。

Hyper( 超) :

用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。

Text( 文本) :

HTML是一种文本解释性的程序语言, 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。

Markup( 标记) :

HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。

1.2 HTML文档结构

HTML文档一般由两部分组成:

1. 文档所要表达的内容信息( 文字、 图片等) ;

2. 一系列的HTML标签;

1.3 HTML标签

1.3.1 什么是HTML标签

1. HTML标签是用 <>所括住的指令, 主要分为:

单标签: <起始标签/>

双标签: <起始标签></结束标签>

例如:

<br/>

<div></div>

2. 通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。

<div>标签内容</div>

3. 在元素的起始标签中, 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。

<div 属性名="属性值"></div>

例如:

<div class="wrap" id="wrap"></div>

4. 每一对双标签之间可以嵌套, 但不能交叉。

正确示例:

<div>

<p></p>

</div>

错误示例:

<div>

<p>

</div>

</p>

1.4 编码器

1.4.1 WebStorm源码主体标签含义

<!DOCTYPE>:

是一个声明不是 HTML 标签; 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。

<html>:

<html>是文档标识符, 它是成对出现的, 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面, 明确地表示文档是以超文本标识语

言( html)编写的。 该标签不带有任何的属性。

<head>:

<head>标签用于定义文档的头部, 它是所有头部元素的容器。 <head>中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。

<meta>:

<meta>标签位于文档的头部, 用于定义文件信息, 对网页文件进行说明。 其中name属性主要用于描述网页, 与之对应的属性值为content, content中

的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<body>:

<body>标签用于定义文档的主体, 即在浏览器上看到的网页内容。