HTML
关注
分享
扫一扫
万万君
Know more, do more, do better
展开
-
JQuery 选择器
选择器实例选取*$("*")所有元素#id$("#lastname")id=“lastname” 的元素.class$(".intro")所有 class=“intro” 的元素element$(“p”)所有 <p> 元素.class.class$(".intro.demo")所有 class=“intro” 且 class=“demo” 的元素:first$(“p:first”)第一个 <p> 元素:...原创 2020-07-27 18:57:28 · 136 阅读 · 0 评论 -
各种在HTML中使用SVG的方式对比
对比结果<img><object>Inline SVG浏览器支持GoodGoodGoodAlt and title 属性YesNoneTitle only浏览器缓存YesYesNoneGZip 压缩YesYesNone交互式NoneYesVery good搜索引擎索引功能YesThrough fallbackNone工作方式StreamlinedMediumConvoluted原创 2020-07-20 14:10:24 · 273 阅读 · 0 评论 -
Bootstrap2 与 Bootstrap3使用上的区别
Bootstrap3中被修改的样式Bootstrap 2.xBootstrap 3.x.container-fluid.container.row-fluid.row.span*.col-md-*.offset*.col-md-offset-*.brand.navbar-brand.nav-collapse.navbar-collapse.nav-toggle.navbar-toggle.btn-n.转载 2020-06-07 12:02:44 · 258 阅读 · 0 评论 -
HTML5基础之Canvan和SVG元素例子
<html><head></head><p>Use HTML5 Canvas Element </p><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not suppo...原创 2020-04-02 11:52:21 · 211 阅读 · 0 评论 -
HTML元素div和span的区别
<div> 和 <span> 元素的区别<div> 属于块级元素， <span>属于内联元素使用 <div> 是网页效果中会有换行，而使用 <span>则不会有换行，会根据内容的宽度而决定它一行的宽度...原创 2020-04-02 10:46:33 · 379 阅读 · 0 评论 -
响应式Web设计怎么做
响应式Web设计介绍响应式 Web 设计 - Viewport设置 Viewport响应式 Web 设计 – 网格视图创建网格式布局响应式 Web 设计 – 媒体查询响应式 Web 设计 - 图片响应式 Web 设计 – 视频(Video)响应式 Web 设计 – 框架介绍响应式 Web 设计让你的网页能在所有设备上有好显示响应式 Web 设计只使用 HTML 和 CSS响应式 Web ...原创 2020-03-28 00:55:17 · 995 阅读 · 0 评论 -
CSS基础之属性选择器
CSS属性选择器[attribute] 选择器语法代码示例[attribute=value] 选择器语法代码实例[attribute~=value] 选择器语法代码实例[attribute|=value] 选择器语法代码实例[attribute^=value] 选择器语法代码实例[attribute$=value] 选择器语法代码实例[attribute*=value] 选择器语法代码实例CSS...原创 2020-03-27 23:41:33 · 227 阅读 · 0 评论 -
CSS基础之媒体类型（@media）样式
定义使用 @media，可以针对不同的媒体类型定义不同的样式。使用 @media， 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法在内部样式定义中使用@media mediatype and|not|only (media feature) { CSS-Code;}在外部样式定义中使用<!-- ...原创 2020-03-27 22:47:17 · 2291 阅读 · 0 评论 -
使用CSS制作下拉菜单样式
制作tooltip显示形式代码示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> .dropdown { position: relative; display: inline-block; } .dropdown-...原创 2020-03-26 23:32:19 · 1087 阅读 · 0 评论 -
CSS基础之导航栏
导航栏=链接列表导航条基本上都是一个无序的链接列表。垂直导航栏去掉列表ul默认style去掉列表的默认边距和填充设置，设置为0去掉链接a的默认下划线将链接以block块显示，让整体变为可点击链接区域（不只是文本），并且制定块元素一个60像素的宽度代码示例<!DOCTYPE html><html><head><style>u...原创 2020-03-26 22:59:10 · 285 阅读 · 0 评论 -
CSS基础之伪类
CSS伪类（Pseudo classes）是用来添加一些选择器的特殊效果。伪类属性选择器示例示例说明:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态:focusinput:focus选择元素...原创 2020-03-26 13:34:52 · 136 阅读 · 0 评论 -
CSS基础之组合选择器
CSS 组合选择器CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。CSS3 中包含了以下四种组合选择器：后代选择器（以空格分隔）子元素选择器（以**>**号分隔）相邻兄弟选择器（以**+**分隔）普通相邻兄弟选择器（以**~**分隔）后代选择器后代选取器匹配所有指定元素的后代元素。代码示例<!DOCTYPE html><html>...原创 2020-03-26 12:57:14 · 287 阅读 · 0 评论 -
CSS基础之尺寸属性
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度和增加行间距。CSS 尺寸 (Dimension)属性属性描述height设置元素的高度line-height设置行高max-height设置元素的最大高度max-width设置元素的最大宽度min-height设置元素的最小高度min-width设置元素的最小宽度...原创 2020-03-25 22:21:15 · 317 阅读 · 0 评论 -
CSS 基础之Display与 Visibility属性
CSS display 属性和 visibility属性都可以用来隐藏某个元素。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，仍然会影响布局。display:none也可以隐藏某个元素，且隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。利用Display来改变块和内联元素显示方式块元素h1-h6pdiv会占用...原创 2020-03-25 22:48:22 · 234 阅读 · 0 评论 -
CSS基础之定位和浮动属性
CSS 定位属性（Positioning）CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。属性说明说明bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移auto，length， %，inheritclip剪辑一个绝对定位的元素sh...原创 2020-03-26 12:29:22 · 184 阅读 · 0 评论 -
CSS如何进行分组和嵌套定义
作用CSS 分组可以将具有相同样式的选择器进行分组，每个选择器用逗号分隔， 减少代码量。CSS 嵌套适用于选择器内部的选择器的样式代码示例<!DOCTYPE html><html><head><meta charset="utf-8"> <style>p,h2{ color:blue; text-align:...原创 2020-03-24 13:19:36 · 394 阅读 · 0 评论 -
CSS Margin和Padding属性
Margin（外边距）属性作用定义元素周围的空间接受任何长度单位、百分数值甚至负值清除周围的元素（外边框）的区域，margin没有背景颜色，是完全透明的可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性值得范围值说明auto设置浏览器边距（这样做的结果会依赖于浏览器）length定义一个固定的margin（使用像素，pt，em等）%...原创 2020-03-24 13:03:31 · 251 阅读 · 0 评论 -
CSS轮廓（outline）属性
所有outline属性属性说明值属性说明值outline在一个声明中设置所有的外边框属性outline-color,outline-style, outline-width,inheritoutline-color设置外边框的颜色color-name,invert,inheritoutline-style设置外边框的样式none,dotte...原创 2020-03-24 12:49:01 · 324 阅读 · 0 评论 -
CSS盒子模型
盒子模型示意图各个部分解释如下：Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响Content（内容） - 盒子的内容，显示文本和图像进一步了解盒子模型的内部结构请参考W3C描述。每个元素的宽度和...原创 2020-03-23 14:12:40 · 186 阅读 · 0 评论 -
CSS基础之表格样式的使用
所有的应用都在下面的示例中：<!DOCTYPE html><html><head><meta charset="utf-8"> <style>ul.a {list-style-type:circle;}ul.b {list-style-type:disc;}ul.c {list-style-type:square;}o...原创 2020-03-22 18:15:34 · 229 阅读 · 0 评论 -
CSS基础之列表样式
CSS列表属性属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中list-style-image将图象设置为列表项标志list-style-position设置列表中列表项标志的位置list-style-type设置列表项标志的类型...原创 2020-03-22 18:10:06 · 167 阅读 · 0 评论 -
CSS使用链接属性
链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。四个链接状态是：– a:link - 正常，未访问过的链接– a:visited - 用户已访问过的链接– a:hover - 当用户鼠标放在链接上时– a:active - 链接被点击的那一刻代码示例<!DOCTYPE html><html><head><meta...原创 2020-03-22 17:46:16 · 622 阅读 · 0 评论 -
CSS基础之字体属性
先介绍一个在线自动生成CSS字体样式的一个工具，W3C出品，对于我这种小白来说很实用。在线生成字体CSS样式CSS字体属性CSS字体属性定义字体，加粗，大小，文字样式。属性描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-v...原创 2020-03-22 17:27:06 · 232 阅读 · 1 评论 -
CSS基础之文本属性介绍
CSS 文本属性属性描述color设置文本颜色direction设置文本方向letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-t...原创 2020-03-22 16:20:22 · 175 阅读 · 0 评论 -
使用CSS背景
CSS 背景属性Property描述background简写属性，作用是将背景属性设置在一个声明中background-attachment背景图像是否固定或者随着页面的其余部分滚动background-color设置元素的背景颜色background-image把图像设置为背景background-position设置背景图像的起始位置...原创 2020-03-22 15:51:23 · 144 阅读 · 0 评论 -
插入CSS样式表
插入样式表的方法有三种:外部样式表内部样式表内联样式创建外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在HTML文档的头部（head标签中使用标签连接到样式表：<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>样式表应该以...原创 2020-03-22 15:13:45 · 262 阅读 · 0 评论 -
CSS之id和class选择器
在HTML元素中使用CSS样式表，需要在元素中设置"id" 和 “class” 属性id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用D属性只能在每个 HTML 文档中出现一次代码示...原创 2020-03-22 14:58:20 · 187 阅读 · 0 评论 -
HTML速查表
HTML 基本文档<!DOCTYPE html><html><head><title>文档标题</title></head><body> 可见文本... </body></html>基本标签（Basic Tags）<h1>最大的标题</h1> &...原创 2020-03-21 18:42:37 · 226 阅读 · 0 评论 -
HTML基础之URL
HTML URLURL: Uniform Resource Locators - 统一资源定位器Web浏览器通过URL从Web服务器请求页面。它是一个网页地址，可以由字母组成，如"W3CSchools.cc"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。常见的 URL SchemesScheme访问用于…...原创 2020-03-21 18:27:57 · 285 阅读 · 0 评论 -
HTML基础之字符实体
HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样： &entity_name; or &#entity_number; 注意：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也...原创 2020-03-21 18:00:37 · 113 阅读 · 0 评论 -
HTML基础之脚本
脚本标签标签描述script定义了客户端脚本noscript定义了不支持脚本浏览器输出的文本注意：如果使用 “src” 属性，则 script 元素必须是空的。假如 script 元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行代码示例example1<!DOCTYPE html><html>...原创 2020-03-21 17:50:28 · 214 阅读 · 0 评论 -
HTML基础之颜色
颜色表示HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。目前所有浏览器也都支持颜色名来定义。包括141个颜色名称都是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。以颜色名排序来查看。代码示例<!DOCTYPE html><html>...原创 2020-03-21 17:25:12 · 296 阅读 · 0 评论 -
HTML基础之框架
框架标签标签描述iframe定义一个内联的iframe框架标签的属性属性说明class规定元素的类名（classname）id规定元素的唯一 idstyle规定元素的行内样式（inline style）title规定元素的额外信息（可在工具提示中显示）代码示例<!DOCTYPE html><h...原创 2020-03-21 17:07:16 · 191 阅读 · 0 评论 -
HTML元素之表单
表单标签标签描述form定义供用户输入的表单input定义输入域textarea定义文本域 (一个多行的输入控件)label定义了 input 元素的标签，一般为输入标题fieldset定义了一组相关的表单元素，并使用外框包含起来legend定义了 fieldset 元素的标题select定义了下拉选项列表optgrou...原创 2020-03-21 16:55:22 · 176 阅读 · 0 评论 -
HTML元素之区块
分组标签标签描述div定义文档的区域，块级元素(block-level)span用来组合文档中的行内元素，内联元素(inline）块级元素在浏览器显示时会自动添加折行...原创 2020-03-21 15:54:26 · 526 阅读 · 0 评论