HTML/CSS
关注
分享
扫一扫
前端开发之HTML/CSS
亖伍
这个作者很懒，什么都没留下…
展开
-
前端学习之——SEO优化
TDK三大标签SEO优化1、SEO是什么SEO（Search Engine Optimization汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合 SEO 优化2、TDK是什么2.1 T – Title（网站标题）title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳原创 2020-07-30 16:17:54 · 352 阅读 · 0 评论 -
前端学习之——网站 favicon 图标
网站 favicon 图标favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。1、制作favicon图标把图标切成 png 图片把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/2、使用favicon图标favicon图标放到网站根目录下HTML页面引入favicon图标在html 页面里面的 <head> <原创 2020-07-30 16:17:25 · 726 阅读 · 0 评论 -
前端学习之CSS3新特性
1、CSS3 的现状新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性2、CSS3 新增选择器CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器2.1 属性选择器属性选择器，按照字面意思，都是根据标签中的属性来选择元素属性选择器，按照字面意思，都是根据标签中的属性来选择元素属性选择器可以根据元素特定属性的来选择元素。 这样就原创 2020-07-30 15:55:19 · 281 阅读 · 0 评论 -
前端学习之HTML5新特性
概述HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。1、语义化标签以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div><div class=“nav”> </div><div class=“content”&g原创 2020-07-30 15:39:36 · 372 阅读 · 0 评论 -
前端学习之CSS——常见布局技巧
1. margin负值运用让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）2. 文字围绕浮动元素效果布局示意图巧妙运用浮动元素不会压住文字的特性3. 行内块巧妙运用页码在页面中间显示:把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;利用行内块元素中间有缝隙，并且给父级添加 text-align:cen原创 2020-07-29 23:39:17 · 312 阅读 · 0 评论 -
前端学习之CSS——用户界面样式
什么是界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式表单轮廓防止表单域拖拽1、鼠标样式 cursor li { cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。2、轮廓线 outline给表单添加 outline: 0; 或者 outline: none;样式之后，就可以去掉默认的蓝色边框。 input { outline: none; }3、防止拖拽文本域原创 2020-07-29 23:24:48 · 687 阅读 · 0 评论 -
前端学习之CSS——字体图标
1. 字体图标1.1 字体图标的产生字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的，但是缺点很明显。图片文件还是比较大的。图片本身放大和缩小会失真。一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。1.2 字体图标的优点轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了原创 2020-07-29 23:16:21 · 616 阅读 · 0 评论 -
前端学习之CSS——精灵图
1. 精灵图1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。为什么使用精灵图（目的）：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。精灵图举例:1.2 精灵图（sprites）的使用原创 2020-07-29 23:07:47 · 1343 阅读 · 0 评论 -
前端学习之CSS——定位
1.为什么使用定位浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。2. 定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。2.1 边偏移（方位名词）边偏移 就是定位的盒子移动到最终位置。有 top、bo原创 2020-07-29 22:51:14 · 250 阅读 · 0 评论 -
前端学习之CSS——浮动
1、传统网页布局的三种方式CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。2、标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序原创 2020-07-29 22:24:44 · 346 阅读 · 0 评论 -
前端学习之CSS——盒子模型
1、网页布局的本质网页布局的核心本质： 就是利用 CSS 摆盒子。网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里面装内容2、盒子模型（Box Model）组成盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容3、边框（border）3.1、边框的使用原创 2020-07-29 22:05:44 · 405 阅读 · 0 评论 -
前端学习之CSS——CSS三大特性
1、层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠2、继承性CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。子元素可以继承父元素的样式：text-，font-，line-这些元素开头的可以继承，以及color属性继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打原创 2020-07-29 22:04:26 · 192 阅读 · 0 评论 -
前端学习之CSS——背景
通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1、背景颜色样式名称：background-color 定义元素的背景颜色使用方式：其他说明：元素背景颜色默认值是 transparent（透明）2、背景图片样式名称：background-image 定义元素的背景图片使用方式：其他说明：实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是原创 2020-07-29 21:25:57 · 226 阅读 · 0 评论 -
前端学习之CSS——元素显示模式
1、什么是元素的显示模式定义：元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。2、元素显示模式的分类2.1、块元素常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><div> 标签是最典原创 2020-07-29 21:02:05 · 423 阅读 · 0 评论 -
前端学习之CSS——复合选择器
1、什么是复合选择器？在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等2、后代选择器 (重要）定义：后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时原创 2020-07-27 23:05:39 · 224 阅读 · 0 评论 -
前端学习之CSS——emmet语法
1、简介Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。2、快速生成HTML结构语法生成标签 直接输入标签名 按tab键即可。比如 div 然后tab 键， 就可以生成 <div></div>如果想要生成多个相同标签 加上 * 就可以了。比如 div*3 就可以快速生成3个div如果有父子级关系的标签，可以用 >。比如 ul > li就可以了如果有兄弟关系的标签，用原创 2020-07-27 23:01:55 · 323 阅读 · 0 评论 -
前端学习之CSS——字体、文本
css字体属性:字体大小：CSS 使用 font-size 属性定义字体大小。语法： p { font-size: 20px; }px（像素）大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小可以给 body 指定整个页面文字的大小字体粗细：CSS 使用 font-weight 属性设置文本字体的粗细。语法： p {原创 2020-07-27 17:32:11 · 450 阅读 · 0 评论 -
前端学习之CSS——选择器的种类
css选择器的作用选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。例如：找到所有的 h1 标签， 选择器（选对人）。设置这些标签的样式，比如颜色为红色（做对事）。css基础选择器基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器。标签选择器标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。语法： 标签选择器{ 属性：属性值原创 2020-07-27 17:10:50 · 324 阅读 · 0 评论 -
前端学习之CSS简介
CSS简介CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。CSS 最大价值: 由 HTML 专注去做结构呈现，样转载 2020-07-27 16:48:14 · 301 阅读 · 0 评论 -
前端学习之HTML——表单
为什么需要表单：使用表单目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。表单的组成：在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。表单域：表单域是一个包含表单元素的区域。在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器.实现代码：<form action=“url地址原创 2020-07-27 16:21:27 · 452 阅读 · 0 评论 -
前端学习之HTML——列表
列表表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。无序列表<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。无序列表的基本语法格式如下： <ul> <li>列表项1</li> <li>列表项2</l原创 2020-07-27 11:08:51 · 414 阅读 · 0 评论 -
前端学习之HTML——表格
表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理表格不是用来布局页面的,而是用来展示数据的。表格的具体用法： <table> <tr> <td>单元格内的文字</td> ... </tr>原创 2020-07-26 23:27:12 · 698 阅读 · 0 评论 -
前端学习之HTML简介
一、HTML语法规则1.HTML 标签是由尖括号包围的关键词，例如 。2.HTML 标签通常是成对出现的，例如 和 ，我们称为双标签。3.HTML 标签对中的第一个标签是开始标签，第二个标签是结束标签。 有些特殊的标签必须是单个标签（极少情况），例如 ，我们称为单标签。二、标签的关系双标签关系可以分为两类：包含关系和并列关系包含标签：<head><title> </title></head>并列关系：<head> <原创 2020-07-26 22:58:03 · 236 阅读 · 0 评论 -
【网页开发】网页的相关概念
一、什么是网页网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。1、网页的组成：网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。2、什么是HTML：HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描原创 2020-07-26 21:42:24 · 497 阅读 · 0 评论