CSS选择器总结 - zhongJaywang-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

CSS选择器总结 - zhongJaywang

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 01:49 PM

最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！

插入样式表的方法有三种：

第一种：外部样式表

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

Copier après la connexion

第二种：内部样式表

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  hr </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> sienna</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
  p </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
  body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background-image</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url("images/back40.gif")</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

Copier après la connexion

第三种：内联样式表

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color: sienna; margin-left: 20px"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This is a paragraph
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

Copier après la connexion

CSS基本的选择器有四种，其它复杂的选择器都由这四种组合而成

元素选择器（类型选择器）
id选择器
类选择器
属性选择器

选择器的基础语法，规则由两个主要的部分构成：选择器，以及一条或多条声明。

<span style="color: #800000;">//CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}<span style="color: #800000;">

//每条声明由一个属性和一个值组成。

selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

Copier après la connexion

1. 元素选择器（类型选择器）

<span style="color: #800000;">h1 </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> sans-serif</span>;}

Copier après la connexion

同时也可以为XML文档设置样式：

Copier après la connexion

XML文档：

<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml version="1.0" encoding="ISO-8859-1"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml-stylesheet type="text/css" href="note.css"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><span style="color: #800000;">note</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">to</span><span style="color: #0000ff;">></span>George<span style="color: #0000ff;"></span><span style="color: #800000;">to</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">from</span><span style="color: #0000ff;">></span>John<span style="color: #0000ff;"></span><span style="color: #800000;">from</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">heading</span><span style="color: #0000ff;">></span>Reminder<span style="color: #0000ff;"></span><span style="color: #800000;">heading</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>Don't forget the meeting!<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">note</span><span style="color: #0000ff;">></span></span></span></span></span></span>

Copier après la connexion

CSS样式：

<span style="color: #800000;">note
  </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;">Verdana, Arial</span>;<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;">30px</span>;
  }<span style="color: #800000;">

to
  </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">28px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

from
  </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">28px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

heading
  </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">60px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

body
  </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">35px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }

Copier après la connexion

2.id选择器

id 属性只能在每个 HTML 文档中出现一次！

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>

Copier après la connexion

CSS样式：

<span style="color: #800000;">#red </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;">
#green </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">green</span>;}

Copier après la connexion

3.类选择器

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<span style="color: #0000ff;"><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</span><span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>

Copier après la connexion

CSS样式：

<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}

Copier après la connexion

4.属性选择器

css属性选择器参考
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

为了更准确的定位HTML元素并对其添加样式，在上面四种基础选择器上面，CSS选择器还可以分成：分组选择器，派生选择器，后代选择器，子元素选择器，相邻兄弟选择器，伪类和伪元素。

*1.分组选择器

<span style="color: #008000;">/*</span><span style="color: #008000;"> no grouping </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h2 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h3 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h4 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h5 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h6 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> grouping </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1, h2, h3, h4, h5, h6 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}

Copier après la connexion

*2.派生选择器

派生选择器是通过依据元素在其位置的上下文关系来定义样式的。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

Copier après la connexion

CSS代码：

<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;
  }

Copier après la connexion

*3.后代选择器

后代选择器又称包含选择器，可以选择某元素的任意一代的后代元素。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is a <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>important<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> heading<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This is a <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>important<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> paragraph.<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span></span></span>

Copier après la connexion

CSS代码：

<span style="color: #800000;">h1 em </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

Copier après la connexion

*4.子元素选择器

子元素选择器只可选择某元素第一代后代的选择器。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> important.<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>really <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> important.<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

Copier après la connexion

CSS代码：

<span style="color: #800000;">h1 > strong </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

Copier après la connexion

*5.相邻兄弟选择器

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。

eg1:

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>This is a heading<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>This will be styled.<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>This will not be styled.<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

Copier après la connexion

CSS代码：

<span style="color: #800000;">h2 + strong </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

Copier après la connexion

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。
在以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>     
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> 
     <span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> 
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>

Copier après la connexion

CSS代码：

<span style="color: #800000;">li + li </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

Copier après la connexion

在以上的例子中li+li是选择紧挨着li后面的第一个
，所以第一个
不会被选择；而第二个
是紧挨着第一个li的，所有会被选择；第三个
是紧挨着第二个
的，也会被选择。

*6伪类

伪类的语法：

<span style="color: #800000;">selector : pseudo-class </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

Copier après la connexion

CSS 类也可与伪类搭配使用：

<span style="color: #800000;">selector.class : pseudo-class </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

Copier après la connexion

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

超链接例子：

<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #FF0000</span>}        <span style="color: #008000;">/*</span><span style="color: #008000;"> 未访问的链接 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:visited </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #00FF00</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 已访问的链接 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #FF00FF</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 鼠标移动到链接上 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:active </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #0000FF</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 选定的链接 </span><span style="color: #008000;">*/</span>

Copier après la connexion

*7伪元素

属性	描述
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

1 Il y a quelques mois By DDD

R.E.P.O. Meilleurs paramètres graphiques

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

1 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7401

Tutoriel Java

1630

Tutoriel CakePHP

1358

Tutoriel Laravel

1268

Tutoriel PHP

1217

Afficher plus

Related knowledge

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

See all articles