html-note-3

其他伪类

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>其他伪类</title>
    <style>
        p{
            font-size: 16px;
            color: #000;
        }
       /* first-letter 第一个字 */
        p:first-letter{
            font-size: 32px;
            color: #FF0004;
        }
       /* first-line 第一行 */
        p:first-line{
            font-size: 22px;
            font-weight: bold;
        }
       /* ::selection 选中的样子(注意：两个冒号) 2n等于偶数 2n+1等于奇数*/
        p::selection{
            background-color: palegoldenrod;
        }
        ul{
            width: 100%;
            padding: 0;
        }
        ul li{
            width: 100%;
            height: 30px;
            list-style: none;
            background: #777777;
            margin-top: 3px;
        }
        /* :nth-child(n)*控制第n个标签 */
        ul li:nth-child(2n){
            background-color: aqua;
        }
    </style>
</head>

<body>
    <p>开业第一天的客流大概 2800 人左右，说实话没到我们预期</p>
    <p>望庐山瀑布<br>
日照香炉生紫烟，遥看瀑布挂前川<br>
飞流直下三千尺，疑是银河落九天</p>
    
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</body>
</html>

<br> 标签可以在不产生一个新段落的情况下进行换行

CSS伪类

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

伪元素的使用

CSS 伪元素是用来添加一些选择器的特殊效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      a{
        text-decoration: none;
      }
      a::before{
        content: url( "../https://charles2530.github.io/image/沙漠.png");
      }
      a::after{
          content: attr( href);
          margin-left: 20px;
      }
  </style>
</head>
<body>
  <a href="https://www.hao123.com/">hao123</a>
</body>
</html>

CSS伪元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个元素之前插入内容
:after	p:after	在每个元素之后插入内容
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

div标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
     .nostyle{
        list-style:none;
    }   
/*        class的类名要用.来访问*/
    .red{
        color: red;
    }
/*        id的类名要用#来访问*/
    #blue{
        color: blue;
    }
    </style>
</head>

<body>
<!--    div标签可以类比函数封装理解，类似cpp的容器-->
<!--    HTML命名-->
    <div class="name">
<!--        class命名，名称可重复出现-->
    </div>
    <div id="idname">
<!--        id命名，名称在统一页面是唯一的-->
    </div>
    <ul type="square">
        <li class="nostyle red">i'm first</li>
        <li id="blue">i'm second</li>
        <li>i'm third</li>
    </ul>
</body>
</html>

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

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

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

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

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

first child的伪类用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first child的伪类用法</title>
    <style>
    p{
        font-size: 16px;
        color: #000;
        }
/*        第一个p标签*/
        p:first-child{
            color: aqua;
        }
/*        p标签的第一个span*/
        p>span:first-child{
            color: #00ff00;
        }
/*        第一个标签的所有span*/
        p:first-child span{
            color:red;
        }
        ul{
            width:904px;
            height:46px;
            background-color: #1d3b5e;
            border-radius: 3px 3px 0 0;
        }
        ul li{
            list-style: none;
            width:144px;
            height: 46px;
            text-align: center;
            line-height: 46px;
            color: #fff;
            float: left;
            border-left: 1px solid #445160;
        }
        ul li:first-child{
            border: none;
        }
    </style>
</head>

<body>
    <p>哈喽<span>大家好</span>，我是<span>Charles</span></p>
    <p>哈喽<span>大家好</span>，我是<span>Charles</span></p>
    <p>哈喽<span>大家好</span>，我是<span>Charles</span></p>
    
    <ul>
        <li>首页</li>
        <li>新闻中心</li>
        <li>行业动态</li>
        <li>客户案例</li>    
        <li>服务支持</li>
        <li>关于我们</li>
    </ul>
</body>
</html>

HTML <span> 元素

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

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

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

HTML 分组标签

标签	描述
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素，内联元素(inline)

Charles's Castle