html和css进阶

一、表单


input

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

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

表单的作用:供用户输入

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

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

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

文本框:text

密码框:password

单选框:radio(实现单选功能)

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

复选框:checkbox

上传文件:file

提交按钮:submit

普通按钮:button

重置按钮:reset

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

文本域:textarea标签

  1. 焦点框:获得焦点 失去焦点
  2. 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>

三、常用特殊效果小标签


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

功能

强调语义

普通语义

倾斜

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会撑大盒子:

  1. 手动减宽度高度;
  2. 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号和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>

十、小知识点


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

原文发布于微信公众号 - 小闫笔记(Pythonnote)

原文发表时间:2018-12-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券