华清远见HTML+css总结-CSDN博客

本文链接：https://blog.csdn.net/solxxi/article/details/128527620

本文详细介绍了HTML中的标签、属性及其语义化，包括标题、段落、列表、图像和超链接等常见元素。此外，还涵盖了CSS的基础知识，如选择器分类、盒模型、定位、浮动和清除、透明度及动态伪类。内容还包括了CSS中的定位、弹性盒模型和表格、表单的相关属性。

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

 <table>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
     </table>

表格的合并

<!-- 单元格的合并 -->
     <h1>单元格合并操作</h1>
     <table>
        <tr>
            <!-- rowspan 纵向合并 -->
            <td rowspan="2">1</td>

            <!-- calspan 横向合并 -->
            <td colspan="2">1</td>

            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
           
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>

表单

html中使用form标签来创建一个表单!

form的属性:

action 表单要提交的服务器地址 ,填写服务器的地址!

表单的控件元素: input(输入型的控件根据该控件的type值的不同!所展示的控件形态也不同!)

input:

- type属性:

常见的type属性(常用的):

- text 文本输入框

- password 密码输入框

- radio 单选框

- checkbox 多选框

- button 普通按钮控件

- submit 提交按钮控件

- reset 重置按钮控件

- name属性

注意:数据要想提交给服务器,那么每一个表单控件都应该指定一个name属性值

- value属性

value属性是与name属性进行搭配使用, 一个表单控件必须存在 name和value

name和value就会构成一种数据格式: name=value

- placeholder属性用于输入框的提示描述

- disabled 禁用控件并且数据不能提交给服务器

- readonly 只读控件数据不能修改但是可以提交给服务器

- 其他的表单控件

按钮 button

下拉列表 select

下拉项 option

- label 标签,该标签的作用是用于绑定输入控件! 利用for属性绑定控件的id值

<form action="">
        <div>
             <label for="myuser">账号:</label>
             <input id="myuser" type="text" name="user"  value="admin"  >
        </div>
        <div>
            密码: <input type="password" name="pwd">
        </div>
        <div>
            性别: 
            男<input type="radio" name="sex" value="男">
            女<input type="radio" name="sex" value="女">
        </div>

        <div>
            爱好: 
            篮球<input type="checkbox" name="ah" value="篮球">
            游泳<input type="checkbox" name="ah" value="游泳">
   
        </div>


        <div>
            <input type="reset" value="重置按钮">
            <input type="submit" value="提交按钮">
        </div>

        <div>
            居住城市:
            <select name="city" id="">
                <option value="cd">成都</option>
                <option value="cq">重庆</option>
                <option value="sh">上海</option>
            </select>
        </div>

        <div><button type="button">按钮</button></div>

        <input type="file">

       
     </form>

计算属性

/* 先往右侧移动200px,然后再往左侧移动100px */

/* 50%-100px */

/* calc是计算属性,专门用于参数值的计算,里面合法的运算符 + - * / */

/* 计算属性中,运算符的左右两侧必须有空格 */

 left: calc(50% - 100px);

轮播图

/* 为该元素设置动画帧 */

/* 动画帧的名字 move */

/* 动画整体持续的事件 5s */

/* 动画整体播放的速度是匀速播放 linear */

/* 动画重复播放 infinite*/

animation: move 5s  linear  infinite;

/* 创建了一段动画帧 */

 @keyframes move {
            from {
                margin-left: 0px;
            }


            to{
                margin-left: 500px;
            }
        }

弹性盒

flex (弹性盒)：

- 是css中的又一种高级的布局手段，它主要用来替代浮动的！

- flex可以使得元素具有弹性！让元素可以跟随页面发送变化！

- 弹性容器：为一个元素开启了flex时，该元素就是弹性容器，弹性盒

- 利用css的属性 display 开启

display:flex 将元素设置为块级弹性容器

display：inline-flex 将元素设置为行内块的弹性容器

- 弹性元素（项目元素）：弹性容器下的子元素就称作为，弹性元素！项目元素！

元素一旦开启了flex布局，那么该容器就自动生成两个轴线！

分别是主轴和侧轴

- 主轴：默认情况下，主轴就是横向的x轴，方向是从左往右

- 侧轴：默认情况下，侧轴就是纵向的y轴，方式是从上往下

注意：弹性元素，就会在主轴和侧轴上进行排列！

- css的属性设置

- 弹性容器设置相关的css属性

- 以下这些属性都是设置在弹性容器身上的！

1. flex-direciton 指定容器中的主轴和侧重方向！

可选值：

- row 默认值主轴是x轴方向是从左往右，侧轴是y轴，方向是从上往下

- column 主轴是y轴方向是从上往下，侧轴是x轴，方向是从左往右

2. flex-wrap 设置弹性元素是否在弹性容器中换行

可选值：

nowrap 默认值弹性元素不会换行

wrap 元素可以进行换行

3. flex-flow 该属性是 direciton和wrap属性的简写！

4. justify-content 分配主轴上的空白空间

可选值：

flex-start 元素从主轴的起点排列默认值

flex-end 元素从主轴的终点排列

center 元素居中排列

space-around 空白分布到元素的两侧

space-between 空白均匀分布的元素之间，开始元素顶格容器边缘，末尾元素顶格容器的边缘

space-evenly 空白均匀分布到元素

5. align-items 设置元素在侧轴上对齐的方式

可选值：

- streth 默认值，如果元素未设置高度或者宽度，则将元素沿着侧轴填满

- flex-start 元素不会拉伸，沿着侧轴起点对齐

- flex-end 元素不会拉伸，沿着侧轴终点对齐

- center 侧轴居中对齐

- baseline 文本基线对齐了解

6. align-content 分配侧轴上的空白空间，

注意：该属性只能用于容器开启了换行模式才能生效 flex-wrap：wrap

可选值：

flex-start 所有元素向侧轴的起点对齐

flex-end 所有元素向侧轴的终点对齐

center 所有元素向侧轴的中间对齐

space-around 空白分布到元素的两侧

space-between 空白均匀分布的元素之间

stretch 空白单向向元素一侧分配，产生间隙

- 弹性元素的属性：

1. order 排序数值越小排列越靠前默认为0

2. flex-grow 指定弹性元素的伸展系数元素的扩充默认情况元素不会自动扩充

3. flex-shrink 指定弹性元素的压缩当空间不够时对元素进行压缩默认压缩系数是1

4. flex-basis 指定元素的初始值大小，元素的宽高属性！该属性要优于元素的宽高属性！

5. flex 属性是 flex-grow ， flex-shrink ， flex-basis 的简写

- flex

auto ： 1 1 auto

none ： 0 0 auto

6. align-self 该属性是用来覆盖当前弹性元素上的aline-items属性值的，特殊化的对待

- flex-start

- flex-end

- center

- baseline 了解

- stretch 拉满侧轴

注意：弹性元素既可以作为某一个弹性容器的弹性元素，也可以作为其他元素的弹性容器！

元素一旦变成弹性元素后，则不再区分行元素，块元素，行内块元素

大小单位

/* height: 100px; */

/* em: 当前元素的字符宽度 1em = 1个字符宽(font-size) 1em = font-size值 */

/* rem: 根节点(html元素)的字符宽 1rem = html元素的一个字符宽(font-size) */

/* height: 2em; */

/* font-size: 20px; */

/* vh(viewport-height): 相对于视口高度的百分比 */

height: 100vh;

/* vw(viewport-width): 相对于视口宽度的百分比 */

width: 50vw;

颜色

/* 颜色值的表达方式有多种： */

/* 预置文本: 代表颜色的英文单词 */

/* transparent: 透明 */

background-color: transparent;

/* rgb值: 在计算机图形学中，红(red)绿(green)蓝(blue)是计算机的三原色 */

/* 使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色 */

/* 每个参数的取值范围是：0~255 (256是一个字节的大小Byte)*/

/* background-color: rgb(74, 40, 40); */

/* rgba值: rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明 */

/* background-color: rgba(204, 20, 20, 0.5); */

/* HSL值: H色调 S饱和度（灰度） L代表亮度 */

/* background-color: hsl(0, 36%, 41%); */

/* 十六进制值: 以井号开头 */

/* 十六进制数由1~10超过10的部分由A~F表示 */

/* 前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色 */

/* background-color: #2233ff; 如果颜色值成对出现，可以简写为： #23f */

/* background-color: #f00; */

/* 带透明度的十六进制 */

/* background-color: #ff00ff7b; */

三角形

<style>
      .box {
        /* 必须设置宽和高 并且必须为0 */
        width: 0;
        height: 0;

        border-style: solid;
        border-width: 50px;
        border-color: #ff0000 transparent transparent transparent;
      }

      .box1 {
        width: 0;
        height: 0;

        border-style: solid;
        border-width: 50px;
        border-color: transparent #ffff00 transparent transparent;
      }

      .box2 {
        width: 0;
        height: 0;

        border-style: solid;
        border-width: 50px 20px;
        border-color: #ffff00 #ffff00 transparent transparent;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
  </body>