Learn 学一点-CSDN博客

原创 1.1 Javascript引入、变量的介绍

1.1 Javascript引入、变量的介绍 HTML和CSS是标记语言 Javascript是编程语言 Javascript：JS基于客户端的脚本语言变量：用来保存东西（数据）语法：var<空格>变量名=值； var n=23; 例：弹出对话框：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

2021-01-27 15:26:23 109

原创 14、什么是HTML 5，HTML5与HTML的比较及其基础语法

2.22 什么是HTML 5，HTML5相关基础知识一、官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。二、广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascrip

2021-01-20 11:13:52 193

原创 13、定位（position）、CSS Sprites技术及绝对定位盒子居中

2.18 定位（定位属性：position，以下属性都需要top、bottom、left、right配合使用）1、Absoulute：绝对定位特点：（1）以页面的左上角为原点（2）不保留原来的位置（3）z-index调节图层的顺序 ......<style type="text/css">#a,#b,#c{ width:200px; height:200px; background-color:#FF0000;}#b{ background-col

2021-01-20 10:06:55 154

原创 12、margin边界、图片拼版及圆角表格制作知识

2.15 margin边界Margin是边界，一个盒子的边界是4个。Margin：10px；上、下、左、右全是10pxMargin：10px 50px；第一个参数是上、下，第二个参数是左、右。Margin：10px auto 50px；第一个是上，第二个是左右，第三个是下Margin：10px 20px 30px 40px；顺序：上右下左（顺时针旋转）同理：padding后面参数的属性是一样的。例1：导航栏的CSS样式示例<style type="text/css">

2020-12-24 09:21:00 274

原创 11、关于CSS样式中“颜色”的概念介绍及 Overflow（overflow属性规定当内容溢出元素框时发生的事情）

2.13 关于CSS样式中“颜色”的概念介绍光的颜色很多，但是所有的光线都是由三种基本的光线组成红（red）、绿（green）、蓝（blue），网站的图片模式都是RGB模式；网页图片中任何一种颜色都是由这三个颜色构成。（印刷用的CMYK模式）。每个颜色的色值范围是0-255，如果用十进制来表示颜色，肯定会出现歧义。在实际表示颜色的值用16进制来表示（00-FF）。十六进制和十进制的转换：十进制有十个数，最大数是9；十六进制有十六个数：0-9、 A 、B 、C 、D、 E 、F（FF）16=（2

2020-12-23 10:34:51 632

原创 10、浮动和清除浮动影响

2.12 浮动和清除浮动影响Float（浮动）属性： 1、改变块元素（block element）对象的默认显示方式。 2、浮动元素（float）会被移出标准流，但是没有脱离文件流。 3、float开始之初是为了实现文本环绕。将块显示标记左右排列的时候使用浮动属性。<style>#aa,#bb,#cc{ width:100px; height:100px; background-color:#FF0000; float:left;/*当全部左浮动时，三个盒子

2020-12-23 09:39:02 110

原创 9、盒子模型

2.11 盒子模型Div+CSS排版优点：执行效率高 1、缩减页面代码，提高页面执行效率 2、带宽要求降低（代码更简洁） 3、更容易被搜索引擎搜索到学完div+css后思考为什么div+css执行效率高？什么是盒子？只要是存放内容的标签就是盒子，最大的盒子是HTML。边界（margin）：盒子的外面叫边界，边界有四个，上下左右填充（padding）：盒子的里面叫填充，填充有四个，上下左右边框（border）：盒子的本身有边框，边框有四个，上下左右a盒子的上填充，

2020-12-23 09:31:56 111 2

原创 8、强制优先级、权重叠加、标记的显示模式

2.8 强制优先级（!important）<style type="text/css">p{ color:#FF0000 !important;/*红色*//*强制优先级*/}.aa{ color:#00FF00;/*绿色*/}#bb{ color:#000099;/*蓝色*/}</style></head><body> <p class="aa" id="bb" style=" color:#9933CC">锄禾

2020-12-22 14:32:26 358

原创 7、样式继承、样式优先级、应用多个类样式

2.5 样式的继承<style type="text/css">（父元素） p{font-size:24px;被子元素继承 color:#FF0000;/*红色*/ } （子元素）b{color:#0000CC;/*蓝色*/覆盖父元素的颜色 font:"隶书"; }</style></head><body> <p><b>锄禾日当午</b></p></body>

2020-12-22 14:06:58 346 1

原创 6、样式分类——按CSS的位置分类

2.4 样式分类——按CSS的位置分类1. 内嵌样式（内部样式）：在HTML页面中以<style>开头，</style>结束，这里边的样式只能供本页面使用。<style type="text/css"></style> （样式代码）2. 行内样式：通过元素的style属性直接写的样式。 <标记 style=“属性”>3. 外部样式：写一个css文件，在需要使用css的页面中引入外部css。我们可以将页面公用的css写到外

2020-12-22 13:46:18 1312

原创 5、CSS（上）

CSS2.1 CSS介绍和类样式 CSS是Cascading Style Sheet（层叠样式表）的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。思考题：为什么CSS叫层叠样式表，“层叠”表示什么意思？将网站分成两个部分，表现和内容，表现由CSS来控制，内容由PHP从数据库中读取。2.2 CSS基本语法样式以<style>开头，以</style>结束。样式一般写在<head></head>之间。CSS的定义

2020-12-18 15:28:52 67

原创 4、HTML（下）

1.29 关于图片的几个概念和格式关于图片的基本概念： 1. 位图图像：由屏幕上的像素点描述图像，放大失真，会出现马赛克模糊。操作位图软件PS，FW。 2. 矢量图形：使用线和面组成的图像，放大不失真。操作矢量图的软件ai，fw。 3. 分辨率：衡量位图质量好坏的指标，分辨率越大，图片质量越好，但是体积越大。在单位长度上的像素数，通常以“像素/英寸”，网上一般72像素/英寸。 4. 网上默认尺寸单位为像素。常见的图像格式： 1. JPG/JPEG： 2. GIF：注意：二者比

2020-12-18 14:01:42 95

原创 3、框架

1.28 框架框架是HTML5新标准中淘汰的标签。框架属于将要被淘汰的标签，W3c建议以后使用内嵌框架，现在主要应用在后台管理处。思考：如何实现在一个浏览器上看到多个页面？用框架。框架集：<frameset> （set：集合）框架：<frame>如果有N个框架，则保存N+1个文件。在保存框架时注意事项：光标放在哪个框架中就保存哪个框架中的页面，如果要保存所有的页面，点击文件——保存全部（先保存框架集，再一个一个保存框架）。如何将已经有的页面显示到框架

2020-12-16 17:40:19 151

原创 2、HTML（中）

1.14 路径路径分为两种：1、绝对地址：从盘符开始。只要移动位置就找不到。2、相对地址：以自身文件为准，相对于自己的位置。*注意：../代表上一级目录，./表示当前目录现学现用：<a href =”../../test.html”>点击</a> <a href =”./2-滚动文字.html”>点击</a>1.15 链接链接的标记是<a></a>1.15.1 内部链接网站内部页面和页面之间的链接

2020-12-15 11:11:23 192

原创 1、HTML（上）

1 HTML1.1 两个概念1.1.1 客户端和服务端#mermaid-svg-VuSQOQVMo9vAenPq .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-VuSQOQVMo9vAenPq .label text{fill:#333}#mermaid-svg-VuSQOQVMo9vAenPq .nod

2020-12-14 11:46:49 217

Learn All的博客