HTML/CSS 知识点

本文是从简书复制的, 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;

区分伪类和伪元素

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/369719.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

枚举枚举和修改“最终静态”字段的方法

枚举枚举和修改“最终静态”字段的方法

在本新闻通讯中&#xff0c;该新闻通讯最初发表在Java专家的新闻通讯第161期中&#xff0c;我们研究了如何使用sun.reflect包中的反射类在Sun JDK中创建枚举实例。 显然&#xff0c;这仅适用于Sun的JDK。 如果需要在另一个JVM上执行此操作&#xff0c;则您可以自己完成。 这一…
阅读更多...
java编译找不到符号_关于久违的Javac，编译出现“找不到符号”

java编译找不到符号_关于久违的Javac，编译出现“找不到符号”

参考文档&#xff1a;http://blog.csdn.net/qq369201191/article/details/49946609工作以来习惯了maven编译&#xff0c;已经忘记了javac这个东东&#xff0c;以至于遇到javac问题时困惑了&#xff0c;下面总结一下&#xff0c;以便后者参考。一、使用javac进行项目java文件编译…
阅读更多...
CSS--居中方式总结

CSS--居中方式总结

一、水平居中方法 1.行内元素、字体的水平居中 1.对于行内元素&#xff08;display值为inline或inline-block都可以&#xff09;或者字体&#xff1a;父元素添加css规则&#xff1a;text-align&#xff1a;center; <style> p{/*关键*/text-align:center; }ul{/*关键*/…
阅读更多...
009-MailUtils工具类模板

009-MailUtils工具类模板

版本一&#xff1a;JavaMail的一个工具类 package ${enclosing_package};import java.security.GeneralSecurityException; import java.util.Properties;import javax.mail.Authenticator; import javax.mail.Message; import javax.mail.MessagingException; import javax.ma…
阅读更多...
HTML5 Video标签

HTML5 Video标签

1.代码格式 <video width"320" height"240" controls><source src"movie.mp4" type"video/mp4"><source src"movie.ogg" type"video/ogg">您的浏览器不支持Video标签。</video>视频格式及…
阅读更多...
某些小时后MySql连接自动掉线

某些小时后MySql连接自动掉线

MySql配置为删除任何闲置超过8小时的连接。 这意味着什么&#xff1f; 在8个小时的间隔后返回到已部署的应用程序之后&#xff08;如果未更改默认SQL参数&#xff09;&#xff0c;将会遇到异常情况。 如何解决这个问题&#xff1f; 增加wait_time参数-不是一个好主意&#xff…
阅读更多...
AutoMapper的使用

AutoMapper的使用

本来是想洋洋洒洒写点儿关于这个神奇的具体使用方法&#xff0c;但是发现园子里已经有了&#xff0c;URL奉上&#xff1a;http://www.cnblogs.com/CreateMyself/p/7635429.html&#xff0c;直接打开撸就行。转载于:https://www.cnblogs.com/pangjianxin/p/8367589.html
阅读更多...
shopxx 阿里云OSS设置

shopxx 阿里云OSS设置

shopxx 使用文档没有啊&#xff0c;只能自己看了 数据中心 字段其实是 EndPoint字段 URL前缀 是 图片服务器的主机地址。这个在阿里云回传的时候是不带的。 对应 阿里OSS 外网域名 转载于:https://www.cnblogs.com/nanahome/p/7346641.html
阅读更多...
bio java 例子_JAVA BIO 服务器与客户端实现示例

bio java 例子_JAVA BIO 服务器与客户端实现示例

代码只兼容JAVA 7及以上版本。服务器端代码&#xff1a;package com.stevex.app.bio;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.ServerSocket;import java.net.Socket;import j…
阅读更多...
我的HTML总结之常用基础便签

我的HTML总结之常用基础便签

HTML&#xff1a;是Hyper Text Markup Language&#xff08;超级文本标记语言&#xff09;的缩写&#xff0c;HTML不是一种程序&#xff0c;只是一种控制网页中数据显示的标识语言。 HTML由一组标签组成。 HTML的基本结构 <html> <head> <title>第一个HTML示…
阅读更多...
您是否应该信任JVM中的默认设置？

您是否应该信任JVM中的默认设置？

如今&#xff0c;JVM被认为是智能的。 预期不会进行太多配置–只需设置要在启动脚本中使用的最大堆&#xff0c;您就可以进行了。 所有其他默认设置都很好。 大概我们当中有些人误以为。 实际上&#xff0c;在运行时期间发生了很多事情&#xff0c;无法自动调整性能&#xff0c…
阅读更多...
【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

原文链接&#xff1a;https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时&#xff0c;他同时向世界引入了两种未经测试的革命性的新概念。第一种就是比特币&#xff08;bitcoin&#xff09;&#xff0c;一种去中心化的点对点的网上货币…
阅读更多...
SAS Fuctions

SAS Fuctions

1. monotonic(), 单调递增函数。返回一列变量的序列等&#xff0c;类似于_N_ 。 2. index v indexw: INDEX Function Searches a character expression for a string of characters, and returns the position of the string’s first character for the first occurrence of t…
阅读更多...
循环内的局部变量和性能

循环内的局部变量和性能

总览 有时会出现一个问题&#xff0c;即分配一个新的局部变量需要花费多少工作。 我的感觉一直是&#xff0c;代码已优化到成本为静态的程度&#xff0c;即一次执行&#xff0c;而不是每次运行时都执行。 最近&#xff0c; Ishwor Gurung建议考虑将一些局部变量移出循环。 我怀…
阅读更多...
CSS3伪元素、伪类选择器

CSS3伪元素、伪类选择器

伪元素选择器&#xff1a; ::first-letter:为某个元素中的文字的首字母或第一个字使用样式。 ::first-line:为某个元素的第一行文字使用样式。 ::before:在某个元素之前插入一些内容。 ::after:在某个元素之后插入一些内容 ::selection:匹配元素中被用户选中或处于高亮状态的部…
阅读更多...
bzoj1212: [HNOI2004]L语言

bzoj1212: [HNOI2004]L语言

这又是什么神题啊。 这题一眼AC机。然后呢企鹅也是这么想的。 写完发现企鹅看错题了。然后其实建字典树就行了。 弄个v数组表示能否匹配到第i个位置。然后因为字典里的串很短&#xff0c;就判一下前面L&#xff08;表示字典里最长那个串的长度&#xff09;个位置能否匹配&#…
阅读更多...
css小随笔（二）与通用样式

css小随笔（二）与通用样式

51先在学校HTML5已经有半个多月了&#xff0c;然后这个星期做了一个京东的手机网站&#xff0c;接触到了通用样式&#xff0c;下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块&#xff0c;因为HTML5仅仅只是学完了基本标签跟css的标签&#xff0c;所以在没有接…
阅读更多...
增加堆大小–谨防眼镜蛇效应

增加堆大小–谨防眼镜蛇效应

“眼镜蛇效应”一词源于英国殖民印度统治英国时所产生的轶事。 英国政府担心毒蛇眼镜蛇的数量。 因此&#xff0c;政府对每条死蛇给予悬赏。 最初&#xff0c;这是一个成功的策略&#xff0c;因为大量蛇被杀死以获取奖励。 最终&#xff0c;印度人开始养殖眼镜蛇以赚取收入。 …
阅读更多...
label 标签里面元素点击事件

label 标签里面元素点击事件

想做一个单击显示&#xff0c;单击消失的效果&#xff0c;两个元素都在label标签里面&#xff0c;通过打log发现&#xff0c;当点击消失的时候&#xff0c;先执行了消失的单击事件&#xff0c;有执行了出现的单击事件&#xff0c;所以元素并没有消失&#xff0c;这个出现的原因…
阅读更多...
java contenttype_POST不同提交方式对应的Content-Type,及java服务器接收参数方式

java contenttype_POST不同提交方式对应的Content-Type,及java服务器接收参数方式

简介:Content-Type(MediaType)&#xff0c;即是Internet Media Type&#xff0c;互联网媒体类型&#xff1b;也叫做MIME类型&#xff0c;在Http协议消息头中&#xff0c;使用Content-Type来表示具体请求中的媒体类型信息.参考response.Header里常见Content-Type一般有以下四种&…
阅读更多...
最新文章

Copyright @ 2022~2023