HTML+CSS基础（转载）

第一部分 HTML

---

第一章 职业规划和前景

---

• 职业方向规划定位：

  • web前端开发工程师
  • web网站架构师
  • 自己创业
  • 转岗管理或其他

• web前端开发的前景展望：

  • 未来IT行业企业需求最多的人才
  • 结合最新的html5抢占移动端的市场
  • 自己创业做老板
  • 随着互联网的普及web开发成为企业的宠儿和核心

• web职业发展目标：

  • 第一、梳理知识架构

    • 负责内容的HTML
    • 负责外观的css（层叠样式表）
    • 负责行为的js
    • ps切图

  • 第二、分解目标（起步阶段、提升阶段、成型阶段）

    • 起步阶段：

      • 基本知识的掌握
      • 常用工具的掌握
      • 沟通技巧的掌握（围绕客户的需求）
      • 良好的开发习惯（加注释、对齐方式）

    • 提升阶段：

      • 熟悉掌握HTML基本标签和属性
      • 熟练掌握css的基本语法和使用
      • 浏览器兼容和w3c标准的掌握
      • 结合html+css+js开始系统项目的开发

    • 成型阶段：

      • 精通DIV+CCS布局
      • 精通css样式表控制html标签
      • 熟悉运用js制作动态网站的效果
      • 能独立开发完成网站

    
    
  
  

---

第二章 html基本结构

---

• 认识HTML：

  • html不是一种编程语言，是一种标志语言
  • 标记语言是由一套标识标签组成的
  • html使用标签来描述网页

• html结构：

1 2 3 4

• 不成对出现的标签
  
 

  ---

       

• HTML 基本标签的讲解：

  •   标签

  • —-

    仅仅用于标题文本，不要为了产生粗体文本使用它们

  • 标签 段落标签

  • 标签

  • 都会让文字产生加粗效果

    • 用于强调文本，强度更深，表示重要文本—>用于SEO优化
    • 只是视觉加粗效果—>单纯为了产生加粗

  •  标签
    • em用于强调文本
    • i只是视觉斜体效果
    • 比强调更强

  • 特殊符号：
    •  ; —->空格
    • >; —>大于号
    • <；—>小于号
    • "；—>引号
    • ©;–>版权号

  
  

---

第三章 html基本标签

---

• HTMl基本标签：

  • span标签
    • 对被用来组合文档中的行内元素
    • 注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化

  • 标签 
          
     
           
    文字的格式按源码的排版来显示，我们称之为预处理格式
     
          
     
    

  • 标签—>他有一个必不可少的属性 href

    • target属性：
    • _self(在原来页面打开)
    • _blank（新窗口打开）
    • _top（打开时忽略所有的框架）
    • _parent（在父窗口中打开）

  • 创建锚点和锚链接

    • 锚点也是一种超链接，是页面内进行跳转的超链接
      • 第一步：创建锚点 
      • 第二步：使用创建好的锚点名称 内容

    
    
  • marquee标签
    • 可以创建一个内容滚动效果

  
  

1

• direction 表示滚动方向，取值有（left,right,up,down,默认left）
• loop表示滚动循环的次数，默认为无限循环

1	οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滚动速度)

• 表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动

---

第四章 img图片标签与路径

---

• 图片标签与路径：

  • 常见图片格式 jpg png gif
  • Gif （只支持全透明）
  • Jpeg /jpg
  • Png 半/全透明都支持

• 图片标签写法 ：

• 图片四要素：

  • src="" 图片路径
  • alt="" 图片含义
  • width="" 图片宽度 和图片大小保持一致
  • height="" 图片高度 和图片大小保持一致
  • title=""

• 路径知识：

  • 相对路径、绝对路径：

    • 相对路径：(Relative Path) 相对于该文件的路径；
    • 绝对路径：(Absolute Path) 从磁盘出发的路径；

  •  align属性–设置图片与后面文字的位置关系
    值–top、bottom、middle、absmiddle、left、right

  
  

• 在静态页面中：

  • /开头表示根目录；

  • ./表示当前目录；（斜画线前面一个点）

  • ../上级目录；（斜画线前面两个点）

  • 直接用文件名不带/也表示同一目录

  • 这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。

---

第五章 三种列表的讲解

---

• 三种列表的知识讲解：
  • 无序列表
    • 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识

    
    

  1 2 3 4 5

  • 1. 有序列表
       • 有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于 
          标签。每个列表项始于 
         1. 标签。

  1 2 3 4 5

  内容一 内容二 内容三

  • 列表符号

    • 无序列表-列表符号:

      • type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符

    • 有序列表-列表符号

      • type="A" A B C D
      • type="a" a b c d
      • type="1" 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii

    • 列表嵌套

    • 无序列表-嵌套

    
    

  1 2 3 4 5 6 7 8 9

  柚子 沙田柚 蜜柚 荔枝 苹果

  • 有序列表-嵌套

  1 2 3 4 5 6 7 8 9

  茶 红茶 绿茶 果汁 牛奶

  • 定义列表
    • 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 

       标签开始。每个定义列表项以 

      开始。每个自定义列表项的定义以 

       开始。

  1 2 3 4 5 6

  pc网页制作 学习DIV+CSS JS JQ 项目实战 手机网页制作 手机网页制作实战

  • dd是对dt的解释

    • < dl>< /dl>用来创建一个普通的列表,
    • < dt>< /dt>用来创建列表中的上层项目，
    • < dd>< /dd>用来创建列表中最下层项目，
    • < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

  1 2 3 4 5 6 7 8 9 10

  中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约

  • dl是definition list的缩写
  • dt是definition title的缩写
  • dd是definition description的缩写
  • list-style属性具有三个属性分量：
  • list-style-position ：设置列表项图标的位置，位于文本内或者文本外
  • list-style-type： 设置列表项图标的类型
  • list-style-image：使用图像设置列表项图标

  ---

  第六章 表单元素(上)

  ---

  • 表单标签:

    • 表单标签

      • 表单是一个包含表单元素的区域，包括起来的都是表单的内容

        1 2 3

    
    

  • HTML标签 - Action和确认按钮：

    • 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

  1 2 3 4

  username:

  • HTML标签 - 隐藏域隐藏标签：

  • 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器

  1 2 3

  • 标签的掌握

    • 常用type类型：

      • type="text" 单行文本输入框
      • type="password" 密码（maxlength=""）
      • type="radio" 单项选择（checked="checked"）
      • type="checkbox" 多项选择
      • type="button" 按钮
      • type="submit" 提交 type="image"图片提交
      • type="file" 上传文件
      • type="reset"重置
      • type="hidden" 隐藏

    
    

  • 关于表单中的设置默认值：

    1 2 3

  1 2 3 4

  • textarea没有默认值

  • 标签的使用

    • • label 元素不会向用户呈现任何特殊效果。
      • 不过，它为鼠标用户改进了可用性。
      • 如果您在 label 元素内点击文本，就会触发此控件。
      • 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    •  标签的for 属性应当与相关元素的 id属性相同。

    • 例子：（重要—注册表单–用户体验–必做）

      1 2 3

      单向选择 男： 女：

    
    

  ---

  第七章 表单和表格(下)

  ---

  • 表单和表格标签：
    • </code>文本域标签</li> <li><code><textarea></code>标签：</li> <li><code><textarea>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols

  • 注意：

    • rows表示这个文本域有多少行
    • cols表示这个文本域有多少列

  • 除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）

  • 标签的掌握

    • 注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 

     表单数据提交给服务器时包括 name属性

    1 2 3 4 5 6

    1月 2月

• 常用到的属性：disabled=“disabled” name="sel" size="2"

• 表格标签
  表格标签：是表格标签，可以用它定义一个表格。

  1 2 3 4 5 6

  姓名 性别

• 注意：

  的border属性不能少
   行标签：
  可以定义表格中的一行，一个<tr>表示一行。
  
  

  标签的使用

  1 2 3 4 5 6 7 8 9 10 11

  姓名 性别 姓名 性别

  • 单元格标签:

    • 可以定义表格中的一个单元格，表示一个单元格。

      1 2 3 4 5 6 7

      姓名 性别 爱好

    • border-collapse 属性设置是否将表格边框折叠为单一边框：
    • border-collapse:collapse;
    • colspan左右合并
    • rowspan上下合并

  第一部分总结：

  • 非可视化标签：head meta style scrpit...
  • 可视化标签：img div span a ul li…
  • 只有可视化标签，才能用css改变它
  • 单标签：meta link base img input br hr

  • 双标签：html head body div a p span ..ul li ol dl ….

  • 常用可视化标签

    • div
      • 一般用它来布局

    • a 超链接标签
      • href*属性：设置跳转的网页地址
      • target属性：设置跳转的目标
      • 结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签

    • img
      • src*属性用来设置图片的url数据
      • alt提供给搜索引擎搜索的
      • width
      • height
      • 结论 ：显示图片

    • ul li
      • 列表
      • 结论：只要将来设计页面中有固定样式的列表，就用ul和li

    • table caption tr td
(th)
      • 慢慢已经被淘汰了 被ul li代替
      • 如果是合并竖排的就是合并行（rowspan）
      • 如果是合并横排的就是合并列（colspan）

    
    

  ---

  HTML部分导图总结

  ---

  • HTML5标签集合

  

  

  

  ---

  第二部分 CSS

  ---

  第八章 css基础知识

  ---

  • css基础知识：
    • css样式表的定义
    • css：（Cascading Style Sheets）层叠样式表；

  • 分类及位置：内部样式-head区域style标签里面
    • 外部样式-link调用
    • 内联样式-标签元素里面

  • css内的注释：/注释内容/

  • css样式表的语法

    • CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。

    • 盒子名或者标签名{属性:值;}

    • CSS中几种颜色的表示方法

      • 用颜色名表示
        • 有17个预先确定的颜色，它们是
          • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
            　　olive, orange, purple, red, silver, teal, white, and yellow

        
        

      • 用十六进制的颜色值表示(红、绿、蓝)

        • #FF0000或者#F00

      • 用rgb(r,g,b)函数表示

        • 如：rgb(255,255,0)

      • 用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)

        • 如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表
          蓝色

      • 用rgba(r,g,b,a)函数表示

        • 其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明

      • 用hsla(Hue,Saturation,Lightness,alpha)函数表示

        • 色调、饱和度、亮度、透明度

      • 例子
      
      
    
    

  1 2 3 4 5 6 7 8 9

  <div style="position:absolute;top:0px"> <div style="background-color:gray;">background-color:gray div> <div style="background-color:#F00;">background-color:#F00 div> <div style="background-color:#ffff00;">background-color:#ffff00 div> <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255) div> <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%) div> <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5) div> <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5) div> div>

  

  • 内部样式表
    • 当单个页面需要设置样式时，就应该使用内部样式表。
    • 使用 标签在文档里面定义内部样式表

  1 2 3 4 5

  • 从外部引入到样式分为两种：（注意写在head标签里面）

  • 当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。

  • Link样式表式： 

  • Html式： 

  • 内联样式表（优先级高）

    • 写在标签里面的样式

    • 如：

  • 表示给p标签里面的文字颜色设置为红色

  • 区别：外链样式与导入样式

    • link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

    • 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。

    • 兼容性的区别，因@import``CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。

    • 在样式控制上(比如动态改变网页的布局时,使用JavaScript操作DOM)的区别，此时@import就无能为力了。

  ---

  • 样式的优先级补充
    • 相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
      • 内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

    
    

  • 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式

  • 层叠优先级是:

    • 浏览器缺省< 外部样式表 < 内部样式表 < 内联样式

  • 其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器

  • 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:

    • 浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级

  • 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

    • 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

  ---

  第九章 css选择器(上)

  • css选择器：
    • class类选择器可以重复利用
    • id选择器唯一

  • 标签选择器
    • 什么是选择器：css选择器就是要改变样式的对象

  • 选择器{属性:值;属性:值;}

  • 标签选择器：页面中所有的标签都是一个选择器 p{color:red;}

  • ID选择器

    • 选择id命名的元素 以 # 开头 #p1{color:#0f0;}

  • 类选择器

    • class选择器，选择clas命名的元素 以.开头 .first{color:#00f;}

  • css代码写完后上线前要经过压缩处理
  • 本地和服务器分两个css版本（备份）

  • 压缩后注释都清除，空间体积减少

  • 群组选择器

    • 选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}

  • 包含选择器
    • 选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p
      • span{color:red;}

    
    

  • 属性选择器

    • 选择包含某一属性的元素
    • a[title]{color:red;} 选择包含title的a标签
    • a[title][href]{color:red;} 选择包含title和href的a标签

  • > + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）

    • p > span{color:red;}

  • 相邻兄弟选择器：只选择后面的相邻兄弟元素
    • p + span{color:red;}

  ---

  第十章 css选择器(下)

  ---

  • 伪类选择器
    • a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
    • a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
    • a:hover {color:#FF00FF;}/* 鼠标移动到链接上
    • */（可和其他标签结合一起用）
    • a:active {color:#0000FF;} / 选定的链接 /
    • 注意
      • 伪类选择器的排序很重要，a:link a:visited a:hover a:active，记作lvha

    
    

  • 输入伪类选择器（针对表单）

    • input:focus{color:red;} / 键盘输入焦点 /

  • 其他伪类选择器

    • p:first-child{color:red;} /* 第一个p */
    • :before 在元素之前添加内容。
    • :after 在元素之后添加内容。

  • css优先规则

    • 内联样式表-> ID 选择器—> Class 类选择器->标签选择器

  ---

  第十一章 背景属性

  ---

  • 背景属性：

    • 背景的添加 ：

    • 背景颜色的添加:

      • background:red;
      • backgronnd-color:red;

    • 背景图片的添加：

      • background:url(“images/1.jpg”);
      • backgronnd-image:url(“images/1.jpg”);

    • 背景的平铺
    • 什么是平铺？平铺就是图片是否重复出现
      • 不平铺：background-repeat:no-repeat;
      • 水平方向平铺：background-repeat:repeat-x;
      • 垂直方向平铺：background-repeat:repeat-y;
      • 完全平铺：默认为完全平铺

    • 背景图片的定位
      • 背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
      • background-position的取值可为英文单词或者数值和百分值。
      • background-positon的英文单词取值
      • top left
      • top center
      • top right
      • center left
      • center center
      • center right
      • bottom left
      • bottom center
      • ottom right

    • background-positon的数值取值
      • background-position:x y;

    • positon的百分值取值
      • background-position:x% y%;

    • 背景图片的大小

      • 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。

    • background-size的数值取值

      • background-size:x y;

    • background-size的数值取值

      • background-size:x% y%;

    • 背景图片的滚动

      • 背景图片是否随着内容的滚动而滚动由background-attachment设置

      • background-attachment:fixed; 固定，不随内容的滚动而滚动

      • background-attachment:scroll; 滚动，随内容的滚动而滚动

    
    

  ---

  第十二章 文字文本属性

  ---

  • css文字文本属性：

    • 文字属性

      • color:red; 文字颜色
      • font-size:12px; 文字大小
      • font-weight:“bold” 文字粗细(bold/normal)
      • font-family:“宋体” 文字字体
      • font-variant:small-caps小写字母以大写字母显示

    
    

  • 文本属性

    • text-align:center; 文本对齐(right/left/center)
    • line-height:10px; 行间距(可通过它实现文本的垂直居中)
    • text-indent:20px; 首行缩进
    • text-decoration:none;
      • 文本线(none/underline/overline/line-through)

    • letter-spacing:
      字间距
    
    

  ---

  第十三章 盒子模型

  ---

  • 盒子模型
    • 盒子模型就是一个有高度和宽度的矩形区域
    • 所有html标签都是盒子模型
    • div标签自定义盒子模型

  • 所有的标签都是盒子模型

    • class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

  • 盒子模型的组成

    • 盒子模型组成部分：
      • 自身内容：width、height 宽高
      • 内边距： padding
      • 盒子边框： border 边框线
      • 与其他盒子距离： margin外边距
      • 内容+内边距+边框+外边距=面积

    
    

  • border 边框

    • 常见写法 border:1px solid #f00;

  • 单独属性：

    • border-width:
    • border-style:
      • dotted 点状虚线
      • dashed（虚线）
      • solid（实线）
      • double（双实线）

    • border-color (颜色)
    
    

  • padding 内边距

    • 值：像素/厘米等长度单位、百分比

      • padding:10px; 上下左右
      • padding:10px 10px; 上下 左右
      • padding:10px 10px 10px; 上 左右 下
      • padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）

    
    

  • 单独属性：

    • padding-top:
    • padding-right:
    • padding-bottom:
    • padding-left:

  • 当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

  • margin 外边距

    • 值：与padding相同

    • 单独属性：与padding相同

  • 外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

  ---

  补充盒子模型内容

  ---

  • 标准盒子模型

    • 盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

  

  • 从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content部分不包含其他部分

  • IE盒子模型

  

  • 从上图可以看到 ie盒子模型的范围也包括 margin、border、padding、content

  • 和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding

  • IE盒子模型width = padding+border+内容

  • 标准盒子模型 = 内容的宽度（不包含border+padding）

  • 例：

    • 一个盒子的 margin为 20px，border 为 1px，padding为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px

  • 那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。

  • 假如不加doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie浏览器会采用 ie 盒子模型去解释你的盒子，而 ff会采用标准w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。
  • 反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

  ---

  • 用 jquery 做的例子来证实一下

  1 2 3 4 5 6 7 8 9 10 11 12

  • 　上面的代码没有加上 doctype 声明，在 ie 浏览器中显示 ie盒子模型，在 ff 浏览器中显示“标准w3c盒子模型”。

  1 2 3 4 5 6 7 8 9 10 11 12 13

  • 　代码2 与代码1 唯一的不同的就是顶部加了 doctype声明。在所有浏览器中都显示“标准 w3c盒子模型”

  • 所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型

  • 扩展

    • 学会使用box-sizing布局

  ---

  第十四章 块元素、行元素与溢出

  ---

  • 基本概念
    • 块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；
    • 行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距

  • 行块转换

    • display:none; 不显示
    • display:block; 变成块级元素
    • display:inline; 变成行级元素
    • display:inline-block; 以块级元素样式展示，以行级元素样式排列

  • 溢出

    • overflow:hidden; 溢出隐藏
    • overflow:scroll; 内容会被修剪，浏览器会显示滚动条
    • overflow:auto; 如果内容被修剪，则产生滚动条

  • 文本不换行：white-space:nowrap;

  • 长单词换行：word-wrap:break-word;

  • 行内元素和快级元素小结

    • 一、块级元素：block element

      • 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；

      • 块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。

      • DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

    • 二、行内元素：inline element

      • 也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

    • 三、block（块）元素的特点:

      • ①、总是在新行上开始；
      • ②、高度，行高以及外边距和内边距都可控制；
      • ③、宽度缺省是它的容器的100%，除非设定一个宽度。
      • ④、它可以容纳内联元素和其他块元素

    • 四、inline元素的特点

      • ①、和其他元素都在一行上；
      • ②、高，行高及外边距和内边距不可改变；
      • ③、宽度就是它的文字或图片的宽度，不可改变
      • ④、内联元素只能容纳文本或者其他内联元素

    • 对行内元素，需要注意如下:

      • 设置宽度width 无效。 设置高度height无效，可以通过line-height来设置。 设置margin
      • 只有左右margin有效，上下无效。
      • 设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

    • 五、常见的块状元素

      • address – 地址
      • blockquote – 块引用
      • center – 举中对齐块
      • dir – 目录列表
      • div – 常用块级容易，也是CSS layout的主要标签
      • dl – 定义列表
      • fieldset – form控制组
      • form – 交互表单
      • h1 – 大标题
      • h2 – 副标题
      • h3 – 3级标题
      • h4 – 4级标题
      • h5 – 5级标题
      • h6 – 6级标题
      • hr – 水平分隔线
      • isindex – input prompt
      • menu – 菜单列表
      • noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
      • noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
      • ol – 有序表单
      • p – 段落
      • pre – 格式化文本
      • table – 表格
      • ul – 无序列表

    • 六、常见的内联元素

      • a – 锚点
      • abbr – 缩写
      • acronym – 首字
      • b – 粗体(不推荐)
      • bdo – bidi override
      • big – 大字体
      • br – 换行
      • cite – 引用
      • code – 计算机代码(在引用源码的时候需要)
      • dfn – 定义字段
      • em – 强调
      • font – 字体设定(不推荐)
      • i – 斜体
      • img – 图片
      • input – 输入框
      • kbd – 定义键盘文本
      • label – 表格标签
      • q – 短引用
      • s – 中划线(不推荐)
      • samp – 定义范例计算机代码
      • select – 项目选择
      • small – 小字体文本
      • span – 常用内联容器，定义文本内区块
      • strike – 中划线
      • strong – 粗体强调
      • sub – 下标
      • sup – 上标
      • textarea – 多行文本输入框
      • tt – 电传文本
      • u – 下划线

    • 七，可变元素

      • 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
      • applet - java applet
      • button - 按钮
      • del- 删除文本
      • iframe - inline frame
      • ins - 插入的文本
      • map - 图片区块(map)
      • object - object对象
      • script - 客户端脚本

    • 八、行内元素与块级元素有什么不同

      • 区别一：

        • 块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
        • 行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

      • 区别二：

        • 块级：块级元素可以设置宽高
        • 行内：行内元素不可以设置宽高

      • 区别三：

        • 块级：块级元素可以设置margin，padding
        • 行内：行内元素水平方向的margin-left; margin-right;

      • padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

      • 区别四：

        • 块级：display:block;
        • 行内：display:inline;

      
      

    • 替换元素有如下：（和img一样的设置方法）

      • 、、</code>、<code><select></code></li> <li><code><object></code>都是替换元素，这些元素都没有实际的内容</li> </ul> <p></p></li> </ul> <br> </li> <li>可以通过修改<code>display</code>属性来切换块级元素和行内元素</li> </ul> <hr> <h4 id="第十五章-定位"> 第十五章 定位</h4> <hr> <ul> <li> <p> <code>static</code>静态定位（不对它的位置进行改变，在哪里就在那里）</p> <ul> <li>默认值。没有定位，元素出现在正常的流中（忽略 <code>top</code>,<code>bottom,</code> <code>left, right</code> 或者 <code>z-index</code> 声明）。</li> </ul> <p></p></li> <li> <p> <code>fixed</code>固定定位（参照物–浏览器窗口）—做 弹窗广告用到</p> <ul> <li>生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 <code>"left"</code>, <code>"top"</code>, <code>"right"</code>以及 <code>"bottom"</code>属性进行规定。</li> </ul> <p></p></li> <li> <p> <code>relative</code>（相对定位 ）（参照物以他本身）</p> <ul> <li>生成相对定位的元素，相对于其正常位置进行定位。</li> </ul> <p></p></li> <li> <p> <code>absolute</code>（绝对定位）(除了<code>static</code>都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)</p> <ul> <li>生成绝对定位的元素，相对于 <code>static</code> 定位以外的第一个父元素进行定位。</li> <li>元素的位置通过 “<code>left"</code>, <code>"top"</code>, <code>"right"</code> 以及 <code>"bottom"</code> 属性进行规定</li> </ul> <p></p></li> <li> <p> z-index</p> <ul> <li><code>z-index</code> 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。</li> <li>定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。</li> </ul> <p></p></li> <li> <p> 一切皆为框</p> <ul> <li>块级元素: <code>div</code>、<code>h1</code>或<code>p</code>元素 即：显示为一块内容称之为 “块框“ ;</li> <li>行内元素: <code>span</code>,<code>strong</code>,<code>a</code>等元素 即：内容显示在行中称 “行内框”;</li> <li>使用display属性改变成框的类型 即：<code>display:block</code>; 让行内元素设置为块级元素，<code>display:none;</code> 没有框</li> </ul> <p></p></li> <li> <p> 相对定位：</p> <ul> <li>如果对一个元素进行相对定位，它将出现在它所在的位置上。</li> <li>通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动</li> <li><code>.adv_relative { position: relative; left: 30px; top: 20px; }</code></li> </ul> <p></p></li> <li> <p> 绝对定位：</p> <ul> <li>元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。 <code>.adv_absolute { position: absolute; left: 30px; top: 20px; }</code></li> </ul> <p></p></li> </ul> <hr> <p> <img src="http://img.e-com-net.com/image/info8/f022cd498d024a24a65bf90741699713.jpg" alt="" width="0" height="0"><br> <img src="http://img.e-com-net.com/image/info8/d6a305a16cbd46f6940e63546263fdc6.jpg" alt="" width="0" height="0"></p> <hr> <h4 id="第十六章-框架"> 第十六章 框架</h4> <hr> <ul> <li><code>frameset</code>框架： <ul> <li><code><frameset></code> —- 用来定义一个框架；双标签<br> 不能和 <code><body></code> 一起使用</li> </ul> <p></p></li> <li> <p> <code>rows</code>、<code>cols</code>属性</p> <ul> <li><code>rows</code> 定义行表示框架有多少行（取值 <code>px</code>/<code>%</code>/ <code>*</code> ）</li> <li><code>cols</code> 定义列表示框架有多少列（取值<code>px</code>/ <code>%</code>/ <code>*</code> ）</li> </ul> <p></p></li> <li> <p> frame子框架</p> <ul> <li> <p> <<code>frame</code>> —- 表示框架中的某一个部分；单标签，要跟结束标志</p> <ul> <li><code>src</code> 显示的网页的路径</li> <li><code>name</code> 框架名</li> <li><code>frameborder</code> 边框线（取值 0 / 1）</li> </ul> <p></p></li> <li> <p> <<code>noframes</code>>属性</p> <p></p></li> <li> <p> <<code>noframes</code>> 提供不支持框架的浏览器显示<code>body</code>的内容；双标签</p> <p></p></li> </ul> <br> </li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div></pre> </td> <td class="code"> <pre> <div class="line"> <frameset> </div> <div class="line"> <frame src=“” /> </div> <div class="line"> <frame src=“” /> </div> <div class="line"> <frame src=“” /> </div> <div class="line"> <noframes> </div> <div class="line"> <body>内容</body> </div> <div class="line"> </noframes> </div> <div class="line"> </frameset> </div></pre> </td> </tr> </tbody> </table> <ul> <li><code><iframe></code>内联框架 <ul> <li><code>iframe</code>元素会创建包含另外一个文档的内联框架（即行内框架）</li> <li>允许和 <code>body</code> 一起使用</li> <li><code>width</code> 宽（取值 px / %）</li> <li><code>height</code> 高（取值 px / %）</li> <li><code>name</code> 框架名</li> <li><code>frameborder</code> 边框线（取值 0 / 1）</li> <li><code>src</code> 显示的网页的路径</li> </ul> <p></p></li> </ul> <hr> <h4 id="第十七章-css高级属性"> 第十七章 css高级属性</h4> <hr> <ul> <li><code>opacity</code>透明属性 <ul> <li><code>opacity</code> <ul> <li>对于<code>IE6/7/</code>，使用<code>filter:alpha(opacity:值;</code>) 值为<code>0-100</code></li> <li>对于<code>Webkit</code>，<code>Opera</code>，<code>Firefox</code>，<code>IE9+</code>，使用<code>opacity</code>:值; 值为<code>0-1</code></li> <li>对于早期火狐，使用<code>-moz-opacity</code>:值; 值为<code>0-1</code></li> <li>所以写透明属性时，一般写法是</li> </ul> <p></p></li> </ul> <br> </li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div></pre> </td> <td class="code"> <pre> <div class="line"> { </div> <div class="line"> opacity:0.5; </div> <div class="line"> filter:alpha(opacity：50);/*0-100*/ </div> <div class="line"> -moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决 </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul> <li> <p> <code>border-radius</code>圆角边框属性</p> <ul> <li>向 <code>div</code> 元素添加圆角边框 <ul> <li><code>border-radius:10px</code>;</li> </ul> <p></p></li> </ul> <br> </li> <li> <p> <code>box-shadow</code>阴影属性</p> <ul> <li> <p> <code>box-shadow</code>属性向框添加阴影效果,后面跟4个参数。</p> </li> <li> <p> <code>box-shadow:0px 0px 10px #000;</code></p> </li> </ul> <p></p></li> <li> <p> <code><embed></code>属性</p> <ul> <li> <p> 是<code>HTML5</code>中新增的标签,媒体嵌入插件标签，可以通过<code><embed></code>插入音频或视频</p> </li> <li> <p> <code><embed src=“media/music.mp3” /></code></p> </li> <li> <p> 格式<code>.mid</code> <code>.wav</code> <code>.mp3</code>等</p> </li> </ul> <p></p></li> </ul> <hr> <ul> <li>CSS部分导图总结</li> </ul> <hr> <p> <img src="http://img.e-com-net.com/image/info8/1a1561dbdcdc4fb598250cae941c19bb.jpg" alt="" width="0" height="0"></p> <ul> <li><br> </li> </ul> <hr> <p> <img src="http://img.e-com-net.com/image/info8/8392cddc4f774f57b710a628ebb5450d.jpg" alt="" width="0" height="0"></p> <hr> <ul> <li><code>css</code>常见简写</li> </ul> <p> </p> <hr> <h3 id="第三部分-附录"> 第三部分 附录</h3> <hr> <h4 id="附录一-DIV命名规范"> 附录一 DIV命名规范</h4> <hr> <ul> <li> <p> 企业<code>DIV</code>使用频率高的命名方法</p> </li> <li> <p> 网页内容类</p> <ul> <li> <p> 标题: <code>title</code></p> <ul> <li>摘要: <code>summary</code></li> <li>箭头： <code>arrow</code></li> <li>商标： <code>label</code></li> <li>网站标志： <code>logo</code></li> <li>转角/圆角：<code>corner</code></li> <li>横幅广告： <code>banner</code></li> <li>子菜单： <code>subMenu</code></li> <li>搜索： <code>search</code></li> <li>搜索框： <code>searchBox</code></li> <li>登录： <code>login</code></li> <li>登录条：<code>loginbar</code></li> <li>工具条： <code>toolbar</code></li> <li>下拉： <code>drop</code></li> <li>标签页： <code>tab</code></li> <li>当前的： <code>current</code></li> <li>列表： <code>list</code></li> <li>滚动： <code>scroll</code></li> <li>服务： <code>service</code></li> <li>提示信息： <code>msg</code></li> <li>热点：<code>hot</code></li> <li>新闻： <code>news</code></li> <li>小技巧： <code>tips</code></li> <li>下载： <code>download</code></li> <li>栏目标题： <code>title</code></li> <li>热点： <code>hot</code></li> <li>加入：<code>joinus</code></li> <li>注册： <code>regsiter</code></li> <li>指南： <code>guide</code></li> <li>友情链接： <code>friendlink</code></li> <li>状态： <code>status</code></li> <li>版权： <code>copyright</code></li> <li>按钮： <code>btn</code></li> <li>合作伙伴： <code>partner</code></li> <li>投票： <code>vote</code></li> <li>左右中：<code>left</code> <code>right</code> <code>center</code></li> </ul> <p></p> <hr> <br> <p></p></li> <li>注释的写法: <code>/* <br> Footer <em>/</em></code> 内容区<code>/ <br> End Footer */</code></li> </ul> <br> </li> <li> <p> id的命名:</p> <ul> <li> <p> 页面结构</p> <ul> <li>容器: <code>container</code></li> <li>页头：<code>header</code></li> <li>内容：<code>content</code>/<code>container</code></li> <li>页面主体：<code>main</code></li> <li>页尾：<code>footer</code></li> <li>导航：<code>nav</code></li> <li>侧栏：<code>sidebar</code></li> <li>栏目：<code>column</code></li> <li>页面外围控制整体布局宽度：<code>wrapper</code></li> <li>左右中：<code>left</code> <code>right</code> <code>center</code></li> </ul> <p></p></li> </ul> <hr> <ul> <li> <p> 导航</p> <ul> <li>导航：<code>nav</code></li> <li>主导航：<code>mainbav</code></li> <li>子导航：<code>subnav</code></li> <li>顶导航：<code>topnav</code></li> <li>边导航：<code>sidebar</code></li> <li>左导航：<code>leftsidebar</code></li> <li>右导航：<code>rightsidebar</code></li> <li>菜单：<code>menu</code></li> <li>子菜单：<code>submenu</code></li> <li>标题: <code>title</code></li> <li>摘要: <code>summary</code></li> </ul> <p></p></li> </ul> <hr> <ul> <li> <p> 功能</p> <ul> <li>标志：<code>logo</code></li> <li>广告：<code>banner</code></li> <li>登陆：<code>login</code></li> <li>登录条：<code>loginbar</code></li> <li>注册：<code>regsiter</code></li> <li>搜索：<code>search</code></li> <li>功能区：<code>shop</code></li> <li>标题：<code>title</code></li> <li>加入：<code>joinus</code></li> <li>状态：<code>status</code></li> <li>按钮：<code>btn</code></li> <li>滚动：<code>scroll</code></li> <li>标签页：<code>tab</code></li> <li>文章列表：<code>list</code></li> <li>提示信息：<code>msg</code></li> <li>当前的:<code>current</code></li> <li>小技巧：<code>tips</code></li> <li>图标: <code>icon</code></li> <li>注释：<code>note</code></li> <li>指南：<code>guild</code></li> <li>服务：<code>service</code></li> <li>热点：<code>hot</code></li> <li>新闻：<code>news</code></li> <li>下载：<code>download</code></li> <li>投票：<code>vote</code></li> <li>合作伙伴：<code>partner</code></li> <li>友情链接：<code>link</code></li> <li>版权：<code>copyright</code></li> </ul> <p></p></li> </ul> <hr> <ul> <li> <p> <code>class</code>的命名:</p> <ul> <li> <p> 颜色:使用颜色的名称或者16进制代码,如</p> <ul> <li><code>.red { color: red; }</code></li> <li><code>.f60 { color: #f60; }</code></li> <li><code>.ff8600 { color: #ff8600; }</code></li> </ul> <p></p></li> <li> <p> 字体大小,直接使用”font+字体大小”作为名称,如</p> <ul> <li><code>.font12px { font-size: 12px; }</code></li> <li><code>.font9px {font-size: 9pt; }</code></li> </ul> <p></p></li> <li> <p> 对齐样式,使用对齐目标的英文名称,如</p> <ul> <li><code>.left { float:left; }</code></li> <li><code>.bottom { float:bottom; }</code></li> </ul> <p></p></li> <li> <p> 标题栏样式,使用”类别+功能”的方式命名,如</p> <ul> <li><code>.barnews { }</code></li> <li><code>.barproduct { }</code></li> </ul> <p></p></li> </ul> <hr> <ul> <li> <p> 注意事项::</p> <ul> <li>一律小写;</li> <li>尽量用英文;</li> <li>不加中杠和下划线;</li> <li>尽量不缩写，除非一看就明白的单词.</li> </ul> <p></p></li> </ul> <br> <hr> <br> </li> </ul> <br> </li> <li> <p> 推荐的 <code>CSS</code> 书写顺序：</p> <ul> <li> <p> 显示属性</p> <ul> <li><code>display</code></li> <li><code>list-style</code></li> <li><code>position</code></li> <li><code>float</code></li> <li><code>clear</code></li> </ul> <p></p></li> <li> <p> 自身属性</p> <ul> <li><code>width</code></li> <li><code>height</code></li> <li><code>margin</code></li> <li><code>padding</code></li> <li><code>border</code></li> <li><code>background</code></li> </ul> <p></p></li> <li> <p> 文本属性</p> <ul> <li><code>color</code></li> <li><code>font</code></li> <li><code>text-decoration</code></li> <li><code>text-align</code></li> <li><code>vertical-align</code></li> <li><code>white-space</code></li> <li><code>other text</code></li> <li><code>content</code></li> </ul> <p></p></li> </ul> <br> </li> </ul> <hr> <h4 id="附录二-CSS精灵"> 附录二 CSS精灵</h4> <hr> <ul> <li>CSS精灵原理以及应用 <ul> <li><code>CSS</code>雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。 <ul> <li>该图片使用<code>CSS</code> <code>background和background-position</code>属性渲染，这也就意味着你的标签变得更加复杂了，图片是在<code>CSS</code>中定义，而非<code><img></code>标签。</li> </ul> <p></p></li> </ul> <br> </li> <li>一个简单的例子： <ul> <li>一张图片作出一个按钮的三个状态</li> <li>一个链接用<code>CSS</code>做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，<code>a:link</code>，<code>a:hover</code>，<code>a:active</code> <code><a class="button" href="#">链接</a></code></li> <li>加入右侧的图片为：<code>200px 65px</code>的三个按钮图拼合而成的图片<code>button.png</code>，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用<code>CSS</code>进行定义。</li> </ul> <p></p></li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div> <div class="line"> 9 </div> <div class="line"> 10 </div> <div class="line"> 11 </div> <div class="line"> 12 </div> <div class="line"> 13 </div> <div class="line"> 14 </div> <div class="line"> 15 </div> <div class="line"> 16 </div> <div class="line"> 17 </div> <div class="line"> 18 </div> <div class="line"> 19 </div></pre> </td> <td class="code"> <pre> <div class="line"> a { </div> <div class="line"> display:block; </div> <div class="line"> width:200px; </div> <div class="line"> height:65px; </div> <div class="line"> line-height:65px; /*定义状态*/ </div> <div class="line"> text-indent:-2015px; /*隐藏文字*/ </div> <div class="line"> background-image:url(button.png); /*定义背景图片*/ </div> <div class="line"> background-position:0 0; </div> <div class="line"> /*定义链接的普通状态，此时图像显示的是顶上的部分*/ </div> <div class="line"> } </div> <div class="line"></div> <div class="line"> a:hover { </div> <div class="line"> background-position:0 -66px; </div> <div class="line"> /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/ </div> <div class="line"> } </div> <div class="line"> a:active { </div> <div class="line"> background-position:0 -132px; </div> <div class="line"> /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/ </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul> <li>更多的<code>CSS</code>雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值 <ul> <li>如：<code>background:url(nav.png) -180px 24pxno-repeat</code>; 来达到更精确的定位</li> </ul> <p></p></li> <li>优点： <ul> <li>减少加载网页图片时对服务器的请求次数</li> <li>可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。</li> <li>提高页面的加载速度</li> <li><code>sprite</code>技术的其中一个好处是图片的加载时间(在有许多 <code>sprite</code> 时，单张图片的加载时间)。由所需图片拼成的一张 <code>GIF</code>图片的尺寸会明显小于所有图片拼合前的大小。单张的 <code>GIF</code>只有相关的一个色表，而单独分割的每一张 <code>GIF</code> 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 <code>JPEG</code> 或者 <code>PNG</code><code>sprite</code> 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。</li> <li>减少鼠标滑过的一些<code>bug</code></li> <li><code>IE6</code>不会主动预加载鼠标滑过即<code>a:hover</code>中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用<code>CSS</code>雪碧，由于一张图片即可，所以不会出现这种现象。</li> </ul> <p></p></li> <li>不足： <ul> <li><code>CSS</code>雪碧的最大问题是内存使用</li> <li>影响浏览器的缩放功能</li> <li>拼图维护比较麻烦</li> <li>使<code>CSS</code>的编写变得困难</li> <li><code>CSS</code> 雪碧调用的图片不能被打印</li> <li>错误得使用 <code>Sprites</code> 影响可访问性</li> </ul> <p></p></li> </ul> <h4 id="附录三-一些tips解决方案"> 附录三 一些tips解决方案</h4> <hr> <h5 id="页面优化实践"> 页面优化实践</h5> <hr> <ul> <li> <p> 从下面的几个方面可以进行页面的优化：</p> <ul> <li>减少请求数</li> <li>图片合并</li> <li><code>CSS</code>文件合并</li> <li>减少内联样式</li> <li>避免在 <code>CSS</code>中使用 <code>import</code></li> <li>减少文件大小</li> <li>选择适合的图片格式</li> <li>图片压缩</li> <li><code>CSS</code> 值缩写（<code>Shorthand Property</code>)</li> <li>文件压缩</li> <li>页面性能</li> <li>调整文件加载顺序</li> <li>减少标签数量</li> <li>调整选择器长度</li> <li>尽量使用<code>CSS</code> 制作显示表现</li> <li>增强代码可读性与可维护性</li> <li>规范化</li> <li>语义化</li> <li>模块化</li> </ul> <p></p></li> </ul> <h5 id="写DIV-CSS-的一些常识"> 写DIV+CSS 的一些常识</h5> <hr> <ul> <li> <p> 不要使用过小的图片做背景平铺</p> <ul> <li>这就是为何很多人都不用 <code>1px</code> 的原因，这才知晓。宽高 <code>1px</code> 的图片平铺出一个宽高 <code>200px</code> 的区域，需要 <code>200200=40, 000</code> 次，占用资源</li> </ul> <p></p></li> <li> <p> 无边框</p> <ul> <li>推荐的写法是 <code>border:none</code>;，哈哈，我一直在用这个。 <code>border:0;</code> 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源</li> </ul> <p></p></li> <li> <p> 慎用 通配符</p> <ul> <li>所谓通配符，就是将<code>CSS</code> 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。</li> </ul> <p></p></li> <li> <p> <code>CSS</code>的十六进制颜色代码缩写</p> <ul> <li>习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。</li> </ul> <p></p></li> <li> <p> 样式放头上，脚本放脚下。不内嵌，只外链</p> <p></p></li> <li> <p> 坚决不用 <code>CSS</code>表达式</p> <p></p></li> <li> <p> 使用 引用样式表，而不是通过<code>@import</code> 导入。</p> <p></p></li> <li> <p> 一般来说，<code>PNG</code>比 <code>GIF</code> 要小，小得多。再者，<code>GIF</code> 中有多少颜色是被浪费的，很值得优化。</p> <p></p></li> <li> <p> 千万不要在 <code>HTML</code>中缩放图片，一者不好看，二者占资源。</p> <p></p></li> <li> <p> 正文字体最好用偶数</p> <ul> <li><code>12px</code>、<code>14px</code>、<code>16px</code>，效果非常好。特例，<code>15px</code>。</li> </ul> <p></p></li> <li> <p> <code>block</code>、<code>ul</code>、<code>ol</code>等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。</p> <p></p></li> <li> <p> 段落之间，至少要有一倍行距</p> <p></p></li> <li> <p> 强行指定某些元素的 <code>line-height</code>，正文 <code>1.6</code>倍于文字大小，标题<code>1.3</code>倍。</p> <p></p></li> <li> <p> 中文标点用全角</p> <ul> <li>英文夹杂在中文中，左右空格，半角。</li> </ul> <p></p></li> <li> <p> 中文字体的粗体和斜体，远离较好</p> <p></p></li> </ul> <h5 id="常用代码片段"> 常用代码片段</h5> <hr> <ul> <li>雅虎工程师提供的<code>CSS</code>初始化示例代码【仅供参考】 <ul> <li>可以在<code>html</code>头文件中直接引用，从而避免浏览器的不兼容带来的错误。</li> </ul> <p></p></li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div> <div class="line"> 9 </div> <div class="line"> 10 </div> <div class="line"> 11 </div> <div class="line"> 12 </div> <div class="line"> 13 </div> <div class="line"> 14 </div> <div class="line"> 15 </div> <div class="line"> 16 </div> <div class="line"> 17 </div> <div class="line"> 18 </div> <div class="line"> 19 </div> <div class="line"> 20 </div> <div class="line"> 21 </div> <div class="line"> 22 </div> <div class="line"> 23 </div> <div class="line"> 24 </div> <div class="line"> 25 </div> <div class="line"> 26 </div> <div class="line"> 27 </div> <div class="line"> 28 </div> <div class="line"> 29 </div> <div class="line"> 30 </div> <div class="line"> 31 </div> <div class="line"> 32 </div> <div class="line"> 33 </div> <div class="line"> 34 </div> <div class="line"> 35 </div> <div class="line"> 36 </div> <div class="line"> 37 </div> <div class="line"> 38 </div> <div class="line"> 39 </div> <div class="line"> 40 </div> <div class="line"> 41 </div> <div class="line"> 42 </div> <div class="line"> 43 </div> <div class="line"> 44 </div> <div class="line"> 45 </div> <div class="line"> 46 </div> <div class="line"> 47 </div> <div class="line"> 48 </div> <div class="line"> 49 </div> <div class="line"> 50 </div> <div class="line"> 51 </div> <div class="line"> 52 </div> <div class="line"> 53 </div> <div class="line"> 54 </div> <div class="line"> 55 </div> <div class="line"> 56 </div> <div class="line"> 57 </div> <div class="line"> 58 </div> <div class="line"> 59 </div> <div class="line"> 60 </div> <div class="line"> 61 </div> <div class="line"> 62 </div> <div class="line"> 63 </div> <div class="line"> 64 </div> <div class="line"> 65 </div> <div class="line"> 66 </div> <div class="line"> 67 </div> <div class="line"> 68 </div> <div class="line"> 69 </div> <div class="line"> 70 </div> <div class="line"> 71 </div> <div class="line"> 72 </div> <div class="line"> 73 </div> <div class="line"> 74 </div> <div class="line"> 75 </div> <div class="line"> 76 </div> <div class="line"> 77 </div> <div class="line"> 78 </div> <div class="line"> 79 </div> <div class="line"> 80 </div> <div class="line"> 81 </div> <div class="line"> 82 </div> <div class="line"> 83 </div> <div class="line"> 84 </div> <div class="line"> 85 </div> <div class="line"> 86 </div> <div class="line"> 87 </div> <div class="line"> 88 </div> <div class="line"> 89 </div> <div class="line"> 90 </div> <div class="line"> 91 </div> <div class="line"> 92 </div> <div class="line"> 93 </div> <div class="line"> 94 </div> <div class="line"> 95 </div> <div class="line"> 96 </div></pre> </td> <td class="code"> <pre> <div class="line"> body, </div> <div class="line"> div, </div> <div class="line"> dl, </div> <div class="line"> dt, </div> <div class="line"> dd, </div> <div class="line"> ul, </div> <div class="line"> ol, </div> <div class="line"> li, </div> <div class="line"> h1, </div> <div class="line"> h2, </div> <div class="line"> h3, </div> <div class="line"> h4, </div> <div class="line"> h5, </div> <div class="line"> h6, </div> <div class="line"> pre, </div> <div class="line"> code, </div> <div class="line"> form, </div> <div class="line"> fieldset, </div> <div class="line"> legend, </div> <div class="line"> input, </div> <div class="line"> button, </div> <div class="line"> textarea, </div> <div class="line"> p, </div> <div class="line"> blockquote, </div> <div class="line"> th, </div> <div class="line"> td { </div> <div class="line"> margin:0; padding:0; </div> <div class="line"> } </div> <div class="line"> body { </div> <div class="line"> background:#fff; </div> <div class="line"> color:#555; </div> <div class="line"> font-size:14px; </div> <div class="line"> font-family: Verdana, Arial, Helvetica, sans-serif; </div> <div class="line"> } </div> <div class="line"> td, </div> <div class="line"> th, </div> <div class="line"> caption { </div> <div class="line"> font-size:14px; </div> <div class="line"> } </div> <div class="line"> h1, </div> <div class="line"> h2, </div> <div class="line"> h3, </div> <div class="line"> h4, </div> <div class="line"> h5, </div> <div class="line"> h6 { </div> <div class="line"> font-weight:normal; </div> <div class="line"> font-size:100%; </div> <div class="line"> } </div> <div class="line"></div> <div class="line"> address, </div> <div class="line"> caption, </div> <div class="line"> cite, </div> <div class="line"> code, </div> <div class="line"> dfn, </div> <div class="line"> em, </div> <div class="line"> strong, </div> <div class="line"> th, </div> <div class="line"> var { </div> <div class="line"> font-style:normal; </div> <div class="line"> font-weight:normal; </div> <div class="line"> } </div> <div class="line"> a { </div> <div class="line"> color:#555; </div> <div class="line"> text-decoration:none; </div> <div class="line"> } </div> <div class="line"> a:hover { </div> <div class="line"> text-decoration:underline; </div> <div class="line"> } </div> <div class="line"> img { </div> <div class="line"> border:none; </div> <div class="line"> } </div> <div class="line"> ol,ul,li { </div> <div class="line"> list-style:none; </div> <div class="line"> } </div> <div class="line"> input, </div> <div class="line"> textarea, </div> <div class="line"> select, </div> <div class="line"> button { </div> <div class="line"> font:14px Verdana,Helvetica,Arial,sans-serif; </div> <div class="line"> } </div> <div class="line"> table { </div> <div class="line"> border-collapse:collapse; </div> <div class="line"> } </div> <div class="line"> html { </div> <div class="line"> overflow-y: scroll; </div> <div class="line"> } </div> <div class="line"> .clearfix:after { </div> <div class="line"> content: "."; </div> <div class="line"> display: block; </div> <div class="line"> height:0; </div> <div class="line"> clear:both; </div> <div class="line"> visibility: hidden; </div> <div class="line"> } </div> <div class="line"> .clearfix { </div> <div class="line"> *zoom:1; </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul> <li><code>mobile meta</code>标签</li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div></pre> </td> <td class="code"> <pre> <div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”viewport”</span> <span class="attr">content</span>=<span class="string">”width</span>=<span class="string">320,target-densitydpi</span>=<span class="string">dpi_value,initial-scale</span>=<span class="string">1,</span> <span class="attr">user-scalable</span>=<span class="string">no”/</span>></span> </div></pre> </td> </tr> </tbody> </table> <ul> <li>表格不被撑开</li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div></pre> </td> <td class="code"> <pre> <div class="line"> <span class="selector-tag">table-layout</span>: <span class="selector-tag">fixed</span>; <span class="selector-tag">word-break</span>: <span class="selector-tag">break-all</span>;; <span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span> </div></pre> </td> </tr> </tbody> </table> <ul> <li>不设宽高居中</li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div></pre> </td> <td class="code"> <pre> <div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">”abc”</span> <span class="attr">style</span>=<span class="string">”display:table;text-align:center;width:100%;height:100%;”</span>></span> </div> <div class="line">       <span class="tag"><<span class="name">span</span> <span class="attr">style</span>=<span class="string">”background:#f00;</span> <span class="attr">display:table-cell</span>; <span class="attr">vertical-align:middle</span>;”></span> </div> <div class="line">             <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">”button”</span> <span class="attr">value</span>=<span class="string">”item1″</span> /></span> </div> <div class="line">       <span class="tag"></<span class="name">span</span>></span> </div> <div class="line"> <span class="tag"></<span class="name">div</span>></span> </div></pre> </td> </tr> </tbody> </table> <ul> <li>透明度的兼容代码</li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div></pre> </td> <td class="code"> <pre> <div class="line"> filter:alpha(opacity=50); /*1-100*/ </div> <div class="line"> -moz-opacity:0.5; /*0-1.0*/ </div> <div class="line"> -khtml-opacity:0.5; /*0-1.0*/ </div> <div class="line"> opacity:0.5; /*0-1.0*/ </div></pre> </td> </tr> </tbody> </table> <ul> <li>文字溢出点点省略</li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div></pre> </td> <td class="code"> <pre> <div class="line"> <span class="selector-tag">white-space</span> <span class="selector-pseudo">:nowrap</span>; </div> <div class="line"> <span class="selector-tag">text-overflow</span> <span class="selector-pseudo">:ellipsis</span>; </div> <div class="line"> <span class="selector-tag">overflow</span> <span class="selector-pseudo">:hidden</span>; </div></pre> </td> </tr> </tbody> </table> <ul> <li> <p> 清除浮动的几种方法</p> <ul> <li> <p> 方法一：<code>投机取巧法</code> – 不推荐</p> <ul> <li>直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强</li> </ul> <p></p></li> <li> <p> 方法二：<code>overflow + zoom</code>方法 –不推荐<br> <code>.fix{overflow:hidden; zoom:1;}</code></p> <ul> <li>此方法优点在于代码简洁，涵盖所有浏览器</li> </ul> <p></p></li> <li> <p> 方法三：<code>after + zoom</code>方法 -推荐–此方法可以说是综合起来最好的方法了</p> <ul> <li><code>clearfix</code>只应用在包含浮动子元素的父级元素上</li> </ul> <p></p></li> </ul> <br> </li> </ul> <table> <tbody> <tr> <td class="gutter"> <pre> <div class="line"> 1 </div> <div class="line"> 2 </div> <div class="line"> 3 </div> <div class="line"> 4 </div> <div class="line"> 5 </div> <div class="line"> 6 </div> <div class="line"> 7 </div> <div class="line"> 8 </div></pre> </td> <td class="code"> <pre> <div class="line"> <span class="selector-class">.fix</span>{ <span class="attribute">zoom</span>: <span class="number">1</span>;} </div> <div class="line"> <span class="selector-class">.fix</span> <span class="selector-pseudo">:after</span>{ </div> <div class="line"> <span class="attribute">display</span>:block; </div> <div class="line"> <span class="attribute">content</span>: <span class="string">'clear'</span>; </div> <div class="line"> <span class="attribute">clear</span>:both; </div> <div class="line"> <span class="attribute">line-height</span>: <span class="number">0</span>; </div> <div class="line"> <span class="attribute">visibility</span>:hidden; </div> <div class="line"> } </div></pre> </td> </tr> </tbody> </table> <ul> <li>更多代码片段详情 <ul> <li>实用的60个CSS代码片段</li> </ul> <p></p></li> </ul> <h5 id="一些总结"> 一些总结</h5> <hr> <ul> <li> <p> 自动继承属性：</p> <ul> <li><code>color</code></li> <li><code>font</code></li> <li><code>text-align</code></li> <li><code>list-style</code><br> …</li> </ul> <p></p></li> <li> <p> 非继承属性：</p> <ul> <li><code>background</code></li> <li><code>border</code></li> <li><code>position</code><br> …</li> </ul> <p></p></li> <li> <p> 具有破坏性的元素：</p> <ul> <li><code>float</code></li> <li><code>display:none;</code></li> <li><code>position:absoblute/fixed/sticky;</code></li> </ul> <p></p></li> <li> <p> 具有包裹性的元素：</p> <ul> <li> <p> <code>display:inline-block/table-cell</code></p> </li> <li> <p> <code>position:absolute/fixed/sticky</code></p> </li> <li> <p> <code>overflow:hidden/scroll</code></p> </li> </ul> <p></p></li> <li> <p> 消除图片底部间隙的方法</p> <ul> <li> <p> 图片块状化-无基线对齐<br> <code>img{display:block;}</code></p> </li> <li> <p> 图片底线对齐<br> <code>img{vertical-align:bottom;}</code></p> </li> <li> <p> 行高足够小 - 基线位置上移<br> <code>.box{line-height:0;}</code></p> </li> </ul> <p></p></li> </ul> <h5 id="一些概念"> 一些概念</h5> <hr> <ul> <li> <p> BFC</p> <ul> <li>BFC全称<code>”Block Formatting Context”</code> 中文为“块级格式化上下文”</li> </ul> <ul> <li> <p> 记住这么一句话：<code>BFC</code>元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素</p> </li> <li> <p> <code>BFC</code>就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此</p> </li> <li> <p> 扩展阅读</p> <ul> <li>CSS中的BFC</li> </ul> <p></p></li> </ul> <br> </li> <li>优雅降级(<code>graceful <br> degradation</code>) <ul> <li>一开始就构建完整的功能，然后再针对低版本浏览器进行兼容</li> </ul> <p></p></li> <li>渐进增强 <code>progressive <br> enhancement</code>： <ul> <li>是在浏览器开启<code>JavaScript</code>功能后，如果浏览器版本不支持某些 <code>JavaScript</code> 能力，我们解决这种问题的方式</li> </ul> <p></p></li> <li>平稳退化 <ul> <li>是在浏览器没有<code>JavaScript</code>功能，或没有开启<code>JavaScript</code>功能情况下，我们解决这种问题的方式；</li> </ul> <p></p></li> </ul> <h5 id="方案荟萃扩展阅读"> 方案荟萃扩展阅读</h5> <hr> <ul> <li> <p> 关于布局</p> <ul> <li>垂直居中</li> <li>css完全居中</li> <li>居中之美</li> <li>网页中的底部foot定位</li> <li>页面高度100%</li> <li>textarea高度自适应</li> <li>多行溢出省略</li> <li>Retina屏1px线</li> <li>Flexbugs</li> </ul> <p></p></li> <li> <p> 其他</p> <ul> <li>IF IE ENDIF条件判断之IE10</li> <li>Chrome 翻译插件</li> <li>网页retina优化</li> <li>常用meta</li> <li>树状菜单</li> <li>em vs rem</li> <li>css vs js</li> <li>css解决方案（w3cplus）</li> <li>Textures生成纹理</li> <li>CSSgram</li> <li>Csscss（检查重复声明等）</li> </ul> <p></p></li> </ul> <h4 id="附录四-部分工具资源"> 附录四 部分工具资源</h4> <hr> <ul> <li>学会使用Emmet插件快速编码</li> <li>Emmet常用快捷键</li> <li>Sublime专题</li> <li>Sublime常用插件总结</li> <li>Front-End -Develop -Tools</li> <li>ToolsBox-自己整理的一份工具列表</li> </ul> <h4 id="附录五-编码规范"> 附录五 编码规范</h4> <hr> <ul> <li>编码规范</li> <li>前端规范</li> <li>web develop standard</li> <li>Web 前端开发规范文档</li> <li>前端开发规范手册</li> </ul> <h4 id="附录六-进阶学习"> 附录六 进阶学习</h4> <hr> <ul> <li>DOM编程之API学习</li> <li>JavaScript基础学习</li> </ul> <h4 id="附录七-其他资源"> 附录七 其他资源</h4> <hr> <ul> <li>Github上前端学习资源汇总</li> <li>WEB 前端开发学习笔记</li> <li>前端开发工具箱</li> <li>148个资源让你成为CSS专家</li> <li>学习CSS布局-经典必看</li> </ul> <h4 id="附录八-常见问题"> 附录八 常见问题</h4> <hr> <ul> <li> <p> 前端指路</p> <ul> <li>写给前端面试者（w3cplus）</li> <li>如何成为一名卓越的前端工程师（勾三股四博客）</li> <li>什么是全栈工程师</li> <li>如何跟上前端开发的最新前沿</li> <li>浏览器的工作原理</li> <li>移动前端开发和 Web 前端开发的区别</li> <li>大型网站CSS编写与维护</li> <li>CSS核心技术关键字</li> </ul> <p></p></li> <li> <p> 性能/规范/实践</p> <ul> <li>如何阅读W3c规范(王晓轩)</li> <li>如何阅读W3c规范(高博)</li> <li>雅虎web性能优化军规</li> <li>权威前端性能指南</li> <li>高性能css</li> </ul> <p></p></li> <li> <p> 一些问答社区</p> <ul> <li>quora</li> <li>stackoverflow</li> <li>知乎</li> <li>前端乱炖问答区</li> <li>segmentfault问答区</li> </ul> <p></p></li> </ul> <p> </p> <blockquote> <p>引用块内容</p> </blockquote> <p></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1495284398050836480"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,CSS,前端,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> <span class="text-muted">Cavalier_01</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> <span class="text-muted">zoyation</span> <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> <span class="text-muted">Derek重名了</span> <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/66.htm" title="项目中 枚举与注解的结合使用" target="_blank">项目中 枚举与注解的结合使用</a> <span class="text-muted">飞翔的马甲</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a> <div>前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。 </div> </li> <li><a href="/article/193.htm" title="【Scala十七】Scala核心十一：下划线_的用法" target="_blank">【Scala十七】Scala核心十一：下划线_的用法</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r</div> </li> <li><a href="/article/320.htm" title="web缓存基础：术语、http报头和缓存策略" target="_blank">web缓存基础：术语、http报头和缓存策略</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下</div> </li> <li><a href="/article/447.htm" title="crontab 问题" target="_blank">crontab 问题</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>  一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh  </div> </li> <li><a href="/article/574.htm" title="让tomcat支持2级域名共享session" target="_blank">让tomcat支持2级域名共享session</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q</div> </li> <li><a href="/article/701.htm" title="web报表工具FineReport常用函数的用法总结（数学和三角函数）" target="_blank">web报表工具FineReport常用函数的用法总结（数学和三角函数）</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a> <div>  ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角</div> </li> <li><a href="/article/828.htm" title="linux 启动java进程 sh文件" target="_blank">linux 启动java进程 sh文件</a> <span class="text-muted">墙头上一根草</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a> <div>#!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid </div> </li> <li><a href="/article/955.htm" title="我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory" target="_blank">我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Spring+3+%E7%B3%BB%E5%88%97/1.htm">Spring 3 系列</a> <div>如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import</div> </li> <li><a href="/article/1082.htm" title="Linux 内存使用方法详细解析" target="_blank">Linux 内存使用方法详细解析</a> <span class="text-muted">annan211</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/Linux%E5%86%85%E5%AD%98%E8%A7%A3%E6%9E%90/1.htm">Linux内存解析</a> <div>来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用</div> </li> <li><a href="/article/1209.htm" title="数据库的单表查询常用命令及使用方法(-)" target="_blank">数据库的单表查询常用命令及使用方法(-)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E8%A1%A8%E6%9F%A5%E8%AF%A2/1.htm">单表查询</a> <div>    创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs</div> </li> <li><a href="/article/1336.htm" title="多线程基础知识" target="_blank">多线程基础知识</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的</div> </li> <li><a href="/article/1463.htm" title="fastjson简单使用实例" target="_blank">fastjson简单使用实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/fastjson/1.htm">fastjson</a> <div>一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     </div> </li> <li><a href="/article/1590.htm" title="【RPC框架Burlap】Spring集成Burlap" target="_blank">【RPC框架Burlap】Spring集成Burlap</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  </div> </li> <li><a href="/article/1717.htm" title="【Mahout一】基于Mahout 命令参数含义" target="_blank">【Mahout一】基于Mahout 命令参数含义</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Mahout/1.htm">Mahout</a> <div>1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna</div> </li> <li><a href="/article/1844.htm" title="linux使用flock文件锁解决脚本重复执行问题" target="_blank">linux使用flock文件锁解决脚本重复执行问题</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/linux+lock%E3%80%80%E9%87%8D%E5%A4%8D%E6%89%A7%E8%A1%8C/1.htm">linux lock　重复执行</a> <div>linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php </div> </li> <li><a href="/article/1971.htm" title="java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字" target="_blank">java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间</div> </li> <li><a href="/article/2098.htm" title="linux 系统相关命令" target="_blank">linux 系统相关命令</a> <span class="text-muted">candiio</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参</div> </li> <li><a href="/article/2225.htm" title="[经营与资产]保持独立性和稳定性对于软件开发的重要意义" target="_blank">[经营与资产]保持独立性和稳定性对于软件开发的重要意义</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a> <div>      一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线</div> </li> <li><a href="/article/2352.htm" title="在CentOS5.5上编译OpenJDK6" target="_blank">在CentOS5.5上编译OpenJDK6</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a> <div>几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是</div> </li> <li><a href="/article/2479.htm" title="java乱码问题" target="_blank">java乱码问题</a> <span class="text-muted">dashuaifu</span> <a class="tag" taget="_blank" href="/search/java%E4%B9%B1%E7%A0%81%E9%97%AE%E9%A2%98/1.htm">java乱码问题</a><a class="tag" taget="_blank" href="/search/js%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">js中文乱码</a> <div>swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t</div> </li> <li><a href="/article/2606.htm" title="cygwin很多命令显示command not found的解决办法" target="_blank">cygwin很多命令显示command not found的解决办法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a> <div>cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us</div> </li> <li><a href="/article/2733.htm" title="[介绍]从 Yii 1.1 升级" target="_blank">[介绍]从 Yii 1.1 升级</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发</div> </li> <li><a href="/article/2860.htm" title="Linux SSH免登录配置总结" target="_blank">Linux SSH免登录配置总结</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/ssh-keygen/1.htm">ssh-keygen</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E5%85%8D%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81/1.htm">Linux SSH免登录认证</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E4%BA%92%E4%BF%A1/1.htm">Linux SSH互信</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是</div> </li> <li><a href="/article/2987.htm" title="手势滑动销毁Activity" target="_blank">手势滑动销毁Activity</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay</div> </li> <li><a href="/article/3114.htm" title="JavaScript变换表格边框颜色" target="_blank">JavaScript变换表格边框颜色</a> <span class="text-muted">ini</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&</div> </li> <li><a href="/article/3241.htm" title="Kafka Rest : Confluent" target="_blank">Kafka Rest : Confluent</a> <span class="text-muted">kane_xie</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/confluent/1.htm">confluent</a> <div>最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu</div> </li> <li><a href="/article/3368.htm" title="Calender不是单例" target="_blank">Calender不是单例</a> <span class="text-muted">men4661273</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/Calender/1.htm">Calender</a> <div>         在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 = </div> </li> <li><a href="/article/3495.htm" title="线程内存和主内存之间联系" target="_blank">线程内存和主内存之间联系</a> <span class="text-muted">qifeifei</span> <a class="tag" taget="_blank" href="/search/java+thread/1.htm">java thread</a> <div>1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。   </div> </li> <li><a href="/article/3622.htm" title="schedule和scheduleAtFixedRate" target="_blank">schedule和scheduleAtFixedRate</a> <span class="text-muted">tangqi609567707</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/schedule/1.htm">schedule</a> <div>原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  </div> </li> <li><a href="/article/3749.htm" title="erlang 部署" target="_blank">erlang 部署</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>