专栏首页木子昭的博客<干货>5分钟快速回顾HTML CSS

<干货>5分钟快速回顾HTML CSS

一.html

(一)标签类型

  • 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置)
    • div(无语义)
    • 列表 ur/ol/li
    • 段落 p
    • 标题 h1-h6
    • 自定义列表 dl/dt/dd
    • 其它常见问题
      • 块元素的居中问题
        • 块级元素左右居中:先设置自身width;然后,margin: 0 auto;
  • 2.内联元素(行内)[不支持width, height, margin上下,padding上下]
    • 常用内联元素
      • span(无语义)
      • 超链接标签 a
        • src可以为空,但一定要写
    • 其它常见问题
      • 子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size
      • 内联元素居中:由于内联元素自身不支持width,使用在父级元素设置text-alian : center 的解决方案
  • 3.内联块元素(支持全部样式的内联元素)
    • 转换为内联块
      • 设置样式 display: inline-block;
    • 其它常见问题
      • 可以把内联块元素看做内联元素的进化版,
      • 通过设置float属性也会将元素转换为内联块
      • 通过定位属性fix, absolute都可以将元素转换为内联块

(二)盒子模型

  • 1.盒子图

盒子图

  • 2.样式重置(reset.css) h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{ /*去掉默认样式*/ margin: 0; padding: 0; } ul,ol{ /*去掉左边的点或者数字*/ list-style: none; } a{ /*去掉下划线*/ text-decoration: none; } em,i{ /*去掉斜体*/ font-style: normal; } b,strong{ /*去掉加粗*/ font-weight: normal; } /*清除浮动影响 和清除margintop塌陷 合在一起的写法*/ .clearfix:before,.clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ /*兼容ie*/ zoom:1; }

(三)表单<form></form>

  • action
    • 提交表单到对应的视图函数
      • <form action="localhost:8000/index5" method="get"></form>
  • label(注意拼写)[关联对应的id]
    • for="某inputid"
      • <label for="user_name">用户名</label>
  • input
    • type
      • 文本(用户名)
        • <input type="text" id="user_name">
      • 密码
        • <input type="password" id="passwd" name="user_passwd">
      • 单选框(性别)[相同的name实现互斥选择] <input type="radio" name="sex" value="1">男 <input type="radio" name= "sex" value="0">女
      • 多选框(爱好) html <input type="checkbox" name= "hobby" value= "work">工作 <input type="checkbox" name= "hobby" value = "learn">学习 <input type="checkbox" name= "hobby" value="play">娱乐
      • 上传文件
        • <input type="file">
      • 提交
        • <input type="submit" value="注册">
      • 重置
        • <input type="reset" value="重置">
  • textarea(多行输入框)
    • <textarea name="" id="" cols="30" rows="5">个人介绍</textarea>
  • select
     <select name="loc">  
       <option value="1">北京<option>  
       <option value="2">上海<option>  
       <option value="3">广州<option>  
     </select>  

一点体会:

提交表单时,只会识别到标签以内的内容,所以,多选框 多选框,下拉框一定要添加value,且值必须唯一

(四)列表

  • 1.有序<ol>
      <ol>  
        <li>第一季</li>  
        <li>第二季</li>  
        <li>第三季</li>  
      </ol>  
  • 2.无序<ul>
     <ul>  
       <li>百度</li>  
       <li>腾讯</li>  
       <li>阿里</li>  
     </ul>  
  • 3.清除样式
    • list-style:none;

二.css

(一)定位的所有套路:

  • 1.相对定位(相对自己定位):
    • css属性
          position: relative;  
          left: 50px;  
          top: 50px;  

说明: 针对自身设置相对定位 有上左,上右,下左,下右,四种定位方式 元素自身未脱离文档流,依然占据了原位置

  • 2.绝对定位(相对于父元素定位)
    • 父元素设置
      • position: relative;
    • 子元素设置 position: absolute; left: 20px; top: 20px;
    • 说明:
      • 子元素会针对父元素进行定位
      • 子元素已经脱离了文档流
      • 定位的四种方式同相对定位
      • 如果子元素找不到父元素,则会一直向上找,直到找到最外层标签页面
  • 3.固定定位(相对于浏览器定位)
    • 元素css设置 position: fix; right: 20px; bottom:20px
    • 说明:
      • 位置会固定住,不随滚动条滚动
      • 脱离文档流
  • 4.层级关系:
    • z-index属性相当于Photoshop中的图层属性,数值越大越靠上,实际开发过程中,取值从1000开始,每次增加一百,如果意外增加了需求,预留的100个层级可插入新的需求层
  • 5.一些细节:
    • absolute,fix能把元素变成内联块
    • position还有一个默认值为static

(二)浮动注意点:

  • 浮动元素有左浮动(float:left)和右浮动(float:right)两种
  • 浮动元素碰到父元素边界或其他元素才会停下来
  • 父元素必须清除浮动,才能被子元素撑开
  • 相邻浮动的块元素可以并在一行,超出父级元素会自动换行
  • 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙)
  • 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素,形成文字绕图效果
  • 常见需求: 一组子元素,同时左浮动;同时右浮动;最后一个右浮动,其它左浮动

(三)引入方式

  • 1.内联式(新手模式) <div style="color:red;width:100px;"></div>
  • 2.嵌入式(练习模式) <style> div{ color:red; width:100px; } <style>
  • 3.外链式(项目模式)
    • <link rel="stylesheet" href="..css/index.css">

(四)选择器

  • 层级选择器div p{}
  • 标签选择器 p{}
  • 多标签同时选 p,span{}
  • 直接子类选择器 .bilibili > p{}
  • 类选择器 .bilibili{}
  • 伪类选择器 .bilibili:hover{}
  • 选择器权重
    • 权重10000:!important
    • 权重1000:内联样式 style
    • 权重100:ID选择器
    • 权重10:伪类, :hover
    • 权重为1:div.p

(五)容易忘的属性

  • 字体 color: red;
  • 清除下划线 text-decoration:none;
  • 行高 line-height: 24px;
  • 字体类型 font-family:"Microsoft Yahei"; font-size: 20px; font-weight: bold;
  • 字符间距(强迫症福音) letter-spacing:10px;
  • 边框 border: 1px solid red;

(六)display选项

  • 内联元素: display: inline;
  • 内联块元素 display: inline-block;
  • 块元素 display: block;
  • 隐藏元素 display: none;

HTML CSS导图

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 长时间保持ssh连接不断开的技巧

    经常用ssh连接服务器的小伙伴, 可能会像我一样, 需要时不时地恢复一下断开的连接, 原因是NAT防火墙喜欢对空闲的会话进行超时处理,以确保它们状态表的干净和内...

    zhaoolee
  • javascript 拖拽图片挑战滑稽大佬

    zhaoolee
  • 2021年Windows比macOS更有光明的未来

    对于程序员而言,选择macOS,主要是因为Windows自带的命令行工具太难用,而macOS的命令行工具,非常接近Linux,一行命令搞定开发环境,非常省心省力...

    zhaoolee
  • CSS 块元素、内联元素、内联块元素

    元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

    Devops海洋的渔夫
  • 重拾CSS规范之从盒类型谈起

    今天要写的不是CSS标准盒模型和IE盒模型,那个烂大街了。今天要深入探讨的是CSS去控制页面布局背后的那一套规则,页面就是由很多个各式各样的盒组成的,那我们就聊...

    江米小枣
  • 浮动(float)

    html语言当中另外一个相当重要的概念----------标准流!或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元...

    星辰_大海
  • Github项目推荐 | 用LaTeX绘制贝叶斯网络、图模型和框架

    Awesome LaTeX drawing - Drawing Bayesian networks, graphical models and framewor...

    AI研习社
  • Python:使用Counter进行计数

        计数统计就是统计某一项出现的次数。实际应用中很多需求需要用到这个模型。比如测试样本中某一指出现的次数、日志分析中某一消息出现的频率等等‘这种类似的需求有...

    py3study
  • 这次用近万字的讲解带你干掉堆!

    大家好,我是多选参数的程序锅,一个正在捣鼓操作系统、学数据结构和算法以及 Java 的失业人员。最近忙着搞论文,还有刷刷 LeetCode 上的题,推文的事被耽...

    syy
  • 这或许是对小白最友好的python入门了吧——4,列表

    有些时候我们要用python处理一系列元素,这个时候我们可以把这一系列元素放到列表中。比如我们考试科目。 请不要在此处直接复制代码! 在python中,列表用“...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券