首页 > 代码库 > 关于HTML与CSS与class

关于HTML与CSS与class

2024-07-19 06:17:12   220人阅读

在web前端开发中接触的一直是html、css、javascript。

在这个过程中，经常使用的是html中的span、div元素以及css的选择器。

为了方便查找在这里将这些内容的基础知识记录下来。

一、HTML <div> 和 <span>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

 

二、HTML class 属性

定义和用法

class 属性规定元素的类名（classname）。

class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。

 

三、HTML id 属性

定义和用法

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

 

html的元素可以通过class和id进行css选择。通过class代码如下

<html><head><style type="text/css">h1.intro {color:blue;}p.important {color:blue;}</style></head><body><h1 class="intro">Header 1</h1><p>A paragraph.</p><p class="important">请注意这个重要的段落。:)</p></body></html>

结果如下

通过id改变样式代码如下

<html><head><style>#myHeader{color:red;text-align:center;}</style></head><body><h1 id="myHeader">W3School is the best!</h1></body></html>

 

四、HTML 列表 标签

<html><body><h4>一个无序列表：</h4><ul>  <li>咖啡</li>  <li>茶</li>  <li>牛奶</li></ul></body></html>

运行结果

关于HTML与CSS与class


联系
我们