HTML/CSS 知识点

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

整个前端开发的工作流程

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

互联网原理

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

元素

行内元素：一行中有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的引入方式

嵌入式；(内嵌式)

<style>

        body{

            height:100%;

            background-color: red;

        }

</style>

行内样式

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

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

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

区分伪类和伪元素

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

HTML/CSS 知识点的更多相关文章

这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No5-No7
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No8-No9
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
css知识点
css知识点一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...
CSS知识点集锦
CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...
这些HTML、CSS知识点，面试和平时开发都需要 No8-No9（知识点：媒体操作、构建表单）
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）
系列知识点汇总 1.基础篇这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）
系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

随机推荐

eclipse代码编辑区字符串自动转义设置
在做接口测试时,有时接口请求参数非常多,如果用java相关方法去拼接参数,难度较大,并且非常浪费时间,那如何快速将整个请求参数拼接成一个字符串呢?为了解决这个问题,只要简单配置下eclipse设置即可 ...
一次线上tomcat应用请求阻塞的排查经过
今天早上,收到一个报警,有个服务器的http往返时延飙升,同时曝出大量404,很是折腾了一番,特记录下思考和排查经过. 1.这是单纯的时延增大,还是有什么其他情况还未掌握? 因为不知道是只有时延变大而 ...
Python实现一个简单的微信跳一跳辅助
1. 前言微信的跳一跳相信大家都很熟悉了,而且现在各种外挂.辅助也是满天飞,反正本人的好友排行榜中已经是八九百都不足为奇了.某宝上一搜一堆结果,最低的居然只要3块多,想刷多少分就刷多少分,真是离谱 ...
Redis集群方案怎么做？大牛给你介绍五种方案！
Redis集群方案 Redis数据量日益增大,而且使用的公司越来越多,不仅用于做缓存,同时趋向于存储这块,这样必促使集群的发展,各个公司也在收集适合自己的集群方案,目前行业用的比较多的是下面几种集群架 ...
微信跳一跳的mini辅助设计
前一段考试没时间写东西,就迟到补发一波,继电器触发触屏,arduino处理数据就行了,B站很多人做,我也来一个,个人测试数据增益为2.1左右,即延时=距离X2.1x10 void setup() ...
httpd: Could not reliably determine the server's fully qualified domain name, using ::1 for ServerName
问题原因: httpd服务配置文件,并没有设置解析根地址,无法可靠地确定服务器的完全合格的域名如何解决? httpd的配置文件放在 /etc/httpd/conf/目录下,去掉ServerName注 ...
scrapy_css
css选择器标准格式:reponse.css(css选择器::获取值) css选择器有哪些? * 选择所有节点 #id 选择id的节点 .container ...
2.CLI标准
CLI 简称(CLI标准) 通用语言架构维基百科地址: http://zh.wikipedia.org/wiki/通用语言架构是一个开放的技术规范 .它是由微软联合惠普 ...
kindeditor使用
下载地址http://kindeditor.net/down.php @官方文档使用步骤: 引入js <script charset="utf-8" src="r ...
MyEclipse中Lombok的安装及使用
lombok是一款通过注解的形式简化我们必须有又显得臃肿的代码的工具.最常用的就是@Data注解.实体类上用了这个注解,实体类的各个属性就不需要书写get和set方法. 安装步骤: 1.关闭Myecl ...

HTML/CSS 知识点

整个前端开发的工作流程

互联网原理

元素

html骨架结构

html更多解读

列表

表单

按钮

选择器

添加一个小icon的步骤：

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

css的引入方式

css的优先级

css常见属性和样式

css中的选择器：

开发常用的浏览器

CSS的继承性和层叠性

css权重

css盒子模型

行内元素和块级元素

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

关于继承

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

区分伪类和伪元素

HTML/CSS 知识点的更多相关文章

随机推荐

热门专题