HTML 指的是超文本标记语言 (Hyper Text Markup **Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (...开发工具 chrome 、 sublime 、 photoshop、VScode、Firefox 浏览器 浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome...移动端的浏览器内核主要说的是系统内置浏览器的内核。 Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。...1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如 2.图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如... 1.table用于定义一个表格 2.tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对 tr，就有几行表格。
HTML 指的是超文本标记语言 (Hyper Text Markup **Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (...移动端的浏览器内核主要说的是系统内置浏览器的内核。 Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。...1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如 2.图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如... 1.table用于定义一个表格 2.tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对 tr，就有几行表格。...-method：用于设置表单数据的提交方式，其取值为get或post。 -name：用于指定表单的名称，以区分同一个页面中的多个表单。
Day1:html和css 了解浏览器 掌握WEB标准 理解标签语义 掌握常用标签 掌握三种列表标签 前端开发工具: 浏览器是网页显示、运行的平台，IE、火狐（Firefox）、谷歌（Chrome...), Gecko(Firefox), Webkit(Safari). web标准,重点在于兼容性.不同的浏览器解析出来的效果会不一样.这就需要web标准.包括结构Structure,表现Presentation...,文本,标签,不是一种编程语言,而只是标记的语言,标记语言是一套标记标签. html的基本骨架: .... div和span,网页布局css+div.一行可以放多个span,而div一行一个,没有语义,用来布局的.文本格式标签: 粗体 ...效果 注释：` 相对路径,同一级的 路径: xxx.html images/xxx.gif 图片放在上一级路径
一、浏览器 浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件 1，浏览器种类 主流浏览器：Chrome，Firefox...Firefox Webkit：Safari Blink：Chrome ，Opera 不同的内核在渲染同一内容的时候会有差别 二、HTML基础知识 1，什么是HTML HTML：超级文本标记语言...，在浏览器运行的一种标记语言 2，HTML结构 <!...，没有语义的标签 div布局标签 在页面上单独独占一行，如果不设置宽度，默认占一行，通常作为容器布局的时候使用 span标签 一行可以放多个，显示大小由内容决定 4，img标签 <img src...，src的路径又分为两种：网页上的一个图片路径和本地的一个图片路径 5，a跳转标签 喜欢我
鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...图片、表单和文字对齐 所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。...通常我们使用于强制一行显示内容 normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...可以处理中文 text-overflow 文字溢出 text-overflow : clip | ellipsis 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出 clip : 不显示省略标记...，而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...）
样式表上的title属性 在为本文进行研究时，这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。...如您所见，除了有序列表的默认行为之外，还有很多可能性！ 元素 的download属性 就像网络上无处不在的链接一样，拥有一个使链接更加强大的属性总是很好的。...此属性的唯一缺点是 Firefox 不支持在 iframe 上使用它（尽管 Firefox 确实支持loading图像）。...删除/插入的citeAnddatetime属性 我在处理块引用时已经提到cite过，但是这个属性也可以用于用and元素标记的删除和插入。...属性，帮助浏览器验证资源没有被不当操作； 元素的disabled属性，轻松同时禁用多个表单元素； 电子邮件和文件输入的multiple属性。
样式表上的title属性 在为本文进行研究时，这对我来说是全新的，可能是此列表中最有趣的一个。作为一些背景知识，如果您不知道，Firefox 有一个选项可让您选择查看页面时要使用的样式表。...元素的download属性 网络上的链接无处不在，拥有一个使链接更加强大的属性总是很好的。该download属性是几年前添加到规范中的，它允许您指定当单击链接时，应该下载而不是访问它。...此属性的唯一缺点是 Firefox 不支持在 iframe 上使用它（尽管 Firefox 确实支持loading图像）。...删除/插入的cite和datetime属性 我在处理块引用时已经提到cite过，但是这个属性也可以用于用and元素标记的删除和插入。...属性，帮助浏览器验证资源没有被不当操作； 元素的disabled属性，轻松同时禁用多个表单元素； 电子邮件和文件输入的multiple属性。
：节点的值 标签节点：null 属性节点：属性的值 文本节点：文本内容 3、获取相关节点 3.1、获取父节点和父元素 父节点只能是标签，不能是属性节点和文本节点，所以父节点也是父元素。...3.4、获取节点和元素的12行代码 p标签 span标签...> 1、以上前四个，chrome, firefox, IE8 都支持 2、后面八个，chrome，firefox支持，IE8下，所有获取节点的操作都获取的是元素，所有获取元素的操作都是 undefined...3.5、总结 获取父子节点和元素的操作，chrome, firefox, IE8 都支持； 获取特殊子节点或者子元素和兄弟节点和元素操作，IE8 中所有的节点操作都是元素操作，所有的元素操作都是 undefined...，其次以获取任意一个父元素的第一个子元素为例，之所以不在 else 里面直接使用 return element.firstChild; 主要考虑到标签之间可能有多个文本节点的影响。
fc: 把光标移到同一行的下一个c字符处 Fc: 把光标移到同一行的上一个c字符处 tc: 把光标移到同一行的下一个c字符前 Tc: 把光标移到同一行的上一个c字符后 ;: 配合f & t使用，重复一次...4.3 标记 使用标记可以快速移动。到达标记后，可以用Ctrl+o返回原来的位置。 Ctrl+o和Ctrl+i 很像浏览器上的 后退 和 前进 。...yaw和yas：复制一个词和复制一个句子，即使光标不在词首和句首也没关系。...yaw和yas：复制一个词和复制一个句子，即使光标不在词首和句首也没关系。...dG: 剪切光标以下的所有行。 daw和das：剪切一个词和剪切一个句子，即使光标不在词首和句首也没关系。 d/f：这是一个比较高级的组合命令，它将删除当前位置 到下一个f之间的内容。
前言 相信做过网页的对Css都不是很陌生，它可以帮助我们重铸网页中很多绚丽的特效，尤其是现在Css已经发展3.0版本，很多功能更是丰富多彩，让我们的开发时间不仅大大缩短，而且还可以轻松做出许多华丽的特效...：/* Css语句*/ 2.Css的选择器 为什么一开始要讲选择器了，因为我们要想精确修改的Html中的某个元素的属性，就必须使用选择器，它可以通过选择器定位到某个元素上然后修改元素的样式。...5).列表List 1)).列表的类型 none 无标记 disc 实心圆 circle...> 3)).列表的位置 inside 列表项目标记放置在文本以内 outside...table-footer-group 元素会作为一个或多个行的分组来显示（类似 ）。 table-row 元素会作为一个表格行显示（类似 ）。
② 多行文字 如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？ 实现的关键是把文字当图片处理。...② display:table-cell和文字大小控制居中 这个方法可以说就是本文综述部分提到的淘宝团队想出的图片垂直居中的方法。...基本上用裸标签就实现了想要达到的效果。一般而言，图片阵列排列显示的时候，外面都有一个a标签的，起到链接的作用。而本处的方法就只要这一个标签就足以实现图片垂直且居中的显示效果。...对比淘宝团队的方法，发现优势很多，基本上淘宝的table-cell+font-size方法会带来的些问题都避免了。 非常简单，非常易懂，出错率低，上手方便，兼容性上佳！...最后，说句实在话，我知道这应该不算什么新颖的方法，在我之前想到这种方法的人肯定不在少数，但是留迹于网上的却没有，我是没有发现过。我不清楚是这些大牛的公司要求技术保密，还是自身不愿分享研究成果。
防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...3.1 图片、表单和文字对齐 所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。...通常我们使用于强制一行显示内容 white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...4.2 text-overflow 文字溢出 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出 text-overflow : clip ；不显示省略标记（...）...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
其余的网格项目保持了正常的网格流，第四行也出现在布局的底部。 但是，由于我们仅使用grid-template-rows属性定义了三行，因此第四行没有预设值，因此仅取其内容的自然高度。...Flexbox gaps 长期以来，在 felx 布局中的行或列之间添加间隙一直是一个难题。...因为content-visibility可跳过不在屏幕上的内容渲染，包括布局和渲染，直到真正需要布局渲染的时候为止。所以利用它可以使初始用户加载速度更快，还能与屏幕上的内容进行更快的交互。...如果该元素不在屏幕上（并且与用户无关，则相关元素将是在其子树中具有焦点或已选择的元素），它也会获得大小限制（containment）(并且停止绘制和对其内容进行命中测试)。 这意味着什么呢？...简而言之，如果元素不在屏幕上，这不会渲染其后代。浏览器在不考虑元素任何内容的情况下确定元素的大小，在此处则跳过大多数渲染（例如元素子树的样式和布局）。
），scode，webstorm（付费），HBuilder（轻量级，建议使用不带X的版本）还有记事本，选择自己用的顺手的就行，还有firework和photoshop等作为辅助 安装浏览器，必须安装Google...（2）Gecko(firefox) Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码...二、使用HTML/HTML5搭建页面骨架 1、HTML简介：HyperText Markup Language超文本标记语言，用HTML将内容用网页显示 2、HTML基本骨架或构成：头部+躯干 3、用...2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。...method 用于设置表单数据的提交方式，其取值为get或post。 name 用于指定表单的名称，以区分同一个页面中的多个表单。 注意： 每个表单都应该有自己表单域。
例如如下css代码：height:3em; line-height:3em; …… 显示结果如下图： 单行文本垂直居中对齐-鑫空间-鑫生活 ② 多行文字 如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢...这里附上效果截图（取自IE6浏览器）： table-cell和文字大小实现的图片垂直居中显示 图片和文字比不上直接的效果显示，所以建议您狠狠地点击这里。...基本上用裸标签就实现了想要达到的效果。一般而言，图片阵列排列显示的时候，外面都有一个a标签的，起到链接的作用。而本处的方法就只要这一个a标签就足以实现图片垂直且居中的显示效果。...对比淘宝团队的方法，发现优势很多，基本上淘宝的table-cell+font-size方法会带来的些问题都避免了。 非常简单，非常易懂，出错率低，上手方便，兼容性上佳！...最后，说句实在话，我知道这应该不算什么新颖的方法，在我之前想到这种方法的人肯定不在少数，但是留迹于网上的却没有，我是没有发现过。我不清楚是这些大牛的公司要求技术保密，还是自身不愿分享研究成果。
根据CSS3 Selectors规范，从技术上讲，您应该使用两个冒号::的伪元素语法。但是，为了保持兼容，用户代理也将接受单个冒号用法。实际上，在这一点上，在项目中使用单冒号版本更为明智。...X::pseudoElement p::first-line { font-weight: bold; font-size: 1.2em; } 我们可以使用伪元素（由::标记）来设置元素片段的样式...比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪元素只能用于块状元素。...: bold; font-family: cursive; padding-right: 2px; } 下面的代码中设定了段落中第一行的样式： p::first-line...我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如： ul:nth-last-of-type(3) { border: 1px solid black; } 兼容浏览器
防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...3.1 图片、表单和文字对齐 所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。 ? 3.2 去除图片底侧空白缝隙 ?...通常我们使用于强制一行显示内容 white-space:normal ；默认处理方式 white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。...4.2 text-overflow 文字溢出 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出 text-overflow : clip ；不显示省略标记（...）...，而是简单的裁切 text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...） 注意： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 ?
weiyi_ 唯一极客 演示结果: list-style-position - 指定标记框在主体块框中的位置 描述: 此属性指定标记框在主体块框中的位置...*/ li, dd, dt { line-height: 1.5; /* 为该无序列表项和有序列表项提供基于其字体大小 1.5 倍的行高 */ }...cursor 属性 - 设置鼠标指针悬停在元素上的样式 描述: 此属性设置光标的类型（如果有），即在鼠标指针悬停在元素上时显示相应样式。...，例如 Mozilla Firefox, <a href="https://www.google.com...，为了满足响应式网站设计<em>的</em>需要 */ padding-right: 19px; /* 为背景图片留出空间，这样就不会让它<em>和文</em>本重叠了 */ } .a-feed {
2.掌握CSS3 常用属性 3.掌握jquery的基本用法，对于JS基本逻辑语句需要熟练掌握 上文 【FE前端学习】第二阶段任务-提高 ---- 一、HTML标签 HTML是一种标记语言，标记语言是一套标记标签...，标记标签是用尖括号包围的关键词，以开始标签和结束标签成对存在，如和 HTML属性，给元素提供了更多信息，在开始标签中以名称/值的形式出现，如下例的href属性 表示列，border属性为表格边框宽度 HTML列表 Coffee Milk 无序列表始于 标签。...h1,h2,h3,h4,h5,h6 { color: green; } CSS派生选择器 只改变标签中的strong元素的样式 li strong { font-style...块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
