在HTML中，如果想引用图片，通常会使用类似以下的URL： https://www.fgba.net/static/image/common/logo.png 如果将以上URL改成这样，你觉得图片还能正常显示吗...如果当前的页面是通过HTTPS协议来浏览的，那么网页中的资源也只能通过HTTPS协议来引用，否则IE浏览中就会出现"页面同时包含安全和非安全的项目"的警告信息： 如果使用协议相对 URL，无论你是使用...HTTPS，还是HTTP访问页面，浏览器都会以与你相同的协议请求页面中的资源，避免弹出这样的警告信息，同时可以节省5字节的数据量，何乐而不为呢？...同样，只要涉及到链接，我们都可以使用协议相对 URL： //www.fgba.net/static/js/forum.js //www.fgba.net/data/cache/style_1_common.css...//www.fgba.net 我们也可以在css中使用协议相对 URL： //www.fgba.net/static/image/common/logo.png 需要注意的是：在IE7 / IE8中，
大家好，又见面了，我是你们的朋友全栈君。 上一篇文章讲了母栏目后面两行子栏目的DIV布局，这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。...“女士”其后面的子栏目的超链接与“女士”的超链接颜色一样，“养生”同样的。...先来看看网页中定义超链接样式的代码： a:link：超链接字体的颜色 a:hover：鼠标移动覆盖在超链接上面的颜色 a:active：当鼠标点击按下的时候颜色的一个变化 a:visited：超链接已经被访问后的文本颜色...这里background用到了两个切换图片放在了一张图片素材上的方式写法，具体使用方法看：http://www.zongk.com/zongk/2.html 这篇文章 总结，这篇文章主要是讲了在CSS样式中超链接的样式定义其中针对...演示中的素材我就随便做了一下，以及颜色选取，您可以根绝您实际情况来定义颜色，与背景图片素材的制作可以依据您实际需要制作。
现在问题来了，通过.htaccess设置的css、js缓存都有一个过期时间，如果在访客的浏览器中已经缓存了css、js，在这些css、js缓存未过期之前，浏览器只会从缓存中读取css和js，如果你在服务器上修改了...如原先html中的css调用语句如下： <link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders...给css文件加个版本号 其实每次修改css文件后还要修改css的文件名有点麻烦，那么我们可以在加载css语句中加入个版本号（即css链接中?...后面的内容）就可以了，由浏览器自动去比较css，js链接后面的版本号大小，来自动更新客户端最新的css，js等静态文件。...例如原先html中的css调用语句如下： <link rel=”stylesheet” href=“http://blog.ithomer.net/wp-content/themes/officefolders
，我们尽量只使用宋体和微软雅黑中文字体 1.3 font-weight:字体粗细 在html中如何将字体加粗我们可以用标签来实现 使用 b 和 strong 标签是文本加粗。...1.4 font-style:字体风格 在html中如何将字体倾斜我们可以用标签来实现 字体倾斜除了用 i 和 em 标签， 可以使用CSS 来实现，但是CSS 是没有语义的 font-style...#f00 代表红色 2.2 text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下：...： line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。...（不常用） 2.6 CSS外观属性总结 属性 表示 注意点 color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff line-height 行高 控制行与行之间的距离 text-align
，我们尽量只使用宋体和微软雅黑中文字体 font-weight:字体粗细 在html中如何将字体加粗我们可以用标签来实现 使用 b 和 strong 标签是文本加粗。...font-style:字体风格 在html中如何将字体倾斜我们可以用标签来实现 字体倾斜除了用 i 和 em 标签， 可以使用CSS 来实现，但是CSS 是没有语义的 font-style属性用于定义字体风格...，而且我们更喜欢简写方式比如 #f00 代表红色 text-align:文本水平对齐方式 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性 其可用属性值如下...属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。...（不常用） CSS外观属性总结 属性 表示 注意点 color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff line-height 行高 控制行与行之间的距离 text-align
，与你的HTML文档的位置无关； 1....本地存储的位置：file:///D:\桌面\HTML5课程\HTML5入门实例课程\lesson9\西施.png ---- 2.相对路径 如果链接资源与你的HTML文档位于同一个路径或者文件夹里，可以省略...；否则必须指出相对路径，和HTML文档的位置有关； 同一个路径： 直接写文件名称 或 ....id属性：id属性用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复的id；一般配合CSS和JavaScript来选择元素。 ...2 class属性：class属性用于指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。
CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形...属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。...text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。...相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: HTML 元素 标签定义了文档与外部资源之间的关系。...HTML 样式实例 - 文本对齐方式 使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式： 实例 文本对齐属性 text-align取代了旧标签 。...从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。 HTML 图像- 图像标签（ ）和源属性（Src） 在 HTML 中，图像由 标签定义。...浮动图像 本例演示如何使图片浮动至段落的左边或右边。 设置图像链接 本例演示如何将图像作为一个链接使用。 创建图像映射 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。...漂亮的表格 HTML源代码： CSS源代码： 运行结果： HTML 表格标签 标签 描述 定义表格 定义表格的表头 定义表格的行 定义表格单元 <caption
CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形...可以用段落 和 表格的对齐的演示。 选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。...text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。...： 可以让一行文本在盒子中垂直居中对齐。...相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。...} 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式。...block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
CSS 选择器： CSS id选择器： id选择器可以为标有特定 id的HTML元素指定特定的样式 id选择器是以 “#” 来定义的 <!...： [title] { color:red; } CSS 创建： 外部样式表： 每一个页面可以使用标签链接到样式表文件（位于文档头部） <link rel="stylesheet...line-height 设置<em>行</em>高。 letter-spacing 设置字符间距。 text-align <em>对齐</em>元素<em>中</em><em>的</em>文本。 text-decoration 向文本添加修饰。...text-indent 缩进元素中文本<em>的</em>首<em>行</em>。 text-shadow 设置文本阴影。<em>CSS</em>2 包含该属性，但是 <em>CSS</em>2.1 没有保留该属性。 text-transform 控制元素<em>中</em><em>的</em>字母。...<em>链接</em>样式： <em>链接</em><em>的</em>四种状态： a:link 普通<em>的</em>，未被访问<em>的</em><em>链接</em> a:visited 用户已访问<em>的</em><em>链接</em> a:hover 鼠标指针<em>位于</em><em>链接</em>上方 a:active <em>链接</em>被点击时刻 文本修饰： text-decoration
-- 这是一个 a -->>这是错误的写法 6. 文档类型声明 ，指定当前 html 文档用的是哪个版本,位于文档中的第一句话位置处 7.... 网页要表示的信息的开始与结束 (1). lang 地区语言 ①. zh-cn 内地 ②. en-uk 英文 ③. zh-tw 台湾 ④. zh-hk 香港 ⑤. fr-fr... 定义表行，和必须位于之中 30. 定义表格的第一行，单元格的内容会相对表格居中、加粗，td 允许被 th 替换 31....②. rowspan 跨行合并，在同一列中，从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除 (3)....，但只能选择周 月份类型 ，与 date 类型，但只能选择一个月份 A. required 非空限制 如 <input type="month" required
mozilla开发者文档里是这样描述的： 浏览器在展现文档的时候，需要把文档内容和相应的样式信息结合起来展现。 浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。...text-align 对齐元素中的文本 font-family:"Times New Roman" font-size font-style 用em来设置字体大小 为了避免Internet Explorer...text-decoration:underline; } max-hright display:none;和visibility:hidden; visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间...，那么它的位置相对于: absolute 定位使元素的位置与文档流无关，因此不占据空间。...以下实例选取所有元素插入到 元素中: div p { background-color:yellow; } 子元素选择器 与后代选择器相比，子元素选择器（Child selectors
相对定位是HTML使用的默认定位类型position:relative，可以把其当做跳棋的布置，从左到右排列，达到边缘就移到下一行，而另外一种是绝对定位position:absolute，允许设置HTML...内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。...CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于标签中，outside（默认值）则相反，而将list-style设置为none...比如相对于页面中的链接元素，nav中的链接元素可以使用text-decoration:none属性来去除蓝色下划线，为了表示出样式的不同，可以使用伪类选择器nav li a:link, nav li a...HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.
width:100vw; 相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况 HTML5基础 5.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为...DOCTYPE html>必须位于HTML文档第一行。 7....18.表格基本结构：单元格、行、列 (1),,, (2)HTML5中已废除table的border属性，用css控制边框宽度。...==同一个id属性的选择器在页面中只能用一次==。...1.用空格占位符 但 有不间断的特性。即连续的 会在同一行内显示。即使有多个 ，浏览器也不会把它们回车拆行。
以此我们进行分类： 块元素：无论内容的多少，该元素都独占一行 行内元素:内容撑开宽度，左右都是行内元素的可以排在一行 1.2 使用媒体元素在页面中播放视频 1.2.1 html5的媒体元素 视频元素 html5...1.4.2 CSS3的基本语法 CSS3的基本语法结构： CSS的规则由两部分组成，也就是选择器与声明 ； 声明必须放在花括号中，并且声明也可以是多条； 每条属性与值之间用：分隔，每条语句以;(英文半角...内部样式表 将CSS代码写在标签中的标签中，与html内容位于同一个HTML文件中，这就是内部样式表 选择器{属性:属性值} <...外部样式表两种方法的区别 link标签属于xhtml范畴 而导入式是CSS2.1所特有的 使用链接式的CSS使客户端浏览网页时先将外部CSS文件加载到网页中再进行编译显示，所以这种情况下即使网速比较慢显示的网页与预期也会相同...1.5.3 背景样式 div标签 块级元素 独占一行 ， 可以将页面分割出一块独立的、不同的部分 背景属性 背景颜色 在css中使用backgroun-color来设置背景颜色，与color用法相同
属性总是在HTML元素的开始标签中规定。 属性例子 1. 拥有关于对齐方式的附加信息。 2.... HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。 几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。...命名锚的语法： 锚 例子： 首先，在HTML文档中对锚进行命名(创建一个书签)： 基本的注意事项-有用的提示 然后，在同一个文档中创建指向该锚的链接...如果名为 “boat.gif” 的图像位于www.w3school.com.cn的images 目录中，那么其URL为.... HTML 制作图像链接 如何将图像作为一个链接使用。
此处要注意css文件的路径 4.链接式 也是讲一个.css文件引入到HTML文件中 <link href="mystyle.<em>css</em>" rel="stylesheet...，那么A<em>的</em><em>相对</em>垂直位置不会改变，也就是说A<em>的</em>顶部总是和上一个元素<em>的</em>底部<em>对齐</em>。...，因此div2<em>的</em><em>相对</em>垂直位置不变，顶部仍然和div1元素<em>的</em>底部<em>对齐</em>。...依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，<em>与</em>div1组成标准流。div2发现上一个元素div1是标准流<em>中</em><em>的</em>元素，因此div2<em>相对</em>垂直位置不变，<em>与</em>div1底部<em>对齐</em>。...依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，<em>与</em>div1组成标准流。div2发现上一个元素div1是标准流<em>中</em><em>的</em>元素，因此div2<em>相对</em>垂直位置不变，<em>与</em>div1底部<em>对齐</em>。
CSS笔记 一、基本知识 1.1 CSS选择器 1.2 创建 二、样式 1. 背景 2. 文本 3. 字体 4. 链接 5. 列表 6. 表格 8. js 中获取高/宽 9. 隐藏模块 10....line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本，默认left，right、center、justify两端对齐。...链接 a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 /* 使用 */ a:...行内元素和块级元素 行内元素 display:inline 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。...// flex-start：与交叉轴的起点对齐。 // flex-end：与交叉轴的终点对齐。 // center：与交叉轴的中点对齐。
「学习笔记」CSS基础 CSS构造块 「1. HTML的局限性」 HTML满足不了设计者的需求，可以将网页结构与样式相分离，这样就可以在不更改网页结构的前提下，更换网站的样式。...CSS最大的贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS 「3....style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。 type=”text/css” 在html5中可以省略。...，通过link标签将外部样式表文件链接到HTML文档中。...CSS外观属性总结」 属性 表示 注意点 color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff line-height 行高 控制行与行之间的距离 text-align 水平对齐 可以设定文字水平的对齐方式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
