随笔分类 - HTML5和CSS3
摘要：一、流式布局 （一）、移动端 移动端浏览器兼容，处理Webkit内核的浏览器即可 移动端的手机屏幕尺寸非常多，但是不必重点关注 谷歌浏览器可以进行移动端调试 （二）、视口 视口是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 1.布局视口 layout viewport 一般
阅读全文
摘要：（一）HTML5的新特性 IE9+以上版本的浏览器才支持 1.新增的语义化标签（部分） <header>头部标签</header> <nav>导航栏标签</nav> <article>内容标签</article> <section>定义文档某个位置</section> <aside>侧边栏标签</a
阅读全文
摘要：（一）精灵图 1.为什么要使用精灵图 为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术（CSS Sprites、CSS 雪碧） 核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以啦 2.精灵图的使用 使用核心： 1.精灵技术主要针对背景图
阅读全文
摘要：（一）定位 1.为什么需要定位？ 1）某个元素可以自由的在一个盒子内部移动位置，并且压住其他盒子 2）当滚动窗口的时候，盒子想要固定屏幕的某个位置 浮动可以让多个块级盒子一行显示没有缝隙的排列显示，经常用于横向排列盒子 定位则可以让盒子自由的在某个盒子的内部移动位置或者是固定屏幕中的某个位置，并且可
阅读全文
摘要：（一）浮动 1.传统网页布局的三种方式 传统网页布局的三种方式：普通流（标准流）、浮动、定位，实际开发中一个页面基本上都包含了这三种布局方式 网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动 2.标准流 标准流：标签按照规定好的默认方式排列，是最标准的布局方式 块级元素独占一行
阅读全文
摘要：（一）盒子模型 网页布局三大核心：盒子模型，浮动和定位 1.网页布局的本质 1）.先准备相关元素，网页元素基本都是盒子 2）.设置CSS盒子样式，然后摆放到相应位置 3）.往盒子里面填内容 2.盒子模型的组成 盒子模型：就是把HTML页面中的布局元素看作是一个矩形盒子，也就是盛放内容的容器 CSS盒
阅读全文
摘要：（一）Emmet语法 Emmet语法的前身是Zen Coding,它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法 1.快速生成HTML结构语法 1.生成标签，直接输入标签名然后按tab键即可，比如，div然后按tab键，就可生成div标签 2.如果想要生成多个相同标签，输
阅读全文
摘要：（一）CSS简介 CSS主要用来美化页面、布局页面 1.HTML的局限性 HTML主要是做结构，显示元素内容。只关注内容，但是丑。虽然可以做简单的样式，但是非常臃肿和繁琐 2.CSS网页的美容师 CSS是层叠样式表的简称，有时也称为CSS样式表或级联样式表，CSS也是一门标记语言 CSS主要用于设置
阅读全文
摘要：（一）表格标签 1.表格的作用 用于显示、展示数据，让数据更加规整，可读性更好，把繁琐的数据表现得很有条理，表格不是用来布局页面的，而是用来展示数据的 2.表格标签基本语法 table——table 表格 tr——table row 表格的行 td——table data 单元格的内容 <table
阅读全文
摘要：（一）、HTML语法规范 1.标签分类 双标签 开始 结束 单标签 2.标签关系 包含（父子）关系： <head> <title> </title> </head> 并列（兄弟）关系： <head> </head> <body> </body> （二）、基本结构标签 1.第一个H
阅读全文
