HTML和CSS基础讲解

最新推荐文章于 2023-08-31 08:16:30 发布

爱吃牛肉的大老虎

最新推荐文章于 2023-08-31 08:16:30 发布

阅读量2.1k

点赞数 2

分类专栏： HTML 文章标签： html 前端 css

本文链接：https://blog.csdn.net/u012060033/article/details/123092147

版权

HTML 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

文章目录

1 HTML/CSS
2 JavaScript部分

1 HTML/CSS

1.1 网站生成HTML静态页面的好处

1.1.1 网站的访问速度更快

静态页面可以降低数据库资源的消耗
普通的动态页面在每一个用户的每一次访问时，都会即时的读取数据库中的数据再显示给访问者，读取数据库是一个消耗CPU和数据库程序资源的工作，当访问量变大时会出现访问延迟的现象。
而静态的HTML页面是通过程序，将用户需要读取的数据一次性写入到HTML文件当中，当用户访问时，就已经不需要再读取数据库而直接看到数据了，这极大的减轻了服务器和数据库的负担，提高了访问速度。
静态页面使网站访问更快更稳定
普通的ASP页面因为内涵脚本语言，所以用户通过浏览器访问时，服务器需要先解释页面中的脚本语言，将脚本转换为显示内容再展现给用户。
而HTML页面是通过程序，将ASP脚本语言一次性解释完成并写入成浏览器直接识别的网页文件，当用户访问时，不需要服务器对该访问再做解释和转换，这极大的减轻了服务器和数据库的负担，提高了访问速度。

1.1.2 网站运行更安全

网络攻击的主要目标就是网站的数据库，而网页静态化处理后，用户访问网站时不需要再连接数据库，从而掐断了攻击者和数据库之间的连接，使得攻击变得没有了目标。理论上一个全站静态的网站，是没有任何漏洞可攻击的。

1.1.3 网站更容易被搜索到

目前各大搜索引擎例如百度、Google等，对HTML页面的抓取和收录都比动态页面更及时更全面，使用静态化HTML页面极大的增加网站被搜索到的几率。让您有更多的机会展现自己

1.2 盒子模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

1.3 行内元素,块级元素,空(void)元素,可变元素

行内元素说明在一行内，块级元素说明另起一个新行

行内元素：a - 锚点、b - 粗体(不推荐)、span - 常用内联容器，定义文本内区块、img - 图片、input - 输入框、strong - 粗体强调、select - 项目选择、label - 表格标签、em - 强调、textarea - 多行文本输入框、abbr - 缩写、acronym - 首字、big - 大字体、br - 换行、cite - 引用、code - 计算机代码、dfn - 定义字段、 font - 字体设定、i - 斜体、 kbd - 定义键盘文本、 q - 短引用、s - 中划线(不推荐)、samp - 定义范例计算机代码、small - 小字体文本、strike - 中划线、sub - 下标、sup - 上标、tt - 电传文本、u - 下划线、var - 定义变量
块级元素：div、ul - 非排序列表、li、dl - 定义列表、dt、dd、p - 段落、h1-h6、blockquote - 块引用、address - 地址、center - 举中对齐块、dir - 目录列表、fieldset - form控制组、form - 交互表单、hr - 水平分隔线、 isindex - input prompt、menu - 菜单列表、noframes - frames可选内容、ol - 排序表单、pre - 格式化文本、table - 表格
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
可变元素——可变元素为根据上下文语境决定该元素为块元素或者内联元素：applet - java applet、button - 按钮、del - 删除文本、 iframe - inline frame、 ins - 插入的文本、map - 图片区块(map)、object - object对象、script - 客户端脚本

1.4 CSS实现垂直水平居中

一道经典的问题，实现方法有很多种，以下是其中一种实现：
HTML结构：

<div class="wrapper">         
    <div class="content"></div>     
</div>

CSS： .

wrapper{
    position:relative;
}    
.content{         
　　background-color:#6699FF;        
　　width:200px;        
　　height:200px;         
　　position: absolute;        //父元素需要相对定位         
　　top: 50%;         
　　left: 50%;        
　　margin-top:-100px ;   //二分之一的height，width         
　　margin-left: -100px;    

 }

1.5 src与href的区别

href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

1.6 什么是CSS Hack

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack。例如：

    // 1、条件Hack    
    <!--[if IE]>       
    <style>             
    .test{color:red;}       
    </style>    
    <![endif]-->    
    // 2、属性Hack     
    .test{     color:#0909; /* For IE8+ */     
    *color:#f00;  
    /* For IE7 and earlier */     
    _color:#ff0;  
    /* For IE6 and earlier */    
     }    
     // 3、选择符Hack     
      html .test{color:#090;}       
     /* For IE6 and earlier */     
       html .test{color:#ff0;}     
      /* For IE7 */

1.7 同步和异步区别

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

1.8 CSS中长度单位

CSS3中也对css中用到的单位进行了改进，单位也就是那几个，所以我们要搞清楚再用

%——百分比
in——寸
cm——厘米
mm——毫米
pt——point，大约1/72寸；
pc——pica，大约6pt，1/6寸；
px——屏幕的一个像素点；
em——元素的font-size；
ex——font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半

CSS3中引入了一些新的单位：

ch——字符0(零)的宽度；
rem——根元素(html元素)的font-size；
vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
vmin——vw和vh中较小的那个。

其中，vw、vh、vmin是针对移动设备的，如果视窗大小变化了，这三个值也会跟着相应的变化。
rem单位感觉就是px+em的变体，是否值得使用还要看你自己的取舍：没有px精确也没有em灵活

px和em区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

1.9 优雅降级和渐进增强

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给
渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

1.10 CSS样式表控制背景图片大小

对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从CSS控制背景图片讲起

对于一个网页，我们开始设计的时候，可能没有过多的去想背景图到底是什么，因为大多都是设计背景色就可以了，原因吗，我想也很简单，因为它与前景音乐一样，对于网页的打开，速度会有一定的影响。不过对于一般的个人网站，或者个人博客而言，它对展现自己的个性，当然是不可或缺的了，当然什么都不会太过完美，有好就有坏，也就是当图像不可用但CSS可用的时候，替换内容就不会显示出来，因此，并不建议在导航按钮文本或类似的情况中使用CSS背景图片。
控制背景图片的CSS属性有很多，只要与图片的相关的，大多都会用的上。

1.10.1 背景图片的导入

当然大家最熟悉的当然是background与background-image了。
为网页设计背景图片的代码是：

body {background:url("d:\images\04.jpg")}
或者
body {background-image:url("d:\images\04.jpg")}

这样的话，我们就能将想要作背景的图片导进网页里了。

1.10.2 背景小图片展示

当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，
它是取值：

repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x: 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺

而代码，我想只要懂一点CSS的都知道，如下：

body {background:url("d:\images\04.jpg");background-repeat:no-repeat}

这样的话，它就是以原图像大小显示了。

1.10.3 背景大图片控制

不过问题是，倘若图片过大了，又怎么办呢？对于一个好网页来说，最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用PS或者FireWorks处理一下。不过既然我提到了，我们也不防用CSS来实现图片大小的控制。
我想很多人会自然而然的用上如下代码：

<style type="text/css">
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
</style>

想法是好的，但你所用的浏览器支持吗？我想IE或者FF一定会当作没看见吧。也许你会问，我曾经设计论坛风格时，是可以实现的啊？如果只是上面的代码的话，那是不可控制图片的，因为它只是控制BODY的大小。当然，这里也是控制不了的。如果是其它的ID标记，我想是可以控制记标记的范围大小，呵呵，当然也就不是图像的大小了。
它只是一个属性的值，而不是一个真正的对像
后来，W3C于9月10发布了一篇名为《CSS Backgrounds and Borders Module Level 3》的应文章，里面为CSS的背景加上了几个我们从未见的属性：

background-clip ：
background-origin ：
background-size ：背景尺寸。
background-break ：

虽然是有了这些属性，不过现在还没有支持它们的浏览器。

1.10.4 背景图片的位置控制

背景图片是导进来了，但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是却不想这样子放置，那我们又该怎么办呢。让我们来认识一下background-position、background-position-x及background-position-y吧。
基本语法:

background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom

语法取值:

length :百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right

示例：

body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; 
} /*设置双向坐标，这时相当于完全居中*/

body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; 
} /*设置双向坐标，这时相当于水平居中*/

body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; 
} /*设置纵向坐标，这时相当于垂直居中*/


对于取值为length | top | center | bottom我只写下面三个例子。
body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; 
} /*设置双向坐标，这时相当于右上*/
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat;
 } /*设置双向坐标，这时相当于中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; 
} /*设置双向坐标，这时相当于距左60像素下*/

1.11 HTML5和CSS3应用特效

经过几天的收集，在https://www.html5tricks.com网站上又增加了不少HTML5的教程和应用，顺便把几款赏心悦目的HTML5/CSS3应用特效总结了一下，一共9款HTML5特效，分享给大家。

HTML5 WebGL实验超酷的HTML5 Canvas波浪墙
在HTML5特效中HTML5 Canvas实验项目，是波浪特效，只是这不是真正的水波，而是利用柱体高度的变化实现的波浪墙效果。

在线演示(需要移动鼠标) / 源码下载

HTML5重力感应动画特效冲撞小球演示
只需要用鼠标甩动页面上的元素就可以实现模拟重力感应的效果。今天这款HML5重力感应动画特效功能更强，页面上会掉落大小不等的小球，我们可以拖动小球，也可以点击页面空白来生产更多的小球，如果你的电脑配置高，可以试试产生更多的小球来玩，非常有趣。

在线演示 / 源码下载

HTML5 Canvas图表应用RGraph 图表功能非常强大
这款HTML5图表有多种类型，直线图，柱状图，饼状图，甚至还有混合图，图表配置也十分简单，功能却非常强大。

在线演示 / 源码下载

新款CSS3按钮组合 5组可爱CSS3按钮
该CSS3按钮一共有5种不同的风格，有几款还有3D立体的效果。一起来欣赏这些可爱的CSS3按钮吧。

在线演示 / 源码下载

CSS3图片层叠展开特效可展开扇形效果
今天要分享的这款CSS3图片特效没有那么绚丽，它的功能非常简单，当你把鼠标移到图片上时，多张图片便会由原先的叠在一起变成展开状态，展开过程中伴随CSS3动画，展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上

在线演示 / 源码下载

HTML5 Canvas饼状图表 HTML5&jQuery图表应用
以前我们利用jQuery制作过一些图表应用，使用起来都非常方便。今天再来看一款基于HTML5 Canvas的饼状图图表应用，鼠标点击饼状图的某块区域时，即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的，所以需要支持HTML5的浏览器才能够使用。

在线演示 / 源码下载

CSS3 Loading进度条加载动画特效 3款绚丽风格
该动画特效有3个不同的风格，注意，IE6，7，8是不支持该进度条动画的。

在线演示 / 源码下载

纯CSS3进度条华丽5色进度条示例
这是一款利用纯CSS3实现的进度条，它的实现非常简单，没有复杂的动画，该CSS3进度条最大的特点是拥有非常漂亮的5种颜色，整个进度条看上去非常专业。这款CSS3进度条和之前的CSS3 3D进度条相比显得更简单易用。

在线演示 / 源码下载

CSS3联系表单清新外观带美化Select表单
之前我向大家分享过一款非常绚丽的CSS3发光表单，的确是很酷，大家可以先看看。今天要分享的这款CSS3表单就比较清新简单了。表单整体看上去很干净，特别的是，该CSS3联系表单有一个自定义的美化select表单，表单项在被激活的时候边框颜色会改变。

在线演示 / 源码下载

2 JavaScript部分

2.1 添加、移除、移动、复制、创建和查找节点

创建新节点:

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

2.2 如何将JS伪数组转化为标准数组

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){       
var args = Array.prototype.slice.call(arguments);   //为了使用unshift数组方法，将argument转化为真正的数组       
args.unshift('(app)');         
console.log.apply(console, args); };

2.3 Javascript中callee和caller的作用

caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文

2.4 cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地存储数据而生。

2.5 手写数组快速排序

快速排序的思想很简单，整个排序过程只需要三步：

在数据集之中，选择一个元素作为基准（pivot）。
所有小于基准的元素，都移到基准的左边；所有大于基准的元素，都移到基准的右边。
对基准左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

2.6 统计字符串"aaaabbbccccddfgh"中字母个数或统计最多字母数

var str = "aaaabbbccccddfgh"; 
var obj  = {}; 
for(var i=0;i<str.length;i++){
     var v = str.charAt(i);
      if(obj[v] && obj[v].value == v){        
       obj[v].count = ++ obj[v].count;   
         }else{       
           obj[v] = {};   
         obj[v].count = 1;    
          obj[v].value = v;     
          } } for(key in obj){   
            document.write(obj[key].value +'='+obj[key].count+'&nbsp;'); 
            // a=4  b=3  c=4  d=2  f=1  g=1  h=1  }

爱吃牛肉的大老虎

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS基础讲解

文章目录1 HTML/CSS1.1 网站生成HTML静态页面的好处1.1.1 网站的访问速度更快1.1.2 网站运行更安全1.1.3 网站更容易被搜索到1.2 盒子模型1.3 行内元素,块级元素,空(void)元素,可变元素1.4 CSS实现垂直水平居中1.5 src与href的区别1.6 什么是CSS Hack1.7 同步和异步区别1.8 CSS中长度单位1.9 优雅降级和渐进增强1.10 CSS样式表控制背景图片大小1.10.1 背景图片的导入1.10.2 背景小图片展示1.10.3 背景大图片控制1.
复制链接

扫一扫