HTML/CSS 知识点

时间:2022-01-06 11:20:13

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记

整个前端开发的工作流程

  1. 产品经理提出项目需求
  2. UI出设计稿
  3. 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)
  4. 前后台的交互
  5. 测试
  6. 产品上线(后期项目维护)

互联网原理

  1. 当用户在浏览器输入网址的时候,就会发送到对应的服务器,请求该网址对应的网页信息
  2. 服务器会把该网址对应的网页资源,都下载到你电脑的临时文件夹
  3. 临时文件夹中的资源,通过浏览器显示出来(所以,我们第二次请求网站的时候,速度会快很多)

元素

  • 行内元素:一行中有n多个行内元素,行内元素不能设置宽和高
  • 块元素:一个块元素,独自占一行;
  • 行内块元素:一行中可以有多个行内块元素,但是可以设置宽和高

html骨架结构

  • !DOCTYPE..文档声明头(html5,html4.01,XHTML)
  • 在html4.01和XHTML中各有3个小规范
    1. strict 严谨的
    2. transitional 普通的
    3. frameset 框架
  • html:超文本标记语言;里面用的都是"标签对儿"
    1. head
    • meta(charset:UTF-8,GB2312)
    • <meta name="description" content="要描述的内容"/>
    • <meta name="keywords" content="关键字,关键词"/>

      (以上两个meta都是为了SEO优化)
    • <title>页面的标题</title>
    1. body
    • 标题<h1></h1><h2></h2>
    • 段落 p:虽然p是块元素,但是他里面放的也是图片,文字;
    • span:里面用来放文本:图片,文字;
    • a链接<a href="要跳往的地址">
    • 图片<img src="相对地址/绝对地址"
  • css:写在 里面
    • 样式的基本语法:

      选择器(div){

      key:value

      }
    p{
    height:40px;
    line-height:40px;
    background-color:red;
    }
    • 选择器:
      1. 标签选择器:div,h,p,a,img,span
      2. class选择器:.xinxi

        (千万不要用汉字和数字开头做为class名,一定要用英文)

html更多解读

  • html只考虑标签嵌套,跟tab和空格无关,无数个空格,也只算作一个
  • 图片标签[图片上传失败...(image-fd7aaf-1518537900016)]
    • 相对路径:以当前页面为出发点查找的;(./ 或 不写,找到父级../)
    • 绝对路径:都是以http开头的;例如:http://i1.piimg.com/567571/f3f79e8903424ea4.jpg
    • 图片标签上有两个常用属性,src属性:引入图片地址; alt标签:图片无法正常加载时,用来替代的文字;(alt也可以省略)
  • a链接常用的属性
    1. href:'要跳往的地址',href的作用
    • 可以填写绝对路径,跳到直到的网页
    • 可以写#:1)不确定地址的时候 2)简单的回到顶部效果
    • 利用锚点进行页面切换
    1. title:鼠标移上时的提示
    2. target:打开方式(默认的_self当前页面打开; _blank新页面打开)
    3. 这些属性中,title和target都可以省略;
  • a链接的锚点使用
    1. 本页面各个模块之间的相互跳转
    <div id="#div1"></div>
    <a href="#div1"></a>

    2 实现不同页面之间,不同模块的相互跳转

    <a href="detail.html#detail1"></a>

列表

  • 无序列表:无序列表中的li也是容器;
<ul>
<li></li>
<li></li>
</ul>
  • 有序列表
<ol>
<li></li>
<li></li>
</ol>
  • 定义列表:dl,dt,dd都是容器
<dl>
<dt>表头</dt>
<dd>详情介绍</dd>
</dl>

表单

  • 表单用
  • 输入文本框 <input type="text" placeholder="默认提示"/>
  • 输入密码 <input type="password" placeholder="默认提示"/>
  • 单选按钮:单选按钮组,一定要加上name,否则无法实现单选效果;
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
  • 多选框 <input type="checkbox" checked/>

  • 下拉单

<select>
<option name="city" value="bj">北京</option>
<option name="city" value="sh">上海</option>
<option name="city" value="sz">深圳</option>
<select>
  • name和value主要用于前端向后台提交数据;
  • id:
    1. 设置样式(不建议)
    2. 在JS阶段,用来获取元素
    3. id配合a链接,进行锚点设置;
  • 留言框:<textarea name="" value="" cols="" rows=""></textarea>

按钮

  • 普通按钮 type=button
  • 提交按钮 type=submit
  • 重置按钮 type=reset

选择器

  • 标签选择器:div h1~h6 p span a img ul li ol dl dt dd input select

添加一个小icon的步骤:

  • 到官网上去取图片(以京东为例):
    1. https://www.jd.com/favicon.ico
    2. 把以上图片另存为,存到电脑中
    3. 注意:把icon图标放到文件夹的"根目录";
    4. 在html页面中加入:<link rel="icon" href="favicon2.ico" type="image/x-icon"/>

一个完整的页面由三部分构成:

  • html:超文本标记语言
    • 通过语义化标签,搭建页面"结构"
  • css:层叠样式表
    • 负责页面"样式",美化页面的
  • js:轻量级的脚本语言;交互指的是两个地方(行为)
    • 前端自己在页面上写的"动效"
    • 前后台的"数据交互"

      结构,样式,和行为三者相结合

css的引入方式

  1. 嵌入式;(内嵌式)
<style>
body{
height:100%;
background-color: red;
}
</style>
  1. 行内样式
<body style="height:100%; background: #333333">
  1. 外链式(真正的开发,用的都是外链)
<link rel="stylesheet" href="style.css"/>

css的优先级

  • 行内>内嵌>外链

css常见属性和样式

  • 当设置错误的时候,在chrome的控制台,会有黄色的叹号,进行提示
  • color:颜色值; 颜色有三种表示方法

    快捷键:c+tab
    • 用英文:red
    • rgb(255,0,0)
    • #fff
  • font-size:字体大小
    • 快捷键:fsz30->font-size:30px

      font:400 14px/28px "宋体";
  • background:添加背景

    图片默认是横向重复和纵向重复
    • 位置:
      • 横向位置:left center right
      • 纵向位置:top center bottom
    • 综合写法:background: url("images/bg2.png") no-repeat left center red;
      • background-image:url("图片地址")
      • background-repeat:no-repeat; /repeat-x;/repeat-y
      • background-position:0 0
      • background-color:red
  • 字体是否倾斜
    • font-style:italic 倾斜/ normal 正常
  • 下划线和删除线
    • text-decoration: line-through; 删除线
    • text-decoration: none; 去除下划线
    • text-decoration: underline;添加下划线

css中的选择器:

  • 1.标签选择器:div p ul li dt dd em i u del strong b input label from table
    • 缺点:只能进行共性的操作,无法个性操作
  • 2.class选择器
  • 3.id:
    • .class名,同一个页面能有无数个相同的class名
    • #id名,同一个页面只能有一个ID名;(ID名是不能重复的)
    • 在真正的开发过程中,class是用来设置样式的,id是用来获取元素
<div class="div1 div2 div3" id="div1"></div>
  • 4.后代选择器:div p(把div容器下,子子孙孙的p元素都选择上了)
  • 5.子选择器:div > p(选择div容器下的儿子);兼容IE7+
  • 6.交集选择器: div.div1
  • 7.并集选择器:div,p
  • 8.通配符*:代表所有的元素
  • 9.序选择器:兼容IE8+
    • div > p:first-child
    • div > p:last-child
  • 10.下一个兄弟选择器 ul li+li{} 兼容IE7+

开发常用的浏览器

  • chrome
  • IE7~11
  • firefox

CSS的继承性和层叠性

  • 以font开头的属性都能够继承;line-height
  • color可以继承
  • text开头的也可以继承,比如text-align

css权重

  • !important权重无穷大;(少用为好)
  • id的权重大于class的权重

css盒子模型

  • css盒子模型由5部分:
    • 内容的宽高+padding+border+margin
  • 单行文本的居中:height = line-height
  • 多行文本的居中,padding和line-height
  • padding:
    • padding是内边距

    • padding的颜色和内容的颜色一致;background-color填充的是border以内的颜色

    • padding是复合值

      padding:30px; ->pl30; pt30;pr30;pb30

      padding:20px 30px; ->上下为20px 左右30px

      padding:10px 20px 30px; -> 上10px 左右20px 下30px

      padding:10px 20px 30px 10px; 上 右 下 左

      如果现设置padding:30px

      再设置padding-left:10px

      请问最后的值各是多少?

      左10px; 其他都是30px

  • margin:外边框
  • border:
    • border:1px solid #000;
    • border-width
    • border-style:solid(实体),dashed(虚线),dotted(点)
    • border-color

行内元素和块级元素

  • p标签虽然是文本标签,但是它可以当容器来使用,p标签内一定不能放div; p段落也是块元素,他独占一行
  • 文本元素:p span a i em u b strong img
  • 容器级:div li dt dd h级(不建议)
  • 除了p,所有的文本元素,都是行内元素
  • 所有容器级别的元素,都是块元素
  • 块和行内元素的相互转化
    • display:inline; //行内
    • display:inline-block;//行内块
    • display:block; //块
  • 关于定位:大部分情况,建议的是:父相子绝(父亲:相对定位,儿子:绝对定位)
  • 关于脱离文档流的方法
    • 浮动 float:left; float:right;
    • 绝对定位 position:absolute;
    • 固定定位 position:fixed;
    • 重点:1)父相子绝 2)行内元素一点脱离文档流,就可以设置宽高了;
    • 注意:行内元素,一旦脱离文档流,虽然能设置宽高,但是,如果不设置宽的话,会默认跟内容一样宽;而块级元素,如果不设置宽度的话,默认跟父级一样块,没有父级的话,默认跟屏幕一样宽
  • 清除浮动
    • 固定高度height:xxxpx;

      缺点:如果作为产品列表的容器展示,我们无法知道容器的具体高度
    • overflow:hidden
      1. 溢出隐藏
      2. 清除浮动

        缺点:如果父容器比较小,子容器比较大;父容器如果通过overflow:hidden来清除浮动的话,子容器就看不到了
    • clear:both

      缺点:可以解决浮动引起的文档流错乱问题,但是上面浮动元素的父容器该没有高度还没有高度
    • 伪类清除浮动
    ul::after{
    display: block;
    height:0;
    content: '';
    clear: both;
    }
  • 透明度处理
    • rgba() 背景透明,文字不透明;
    • opacity:0 背景透明,文字也透明;
    opacity:0.1;/*不兼容IE7浏览器*/
    filter:alpha(opacity=10);

最基本的开发,首先必须创建的项目结构

  • images文件夹:放切好的图片
  • css文件夹:放置css文件:index.css
  • index.html文件

关于继承

  • 宽度继承:如果没有父级,块元素的宽度默认跟可视区一样宽;如果有父级的情况下,默认跟父级宽度一样宽(宽度可以继承,但高度无法继承;)
  • font可以继承
  • color可以继承:当遇到a标签的时候, color无效;
  • line-height可以继承

当文本超度固定宽度的处理方法:

  • 单行文本出超固定宽度出现省略号的写法:
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
  • 英文不折行的问题处理: word-wrap:break-word;

  • 出现滚动条的写法overflow-y:scroll;

区分伪类和伪元素

  • 伪元素:用:和::都可以,现在建议用::
  • 伪类:给当前选择器添加动效,只能用: