html和css进阶

小闫同学啊

发布于 2019-07-18 10:32:09

3.7K00

代码可运行

文章被收录于专栏：小闫笔记小闫笔记

运行总次数：0

代码可运行

一、表单

input

应用场景：登录注册搜索 --- 用户输入 input

他们的共同点是用户输入之后才可以进行

表单的作用：供用户输入

表单域 form action：提交地址 method提交方法get和post

5.0之前没有placeholder新增功能，之前是value（提示的文字需要用户删除，而且字的颜色也没有变暗）实现的

<input> -- type属性取值不同则功能不同

文本框：text

密码框：password

单选框：radio（实现单选功能）

单选功能：把input加name属性且保证取值相同即可
默认选中：xhtml1.0 checked=“checked”；html5.0如果k==v，省略等号引号保留一个单词也是键值对的意思 – checked
扩大触发区域（在添加文字也有选择功能的时候）：
1. Xhtml1.0：文字放到label标签里面，保证label标签的for属性值和radio的id属性值相同
2. Html5.0：文字和radio放到一个label标签里面即可

复选框：checkbox

上传文件：file

提交按钮：submit

普通按钮:button

重置按钮：reset

submit w3c已经封装好了提交的功能，后端不需要再写功能
重置按钮有重置这个功能，但是基本不用，没有需求
button按钮有提交功能，但是老是出错，不用

文本域：textarea标签

焦点框：获得焦点失去焦点
outline为none可以取消焦点框

下拉菜单：select嵌套option 默认选中selected

小拓展知识：

表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据，post是向服务器传送数据。 2.get是把参数数据 队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各 个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。 4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 5.get安全性非常低，post安全性较高。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    textarea{
        /* 禁用拖拽功能 */
        resize: none;
        width: 500px;
        height: 300px;
        /* 去掉焦点框 */
        outline: none;
    }
    </style>
</head>
<body>
    <!-- 将来发送数据 收集好之后再发送 -- 收集功能的是form标签  form:表单  表单域 -->
<form action="提交地址" method="post">
    <!-- form里面的功能标签叫表单控件 -->
    <!--  placeholder="请输入用户名" 是html5.0新增功能 -->
    <!-- **** 获取用户输入的内容就是获取value属性的值而已 -->
    文本框：<input type="text" value="设置会员名">
    <br><br>
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio" name="sex" value="man" id="nan"><label for="nan">男</label> <label><input type="radio" name="sex" value="woman" checked>女</label>
    <!-- 
        单选功能：input 加name=“” 取值相同: 
        只要表单就是为了提交数据：应该是键值对的方式提交，值是vlaue属性值，key是name属性值
        sex=man

        1.sex=man
        2.sex=woman  后边的键值对覆盖前面的键值对所以加name保证取值一样可以实现单选功能
     -->
     <br><br>
     复选框： <input type="checkbox" checked>读书 <input type="checkbox">旅游 <input type="checkbox">打游戏
     <br><br>
     上传文件：<input type="file">
     <br><br>

     文本域：
     <textarea></textarea>
     <br><br>

     下拉菜单：
        <select>
                <option>北京</option>
                <option selected>上海</option>
                <option>广州</option>
            </select>

     <br><br>
     <input type="submit" value="同意并注册">
     <input type="button" value="普通按钮">
     <input type="reset">
     <button>按钮</button>
</form>

</body>
</html>

二、表格

知道有这么个东西，碰到的时候能认识就好了，用的少，只在数据统计的时候用。

国内2005年互联网网站大量改版：从表格布局改版成div布局

表格布局：浏览器读取所有代码显示效果

Div布局：浏览器读取一部分代码则显示一部分效果

现在表格用来做网站的数据统计区域

表格 table

行 tr

单元格 td

表头 th

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--**** 结构：table嵌套tr，tr嵌套td，table是表格，tr是行，td是单元格 th是表头 -->
    <table border="1">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

三、常用特殊效果小标签

带有强调语义的标签，搜索引擎很喜欢，搜索关键字，抓取网页的时候，会更排名靠前。是一种技术推广手段。
在写标签的时候，提前写好，否则在加选择器的时候，推广改掉之后，你的属性都会变，省去麻烦。

功能	强调语义	普通语义
倾斜	em	i
下划线	ins	u
加粗	strong	b
删除线	del	s

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    b{
        font-size: 40px;
        color: blue;
    }
    </style>
</head>
<body>
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>删除线</s>
    <!-- 所有标签都是有语义的 ：强调语义   普通语义 -->
    <strong>python</strong>
    <em>emem</em>
    <ins>ins</ins>
    <del>del</del>
</body>
</html>

四、*选择器

选择器就是找标签的方法，找到之后让它去执行css。

组选择器写标签的时候顺序无所谓

1、层级选择器/后代选择器 -- 空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 空格父子级就是层级选择器：最终选中子级执行键值对 */
    ul li{
        color: red;
    }
    </style>
</head>
<body>
    <ul>
        <li>ul里面li</li>
        <p>pppppp</p>
    </ul>
    <ol>
        <li>ol里面的li</li>
    </ol>
</body>
</html>

2、组选择器 – 逗号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* body{
        color: red;
    } */

    /* 通配符选择器：选所有标签 */
    /* *{
        color: green;
    } */

    /* 逗号表示组选择器 */
    h1,span,div,p{
        color: blue;
    }
    </style>
</head>
<body>
    <h1>logo</h1>
    <span>span</span>
    <p>pppp</p>
    <div>divdiv</div>
</body>
</html>

3、伪类选择器：以冒号开头：hover -- 表示鼠标滑过鼠标悬停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <style>
    a:link{
        /* 单击前 */
        color: red;
    }
    a:visited{
        /* 单击后 */
        color: green;
    }
    a:hover{
        /* 鼠标悬停 */
        color: blue;
    }
    a:active{
        /* 点击时 */
        color: pink;
    }
    </style> -->
    <style>
    a{
        color: red;
    }
    a:hover{
        color: green;
    }
    </style>
</head>
<body>
    <!-- 伪类表示状态  超链接用到几率多  当什么什么时候 -->
    <!-- 伪类以冒号开头，后面紧跟一个w3c定义好的表示伪类的单词 -->
    <a href="#">东晓</a>
</body>
</html>

五、**盒子模型

5.1 布局

边框线：border：粗细颜色线条种类；

内边距 padding

外边距：margin

margin和padding的设置方法完全一样，可以英文单词，可以四值写法。

加border和padding会撑大盒子：

手动减宽度高度；
css3.0 启动盒子内减模式 box-sizing：border-box

占位尺寸：padding + border + content

手动写宽和高是css2.0上的作法；

css3.0上box-sizing：border-box

为了在形式上显示div的一个换行后的占位效果，外边距有可能显示的很多，其实没变。

5.2 边框线：

单独设置单独方向的边框线border-方向英文单词 top bottom left right

Solid – 实线

dashed – 虚线

dotted – 点线

5.2 padding-英文单词

5.3 padding多值写法

1：四个方向相同

2：上下左右

3：上左右下

4：上右下左

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 200px;
        background: #ccc;
        /* border 多值写法，各个值用空格隔开即可，值不分先后顺序 */
        /* border: 粗细  颜色  线条种类;   */
        border: 1px red solid;
        /* 内边距：边和内容之间的距离 */
        padding: 20px;
        /* css3.0 启动盒子内减模式的属性 */
        box-sizing: border-box;
        /* 外边距 margin */
        margin: 50px;
    }
    </style>
</head>
<body>
    <!-- 比喻句  标签 和 生活盒子： 快递盒：产品  纸箱子  填充物 -->
    <div>女装</div>
    sdfasdfasdf
</body>
</html>

盒子模型详解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        background: pink;
    }
    .box1{
        /* border-方向英文单词  top  bottom  left right */
        border-top:red 1px solid;
        border-right: 5px green dashed;
        border-bottom: 5px blue dotted;
    }
    .box2{
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 80px;
    }
    /* padding可以和border一样取多值写法？最多写几个值 */
    .box3{
        /* 4值： 上  右   下  左 -- 从上顺时针一圈 */
        /* padding: 10px 20px 40px 80px; */
        /* 3值: 上 左右 下 */
        /* padding: 10px 40px 80px; */

        /* 2值： 上下  左右 */
        padding: 10px 80px;
    }
    </style>
</head>
<body>
    <!-- border -->
    <div class="box1">box</div>
<br><br>
    <!-- padding -->
    <div class="box2">box</div>
    <br><br>
    <div class="box3">box</div>
</body>
</html>

版心居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 1000px;
        height: 300px;
        background: green;
        /* 版心居中保证margin左右方向一样 */
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <!-- 版心  居中：水平居中  1000 -1200 -->
    <!-- 版心：网页真实有效内容的标签 -->
    <div></div>
</body>
</html>

css初始化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
        margin: 0;
        padding: 0;
    }
    ul,ol{
        /* 去掉列表符号 列表样式  项目符号 */
        list-style:none;
    }
    </style>
</head>
<body>
    <!-- css reset -->
    <h1>logo</h1>
    <p>ppppp</p>
    <div>div</div>
    <ul>
        <li>lili</li>
    </ul>
</body>
</html>

六、overflow属性

解决内容查出父级如何显示的问题

hidden 溢出隐藏

auto 溢出滚动，超出了才滚动

scroll 溢出滚动，无论是否超出都滚动

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 200px;
        background: pink;
        /* 默认值 超出显示 */
        /* overflow: visible; */
        /* ****  超出隐藏  溢出隐藏 */
        /* overflow: hidden; */
        /****** 溢出滚动：如果内容超出则加滚动条 */
        overflow: auto;
        /* 溢出滚动：无论内容是否超出都显示滚动条的位置 */
        /* overflow: scroll; */
    }
    </style>
</head>
<body>
    <div>解决内容查出父级</div>
</body>
</html>

七、display属性

转换元素类型：换行 – 块标签不换行 – 行内

标签 == 标记 == 元素

块：换行，宽高生效，如果不写宽度占父级100% block

行内：不换行，宽高不生效，尺寸和内容一样大 inline

行内块：不换行，宽高生效 inline-block

Display：none 隐藏配合js

元素类型 == 标准流/文档流

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        background: green;
        /* display: inline; */
        /* display: inline-block; */
        /* 不占位隐藏 */
        /* display: none; */
        visibility: hidden;
    }
    span{
        width: 500px;
        height: 300px;
        background: blue;
        display: block;
    }
    /* 
        不换行的标签 -- 行内：书写宽高不生效；尺寸和内容一样大
        换行的标签 -- 块：书写宽度高度生效，不写宽度，宽度和父级一样大
        行内块 ：宽度高度生效，在一行显示
        拓展：浏览器执行 行内和行内块标签的时候当做文字处理，如果是文字之间敲空格或回车会识别一个空格的距离
    */
    </style>
</head>
<body>
        <div>div</div>
        <div>div</div>
        <span>span</span>
        <span>span</span>
</body>
</html>

八、**浮动

浮动：让块标签在一行没有间距的显示

None 默认值

Left 标签都左侧对齐显示

Right 右侧对齐显示

浮动的时候就是元素不再占用标准流的位置，但是会占用上层位置，就好像浮起来一样。

下面三个盒子，都设置了左浮动的时候，会按书写代码的先后顺序，依次排开。
如果是右浮动的话，还是按书写代码的先后顺序依次排开。也就是都设置浮动了，那么他们都浮起来了，会占用上面的位置。
如果是一个设置了左浮动，但是另外两个没有设置左浮动，那么就会出现下面的状况：1号设置了左浮动，他会不占用标准流的位置，浮起来，那么2号和3号会从标准流从头开始排序，也就是会出现1号套在了2号里面。（举的例子是下面的代码显示，不代表其他。）其他的话，就是相当于1号浮起来了，2号会从头开始，忽略了1号的位置。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width: 100px;
        height: 100px;
        background: red;
        float: right;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: green;
        float: right;
    }
    .box3{
        width: 300px;
        height: 300px;
        background: blue;
        float: right;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

九、**定位

让任意的标签叠加显示

Static – 静态定位默认值

相对 relative

    <style>
    div{
        border: 1px solid red;
        position: relative;
        left: 200px;
        top: 200px;
    }
    /* 
        特点：
            1、参照物：它自己原来的位置
            2、占位
            3、不改变元素类型特点
    */
    </style>

绝对 absolute

    <style>
    div{
        border: 1px solid red;
        width: 500px;
        position: absolute;
        left: 0;
        top: 100px;
    }
    /* 
        特点：
            1、参照物：以最近的已经定位的父级为参照物，如果没有这样的父级则以浏览器为参照物
            2、不占位脱离标准流
            3、元素类型特点:行内块
    */

固定 fixed

    <style>
    div{
        border: 1px solid red;
        width: 500px;
        position: fixed;
        left: 0;
        top: 0;
    }
    /* 
        特点：
            1、参照物：浏览器
            2、不占位脱离标准流
            3、元素类型特点:行内块
    */
    </style>

改变定位标签的位置：配合偏移量属性 left top bottom right

K：v;

Left:xx;

占位：就是我离开了原来的位置，但是原来的位置还给我留着。

固定定位和绝对定位最大的区别就是，设置了固定定位的元素不变化，但是网页其他内容会动。就好像网站里面，那些讨人厌的小广告，好像粘在了屏幕上一样，一直不改变位置。

只要是以浏览器为参照物，那么屏幕的分辨率就会干扰位置。

定位的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* 
        1、****验证子级绝对父级相对
        2、****父级绝对导致居中不生效 -- 绝对定位标签水平垂直居中
        3、定位的标签z-index改变显示顺序
        4、opacity测试内容和背景透明
        5、background只透明背景
    */
    .father{
        width: 500px;
        height: 300px;
        border: 1px solid black;
        margin: 0 auto;
        /* position: relative; */
        position: absolute;  /* 绝对的定位元素类型具备行内块特点：一行显示多个 auto无法进行计算*/
        left: 50%;
        margin-left: -250px;
        top: 50%;
        margin-top: -150px;
    }
    .father div{
        width: 100px;
        height: 50px;
    }
    .son1{
        background: green;
        position: absolute;
        left: 50px;
        top: 30px;
        z-index: 9;
    }
    .son2{
        background: pink;
        position: absolute;
        left: 100px;
        top: 50px;
        z-index: 10;
        /* opacity: 0.3; */
        background: rgba(0,0,0,0.5);
    }
    </style>
</head>
<body>
    <!-- 工作中：相对和绝对配合使用： 子级绝对，父级相对 -->
    <!-- 定位默认后来者居上 z-index，取值是整数，取值越大显示顺序越靠上 -->
    <!-- 设置透明度 完全透明  完全不透明  半透明 -->
    <!-- opacity:0-1闭区间 内容和背景一起透明 -->
    <!-- 只透明背景：background:rgba(1,2,3,4); r==red g==green b==blue a==alpha 0-255 -->
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>
</body>
</html>

十、小知识点

div 默认有换行的功能
dr标签也是换行
工作中很少用&nbsp；空格的实体符号，到时候会用距离调整
有的网站刷新页面后单选框默认有一个选中的选项，因为根据数据处理，用户群体默认一选项占比大，节省大部分用户的时间成本。
浏览器会默认给盒子一些值，我们需要将这些值取消，这些代码百度上都有，开源的。
下面这些标签都被废弃了，兼容性不好。blockquote缩进标签一个块的大小；fieldset线中有个缺口写文字；hr做水平分割线用；pre格式化输出（代码里面文字原样输出到网页位置）；
div没加宽度，那么会默认和父级的宽度一样；

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-12-11，如有侵权请联系 cloudcommunity@tencent.com 删除

css