HTML+CSS 前端基础 知识点（更新）

2020-04-21  本文已影响0人  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 基本属性

第五章 盒子模型

盒模型基本属性

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

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

​ ※ 外边距合并说明

盒模型定位

浮动 float

解决高度坍塌问题

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

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

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

开启BFC

根据W3C标准，在页面中的元素都隐含一个默认关闭的属性叫BFC（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;}即可解决问题

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after { /* 普通浏览器用 */
        content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}                                       
.clearfix { *zoom: 1; } /* IE6/7专用 */
/* 由于IE6/7不支持:after伪类，需要使用zoom:1触发hasLayout */
/* “*”只能被IE浏览器特定识别 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before, .clearfix:after { 
        content:"";
    display:table;
}
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

定位

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

盒模型特殊属性

第六章 Flex布局

容器属性（整体）

项目属性（单独）

第七章 响应式布局

什么是响应式 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的语法改变

HTML5 新标签

<input type="xxxx"> 

email 输入邮箱格式的文本
tel 输入手机号码格式的文本
url 输入网址格式的文本
number 输入数字格式
search 定义用于搜索的文本字段
range 定义一个自由拖动滑块
time/date/month/week 输入相关时间格式的文本（可点选控件）
color 定义拾色器
file 定义一个上传按钮（供本地文件上传）

placeholder 输入框内提示信息（点中时文字消失）
  <input type="text" placeholder="请输入用户名">
autofocus 网页加载到此页面时，点中焦点自动选中此输入框
  <input type="text" autofocus>
multiple 上传文件可多选
  <input type="file" multiple>
autocomplete 填写并提交后，当再次加载此页面，会自动弹出填写过的信息
  <input type="text" autocomplete="off">  on/off 控制开关
required 必填项 
  <input type="text" required>

多媒体标签

CSS3 新增选择器

<p>微软的Internet Explorer(IE)是当今最流行的因特网浏览器。它发布于1995年，并于1998年在使用人数上超过了Netscape。Firefox是由Mozilla发展而来的新式浏览器。</p>
<ul>
      <li class="test">我是第一个</li>
      <li class="two123">我是第二个</li>
      <li class="twotabc">我是第三个</li>
      <li class="abcfour">我是第四个</li>
      <li class="ggg-four">我是第五个</li>
      <li class="bug">我是第六个</li>
      <li class="bug_ee">我是第七个</li>
      <li class="hhbug">我是第八个</li>
        <li class="bug345">我是第九个</li>
      <li class="test">我是第十个</li>
 </ul>

结构伪类选择器

ul li:first-child {/* 选择第一个li */}
ul li:last-child {/* 选择最后一个li */}
ul li:nth-child(6) {/* 括号内填6，故选择第六个li */}
ul li:nth-child(2n) {/* 括号内填2n，选择偶数li */}
ul li:nth-child(2n+1) {/* 括号内填2n+1，选择奇数li */}
                                /*（注：n=0,1,2,3,4……）*/

属性选择器

ul li[class=test] {/* 选择类名全称为test的li（第一个和第十个）*/}
ul li[class$=four]{/* 选择类名结尾为four的li（第四个和第五个）*/}
ul li[class^=two]{/* 选择类名开头为two的li（第二个和第三个）*/}
ul li[class*=bug]{/* 选择类名中带有bug字符的li（第六、七、八、九个）*/}

伪元素选择器

p::first-letter{/* 选择元素内第一个字母或字（选择“微”字）*/}
p::first-line{/* 选择元素的第一行（以浏览器显示的第一行为准）*/}
p::selection{/* 被鼠标高亮选中的字段 */}
  /* selection只能使用 color/background/cursor/outline 这4个属性*/

p::befor {content:"开始";}　/* 在p元素内部内容前插入新内容*/
p::after {content:"结束";}    /* 在p元素内部内容后插入新内容*/
    /* content 是必要的属性,被插入的块默认是行内元素，*/
    /* 改动之后：「开始微软的Inter... ...新式浏览器。结束」 */

常见用途：伪元素是一个可以直接插入元素的选择器

div {                         /* 普通div盒子 */
  width：200px;
  height：30px;
  border：1px solid #ccc;
  font-family:"icomoon";
  position:relative;
}
div:：before{           /* 使用末尾伪类选择器 */
  content:"\ea51";    /* 这里直接在css中插入字体图标(图标v) */
  position:absolute;
right：10px;
top：5px;

CSS3 盒模型

在老版本中，当一个盒子给定了width和height，若要加上padding值，盒子内容就会被撑开，即盒子实际大小与原给定的宽与高不相符。CSS3中，如果限定了 box-sizing: border-box ，padding值将不再影响原始给定的宽与高。

box-sizing: content-box /* 默认旧标准 内撑模式，大小=w+h+p+b */

box-sizing: border-box  /* 变为盒模型 内减模式，内容不会撑开盒子 */

过渡

从一个状态渐渐的平滑过渡到另外一个状态

【语法格式】transition: 属性名  所需时间  运动曲线  开始时间;

div {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 要放在div里 而不是hover里 */
            /* 如果有多组属性变化，需用逗号隔开 */          
}
div:hover {         /* 鼠标经过盒子，宽变600 高变300 */
            width: 600px;
            height: 300px;
}

transition: all 0.6s;  
        /* 所有属性都要变化，用all即可，同时后两个属性可以省略 */

【过渡函数】

2D变形

translate(50px,50px);
/* 将文字或图像在水平和垂直方向 分别移动50像素(x、y可为负值) */
translateX(x);  /* 单独设置X轴移动 */
translateY(y);  /* 单独设置Y轴移动 */

/* 【应用】可取代定位或浮动 */

/* 【应用】让定位的盒子水平居中，取代margin:0 auto; */
.box {
    width: 500px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 移动到自身的一半位置 */
}

transform:scale(0.8,1);
/* 使元素在水平方向上缩小20%，垂直方向不改变 */
/* 取值范围0.01~0.09，默认值为1，若设为2即为放大2倍 */
transform:scaleX(x);    /* 单独设置水平缩放 */
transform:scaleY(y);    /* 单独设置垂直缩放 */

/* rotate 取值是度数，单位为deg，取负值表示逆时针旋转 */
/* 旋转原点也可用px像素值精确位置 */

transform-origin: left top;/* 改变元素旋转原点为左上角 */
transform: rotate(45deg); /* 再进行顺时针45度旋转 */

transform:skew(30deg,0deg); /* 水平方向倾斜30度，处置方向保持不变 */
        /* 取值可为负值，第二个参数可不写（默认为0）*/

3D变形

img { transition:all 0.5s ease 0s; }

img:hover {             /* 鼠标放于图片上时，进行X/Y/Z旋转 */
    transform:rotateX(180deg);
  transform:rotateY(180deg);
  transform:rotateZ(180deg);
  /* 合并写法 */
  transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg);
}

动画

【语法】animation:动画名称 花费时间 运动曲线 开始时间 播放次数 是否反方向;

@keyframes 动画名称 {           /* 动画关键帧设置 */
  from{ ... }                            /* 开始位置变化情况 */
  to{   ... }                            /* 结束位置变化情况 */
}                   /* 也可以用百分数来设置变换帧为 0%{} 50%{} 100%{} */

/* 【几个属性值说明】 */
animation-iteration-count:infinite; /* 无限循环播放，无单位*/
animation-direction:alternate;          /* 动画轮流反向播放 */
animation-play-state:paused;            /* 暂停动画 */

浏览器前缀

浏览器前缀 浏览器
-webkit- Google Chrome, Safari, Android Browser
-moz- Firefox
-o- Opera
-ms- Internet Explorer, Edge
-khtml- Konqueror

flex 伸缩布局

在父级元素 添加 display: flex;
[注意]设为Flex布局后，子元素的 float、clear、vertical-align 属性将失效。

优雅降级和渐进增强

BFC

HTML5 新增API

网络状态
全屏方法

HTML5规范允许用户自定义网页上任一元素全屏显示。

// 以上方法均存在兼容性处理，不同浏览器需要添加前缀如
webkitRequestFullScreen()   //webkit内核浏览器
mozRequestFullScreen()      //Gecko内核浏览器
oRequestFullScreen()        //Opera浏览器
msRequestFullscreen()       //微软浏览器 's'需要小写
文件读取

把上传的文件中内容显示到页面，或上传完毕图片显示缩略图到页面上

// 1.上传文件借助于文件域 读取文件

var file = document.querySelector("input");
var div = document.querySelector("div");
var img = document.querySelector("img");

file.onchange = function () { //onchange 当发生改变时

    console.log(file); // 等同于console.log(this)
    console.log(this.files); // 返回上传文件的数组集合

// 2.选择文件 读取文件里的内容

    //fileReader对象：HTML5新增内建对象 可读取本地文件内容
    var reader = new FileReader(); //初始化一个对象 
        
    //readAsText()方法 读取文件中的文本内容
    //readAsDataURL()方法 把图片转变成一大串字符代码 可通过url引用
    reader.readAsText(this.files[0]);   //括号中选择指定对象
    reader.readAsDataURL(this.files[0]);

    // 注意：当此文件内容读取完毕后，会自动把内容存放到result属性里

// 3. 把读取内容显示到页面中

    // 使用onload 当加载完毕后
    reader.onload = function () {
        div.innerHTML = this.result;    //文本读取
        img.src = this.result;          //图片显示
    }
}
地理定位

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)

<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x = document.getElementById("demo");

// 当点击按钮后触发此函数
function getLocation() {

    // 判断当前设备是否支持 地理定位
    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(showPosition, showError);
        // 如果支持 就获得当前地理位置 调用getCurrentPosition方法
        // showPosition 调用成功 调用函数 显示当前位置
        // showError 调用失败 调用函数 
    } else { // 如果设备不支持 返回提示
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

// 调用成功函数 返回当前位置的经纬度
function showPosition(position) {
    x.innerHTML =
        "Latitude: " + position.coords.latitude + // 获得当前的纬度
        "<br />Longitude: " + position.coords.longitude; // 获得当前的经度
}

// 调用失败
function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:   // 用户无法定位的要求
            x.innerHTML = "User denied the request for Geolocation."; 
            break;
        case error.POSITION_UNAVAILABLE:    // 位置信息不可用
            x.innerHTML = "Location information is unavailable."; 
            break;
        case error.TIMEOUT: // 获取用户位置的请求超时
            x.innerHTML = "The request to get user location timed out."; 
            break;
        case error.UNKNOWN_ERROR:   // 发生了一个不明错误
            x.innerHTML = "An unknown error occurred.";
            break;
    }
}
</script>

http://lbsyun.baidu.com/ 百度地图api

拖拽和释放
Web存储
应用缓存

在HTML5中可以构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件

7.2 缓存清单

创建了一个后缀名为xxx.appcache的文件，然后在需要使用应用缓存在html页面开头添加属性manifest="xxx.appcache"，路径要保证正确。

CACHE MANIFEST
# 第一行必须规定这样写
# 为注释

CACHE:
# 此部分写需要缓存的资源 (如css image js等)

./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg


NETWORK:
# 此部分要写指定需要有网络才可访问的在线资源，无网络不访问(可使用通配符)

./images/img1.jpg
./images/img2.jpg


FALLBACK:
# 此部分为备用资源 当访问不到某个资源时，自动由另一个资源替换

./images/img4.jpg  ./images/img5.jpg
上一篇 下一篇

猜你喜欢

热点阅读