html.-CSDN博客

本文链接：https://blog.csdn.net/qq_55712019/article/details/125917275

本文详细讲解了HTML表单元素的使用，包括邮箱、数量输入和搜索框，以及CSS的选择器，如标签选择器、类选择器、ID选择器，以及层次选择、结构伪类选择和属性选择。通过实例演示，理解如何在网页设计中精准定位和样式控制元素。

摘要由CSDN通过智能技术生成

表单功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<a href="First.html" target="hh">跳转</a>

<iframe name="hh" frameborder="0" width="800px" height="200px"></iframe>

<p>邮箱：
    <input type="email" name="email">
</p>
<p>商品数量：
    <input type="number" name="number" max="100" min="0" step="2">
</p>
<p>搜索：
    <input type="search" name="search">
</p>
</body>
</html>

鼠标点击事件

<p>
    <label for="mak">点我</label>
    <input type="text" name="t" id="mak">
</p>

选择器

作用：选择页面某个或某类元素

基本选择器

1、标签选择器

2、类选择器

3、 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <link rel="stylesheet" href="css/style.css">

    <style>
        h1{
            color: lime;
        }
        p{
            font-size: 60px;
        }
        .ny{
            color: yellow;
        }
        #pp{
            color: red;
        }
    </style>
</head>
<body>
<h1>标签</h1>
<hr>
<h2 class="ny">类选择</h2>
<h1 id="pp">学Java</h1>
<p>vue</p>
</body>
</html>
<!--id选择器>类选择器>标签选择器-->
## 层次选择

1、后代选择器

2、子选择器

3、相邻兄弟选择器

4、通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*p{
      background: aqua;
    }*/
    body p{
      background: springgreen;
    }
    body>p{
      background: red;
    }
    .s+p{
      background: yellow;
    }
    .s~p{
      background: aliceblue;
    }
  </style>
</head>
<body>
<p>p1</p>
<p class="s">p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    ul li:first-child{
      background: springgreen;
    }
    ul li:last-child{
      background: aliceblue;
    }
    /*顺序*/
    p:nth-child(1){
      background: red;
    }
    /*类型*/
    p:nth-of-type(2){
      background: blue;
    }
  </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 15px;
            background: aliceblue;
            text-align: center;
            color: lightcoral;
            text-decoration: none;
            margin-right: 8px;
            font:bold 20px/50px Arial;
        }

        a[id=first]{
            background: yellow;
        }
        a[class*="links"]{
            background: lime;
        }
        a[href^=https]{
            background: blue ;
        }
    </style>
</head>
<body>
<div class="demo">
    <a href="https://www.4399.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
</div>
</body>
</html>