【基于HTML5的网页设计及应用】——链接伪类选择器和伪元素选择器

个人专栏:

算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客

Java基础:Java基础_IT闫的博客-CSDN博客

c语言:c语言_IT闫的博客-CSDN博客

MySQL:数据结构_IT闫的博客-CSDN博客

数据结构:​​​​​​数据结构_IT闫的博客-CSDN博客

C++:C++_IT闫的博客-CSDN博客

C51单片机:C51单片机(STC89C516)_IT闫的博客-CSDN博客

基于HTML5的网页设计及应用:基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

python:python_IT闫的博客-CSDN博客

欢迎收看,希望对大家有用!

链接伪类选择器:

涉及知识点:

  1. 声明了文档类型为HTML,告诉浏览器使用HTML解析器来解析该页面。

  2. 标签定义了整个HTML文档的开始和结束。

  3. 标签内包含了一些元数据和引用的外部资源。

    •  设置字符集为UTF-8,确保页面能正确地显示各种语言的字符。
    •  通过X-UA-Compatible元标签设置兼容模式,使页面在IE浏览器中以最高版本的模式渲染。
    •  设置视口的宽度和初始缩放比例,使页面在移动设备上呈现良好的可视效果。
    • Document 设置页面标题为 "Document"。
  4. 实现效果:

    【基于HTML5的网页设计及应用】——链接伪类选择器

    伪元素选择器:

    涉及知识点:

    1. DOCTYPE声明 ():指定文档类型为HTML。
    2. HTML元素 ():整个HTML文档的根元素。
    3. head元素 ():包含了关于文档的元信息,如字符集、浏览器兼容性等。
    4. meta元素:用于设置文档的元信息,如字符集()和视口()。
    5. title元素 (</code>):定义了文档的标题,显示在浏览器的标题栏或标签页上。</li> <li>style元素 (<code><style></code>):内联样式表,用于定义CSS样式。</li> <li>li元素 (<code><li></code>):无序列表项,代表每个菜单项。</li> <li>a元素 (<code><a></code>):超链接,用于创建可点击的链接。</li> <li>ul元素 (<code><ul></code>):无序列表,包含多个菜单项。</li> <li>body元素 (<code><body></code>):文档的主体内容。</li> </ol> <p>CSS样式部分定义了列表项和链接在不同状态下的样式,包括宽度、字体、背景颜色、内边距、外边距等。鼠标悬停时,列表项的背景颜色会变成skyblue,并出现红色的三角形。链接的颜色在不同状态下也有所变化。</p> </blockquote> <h3>代码展示:</h3> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 设置字符集为UTF-8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置兼容模式,使页面在IE浏览器中以最高版本的模式渲染 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口的宽度和初始缩放比例 --> <title>Document

      实现效果:

      伪元素选择器

你可能感兴趣的:(基于HTML5的网页设计及应用,html5,前端,html)