程序员干货程序员前端基础

HTML + CSS 知识点总结

2018-11-01  本文已影响10人  arima

第一章

什么是HTML文件？

什么是HTML？

HTML、CSS、JavaScript 之间的关系

第二章 HTML概述

HTML标准的网页结构

<!DOCTYPE html> ------ 描述网页文档类型
<html> ------ 网页顶级元素，即根元素
    <head> ------ 网页头元信息，用户不可见部分，描述建站时间作者等内容
    </head>
    <body> ------ 网页的身体，用户可见部分
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>

HTML 元素

头部元素

<head> -----  给搜索引擎识别的部分
 <meta name="author"> ----- 网页文档描述
 <title>标签名</title> ----- 浏览器标签页头名、收藏夹标题、搜索引擎结果标题
 <link rel="stylesheet" type="text/css" href="theme.css"> --- 引用外部CSS
 <base href="http://www.w3school.com.cn/i/" target="_blank" /> ----- 页面上的所有链接规定默认地址或默认目标
 <script type="text/javascript">document.write("Hello World!")</script> ----- 用于定义客户端脚本
 <style type="text/css">h1 {color:red}</style> ----- 定义级联样式表，规定在浏览器中如何呈现HTML文档
<style>..</style>  ----- 引入嵌入样式表
</head>

元素的两种类型

Style 样式

为元素增加指定style属性，一般把style样式写在head头部文件处以方便修改，有三种方法插入样式：

引入样式表 （推荐）
    <link rel="stylesheet" type="text/css" href="style.css">
嵌入样式表 （一般）
    <head>
        <style type="text/css">
            body{background-color:red;}
            p{margin-left:20px;}
        </style>
    </head>
内联样式表 （不推荐）
    <p style="color:green">

<style>..</style> 里的样式代码可以放到css里，运行效果相同

HTML 框架

使用框架的坏处：

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面
  • <frame> <frameset> <noframes> 在HTML5中已被弃用

补充知识

第三章 HTML样式

基本样式

高级样式

文本格式化

物理字体与逻辑字体的区别：

我们知道字体有大小、颜色、斜、粗、下划线等等属性，称这些为字体的风格。这种风格分为指定字体“样式”的物理风格（如粗、斜、下划线）和指定文本“作用”的逻辑风格（如示例文字、缩小文字）；就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用；逻辑风格是W3C组织推荐使用的。

第四章 CSS样式

选择器

CSS 优先级和权重

CSS 基本属性

第五章 盒子模型

image

盒模型基本属性

内边距、边框和外边距都是可选的，默认值是零

！注意！！！块元素的垂直外边距会发生合并，合并后会取最大值，详看相关文档！

​ ※ 外边距合并说明

盒模型定位

浮动 float

解决高度坍塌问题

在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高则父元素就多高；当子元素浮动脱离文档流后，此时会导致子元素无法撑起父元素的高度，父元素会坍塌失去高度，即底层没有了内容；跟着父元素之后的所有元素都会向上移动，将导致页面混乱，所有在开发中一定要避免出现高度坍塌的问题。

对于上诉问题，我们有两种解决方案：

  1. 可以将父元素高度写死，但写死后父元素将不能自动适应子元素，故此方法不推荐
  2. 开启BFC（对IE6无效）
  3. 设置zoom（IE6专用）
  4. 清除浮动

开启BDF

根据W3C标准，在页面中的元素都隐含一个默认关闭的属性叫BDF（Block Formatting Context），当开启BFC以后，元素将会具有如下的特性：

  1. 父元素的垂直外边距不会和子元素重叠
  2. 开启BFC的元素不会被浮动元素所覆盖
  3. 开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC：（无法直接开启，只能间接开启）

  1. 设置元素浮动（可以撑开，但是会失去宽度，且后元素会前移）
  2. 设置元素绝对定位（问题同上）
  3. 设置元素为inline-block（可以撑开，会失去宽度，但后元素不会前移）
  4. 将元素的overflow设置为一个非visible的值，如overflow:hidden;（副作用最小，推荐）

IE6中没有BFC，但具有另一个隐含属性hasLayout，该属性的作用和BFC类似，开启方式很多，但副作用最小的方式是添加 zoom:1;（即放大倍数）

清除浮动

由于受到盒子A浮动的影响，盒子B整体会向上移动，此时我们希望清除掉盒子A浮动对后元素产生的影响，故要使用clear属性，当清除浮动影响后，元素会回到盒子A浮动之前的位置。

清除浮动对后面元素方法与影响：

  • 在浮动元素之后的div元素的样式中添加clear:both;（上边距设置会显示无效）

  • 在浮动元素后面添加一个空的div元素，设置样式为clear:both;（但添加无意义结构会过于累赘）

  • 通过after伪类向元素的最后添加一个空白块元素，然后清除浮动，既可解决margin-top和父元素失去高度的问题，又不会添加多余div（推荐使用）

    .boxA:after{
    content:"";
    display:block;
    clear:both;
}

    但由于IE6不支持after伪类，在后添加一个.boxA{zoom:1;}即可解决问题

定位

即将元素摆放到页面的指定任意位置

盒模型特殊属性

第六章 Flex布局

image

容器属性（整体）

项目属性（单独）

第七章 响应式布局

什么是响应式 Web 设计？

<meta name="viewport" content="width=device, initial-scale=1.0">
    <!--viewport视窗 宽度=设备宽度 初始1倍缩放-->
    
<link rel="stylesheet" href="common.css">

<link media="(orientation:landscape)and(min-width:500px)" rel="stylesheet" href="desktop.css">
当手机横向landscape或纵向portrait和屏幕小于

<link media="max-width:500px"rel="stylesheet" href="mobile.css">

媒体查询 Media query

使用 Bootstrap

另一个创建响应式设计的方法，是使用现成的 CSS 框架。

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机

第八章 HTML5

HTML5 新增元素

HTML5相对于HTML4的语法改变

上一篇下一篇

猜你喜欢

热点阅读