欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML/CSS 知识点

程序员文章站 2022-06-22 11:36:23
整个前端开发的工作流程 1. 产品经理提出项目需求 2. UI出设计稿 3. 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 4. 前后台的交互 5. 测试 6. 产品上线(后期项目维护) 互联网原理 1. 当用户在浏览器输入网址的时候，就会发送到对应的服务器，请求该网址对应的网页信息 ......

整个前端开发的工作流程

  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>
  2. 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)简单的回到顶部效果
    • 利用锚点进行页面切换
  2. title:鼠标移上时的提示
  3. target:打开方式(默认的_self当前页面打开; _blank新页面打开)
  4. 这些属性中，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>

  2. 行内样式

    <body style="height:100%; background: #333333">

  3. 外链式（真正的开发，用的都是外链）

    <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;

区分伪类和伪元素

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

上一篇： MVC公司架构介绍-工具类(二)

下一篇： Zabbix如何使用过滤器实现监控

推荐阅读