html css笔记大总结

html元素

常用标签

• div：块标签

• p：块标签，段落标签

• span：行标签，一行可以放多个

• a：超链接，

  <a href="#"></a>
  <a href="#" target= " _blank"></a>
  <a href="#"></a>
  

  href :链接的地址

  target = “_blank”:设置在新窗口打开链接地址

• img：插入图片

  <img src="" alt= "">
  

  src:图片地址

  alt：图片加载不出来显示内容

• u：下划线

• i：斜体

• br：换行标签

• hr：分割线

列表

• ul…li：无序列表

• ol…li：有序列表

• dl…dt/dd：自定义列表

  <dl>
      <dt>列表标题</dt>
      <dd>列表内容</dd>
  </dl>
  

  di：列表标题

  dd：列表内容

表格

• table：表格定义标签

• thead：头部

• tbody：身体

• tfooter：底部

• tr：行

• th：头单元格

• td：标准单元格

  注意：

  1. 设置table元素的大小会影响单元格宽高尽量不设置

  2. th单元格默认文本加粗，水平居中

  3. 设置某单元格的大小会影响一行/一列的单元格大小

表格的合并

• 设置单元格之间的间距，默认为2px ，0没有，1有*/

  ​ border-spacing: 0;

  设置单元格边框是否合并 separate不合并，collapse合并

  ​ border-collapse: collapse;

表单

• form：表单

  1. 表单是一个包含表单元素的区域
  2. 表单元素是允许用户在表单中（文本域，下拉列表，单选框，复选框等等）输入信息元素
  3. 表单使用表单元素from定义

• input： 用户输入数据时使用的文本框、复选框、单选按钮等都是通过元素创建的，元素只能在里面使用，用来创建表单的输入元素

  <input type="text">
  <input type="radio">
  <input type="checkbox">
  <input type="password">
  <input type="submit">
  <input type="button">
  <input type="reset">
  <input type="time">
  <input type="date">
  <input type="month">
  <input type="week">
  <input type="datetime-local">
  <input type="email">
  <input type="tel">
  <input type="search">
  <input type="url">
  <input type="color">
  <input type="file">
  <input type="imag">
  <input type="number">
  <input type="range">
  <input type="hidden">
  

  type:核心属性，值不同对应input的功能，样式都会发生相对应的改变

  type属性 描述

  1. text ：input将会接受文本输入
  2. password 可用于一些私密性和隐私性的内容（例如：密码）
  3. button、submit、reset 实现一个按钮形式，但用于的内容不同，实质上都是实现一个钮形式，此时可以为input元素设置value值为按钮贴上文字
  4. radio 实现单选框（注意：同一组单选框name属性需要相同，否则无法实现单选）
  5. checkbox 实现复选框
  6. search 实现搜索框
  7. color 实现颜色选择框
  8. image 实现图像按钮
  9. number 设置为此属性输入框只能输入数字
  10. range 实现数值滚动条
  11. hidden 将i元素给隐藏
  12. email、tel、url 对邮箱、电话号码、网址等数据进行把关，但是把关方面需要 正则表达式来
  13. time 时间框
  14. week 星期框
  15. month 年月框
  16. date 日期框
  17. datetime_local 本地日期和时间

• lable：给input添加标注，扩大input的适用范围

  <label for = "user"/* id 的名字*/>备注</label>
  <input type = "text" id = "user" value = "asdad">
  

  作用：label的for值和input的id值一致，点击label会让input获取焦点

• select：定义下拉菜单

• optgroup：定义下拉菜单的选项组

• option：定义列表中一个选项内容

   <select name="skill" id="skill">
              <optgroup label="客户">
                  <option value="">帮助中心</option>
                  <option value="">售后服务</option>
                  <option value="" selected>在线客服</option>
              </optgroup>
              <optgroup label="商户">
                  <option value="">合作招商</option>
                  <option value="">学习中心</option>
              </optgroup>
          </select>
  

  label：增加选择项的描述

  selected属性： 在页面加载的时候预先选中的选项

• fieldset：将表单的元素进行分组，会产生一个边框

• legend：为fieldset元素定义标题

  <fieldset>
              <legend>请选择：</legend>
   </fieldset>
  

html属性

通用属性

• class：设置标签的类 class属性用于指定元素属于何种样式的类。
• id：设置标签的标识 id属性用于定义一个元素的独特的样式

概念上：

id是先找到结构/内容，再给它定义样式；用于区分不同的结构和内容， id是具有唯一性的

class是一个样式，先定义好， 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。

注意：id的优先级要高于class，

style：提供了一种改变所有 HTML 元素的样式的通用方法。

表单属性

• type:核心属性，值不同对应input的功能，样式都会发生相对应的改变

type属性 描述

1. text ：input将会接受文本输入
2. password 可用于一些私密性和隐私性的内容（例如：密码）
3. button、submit、reset 实现一个按钮形式，但用于的内容不同，实质上都是实现一个钮形式，此时可以为input元素设置value值为按钮贴上文字
4. radio 实现单选框（注意：同一组单选框name属性需要相同，否则无法实现单选）
5. checkbox 实现复选框
6. search 实现搜索框
7. color 实现颜色选择框
8. image 实现图像按钮
9. number 设置为此属性输入框只能输入数字
10. range 实现数值滚动条
11. hidden 将i元素给隐藏
12. email、tel、url 对邮箱、电话号码、网址等数据进行把关，但是把关方面需要 正则表达式来
13. time 时间框
14. week 星期框
15. month 年月框
16. date 日期框
17. datetime_local 本地日期和时间

• name：定义input名字

name：讲解

​ name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过JS引用表单数据.

​ 只有设置了name属性的表单元素才能在提交表单的时候传递它们的值，因为服务器端获取表单数据通过元素的name属性的值而得到的，没有name属性就无法得到表单元素提交给服务器的值。

• value：定义input的值

input标签的value属性的作用是由input标签type属性的值决定的。

1. 当type值为 button，reset，submit中的其中一个时，value的值表示按钮上的文本描述。
2. 当type值为 text，password，hidden中的其中一个时，value的值表示输入框中的初始值，初始值可以更改在提交表单的时候可以把value属性的值发送给服务器（即是初始值，也是提交至服务器的值）。
3. 当type值为 checkbox，radio中的其中一个时，value的值表示提交给服务器的值“携带的数据”,或者复选框被勾选的状态，默认为on。
4. 当type值为 image, value的值表示用户的点击位置“鼠标位于图片的x和Y坐标”并提交给服务器。

• placeholder：input输入框的提示语“只能用在输入框”。
• autofocus：自动成为输入焦点
• autocomplete：是否启用自动完成功能，on开启"默认值"，off关闭。
• required：输入框的字段是必填的。
• readonly：只读模式。
• disabled：禁用一个input。
• enabled：选择元素启用后的状态
• checked：选择被选中的input元素
• selected： 在页面加载的时候预先选中的选项
• label：增加选择项的描述

表格属性

• colspan：跨列合并
• rowspan：跨行合并

功能元素属性

• hred：链接地址

• target：

  1.target=“_self”
  内容在当前页面显示。
  2.target=“_blank”
  内容在新页面显示。
  3.target=“three”
  内容在对应窗口显示
  4.target=“_top”
  在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架

  补充：（:target当我们点击链接()时，对应id的元素显示在当前页面。）

• src：图片、资源路径

css属性

常用

• width：宽

• geight：高

• background：背景

  1. background-color：背景颜色

  2. background-position：在css中用来设置背景图片的位置

  3. background-size：规定背景图片的尺寸

     • 设置的宽高小于图片的宽高时，图片会被压缩，然后平铺压缩后的图片，直到填满整个盒子容器；
     • 设置的宽高大于图片的宽高时，图片会被拉伸，然后平铺拉伸后的图片，直到填满整个盒子容器

  4. background-repeat：定义了图像的平铺模式。

  repeat	默认将图片沿X,Y两个方向平铺，知道填满整个盒子区域；
  repeat-x	只进行横向平铺
  repeat-y	只进行纵向平铺
  no-repeat	不平铺
  inherit	从父元素继承background-rapeat属性

  5. background-image：属性为元素设置背景图片
  • 如果盒子的宽高大于图片的宽高，则默认图片会在盒子中平铺，直到填满整个盒子；
  • 如果盒子的宽高小于图片的宽高，则默认图片会被剪裁，只显示图片一部分；

• word spacing ：词间距

• line-height：行高

• font-size：字体大小

• font-family:字体 ：字体类型

• font-weight:bold ：字体加粗

• letter-spacing ：字间距

• text-align：文本对齐默认left左对齐 center居中 right右对齐

• border : 5px solid 颜色；：边框 宽度 solid实现 dashed虚线 颜色

• text-decoration: underline line-through; ：text-decoration添加到文本的[修饰]，underline下划线，line-through删除线

• text-decoration: none; ：取消超链接下划线

• border ：none取消自带边框

• outline：none：取消轮廓线

• list-style：none：取消列表样式

• position：定位

• display：转元素

• float：浮动

• colspan：合并列

• rowspan：合并行

• text-indent：首行缩进

盒子

• margin：外边距
• padding：内边距
• border：边框
• box-sizing
  1. content-box 标准盒子(元素大小 = content + padding + border)

​ 2. border-box 怪异盒子(元素大小 = content(content + padding + border) )

• border-radius: 10%; ：圆角

选择器

标准选择器

• 标签选择器

• 类名选择器

• id选择器

• 通配符选择器

复合选择器

后代选择器

<style>
    /* 把ol的li改成红色*/
    ol li{
        list-style:none;
        color:red;
        
}
    /* 把ol的a改成blue*/
    ol li a{
        color:blue;
    }
</style>
<body>
    <ol>
       <li>ol的孩子</li>
       <li>ol的孩子</li>
       <li>ol的孩子</li>
       <li><a href "#">ol的孙子</a></li>
    </ol>
    <ul>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
    </ul>
</body>

• 元素ol 和元素li 中间用空格隔开
• 元素li可以是儿子也可以是孙子

子代选择器

<style>
    div>a{
        
    }
</style>
<body>
    <div>
        <a href= "#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

• 元素div和元素a 用> 隔开
• 元素a必须是元素div儿子级的其他的不归他管

并集选择器

<style>
    /* 把鸡狗改成红色 */
    div,p{
        color:red;
    }
    /* 把鸡狗改成红色 小猪一家改红色*/
    div,p,.pig li{
        color:red;
    }
</style>
<body>
    <div>
        鸡
    </div>
    <p>
        狗
    </p>
    <span> 兔</span>
    <ul class="pig">
        <li>小猪</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

• 并集选择器可以多组标签
• 元素用英文逗号隔开

伪类选择器

a:link：选择所有未被访问的链接

a:visited：选择所有已被访问的链接

a:hover：选择鼠标位于其上的链接

a:active：选择活动链接

<style>
    /* 未访问的链接*/
    a:link{
        color:#333;
    }
    /*访问过的链接*/
    a:visited{
        color:red;
    }
    /* 选择鼠标经过的那个链接*/
    a:hover{
        color:blue;
    }
    /* 选择是我们的鼠标按下还没有弹起的链接*/
    a:active{
        color:#369;
    }
</style>
<doby>
    <a href="#">链接</a>
</doby>

• 为了确保生效，清按照LVHA的顺序声明:link :visited :hover :active.

:focus ：伪类选择器用于选取获得焦点元素

<style>
    /*获得光标的input表单元素选取出来*/
    input:focus{
        background-color: red;
        color: blue;
    }
</style>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

伪元素选择器

伪元素选择器：

​ 简称：伪元素，相当于创建了一个html元素。

伪类选择器 和 伪元素选择器的区别：

1. 前缀不同，伪类: ， 伪元素:: 。

2. 伪类用于向选择器添加特殊的效果。伪元素将特殊的效果添加到某些元素上进行操作。

• ::berfore 增加前缀
• ::after 增加后缀
• :: fist-letter 第一行第一个文本
• ::first-line 第一行
• ::-webkit-input-placeholder 设置input元素内的placeholder属性的文本
• ::selection 用户选中的文本内容

定位

1. 定位的由来，将盒子定在某一位置上，所以定位也是摆放盒子，按照定位的方式移动盒子

   ​ 定位的组成：定位=定位模式+边偏移

   ​ 定位模式：用于指定一个元素在文档中的定位方式

   ​ 定位模式他是通过css的position属性来设置的，值可以分为五个：static静态定位

   ​ relative相对定位，absoulute 绝对定位，fixed固定定位，sticky 粘性定位

   ​ 边偏移：定位的盒子移动到最终位置。有top.bottom.left.right四个属性

   静态定位（了解）static

   是元素默认的定位方式，简单理解无定位的意思

   ​ 静态定位按照标准流特性摆放位置，它是没有偏移的

   相对定位 ：position:relative

   ​ 1.他是相对于子级原来的位置来移动的

   ​ （移动位置的时候参照点是原来的位置）

   ​ 2.原来在标准流位置继续占有，后面的盒子依然

   ​ 以标准流方式对他（不脱离文档流，继续保留

   ​ 原来的位置）

   绝对定位 ： positive:absolut

   ​ 1.如果没有祖先元素或者祖先元素没有定位

   ​ 择以浏览器为准定位

   ​ 2.如果这个父元素有定位（相对.绝对.固定）

   ​ 则以最近一级的有定位的祖先元素为参考点移动位置

   ​ 3.不占有原来的位置（脱离文档流，不保留原来位置）

相对定位和绝对定位倒是有什么使用场景

​ 子绝夫相：子级使用绝对定位，父级则需要使用相对定位

​ 子绝：子级用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，

​ 不会影响盒子里的其他兄弟

​ 父相：父盒子布局时，需要占有位置，因此父亲只能是相对定位

​ 总结：因为父级需要占有位置，因此是相对定位，

​ 子盒子不需要占有位置，则使用绝对定位

​ **子绝父相不是永远不变的，也可以子绝父绝，子绝父固，子绝父粘 **

固定定位：positive:fixed

固定定位使用场景：可以在浏览器页面滚动时

​ 元素的位置不会改变

​ 特点1.以浏览器的可视窗口为参照点移动元素。跟父元素

​ 没有任何关系，不随滚动条滚动

​ 特点2.固定定位不占有原先位置（脱离文档流）

粘性定位：positive:sticky

​ 特点1.以浏览器的可视窗口为参照点移动元素（固定定位）

​ 特点2.占有原先的位置不脱离文档流（相对定位）

​ 特点3.必须添加top.left.bottom.right.其中一个才有效果

小知识点

父元素的塌陷

margin穿透问题：“第一个子元素的上margin和最后一个元素的下margin会穿透父元素”。

​ 会造成父盒子塌陷问题，

​ 解决方案三个：

​ overflow: hidden; (推荐，溢出内容的部分会隐藏)

​ padding：0.1px; (值不小于等于0即可)

​ border:1px solid; (麻烦)

隐藏和显示

1. display实现隐藏

隐藏，清除元素。 隐藏后不占据原来的位置。

​ display: none;

• display显示元素

配合display none; 作为显示元素使用“值是除了none以外的任何一个均可

​ display: block;

2. visibility实现隐藏

​ 隐藏元素：隐藏后还占据原来的位置。

​ visibility: hidden;

• visibility：显示元素

配合 visibility: hidden; opacity透视度

​ visibility: visible;

3. opacity透视度实现隐藏

​ 设置元素的透视度，取值范围0-1，0为完全透视，1为完全不透视

​ opacity: 0;

• opacity透视度:显示元素

配合opacity: 0; 作为显示元素使用

​ opacity: 1;

基线对齐

基线：多个元素水平方向排列，元素的垂直方向按照基线进行对齐

​ 出现情况：空快或图片默认的的基线在底部

​ 文本元素基线在四线三格的第三线“文本的中下部分”

​ 解决方案：vertical-align:middle;“基线调整 之中线"top"基线调整值顶部"bottom"基线调整至底部"baseline"四线三格的第三线”

​ 使用场景：1.流式布局中元素一行排列2.图片和文本在一行片列不对其的问题

顶线对齐

​ vertical-align: top;

中线对齐 ：利用中线对齐 来实现基线对齐

​ vertical-align: middle;

底线对齐

​ vertical-align: bottom;

鼠标样式

鼠标样式：就是更改一些用户操作样式，以便提高更好的用户体验

 <ul>
        <li style="cursor:default;">我是默认的鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
     </ul>

z-index堆叠

<style>
img {
            width: 200px;
            height: 150px;
            position: absolute;
           z-index: 49;
        }

        h1 {
            position: absolute;
            z-index: 50;
        }

        /* 
        拥有最高堆叠顺序的元素总是出于堆叠顺序较低的元素的前面。元素可以拥有负的z-indx属性值
        z-index仅能在定位元素上奏效 
        */
    </style>
</head>

<body>
    <!-- z-inder 属性指定一个元素的堆叠顺序 -->
    <h1>This is a heading</h1>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-15%2F5f87e84f24b60.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665631391&t=955d3ce00636ebe52344cbd623731543"
        alt="">
    <p>该吃饭了</p>
</body>

描点

​ 锚点：像迅速定位器，可以迅速找到与之绑定的元素
​ 使用方式：
​ a标签的herf，和元素的id值绑定

  <style>
        ul {
            position: fixed;
            top: 200px;
            left: 20px;
        }

        ul a {
            display: block;
            width: 100px;
            height: 40px;
            background-color: aqua;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
        }

        ul li:nth-child(odd) a {
            background-color: azure;
        }

        div {
            height: 500px;
        }
    </style>
</head>

<body>
   
    <ul>
        <li><a href="#box1">1</a></li>
        <li><a href="#box2">2</a></li>
        <li><a href="#box3">3</a></li>
        <li><a href="#box4">4</a></li>
    </ul>
    <div id="box1" style="background-color: purple;">1</div>
    <div id="box2" style="background-color: olive;">2</div>
    <div id="box3" style="background-color: orangered;">3</div>
    <div id="box4" style="background-color: orchid;">4</div>

</body>

雪碧精灵图

什么是精灵图：
就是将很多个图片放置到一个大的图片上面，精灵图主要是当做背景图使用的。
之所以要将多个图片放到一张大图上，是因为很多时候我们的背景图片都是放在服务器上的，当需要使用某个图片时需要向服务器发送请求资源，如果图片过多服务器压力会比较大，所以精灵图可以减轻服务器压力。
使用方式：背景插入

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 大图的尺寸：652 * 553  */
        /* 方式一：跟距图片的大小设置精灵图片的大小 */
        .part1 li{
            width: calc(652px / 6);
            height: calc(553px / 5);
            border: 1px solid;
            background-image: url(”精灵图“);
           
        }
        .part1 li:nth-child(1){
            /* 默认背景图平铺
            x为正值，显示的是左侧拼接的图片“Y轴同理” 
            查找某个精灵图：遵循正值“倒着找”，负值“正着找”*/
            background-position:-200% 300%;
        }

        /* 方式二：窗口的大小给定情况。 
        原理：设置显示范围的固定大小，设置背景图的大小符合一张小图的显示宽高即可*/
        .part1 li:nth-child(3){
            width: 50px;
            height: 50px;
            background-size: 300px 250px;


            background-position: 200% -200%;
        }

    </style>
</head>
<body>

    <ul class="part1">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>