HTML基础-01

一些琐碎的笔记。

【>】可以指到下一级的标签 table>tr>td> table>tr3>td3

无序列表： 有序列表： 自定列表： ul>li2 ol>li3 dl>dt{标题}>dd{内容}*3

div标签纯盒子，margin有垂直塌陷被包含 div是独占一行的，span不能独占一行，span是可以接在后面的，块的大小就是内容的大小。 rowspan，合并行；colspan，合并列

padding就是边框里面内容的距离。所以要加上高和宽，才是一个正方形的大小，可以是固定不变的

pading外面还有border边框，所以要再加内容

margin是内容区域到边框的距离，标签标签之间的距离， border就是边框

div标签是标签选择器

在vsco， alt+shift+f变成标准格式

*{}里面定义的内容是全部网页的内容

*{ 去页面默认边距 margin:0 padding:0 }

 界面跳转：  window.location.href = "./conpanyManger.html"

   <textarea v-model="addData.title" rows="3" cols="45" style="border-radius: 5px; border: 1px solid #dedede; maxlength: 70; outline: none">

  文本内容

</textarea>

富文本域：

<a-form-model-item label="新闻详情">

          <rich-text-editor v-model="addData.content"></rich-text-editor>

        </a-form-model-item>

发现一些变量没法使用的，是因为优先级不是它，可以在那个style变量那里，加上！importment,就可以了

表格的基本语法

<table>
    <tr>
        <td></td>
    </tr>
</table>
```
> 1. <table\>标签用于定义表格
> 2. <tr\>标签用于定义表格中的行(row), 嵌套在<table></tablbe>中
> 3. <td\>标签用于定义表格中的单元格, 嵌套在<tr></tr>中
> 4. td: table data
    表格属性

> 1. align: left, right, center: 规定表格相对周围元素的对齐方式
> 2. border: 1或者"", 规定表格单元是否拥有边框, 默认为"", 表示没有边框
> 3. cellpadding: 像素值, 规定单元边沿与其内容之间的空白, 默认1像素
> 4. cellspacing: 像素值, 规定单元格之间的空白, 默认2像素
> 5. width: 像素值或者百分比: 规定表格的宽度

按钮：

1.密码 <input type="password" >
2.上传文件<input type="file" >
3.重置信息 <input type="reset" value="重置">
4.提交信息<input type="submit">
5.方形选框<input type="checkbox">
6.圆形选框<input type="radio">
 <td>性别:</td> 【单选性别】
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan">  男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"> 女</label> 
                <input type="radio" name="sex" id="baomi"> <label for="baomi"> 保密</label> 

            </td>
7.下拉选框
 <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
8.内容输入框   <textarea>个人简介</textarea>

！important 就是优先级最高。在属性设置后面添加。

内联选择器就是style，通配符选择器优先级最低。 字体垂直居中，就是line-height等于字体高度，盒子高度

display：block；属性里面更改类别

position:fixed; /* fixed固定位置，怎么划都不会变 ,就是页面划到死都不会动，固定在那个位置 */

 .wrapper>ring.$*5

<div class="wrapper">
        <ring class="1"></ring>
        <ring class="2"></ring>
        <ring class="3"></ring>
        <ring class="4"></ring>
        <ring class="5"></ring>
    </div>

相对路径和 绝对路径：完整的路径

相对路径：就是你已经在这路径里面的了一半了，可以访问

一浮动原来的位置没有了，下面的就可以上来。 只影响标准流后面的元素，后面的可以上来，因为原来的位置没有了。 不影响前面的元素 （第二个浮动也上不去）

>文本垂直居中对齐: line-height == 盒子标签的高度(height)

>装饰文本: text-decoration: underline; line-through;

>文本缩进: text-indent: 2em;

# 选择器之间的权重问题

> !important: 正无穷

> 内联样式: 1000

> Id: 100

> 类, 伪类, 属性: 10

> 标签, 伪元素: 1

> 通配符选择器: 0

## display: block; inline-block; inline;

> block: 可以设置宽高, 独占一行: div, p, h1-h6, dt, ul

> inline-block: 可以设置宽高, 不独占一行:img, input, td

> inline: 不可以设置宽高, 不独占一行: a, span

## 定位

> 绝对定位

> 1. postion: absolute;

> 3. 相对于谁来定位?

> 如果父盒子都没有定位属性, 则相对于文档来进行定位;

> 如果父盒子有定位属性, 则相对于最近的有定位属性的父盒子进行定位.

>

> 相对定位(relative):

> 1. position: relative;

> 3. 相对于自身进行定位

> 给父盒子设置相对定位, 子盒子设置绝对定位, 然后配合边偏移, 让子盒子摆在父盒子的指定位置

overflow: hidden; //取消因为浮动而失去的位置，就是依旧占位 满的溢出，

隐藏的 list-style:none; /* 设置字体的宽高和字体类型是没有任何类型

/ clear: both; / 全部div后面都加位置，就是清除浮动，不让上来

/ .clearfix::after {

content: "";}/ 清除浮动，使它虽然浮上去，但是还是占着位置

/ / ::after在最后加空的位置 */

ul li { /* 去点 */ list-style: none;}

.warpper .right ul li:hover { /* 右盒子的ul li 属性的效果 /

box-shadow: 0 20px 20px rgba(0, 0, 0, .1);

/ box-shadow: 影阴效果：上下偏移量；左右偏移量；影阴模糊的范围；影阴的颜色 / transform: translate3d(0, 2px, 0);

/ transform: translate3d(0, 0, 200px);3D旋转，左右，上下,凹凸效果 */ }

/* translate3d（x,y,z）x是左右，Y是凹进去出来，z是上下 ，移动效果*/

/*white-space: nowrap; 文本不换行， overflow: hidden; 隐藏超过的内容； text-overflow: ellipsis;超过的内容，自动用点点替代 */

左右的精灵图标 background: url(3.jpg) no-repeat -84px 50%;

/* no-repeat不重复 正常是从第一个图片开始，往左边拉-84px，就是负， 可以看到第三张照片，正中央的位置就是可以看到50%;*/

.warpper .prev:hover {

//hover就是鼠标触碰到的点击效果

background-position: 0 50%; }

.warpper .next:hover {

background-position: -42px 50%; }

/* hover，设置鼠标按上去的效果 -42px往左边拉的值，因为x和y轴，左边是负的*/ 因为图片是四连张，所以触摸出现效果，只需要移动图片位置即可

饱和度，透明度

   background: hsla(0, 0%, 100%, .4);  //饱和度
    border-color: rgba(0, 0, 0, .4);    //透明度

<!-- span，font这些都可以继承上一个标签的属性，设置图片大小，要在img里面自己设置 -->

为什么需要浮动?浮动可以让多个块级元素横向排列

float: left | right;

第10课：文字图标的引入方法：

  <link rel="stylesheet" href="font/iconfont.css">
    <!--1、将文字图标文件放到软件里面，在文件资源管理器中显示  >
    <!-- 2、导入最外面的元素名字， 具体图标的元素名-->
    <span class="iconfont icon-gouwuchekong"></span>