前端

VScode

自动换行（word wrap）

ctrl + s 保存

ctrl + a 全选

ctrl + x ，ctrl + c , ctrl +v 剪切、复制、粘贴

ctrl + z 、ctrl + v 撤销、前进

shift + end 从头选中一行

shift + home 从尾部选中一行

shift +alt + ↓ 快速复制一行

alt + ↑ 或者 ↓ 快速移动一行

多光标：alt +鼠标左键

ctrl +D :选取相同元素的下一个

网站开发

1、UI设计师（设计稿）

2、web前端（h5）

设计稿-> 代码

数据库里面的数据 ->显示到页面

HTML+CSS

html ：结构

css：样式

3、web后端

web前端的三大核心技术

html
css
JavaScrip

HTML

html基础结构与属性

超文本标记语言（HyperText Markup Language）,标准通用标记语言下的一个应用。是网页制作必备的编程语言。

html :超文本标记语言
超文本：文本内容，非文本内容（图片视频音频等）
标记，标签：

写法分成两种：
1. 单标签

2. 双标签

创建标签的快捷键:单词+ tab
标签可以上下排列，也可以组合嵌套。
HTML常见标签
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性= "值" 属性2="值2">

HTML初始代码

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。
！+ tab键：快速创建html的初始代码

             文档声明： （告诉浏览器这是一个html文件）
            html的最外层标签：包裹着所有的html标签代码  lang = "en" 表示是一个英文网站 lang = "zh-CN"表示是一个中午网站
        
                  元信息：是编写网页中的一些赋值信息,charset = "UTF-8"国际编码，让网页不出现乱码的情况

            Document
        
    
        显示网页内容的区域

HTML注释

写法：在浏览器中看不到，只能在代码中看到注释的内容

意义：
1、把暂时不用的代码注释起来，方便以后使用
2、对开发人员进行提示
快捷添加与删除注释：
ctrl+/

HTML语义化

指的是，根据网页中内容的结构，选择适合的html的标签进行

好处：
1、没有css的情况下，页面也能呈现很好的内容结构。
2、有利于seo，让搜索引擎爬虫更好的理解网页。
3、方便其他设备解析（如屏幕阅读器，盲人阅读器）。
4、便于团队开发与维护。

标题与段落

标题 -> 双标签 :

...

在一个网页中，h1标题最重要，并且一个html文件中只能有一个h1标签
h5、h6标签在网页中不经常使用
段落 -> 双标签：

文本修饰标签

强调 -> 双标签：
、
区别：
1、写法和展示效果是有区别，一个加粗，一个斜体
2、strong的强调性更强，em的强调性稍弱
下标： _上标:

删除文本：
插入文本：
注：删除文本一般和插入文本配合使用

图片标签和图片属性

img -> 单标签
src ：引入图片的地址
alt ：当图片出现问题的时候，可以显示一段友好的文字
title : 提示信息
width、height ：图片的大小

引入文件的地址路径

相对路径
.在路径中表示当前路径
..在路径中表示上一级路径
绝对路径

跳转链接

a -> 双标签
href属性：链接的地址
target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开_blank

base -> 单标签：作用就是改变链接的默认行为

练习：
分别建立一个首页、列表页、详情页
并让他们之间实现相互跳转
每个页面至少包含一张图片
图片在images文件夹内
列表和详情页在html文件夹内，首页在根目录下

跳转锚点

实现一
#号
id属性
实现二
#号
name属性 (注意name属性加给的是a标签)

特殊符号

1、&+字符
2、解决冲突左右尖括号、添加多个空格的实现
3、<,>,

列表

无序列表->ul li 符合嵌套的规范
type属性：改变前面标记的样式（一般都是用CSS去控制）
www.w3school.com.cn/tags/att+ul_type.asp
有序列表
1. 列表的最外层容器、列表项
  注：有序列表用的非常少，经常用得是无序列表，无序列表可以代替有序列表
  type属性：改变前面标记的样式（一般都是用CSS去控制）
  www.w3school.com.cn/tags/att+ol_type.asp
2. 定义列表
列表项需要添加标题和对标题进行描述的内容
定义列表

定义专业术语或名词
对名词进行解释和描述
1. 嵌套列表
列表之间可以相互嵌套形成多层级列表，形成多层级的列表

表格
1. 表格标签
  
  表格的最外层容器
  定义表格行
  、、
  注：在一个table中tBody是可以出现多次的，但是tHead、tFood只能出现一次。
  
  表格属性
  border 表格边框
  cellpadding 单元格内的空间
  cellspacing 单元格之间的空间
  rowspan 合并行
  colspan 合并列
  align 左右对齐形式 left 、center 、right
  valign 上下对齐形式 top middle bottom
  
  表单
  
  : 表单的最外层容器
  :标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
  input(单标签)标签有一个type属性，决定是什么控件。
  
  多行文本框<br> <select>、<option> 下拉菜单<br> <label> 辅助表单<br> 还有一些常见的属性：<br> checked、disabled、name......</p> <h4>表格表单</h4> <h4><div>与<span></h4> <p>div(块)：做一个区域划分的块<br> div全称division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于多一块区域容器，可以容纳段落、标题、表格、图像等各自网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。<br> span(内联)：对文字进行修饰，内联<br> 用来修饰文字的，div和span都是没有任何默认格式的，需要配合CSS才行。</p> <h3>CSS</h3> <h4>CSS基础语法</h4> <p>格式：<br> 选择器{属性1：值1；属性2：值2}<br> 单位：<br> 1、px ->像素(pixel)<br> 2、% -> 百分比<br> 外容器 -> 600px 当前容器 50% -> 300px<br> 基本样式：<br> width(宽)、height(高)、background-color(背景色)</p> <p>CSS 注释：<br> /<em>" CSS注释的内容 "</em>/</p> <h4>CSS样式的引入方式</h4> <p>1、内联样式<br> style属性<br> 2、内部样式<br> style标签</p> <p>注：内部样式的优点在于可以复用代码</p> <p>区别：内部样式的代码可以复用、复合W3C的规范标准，尽量让结构和样式分开处理。</p> <p>3、外部方式<br> 引入一个单独的CSS文件，name.css<br> 1、<link>标签(引入外部资源)<br> rel：rel属性指定资源跟页面的关系<br> href:href属性引入外部资源的地址<br> 2、@import(了解)<br> 这种方式有很多问题，不建议使用</p> <h4>CSS中的颜色表示法</h4> <p>1、单词表示法：red , blue , green , yellow<br> 2、十六进制表示法：#000000 #ffffff<br> 0 1 2 3 4 5 6 7 8 9<br> 0 1 10 11<br> 0 1 2 3 4 5 6 7 8 9 a b c d e f<br> 3、RGB三原色表示法(red green blue):<br> rgb(255,255,255)<br> 取值范围0-255</p> <p>获取颜色的工具<br> 提取颜色的下载地址："http://www.baidufe.com/fehelper"<br> photoshop取色</p> <h4>CSS背景样式</h4> <p>background-color 背景色<br> background-image 背景图<br> url(背景地址)<br> 默认：会水平垂直铺满背景图<br> background-repeat 平铺方式<br> repeat-x(x轴平铺)<br> repeat-y(y轴平铺)<br> repeat(x,y都进行平铺，默认值)<br> no-repeat(都不平铺)<br> background-position:背景位置<br> x,y:number(px,%)|单词<br> x:left、center、right<br> y:top、center、bottom<br> background-attachment:背景图随滚动条移动的方式<br> scroll:默认值(背景位置是按照当前元素进行偏移的)背景图像会随着页面其余部分的滚动而移动<br> fixed:(背景位置是按照浏览器偏移的)当页面的其余部分滚动时，背景图像不会移动。<br> 用背景图fixed方法造成视觉差的原因是两个背景图是有一部分重叠，在我们向下滑动浏览器的时候，背景图相对浏览器向上运动，我们看到浏览器的div块也在相对运动，所以会显示上一张图的下半部分慢慢隐没，下张图的从下到上依次显现。<br> 相当于是用两个摄像机分别相对于两张图片向上运动，两个摄像机获取的图像的两部分拼凑成了视觉差效果</p> <h4>CSS边框样式</h4> <p>border-style:边框样式<br> solid：实现<br> dashed：虚线<br> dotted：点线<br> border-width:边框大小<br> border-color:边框颜色<br> red #foo...<br> 边框也可以针对某一条边进行单独设置：border-left-style:中间是left,right,top,bottom</p> <p>练习：利用边框实现三角形<br> 颜色：透明颜色 transparent</p> <h4>CSS文字类型</h4> <p>font-family:字体类型<br> 英文字体：Arial,'Times New Roman'<br> 中文字体：微软雅黑(Microsoft TaHei)、宋体(SimSun)<br> 衬线体与非衬线体<br> 注意点：<br> 1. 多个字体类型的设置目的(依次兼容)<br> 2. 引号添加的目的(有些字体名称带空格的就要加引号)<br> font-size:字体大小(一般设置偶数像素)<br> 默认值(16px)<br> 写法:number(px)|单词(small large 不推荐使用)</p> <table> <thead> <tr> <th style="text-align:center">属性取值</th> <th style="text-align:center">字体大小</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">xx-small</td> <td style="text-align:center">最小</td> </tr> <tr> <td style="text-align:center">x-sm</td> <td style="text-align:center">较小</td> </tr> <tr> <td style="text-align:center">small</td> <td style="text-align:center">小</td> </tr> <tr> <td style="text-align:center">medium</td> <td style="text-align:center">正常(默认值)</td> </tr> <tr> <td style="text-align:center">large</td> <td style="text-align:center">大</td> </tr> <tr> <td style="text-align:center">x-large</td> <td style="text-align:center">较大</td> </tr> <tr> <td style="text-align:center">xx-large</td> <td style="text-align:center">最大</td> </tr> </tbody> </table> <p>font-weight:字体粗细<br> 模式：正常(normal) 加粗(bold)<br> 写法: 单词(normal、bold) | 数值(100-900,100-500都是normal，500-900都是bold)<br> font-style:字体样式<br> 模式:正常(normal) | 斜体(italic)<br> 写法:单词(bold、italic)<br> 注:oblique也是表示斜体，用的比较少，一般了解即可<br> 区别:<br> 1、italic 带有倾斜属性的字体可以设置<br> 2、oblique 没有倾斜属性的字体也可以设置倾斜操作<br> color:字体颜色<br> text-align: 字体居中</p> <h4>CSS段落样式</h4> <p>text-decoration:文本装饰<br> 下划线:underline<br> 删除线:line-through<br> 上划线:overline<br> 不添加任何装饰:none<br> 注：添加多个文本修饰:line-through underline overline</p> <p>text-transform:文本大小写(针对英文段落)<br> 小写：lowercase<br> 大小：uppercase<br> 只针对首字母大写:capitalize</p> <p>text-indent:文本缩进<br> 首行缩进<br> em单位:相对单位，1em永远都是跟字体相同<br> text-indent:2em</p> <p>text-align:文本对齐方式<br> 对齐方式:left、right、center、justify(两端点对齐)</p> <p>line-height:定义行高</p> <p>什么是行高，一行文字的高度，上边距和下边距的等价关系<br> 默认行高：不是固定值，而是变化的。根据当前字体的大小在不断的变化</p> <p>取值：1.number(px) | scale(比例值，跟文字大小成比例的)<br> line-height:20px/200%</p> <p>letter-spacing:字之间的间距,英文单词每个字母的间距<br> letter-spacing:10px</p> <p>word-spacing:词之间的间距(只针对英文段落间距，中文没关系)<br> word-spacing:10px</p> <p>强制折行:(针对英文和数字不自动折行的问题)<br> 1、word-break:break-all(非常强烈的折行)<br> word-break:break-all<br> 2、word-wrap:break-word(不是非常强烈的折行，会产生一些空白区域)<br> word-wrap:break-word</p> <h4>CSS复合样式</h4> <p>一个CSS属性只控制一种样式叫做单一样式<br> 一个CSS属性控制多种样式，叫做复合样式</p> <p>复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序的，例如background、border；有的是需要关心顺序的，例如font。</p> <ol> <li>background:red url() repeat 0 0;</li> <li>border:1px red solid;</li> <li>font: <ul> <li>注：最少有两个值size family且这两个值的顺序不能改变 <ul> <li>weight style size family √</li> <li>style weight size family √</li> <li>weight style size/line-height family √</li> </ul> </li> <li>注：尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。</li> </ul> </li> </ol> <h4>CSS选择器</h4> <ol> <li> <p>ID选择器<br> #elem{} id ="elem"<br> 快捷方式：div#id_name + tab<br> 注意：</p> <ol> <li>ID是唯一值，在一个页面中只能出现一次，出现多次是不规范的写法。</li> <li>命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）</li> <li>写法 <ul> <li>驼峰写法：searchButton(小驼峰) SearchButton(大驼峰)</li> <li>下划线写法：search_small_SearchButton</li> <li>短线写法：search-small-SearchButton<br> CSS_id的命名：<br> (1)页面结构<br> 容器：container<br> 页头：header<br> 内容：content/container<br> 页面主题：main<br> 页尾：footer<br> 导航：nav<br> 侧栏：sidebar<br> 栏目：column<br> 页面外围控制整体布局宽度：wrapper<br> 左右中：left right center<br> (2)导航<br> 导航：nav<br> 主导航：mainbav<br> 子导航：subnav<br> 顶导航：topnav<br> 边导航：sidebar<br> 左导航: leftbar<br> 右导航: rightsidebar<br> 菜单:menu<br> 子菜单:submenu<br> 标题:title<br> 摘要:summary<br> (3)功能<br> 标志:logo<br> 广告:banner<br> 登录:login<br> 登录条:loginbar<br> 注册:register<br> 搜索:search<br> 功能区:shop<br> 标题:title<br> 加入:joinus<br> 状态:status<br> 按钮:btn<br> 滚动:scoll<br> 标签页:tab<br> 文章列表:list<br> 提示信息:msg<br> 当前的:current<br> 小技巧:tips<br> 图标:icon<br> 注释:note<br> 指南:guild<br> 服务:service<br> 热点:hot<br> 新闻:news<br> 下载:download<br> 投票:vote<br> 合作伙伴:partner<br> 友情链接:link</li> </ul> </li> </ol> </li> <li> <p>CLASS选择器<br> .elem{} class="elem"<br> 快捷方式：div.class_name + tab<br> 注：</p> <ol> <li>class选择器是可以复用的。</li> <li>可以添加多个class样式。</li> <li>多个样式的时候，样式的优先级根据CSS决定，而不是根据class属性中的顺序。</li> <li>标签+类的写法。 p.box{background:red;}只把p标签的box类的背景改成了红色。</li> </ol> </li> <li> <p>标签选择器(TAG选择器)<br> css:div{}<br> html:<div></div><br> 使用的场景：</p> <ul> <li>去掉某些标签的默认样式时。</li> <li>复杂的选择器中，如：层次选择器。</li> </ul> </li> <li><p>群组选择器(分组选择器)<br> 可以通过逗号的方式，给多个不同的选择器添加CSS样式，来达到代码的复用。<br> 语法：选择器1，选择器2，选择器n{}</p></li> <li> <p>复合选择器(交集选择器)<br> 作用：选择更准确更精细的目标元素并为其设置属性<br> 语法：选择器1选择器2选择器n{}<br> </p> <pre><code class="html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .p2,.p3{background-color: yellow;} span.p3{font-size: 20px;} </style> </head> <body> <p id="p1">yellow</p> <p class="p2">yellow</p> <p class="p3">yellow</p> <span class="p3">我的字体大小为20px,我的背景也是黄色的</span> </body> </html> </code></pre> </li> <li> <p>通配选择器<br> 作用：用来选择页面中所有的元素<br> 语法：*{}<br> 注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用<br> 使用的场景：去掉所有标签的默认样式时</p> <pre><code class="html"> <style type="text/csss"> *{color: pink;} </style>  </code></pre> </li> <li> <p>后代元素选择器<br> 作用；选中指定元素的指定后代元素<br> 语法：祖先元素后代元素{}</p> <pre><code class="html"><style type="text/css"> div span{color: red;} </style> <div> <span>我是红色的</span><p><span>我也是红色的</span></p> </div> </code></pre> </li> <li> <p>子元素选择器<br> 作用：选中指定父元素的子元素<br> 语法：父元素>子元素</p> <pre><code class="html"> <style> ul>li{color: pink;} </style> <ul> <li>我是粉色的</li> <li>我是粉色的</li> <li>我是粉色的</li> <li>我是粉色的</li> </ul> </code></pre> </li> <li> <p>伪类选择器</p> <p>伪类表示元素的一种特殊状态<br> 常用的伪类选择器：<br> :link 访问前的样式<br> :hover 鼠标移入时元素的状态<br> :visited 已被访问过后的元素的状态<br> :active 被鼠标点击时元素的状态<br> 注:</p> <ul> <li>link、visited只能给a标签加状态，hover、active可以添加给所有标签样式。</li> <li>如果四个伪类都生效，一定要注意顺序:L V H A。</li> <li>一般网站只设置:a{}(link visited active) a:hover{}</li> </ul> <pre><code class="html"><style> a:hover{background-color: pink;} </style> <a href="#">鼠标移入我时，我的背景颜色变为粉色</a> </code></pre> <p>after等伪类选择器：<br> :after，:before通过伪类的方式给元素添加一个文本内容。<br> :checked :disabled :focus都是针对表单元素的</p> <p>结构性伪类选择器：<br> nth-of-type() nth-child()<br> 角标是从1开始的，1表示第一项，2表示第二项| n值表示0从无穷大<br> first-of-type() last-of-type() only-of-type()<br> nth-of-type()和nth-child的区别</p> </li> <li> <p>属性选择器<br> 作用：根据元素中的属性或者属性值来选取指定元素<br> 语法：<br> [属性名]选取含有指定属性的元素<br> [属性名^="属性值"]选取属性值以指定内容开头的元素<br> [属性名$="属性值"]选取属性值以指定内容结尾的元素<br> [属性名*="属性值"]选取属性值包含指定内容的元素</p> <pre><code class="html"><style> /* 把所有title属性值中包含bc的p标签设置为红色 */ p[title*="bc"]{color: red;} /* 把title属性值为abc的p标签设置一个黄色背景 */ p[title="abc"]{background-color: yellow;} </style> <p title="abc">我是红色的，背景为黄色</p> <p title="bcd">我是红色的</p> </code></pre> </li> <li> <p>兄弟元素选择器<br> +选择器<br> 作用：选中一个元素后紧挨着的指定的兄弟元素<br> 语法：前一个+后一个（作用在后一个）<br> ~选择器<br> 作用：选中后边所有的指定兄弟元素<br> 语法：前一个~后边所有</p> <pre><code class="html"><style> /* 选中span后面的第一个p标签 */ /* 若span后面的第一个元素不是p标签，则这个选择器不起作用 */ span+p{color: pink;} span~p{background-color: grey;} </style> <p>单纯的p标签</p> <p>单纯的p标签</p> <p>单纯的p标签</p> <span>单纯的span</span> <p>我是粉色的，背景是灰色的</p> <p>我的背景是灰色的</p> <p>我的背景是灰色的</p> </code></pre> </li> </ol> <h4>CSS样式继承</h4> <p>文字相关的样式可以被继承。<br> 布局相关的样式不能被继承。(默认是不能继承的，但是可以设置继承属性)</p> <h4>CSS优先级</h4> <ol> <li><p>相同样式优先级：<br> 当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。</p></li> <li><p>内部样式和外部样式：<br> 内部样式和外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高.</p></li> <li> <p>单一样式优先级：<br> style行间>id>class>tag>*>继承<br> 注：<br> style行间权重 1000<br> id 权重 100<br> class 权重 10<br> tag 权重 1</p> <pre><code class="html"> <style> #elem{color: red;} .box{color: blue;} div{color: greenyellow;} *{color: red;} body{color: blue;} <\style> <div id="elem" class="box">这是一个块</div> <div id="elem" style="color: blue;">这是一个块</div> </code></pre> </li> <li> <p>！important:<br> 提升样式的优先级，非规范方式，不建议使用。(不能对继承的属性进行优先级的提升)</p> <pre><code class="html"> <style> #elem{color: red ;} *{color: green ;} body{color: grey !important;} <div id="elem" style="color: blue;">这是一个块</div> </code></pre> </li> <li> <p>标签+类与单类<br> 标签+类 > 单类</p> <pre><code class="html"> <style> .box{color: red;} div.box{color: blue;} <div class="box"> 这是一个坑 </div> </code></pre> </li> <li> <p>群组选择器：<br> 群组优先级与单一选择器的优先级相同，靠后写的优先级高。</p> <pre><code class="html"> <style> div{color: blue;} div,p{color: red;} <div class="box">这是一个坑</div> <p>这是一个段落</p> </code></pre> </li> <li> <p>层次优先级</p> <ol> <li><p>权重比较<br> ul li .box p input{} 1+1+10+1+1<br> .hello span #elem{} 10+1+100</p></li> <li><p>约分比较<br> ul li .box p input{} -> li+p+ input{}<br> .hello span #elem{} ->#elem</p></li> </ol> </li> </ol> <h4>CSS盒子模型</h4> <p>组成：content->padding->border->margin（物品->填充物->包装盒->盒子与盒子之间的间距）</p> <p>contend: 内容区域 width和height组成的<br> pandding：内边距(内填充)<br> 只写一个值 number：30px(上下左右)<br> 写两个值 :30px 40px(上下、左右)<br> 写四个值 :30px 40px 50px 60px(上右下左)<br> 单一样式只能写一个值：<br> padding-left<br> padding-right<br> padding-top<br> padding-bottom<br> margin:外间距(外填充)<br> 只写一个值:30px(上下左右)<br> 写两个值:30px 40px (上下、左右)<br> 写四个值:30px 40px 50px 60px(上右下左)<br> 单一样式只能写一个值：<br> margin-left<br> margin-right<br> margin-top<br> margin-bottom<br> 注：<br> 1. 背景色填充到margin以内的区域(不包括margin区域)<br> 2. 文字在content区域添加<br> 3. padding不能为负数，而margin可以为负数。</p> <p>box-sizing<br> 盒子尺寸,可以改变盒子模型的展示形态<br> box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。<br> 默认值:<br> content-box: width、height->content<br> border-box: width、height->content、padding、border<br> border<br> 使用的场景:<br> 1. 不用再去计算一些值<br> 2. 解决一些100%的问题</p> <p>盒子模型的一些问题：</p> <ol> <li><p>margin叠加：<br> 出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。这个问题只有上下有，左右是没有问题的。<br> 解决方法：<br> 1. BFC规范<br> 2. 想办法只给一个元素添加间距</p></li> <li><p>margin传递:<br> margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。<br> 解决方法：<br> 1. BFC规范<br> 2. 给父容器加边框<br> 3. margin换成padding</p></li> <li> <p>margin自适应居中:<br> margin左右自适应是可以的，但是上下自适应是不行的。(如果想实现上下自适应的话，需要在第二大部分来进行学习)</p> <pre><code class="html">#box{width: 400px;height: 100px;background:red;margin-left: auto;margin-right: auto;} </code></pre> </li> <li><p>不设置content的一些情况:<br> width、height不设置的时候，对盒子模型的影响：会自动去计算容器的大小，节省代码。</p></li> </ol> <h4>CSS标签分类</h4> <p>按类型：<br> block：（块）div,p,ul,li,h1<br> 1. 独占一行<br> 2. 支持所有样式<br> 3. 不写宽的时候，跟父元素的宽相同<br> 4. 所占的区域是一个矩形<br> inline：span,a,em,strong,img...<br> 1. 挨在一起的<br> 2. 有些样式不支持，height，width，margin，padding<br> 3. 不写宽的时候，宽度由内容决定<br> 4. 所占的区域不一定是矩形<br> 5. 内联标签之间会有空隙，原因：换行产生的（不换行就没有空隙）<br> inline-block：input,select...<br> 1. 挨在一起，但是支持宽高<br> 注：布局一般块标签，修饰文本用内联标签。</p> <p>按内容：（按内容分类详情查询）<br> Flow：流内容<br> Metadata：元数据<br> Section：分区<br> Heading：标题<br> Phrasing：措辞<br> Embedded：嵌入的<br> Interactive：互动的</p> <p>按显示：<br> 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。<br> img,input......<br> 非替换元素：将内容直接告诉浏览器，将其显示出来。<br> div,h1,p......</p> <h4>显示框类型</h4> <p>display：block，inline，inline-block，none<br> 注意:display:none(不占空间的隐藏)与visibility：hidden(占空间的隐藏)区别</p> <h4>标签嵌套规范</h4> <p>ul、li<br> dl、dt、dd<br> table、tr、td</p> <p>块标签可以嵌套内联标签</p> <p>块标签不一定能嵌套块标签（p标签不能嵌套）</p> <p>内联标签不能嵌套块标签</p> <pre><code class="html"> <div> <span></span> <a href="#"></a> </div>  <div> <div></div> </div>  <p> <div></div> </p>   <span> <div></div> </span>   <a href="#"> <div></div> </a> </code></pre> <h4>溢出隐藏</h4> <p>overflow：visible（默认），hidden，scoll，auto，x、y轴(overflow-x,overflow-y针对两个轴分别设置)</p> <h4>透明度和手势</h4> <p>opacity（占空间）：0（透明）~1（不透明），0.5（半透明）</p> <p>注：占空间、所有的子内容也会透明</p> <p>rgba:0~1</p> <p>注：可以让指定的样式透明，而不影响其他样式</p> <p>cursor:手势</p> <p>default：箭头</p> <p>要实现自定义手势：</p> <p>准备图片（图片格式）：.cur、.ico</p> <p>cursor:url(./img/cursor.ico),auto</p> <h4>最大、最小宽高</h4> <p>min-width、max-width、min-height、max-height</p> <p>%单位：换算->以父容器的大小进行换算</p> <p>一个容器怎么适应屏幕的高：容器加height：100%，body：100%，html：100%</p> <p>html,body{height:100%}</p> <p>.contrainr{height:100%;}(子容器)</p> <p>注：强化对百分比单位的理解</p> <h4>CSS默认样式</h4> <p>有些标签有默认样式，有些标签没有默认样式。</p> <p>没有默认样式：div、span、......</p> <p>有默认样式：body、h1...h6、p、ul、...</p> <p>body->margin:8px</p> <p>h1 ->margin:上下 21.440px;font-weight:bold</p> <p>p ->margin:上下 16px</p> <p>ul ->margin:上下 16px padding:左 40px；默认点：list-style:disc</p> <p>a ->text-decoration:underline;</p> <h4>CSS reset（场景的reset写法）</h4> <p>简单的CSS reset：</p> <p>*{margin:0;padding:0;}</p> <p>优点：不用考虑哪些标签有默认的margin和padding</p> <p>缺点：稍微地影响性能</p> <p>ul{list-style:none;}</p> <p>a{text-decoration:none;color:#999;}</p> <p>a:hover{text-decoration:underline;color:red;} #鼠标移入的时候显示的样式</p> <p>问题的现象(图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线相关的)</p> <ol> <li><p>img{display:block;} 转成块</p></li> <li><p>img{vertical:bottom;} 设置底线对齐</p></li> </ol> <p>写具体页面或一个布局效果的时候：</p> <ol> <li>写结构</li> <li>CSS重置样式</li> <li>写具体样式</li> </ol> <h4>Photoshop工具（72-77）</h4> <p>pass</p> <h4>float浮动</h4> <p>文档流：文档流是文档中可显示对象在排列时所占用的位置。</p> <p>float特性：加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。</p> <p>float取值：left、right、none(默认)</p> <p>背景（第一层）</p> <p>float（第二层）注意点：</p> <ol> <li>只会影响后面的元素。</li> <li>内容默认提升半层（文字等）。</li> <li>默认宽根据内容决定。</li> <li>换行排列。</li> <li>主要给块元素添加，但也可以给内联元素添加。</li> </ol> <p>如何清楚浮动？</p> <ol> <li> <p>上下排列：clear属性，表示清除浮动的，left、right、both</p> <pre><code class="html"><style> #box1{width: 100px;height: 100px;background: red;float: left;} /* 清除浮动 */ #box2{width: 200px;height: 200px;background: blue;clear: both;} </style> <div id="box1"></div> <div id="box2"></div> </code></pre> </li> <li> <p>嵌套排列</p> <p>固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果</p> <p>父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素</p> <p>overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。</p> <p>display：inline-block（BFC）规范，不推荐，父容器会影响到后面的元素。</p> <p>设置空标签：不推荐，会多添加一个标签。</p> <p>after伪类：推荐，是空标签的加强版，目前各大公司的做法。</p> <p>注意：(clear)属性只会操作块标签，对内联标签不起作用</p> </li> </ol> <pre><code class="html"><style> #box1{width: 200px;border: 1px black solid;} #box2{width: 100px;height: 200px;background: red;float: left;} .clear:after{content: '';clear: both;display: block;} </style> <div id="box1" class="clear"> <div id="box2"></div> </div> </code></pre> <h4>position定位</h4> <p>position特性：CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。</p> <p>position取值</p> <ol> <li><p>static</p></li> <li> <p>relative</p> <p>相对定位：</p> <ul> <li>如果没有定位偏移量，对元素本身没有任何影响</li> <li>不使元素脱离文档流</li> <li>不影响其他元素布局</li> <li>left、top、right、bottom是相对于当前元素自身进行偏移的</li> </ul> </li> <li> <p>absolute</p> <p>绝对定位：</p> <ul> <li>使元素完全脱离文档流；</li> <li>使内联元素支持宽高（让内联具备块特性）；</li> <li>使块元素默认宽根据内容决定(让块具备内联的特性)</li> <li>如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）</li> </ul> </li> <li> <p>fixed</p> <p>固定定位：</p> <ul> <li>使元素完全脱离文档流</li> <li>使内联元素支持宽高(让内联具备块特性)</li> <li>使块元素默认宽根据内容决定（让块具备内联的特性）</li> <li>相对整个浏览器窗口进行偏移，不受浏览器滚动条的影响</li> </ul> </li> <li> <p>sticky</p> <p>黏性定位：在指定的位置，进行黏性操作。</p> <p>z-index定位层级</p> </li> </ol> <h4>CSS添加省略号</h4> <p>width 必须有一个固定的宽</p> <p>white-space 不让内容折行</p> <p>overflow：hidden 隐藏溢出的内容</p> <p>text-overflow:ellipsis 添加省略号</p> <h4>CSS Sprite</h4> <p>特性：CSS雪碧也叫作CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。</p> <p>优点：可以减少图片的质量，网页的图片加载速度快；可以减少图片的请求的次数，加快网页的打开</p> <h4>CSS圆角</h4> <p>border-radius:给标签添加圆角</p> <h3>PC端的布局</h3> <p>通栏：自适应浏览器的宽度<br> 版心：固定一个宽度，并且让容器居中</p> <h4>PC端网页(游戏)制作(92-109)</h4> <p>pass</p> <h4>HTML和CSS发展历史(110)</h4> <p>pass</p> <h4>HTML和XHTML区别(111)</h4> <p>pass</p> <h4>引用标签(112)</h4> <p>pass</p> <h4>iframe嵌套页面</h4> <p>iframe元素会创建包含另外一个文档的内联框架(即行内框架)</p> <table> <thead> <tr> <th>表头</th> <th>含义</th> </tr> </thead> <tbody> <tr> <td>frameborder</td> <td>规定是否显示框架周围的边框</td> </tr> <tr> <td>width</td> <td>定义iframe的高度</td> </tr> <tr> <td>scrolling</td> <td>规定是否在iframe中显示滚动条</td> </tr> <tr> <td>src</td> <td>规定在iframe中引入的url</td> </tr> <tr> <td>srcdoc</td> <td>规定在iframe中显示的页面内容</td> </tr> </tbody> </table> <p>应用场景：数据传输（JS）、共享代码（页面局部共享，只更改需要改变的部分）、局部刷新（利用JS只刷新iframe）、第三方介入(广告)等</p> <h4>br标签与wbr标签</h4> <p>br表示换行，wbr表示软换行（挤一部分下来进行换行）</p> <h4>pre与code标签</h4> <p>pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。</p> <p>只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但是它暗示着这段文本是源程序代码。</p> <pre><code class="html"><pre> <code> </code> </pre> </code></pre> <h4>map与area</h4> <p>给特殊图形添加连接，area能添加的区域的形状：矩形、图形、多边形。</p> <p>定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。</p> <p>area元素的href属性定义区域的url，shape属性来定义区域的形状，coords属性定义热区的坐标。</p> <pre><code class="html"><img src="x.jpg" alt="" usemap="#star"> <map name="star"> <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt=""> </map> </code></pre> <h4>embed和object</h4> <p>embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多差别，主要是为了兼容不同的浏览器而已。</p> <pre><code class="html"><embed src="x.swf" type=""> </code></pre> <pre><code class="html"><object > <param name="movie" value="x.swf"> </object> </code></pre> <h4>audio和video</h4> <p>引入音频与视频的标签，属于h5的新功能</p> <pre><code class="html"><audio src="./img/x.mp3" controls autoplay><audio> </code></pre> <pre><code class="html"><video src="x.mp4"controls></video>  <video> <source src="x.ogv"> </source> <source src="x.mp4"> </source> </video> </code></pre> <h4>文字注解与文字方向</h4> <p>ruby标签定义ruby注释(中文注音或字符)，rt标签定义字符（中文注音或字符）的解释或者发音。</p> <pre><code class="html"><ruby> 寒<rt>han</rt>冬 </ruby> </code></pre> <p>bdo标签可覆盖默认的文本方向</p> <pre><code class="html"><p> <bdo dir="ltr">爱神的箭是是是是</bdo>sadajdp </p>  <p> <bdo dir="rtl">爱神的箭是是是是</bdo>sadajdp </p> </code></pre> <pre><code class="html"> <style> span{direction:rtl;unicode-bidi:bidi-override} </style> </code></pre> <p>思考题：古诗句排列</p> <p>思路：每一列浮动靠右、宽度只能容纳一个字。就可以达到古诗从右向左一列一列排列的效果。</p> <h4>扩展link标签</h4> <pre><code class="html"> <link rel="stylesheet" type="text/css" href="theme.css">  <link rel= "icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">   <link rel="dns-prefetch" href="//static.360buyimg.com"> </code></pre> <h4>meta标签</h4> <p>meta：添加一些辅助信息。</p> <p>META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。</p> <pre><code class="html"><meta name="description" content="大连美团网精选大连美食餐厅，酒店预订，电影票，旅游景点，外卖订餐，"> <meta name="keywords" content="大连美食品，大连酒店，大连团购"> <meta name="renderer" content="webkit">   <meta http-equiv="X-UA-Compatible" content="ie = edge">  <meta http-equiv="refresh" content="3" url="">  <meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT"> </code></pre> <h4>html5新语义化标签</h4> <p>可以用来提升网站的搜索引擎曝光度</p> <ol> <li><p>header：页眉</p></li> <li><p>footer：页脚</p></li> <li><p>main：主体</p></li> <li><p>hgroup：标题组合</p></li> <li> <p>nav：导航</p> <p>注：header、footer、main在一个网页中只能出现一次</p> </li> <li><p>article：独立的内容</p></li> <li><p>aside：辅助信息的内容</p></li> <li><p>section：区域</p></li> <li><p>figure：描述图像或者视频</p></li> <li><p>figcaption：描述图像或视频的标题部分</p></li> <li><p>datalist：选项列表</p></li> <li><p>details/summary：文档细节、文档标题</p></li> <li><p>progress/meter：定义进度条/定义度量范围</p></li> <li><p>time：定义日期或者时间</p></li> <li><p>mark：带有记号的文本</p></li> </ol> <pre><code class="html"><body> <header> <hgroup> <h1>主标题</h1> <h2>副标题</h2> </hgroup> <nav> <ul> <li>首页</li> <li>论坛</li> <li>关于</li> </ul> </nav> </header> <main> <article> <section> <ul> <li> <figure> <img src="./img.jpg" alt=""> <figcaption> 新水果篮子❤高甜 <br>十二生肖恋上美少女！ </figcaption> </figure> </li> </ul> </section> <section> <input type="text" list="elems">  <datalist id="elems"> <option value="a"></option> <option value="ab"></option> <option value="abc"></option> <option value="apple"></option> <option value="abbr"></option> <option value="absolute"></option> <option value="appplication"></option> </datalist>  <datalist open> <summary>HTML</summary> <p>超文本标记语言</p> </datalist>  <progress min="0" max="10" value = "5"> </progress>  <meter min="0" max="100" value="35" low="10" high="60"> </meter>  <p> 今天是<time title="2-14">情人节</time>,街上人很多 </p>  <p> 今天是<mark>情人节</mark>,街上人很多 </p> </section> <section> </section> </article> <aside></aside> </main> <footer></footer> </body> </code></pre> <h4>表格扩展</h4> <ol> <li>添加单线-> border-collapse：collapse</li> <li>隐藏空单元-> empty-cells:hide</li> <li>斜线分类-> border/rotate</li> <li>列分组-> colgroup/col</li> </ol> <pre><code class="html"><style> /* 隐藏空单元,添加单线 */ table{empty-cells:hide;border-collaspe:collaspe} /* 斜线分类 */ table .line{border-top:50px solid red;border-left:150px solid blue;position:relative;color:white} table .line em{position:absolute;left:-60px;top:-40px;font-style:normal} table .line span{position:absolute;left:-120px;top:-30px} </style> <body> <colgroup>  <col span="2" style="background:red;">  <col span="2" style="background:yellow;"> </colgroup> </body> </code></pre> <h4>表单扩展之美化控件</h4> <ol> <li> <p>label + :checked</p> <pre><code class="html"> <style> /* 隐藏label标签 */ label input{display:none} /* 如果被选中则给div加上样式，因为这个图片上面一半是被选中的样式，下面一半是没有选中的样式 */ label input:checked + div{background-position:0 0;} label div{width:28px ; height:28px; background:url('./x.png') 0 -28px;} </style> <body> <label>  <input type="checkbox">  <div></div> </label> </body>  <style> label input{display:none} label div{width:86px;height:34px;background:url('./upload.jpg')} </style> <label> <input type ="file"> <div></div> </label> </code></pre> </li> <li> <p>position + opacity（障眼法）</p> <pre><code class="html"><style> .upload{width:86px;height:34px;position:relative} /* 显示的是父容器div的背景图 */ .upload div{width:100%;height:100%;background:url('./img/upload.png');} /* 利用opacity（透明度）把上面的上传文件空间隐藏起来 */ .upload input{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0} </style> <body> <div class="upload"> <input type="file"> <div></div> </div> </body> </code></pre> </li> </ol> <h4>表单扩展之新input控件</h4> <p>新的input控件：</p> <ol> <li>email ->电子邮件地址输入框</li> <li>url ->网址输入框</li> <li>number ->数值输入框</li> <li>range ->滑动条</li> <li>date/month/week ->日期控件</li> <li>search ->搜索框</li> <li>color ->颜色控件</li> <li>tel ->电话号码输入框</li> <li>time ->时间控件</li> </ol> <pre><code class="html"><body> <form action="https://www.baidu.com">  <input type="email"> <input type="submit">  <input type="url"> <input type="submit">  <input type="number"> <input type="submit">  <input type="range" min ="0" max="10" value="2"> <input type="submit"> </form>  <input type="date"> <input type="submit">  <input type="month"> <input type="submit">  <input type="week"> <input type="submit">  <input type="search"> <input type="submit">  <input type="color"> <input type="submit">  <input type="tel"> <input type="submit">  <input type="time"> <input type="submit"> </body> </code></pre> <h4>表单扩展之——新的表单属性</h4> <ol> <li>autocomplete：自动完成</li> <li>autofocus:获取焦点</li> <li>required：不能为空</li> <li>pattern：正则验证</li> <li>method：数据传输方式</li> <li>enctype：数据传输类型(enctype="application/x-www-form-urlencoded"——字符串；enctype="multipart/form-data"——文件类型)</li> <li>name/value：数据的键值对</li> </ol> <pre><code class="html"><body> <form action="https://www.baidu.com">     <input type ="text" name="username" autocomplete="off" autofocus required pattern=""> <input type="submit"> </form> </body> </code></pre> <h4>表格扩展之标签</h4> <p>扩展标签：</p> <ol> <li>fieldset ->表单内元素分组</li> <li>legend ->为fieldset元素定义标题</li> <li>optgroup ->定义选项组</li> </ol> <pre><code class="html"><body>  <fieldset> <legend>登录</legend> <p> 用户名：<input type="text"> </p> <p> 密码：<input type="password"> </p> </fieldset>  <select name="" id=""> <optgroup label="水果"></optgroup> <option value="">苹果</option> <option value="">香蕉</option> <option value="">猕猴桃</option> <optgroup label="蔬菜"></optgroup> <option value="">黄瓜</option> <option value="">白菜</option> <option value="">茄子</option> </select> </body> </code></pre> <h4>BFC规范</h4> <p>触发BFC规范的元素，可以形成一个独立的容器，不受到外界的影响，从而解决一些布局问题。</p> <p>触发BFC的样式:</p> <ol> <li>浮动元素：float除none以外的值</li> <li>绝对定位元素：position(absolute、fixed)</li> <li>display为inline-block、table-cells、flex</li> <li>overflow除了visible意外的值（hidden、auto、scroll）</li> </ol> <p>BFC特性及应用</p> <ol> <li>解决margin叠加问题</li> <li>解决margin传递问题</li> <li>解决浮动问题</li> <li>解决覆盖问题</li> </ol> <pre><code class="html">  <style> .div1{width: 100px;height: 100px; background-color: red; margin-bottom: 30px;} .div2{width: 100px; height: 100px;background-color: blue;margin-top: 30px;} .box{overflow: hidden;} </style> <body> <div class="box"> <div class="div1"></div> </div> <div class="box"> <div class="div2"></div> </div> </body>  <style> .div1{width: 200px;height: 200px;background: red;overflow: hidden;} .div2{width: 100px;height: 100px;background: blue;margin-top: 50px;} </style> <div class="div1"> <div class="div2"> </div> </div>  <style> .div1{width: 200px;border: 1px black solid;float: left;} .div2{width: 100px;height: 100px;background: blue;float: left;} </style> <div class="div1"> <div class="div2"></div> </div>  <style> .div1{width: 100px;height: 100px;background: red;float: left;} .div2{height: 400px;background: blue;overflow: hidden;} </style> <div class="div1"></div> <div class="div2">aadasdas</div> </code></pre> <h4>浏览器前缀</h4> <table> <thead> <tr> <th>浏览器</th> <th>内核</th> <th>前缀</th> </tr> </thead> <tbody> <tr> <td>IE</td> <td>Trident</td> <td>-ms-</td> </tr> <tr> <td>Firefox</td> <td>Gecko</td> <td>-moz-</td> </tr> <tr> <td>Opera</td> <td>Presto</td> <td>-o-</td> </tr> <tr> <td>Chorme</td> <td>Webkit</td> <td>-webkit-</td> </tr> <tr> <td>Sarify</td> <td>Webkit</td> <td>-webkit-</td> </tr> <tr> <td>Opera、Chrome</td> <td>Blink</td> </tr> </tbody> </table> <p>CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。</p> <h4>transition过渡基础语法</h4> <ol> <li>transition-property:规定设置过渡效果的CSS属性的名称。</li> <li>transition-duration：规定完成过渡效果需要多少秒或者毫秒。</li> <li>transition-delay：定义过渡效果何时开始</li> <li>transition-timing-function：规定速度效果的速度曲线。</li> </ol> <pre><code class="html"> <style> div{width: 100px;height: 100px;background: red;transition-property: all;transition-duration: 1s;transition-duration: 2s;} div:hover{width: 200px;height: 200px;background: blue;} /* div{width:100px;height:100px;background:red;transition:1s 2s linear;} div:hover{width:200px;height:200px;background:blue} */ </style> <body> <div></div> </body> </code></pre> <h4>transition实例之过渡导航</h4> <pre><code class="html"> <style> ul,li{margin :0;padding: 0;list-style: none;} ul{width: 360px;} ul li{width: 60px;height: 70px;background: url('./x.png');transition: 0.5s;} ul li:nth-child(1){background-position: 0 -70px;} ul li:nth-child(2){background-position: -60px -70px;} ul li:nth-child(3){background-position: -120px -70px;} ul li:nth-child(4){background-position: -180px -70px;} ul li:nth-child(5){background-position: -240px -70px;} ul li:nth-child(6){background-position: -300px -70px;} ul li:hover:nth-child(1){background-position: 0 -70px;} ul li:hover:nth-child(2){background-position: -60px -70px;} ul li:hover:nth-child(3){background-position: -120px -70px;} ul li:hover:nth-child(4){background-position: -180px -70px;} ul li:hover:nth-child(5){background-position: -240px -70px;} ul li:hover:nth-child(6){background-position: -300px -70px;} </style> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </code></pre> <h4>transform变形</h4> <ol> <li> <p>translate:位移</p> <ol> <li>translateX</li> <li>translateY</li> <li>translateZ</li> </ol> </li> <li> <p>scale:缩放(值是一个比例值，正常大小就是1，会以当前元素中心点进行缩放)</p> <ol> <li>scaleX</li> <li>scaleY</li> <li>scaleZ</li> </ol> </li> <li> <p>rotate：旋转(旋转的值，单位是角度deg，弧度rad)</p> <ol> <li>rotatex(3d)</li> <li>rotatex(3d)</li> <li>rotatez(和rotate是等价关系，正值按顺时针旋转，负值按逆时针旋转)</li> </ol> </li> <li> <p>skew：斜切</p> <ol> <li>skewX：单位也是角度，正值向左倾斜，负值向右倾斜</li> <li>skewY</li> </ol> </li> </ol> <p>transform的注意事项：</p> <ol> <li><p>变形操作不会影响到其他元素。</p></li> <li><p>变形操作只能添加给块元素，但是不能添加给内联元素。</p></li> <li> <p>复合写法，可以同时添加多个变形操作。<br> 执行时有顺序的，先执行后面的操作，再执行前面的操作。</p> <p>translate会受到rotate、scale、skew的影响</p> </li> </ol> </article> </div> </div> </div>  <div id="SOHUCS" sid="1626454858464808960"></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">  <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>  <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>  <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笔记（上）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难？" target="_blank">斤斤计较的婚姻到底有多难？</a> <span class="text-muted">白心之岂必有为</span> <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说" target="_blank">底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说</a> <span class="text-muted">造命者说</span> <div>底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> <span class="text-muted">Tracy的小书斋</span> <div>本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div> </li> <li><a href="/article/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> <span class="text-muted">小蘑菇的树洞</span> <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <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/1835509643619692544.htm" title="如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update" target="_blank">如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update</a> <span class="text-muted">iBaoxing</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对</div> </li> <li><a href="/article/1835509138126368768.htm" title="30天风格练习-DAY2" target="_blank">30天风格练习-DAY2</a> <span class="text-muted">黄希夷</span> <div>Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用</div> </li> <li><a href="/article/1835508630959517696.htm" title="向内而求" target="_blank">向内而求</a> <span class="text-muted">陈陈_19b4</span> <div>10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外</div> </li> <li><a href="/article/1835508123746529280.htm" title="那个抄袭的大张伟" target="_blank">那个抄袭的大张伟</a> <span class="text-muted">猫小努</span> <div>最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期</div> </li> <li><a href="/article/1835507868200169472.htm" title="第一场雪" target="_blank">第一场雪</a> <span class="text-muted">岁月静好_nx</span> <div>早晨起来，外面白茫茫的一片，总算是下雪了，这还是今年第一场雪呢！走在路上，踩着雪“咯吱咯吱”的，空气很湿润。树上、草坪上、屋顶上都落了白白的一层，天上还零星漂着几点雪。慢慢走在路上，呼吸着清新的空气，感受着冬天的美好，心情也好多了。</div> </li> <li><a href="/article/1835507358353158144.htm" title="《大清方方案》| 第二话" target="_blank">《大清方方案》| 第二话</a> <span class="text-muted">谁佐清欢</span> <div>和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀</div> </li> <li><a href="/article/1835507248395284480.htm" title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> <span class="text-muted">广龙宇</span> <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/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>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div> </li> <li><a href="/article/1835507103909900288.htm" title="放下是一段成长的修行" target="_blank">放下是一段成长的修行</a> <span class="text-muted">小莳玥</span> <div>人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些</div> </li> <li><a href="/article/1835505858444881920.htm" title="git常用命令笔记" target="_blank">git常用命令笔记</a> <span class="text-muted">咩酱-小羊</span> <a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"youremail@example.com"基本操作克隆远程仓库gitclone查看</div> </li> <li><a href="/article/1835503713335209984.htm" title="从鸡肉高汤到记忆的魔法再到有效提示的艺术" target="_blank">从鸡肉高汤到记忆的魔法再到有效提示的艺术</a> <span class="text-muted">步子哥</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆</div> </li> <li><a href="/article/1835503548817829888.htm" title="今天我破防了" target="_blank">今天我破防了</a> <span class="text-muted">sin信仰</span> <div>今天本来是大年初一，新年的第一天，应该是高高兴兴的一天，但是我怎么也高兴不起来。具体原因很简单，原本计划年后去县城找了一份会计的工作，被公公婆婆否定了，我心里立马就不舒服了，但是当时刚好肚子疼，我去了厕所，等我上完厕所，公公由于喝了酒还在那里和婆婆唠叨个没完。然后我就在心情极度压抑的情况下把午饭吃完的碗筷和锅给刷了。边刷碗筷和锅，边在那里难受，感觉自己在这个家里真的是过的憋屈死了，公婆不让我去上班</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</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/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835502282603589632.htm" title="509. 斐波那契数(每日一题)" target="_blank">509. 斐波那契数(每日一题)</a> <span class="text-muted">lzyprime</span> <div>lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+</div> </li> <li><a href="/article/1835502281240440832.htm" title="2020.11.19" target="_blank">2020.11.19</a> <span class="text-muted">隆非凡</span> <div>日精进，今日体验：在维修过程中遇到的问题，把源头找到，在进行下一步开始。不要停留在一个点上，合理调整心态，把当下事做好。</div> </li> <li><a href="/article/1835501821569888256.htm" title="关于提高复杂业务逻辑代码可读性的思考" target="_blank">关于提高复杂业务逻辑代码可读性的思考</a> <span class="text-muted">编程经验分享</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/1.htm">开发经验</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/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>目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一</div> </li> <li><a href="/article/1835501771485704192.htm" title="山东大学小树林支教调研团青青仓木队——翟晓楠" target="_blank">山东大学小树林支教调研团青青仓木队——翟晓楠</a> <span class="text-muted">山东大学青青仓木队</span> <div>过了半年，又一次启程，又一次回到支教的初心之地。比起上一次的试探与不安，我更多了一丝稳重与熟练。心境、处境也都随着半个学期的过去而变得不同，半个学期中，身体上的，心理上的，太多的逆境让我变得步履维艰，曲曲折折，弯弯绕绕，我仿佛打不起精神，没有胃口，没有动力。感觉走的不顺畅的时候，支教这个旅程，给了我力量。自告奋勇承担起队长这一职务的我，从组织时的复杂和困难的经历，协调各种问题，从无到有，和校长和队</div> </li> <li><a href="/article/1835501772760772608.htm" title="【夜读】提升生活品质的8个建议" target="_blank">【夜读】提升生活品质的8个建议</a> <span class="text-muted">茳淮秀水</span> <div>停止攀比很多人之所以感觉疲惫，部分原因是来自于跟别人攀比。殊不知，攀比得到的满足只是片刻的，过后往往会感到空虚。过分在意别人的评价，丢失的是自己原有的审美，扰乱的是自己最初的节奏。不妨活得洒脱些，自己内心丰盈了，快乐就能更持久。停止自责想改变自己，先从接纳自己开始。越是过分自责，就越难改变现状，因为如果把精力全耗在自责上，就没有精力用来改变了。遇到问题，我们要用正确的心态去面对。与其一味自责，不如</div> </li> <li><a href="/article/1835500750684385280.htm" title="拥有断舍离的心态，过精简生活--《断舍离》读书笔记" target="_blank">拥有断舍离的心态，过精简生活--《断舍离》读书笔记</a> <span class="text-muted">爱吃丸子的小樱桃</span> <div>不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“</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/1835499109436452864.htm" title="如果做到轻松在股市赚钱？只要坚持这三个原则。" target="_blank">如果做到轻松在股市赚钱？只要坚持这三个原则。</a> <span class="text-muted">履霜之人</span> <div>大A股里向来就有七亏二平一赚的说法，能赚钱的都是少数人。否则股市就成了慈善机构，人人都有钱赚，谁还要上班？所以说亏钱是正常的，或者说是应该的。那么那些赚钱的人又是如何做到的呢？普通人能不能找到捷径去分一杯羹呢？方法是有的，但要做到需要你有极高的自律。第一，控制仓位，散户最大的问题是追涨杀跌，只要涨起来，就把钱往股票上砸，然后被套，隔天跌的受不了，又一刀切，全部割肉。来来回回间，遍体鳞伤。所以散户首</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/1835498219489030144.htm" title="高端密码学院笔记285" target="_blank">高端密码学院笔记285</a> <span class="text-muted">柚子_b4b4</span> <div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</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/1835497583783538688.htm" title="凤凰公园" target="_blank">凤凰公园</a> <span class="text-muted">吴侬暖语sym</span> <div>凤凰公园距离我们家880米，大概步行12分钟就到了，这是我们每天饭后散步或者闲暇时的去处。现在夏季徬晚时分广场舞大妈们总是热情非凡，那里的大门口就是一个好地方，每天总有两拨人在那踩着节奏翩翩起舞呢！而且一路上，从我们小区到公园，或者从昆仑西苑沿河到公园，都是饭后锻炼的人们，川流不息，老人小孩，年轻人，…！哪哪都是。最早家乡的公园，所有公园都是要收门票的，那时候也就是休息天会有人花钱去转转，平时一般</div> </li> <li><a href="/article/99.htm" title="ios内付费" target="_blank">ios内付费</a> <span class="text-muted">374016526</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E4%BB%98%E8%B4%B9/1.htm">内付费</a> <div>近年来写了很多IOS的程序，内付费也用到不少，使用IOS的内付费实现起来比较麻烦，这里我写了一个简单的内付费包，希望对大家有帮助。具体使用如下: 这里的sender其实就是调用者，这里主要是为了回调使用。 [KuroStoreApi kuroStoreProductId:@"产品ID" storeSender:self storeFinishCallBa</div> </li> <li><a href="/article/226.htm" title="20 款优秀的 Linux 终端仿真器" target="_blank">20 款优秀的 Linux 终端仿真器</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a> <div> 终端仿真器是一款用其它显示架构重现可视终端的计算机程序。换句话说就是终端仿真器能使哑终端看似像一台连接上了服务器的客户机。终端仿真器允许最终用户用文本用户界面和命令行来访问控制台和应用程序。（LCTT 译注：终端仿真器原意指对大型机-哑终端方式的模拟，不过在当今的 Linux 环境中，常指通过远程或本地方式连接的伪终端，俗称“终端”。）你能从开源世界中找到大量的终端仿真器，它们</div> </li> <li><a href="/article/353.htm" title="Solr Deep Paging(solr 深分页)" target="_blank">Solr Deep Paging(solr 深分页)</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/solr%E6%B7%B1%E5%88%86%E9%A1%B5/1.htm">solr深分页</a><a class="tag" taget="_blank" href="/search/solr%E5%88%86%E9%A1%B5%E6%80%A7%E8%83%BD%E9%97%AE%E9%A2%98/1.htm">solr分页性能问题</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2148370 作者：eksliang(ickes) blg:http://eksliang.iteye.com/ 概述长期以来，我们一直有一个深分页问题。如果直接跳到很靠后的页数，查询速度会比较慢。这是因为Solr的需要为查询从开始遍历所有数据。直到Solr的4.7这个问题一直没有一个很好的解决方案。直到solr</div> </li> <li><a href="/article/480.htm" title="数据库面试题" target="_blank">数据库面试题</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98+%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">面试题数据库</a> <div>1.union ,union all 网络搜索出的最佳答案： union和union all的区别是,union会自动压缩多个结果集合中的重复结果，而union all则将所有的结果全部显示出来，不管是不是重复。 Union：对两个结果集进行并集操作，不包括重复行，同时进行默认规则的排序； Union All：对两个结果集进行并集操作，包括重复行，不进行排序； 2.索引有哪些分类？作用是</div> </li> <li><a href="/article/607.htm" title="Android TV屏幕适配" target="_blank">Android TV屏幕适配</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>先说下现在市面上TV分辨率的大概情况两种分辨率为主 1.720标清，分辨率为1280x720. 屏幕尺寸以32寸为主，部分电视为42寸 2.1080p全高清，分辨率为1920x1080 屏幕尺寸以42寸为主，此分辨率电视屏幕从32寸到50寸都有适配遇到问题，已1080p尺寸为例：分辨率固定不变，屏幕尺寸变化较大。如：效果图尺寸为1920x1080，如果使用d</div> </li> <li><a href="/article/734.htm" title="Timer定时器与ActionListener联合应用" target="_blank">Timer定时器与ActionListener联合应用</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>功能:在控制台每秒输出一次代码: package Main; import javax.swing.Timer; import java.awt.event.*; public class T { private static int count = 0; public static void main(String[] args){ </div> </li> <li><a href="/article/861.htm" title="Ubuntu14.04系统Tab键不能自动补全问题解决" target="_blank">Ubuntu14.04系统Tab键不能自动补全问题解决</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/Ubuntu+14.04/1.htm">Ubuntu 14.04</a> <div>Unbuntu 14.4安装之后就在终端中使用Tab键不能自动补全，解决办法如下： 1、利用vi编辑器打开/etc/bash.bashrc文件（需要root权限） sudo vi /etc/bash.bashrc 接下来会提示输入密码 2、找到文件中的下列代码 #enable bash completion in interactive shells #if</div> </li> <li><a href="/article/988.htm" title="学会人际关系三招轻松走职场" target="_blank">学会人际关系三招轻松走职场</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div>要想成功，仅有专业能力是不够的，处理好与老板、同事及下属的人际关系也是门大学问。如何才能在职场如鱼得水、游刃有余呢？在此，教您简单实用的三个窍门。　　第一，多汇报最近，管理学又提出了一个新名词“追随力”。它告诉我们，做下属最关键的就是要多请示汇报，让上司随时了解你的工作进度，有了新想法也要及时建议。不知不觉，你就有了“追随力”，上司会越来越了解和信任你。　　第二，勤沟通团队的力</div> </li> <li><a href="/article/1115.htm" title="《O2O：移动互联网时代的商业革命》读书笔记" target="_blank">《O2O：移动互联网时代的商业革命》读书笔记</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>移动互联网的未来：碎片化内容+碎片化渠道=各式精准、互动的新型社会化营销。 O2O：Online to OffLine 线上线下活动 O2O就是在移动互联网时代，生活消费领域通过线上和线下互动的一种新型商业模式。手机二维码本质：O2O商务行为从线下现实世界到线上虚拟世界的入口。线上虚拟世界创造的本意是打破信息鸿沟，让不同地域、不同需求的人</div> </li> <li><a href="/article/1242.htm" title="js实现图片随鼠标滚动的效果" target="_blank">js实现图片随鼠标滚动的效果</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E6%BB%9A%E5%8A%A8%E5%B1%9E%E6%80%A7%E7%9A%84%E8%8E%B7%E5%8F%96/1.htm">滚动属性的获取</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8/1.htm">图片滚动</a><a class="tag" taget="_blank" href="/search/%E5%B1%9E%E6%80%A7%E8%8E%B7%E5%8F%96/1.htm">属性获取</a><a class="tag" taget="_blank" href="/search/%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD/1.htm">页面加载</a> <div>1,获取样式属性值 top 与顶部的距离 left 与左边的距离 right 与右边的距离 bottom 与下边的距离 zIndex 层叠层次例子:获取左边的宽度,当css写在body标签中时 <div id="adver" style="position:absolute;top:50px;left:1000p</div> </li> <li><a href="/article/1369.htm" title="ajax同步异步参数async" target="_blank">ajax同步异步参数async</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/async/1.htm">async</a> <div> 开发项目开发过程中，需要将ajax的返回值赋到全局变量中，然后在该页面其他地方引用，因为ajax异步的原因一直无法成功，需将async:false，使其变成同步的。格式： $.ajax({ type: 'POST', ur</div> </li> <li><a href="/article/1496.htm" title="Webx3框架（1）" target="_blank">Webx3框架（1）</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a> <div>Webx是淘宝开发的一套Web开发框架，Webx3是其第三个升级版本；采用Eclipse的开发环境，现在支持java开发；采用turbine原型的MVC框架，扩展了Spring容器，利用Maven进行项目的构建管理，灵活的ibatis持久层支持，总的来说，还是一套很不错的Web框架。 Webx3遵循turbine风格，velocity的模板被分为layout/screen/control三部</div> </li> <li><a href="/article/1623.htm" title="【MongoDB学习笔记五】MongoDB概述" target="_blank">【MongoDB学习笔记五】MongoDB概述</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB是面向文档的NoSQL数据库，尽量业界还对MongoDB存在一些质疑的声音，比如性能尤其是查询性能、数据一致性的支持没有想象的那么好，但是MongoDB用户群确实已经够多。MongoDB的亮点不在于它的性能，而是它处理非结构化数据的能力以及内置对分布式的支持(复制、分片达到的高可用、高可伸缩)，同时它提供的近似于SQL的查询能力，也是在做NoSQL技术选型时，考虑的一个重要因素。Mo</div> </li> <li><a href="/article/1750.htm" title="spring/hibernate/struts2常见异常总结" target="_blank">spring/hibernate/struts2常见异常总结</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> Spring ①ClassNotFoundException: org.aspectj.weaver.reflect.ReflectionWorld$ReflectionWorldException 缺少aspectjweaver.jar，该jar包常用于spring aop中 ②java.lang.ClassNotFoundException: org.sprin</div> </li> <li><a href="/article/1877.htm" title="jquery easyui表单重置(reset)扩展思路" target="_blank">jquery easyui表单重置(reset)扩展思路</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/jquery+easyui/1.htm">jquery easyui</a><a class="tag" taget="_blank" href="/search/reset/1.htm">reset</a> <div>在jquery easyui表单中尚未提供表单重置的功能，这就需要自己对其进行扩展。扩展的时候要考虑的控件有： combo,combobox,combogrid,combotree,datebox,datetimebox 需要对其添加reset方法，reset方法就是把初始化的值赋值给当前的组件，这就需要在组件的初始化时将值保存下来。在所有的reset方法添加完毕之后，就需要对fo</div> </li> <li><a href="/article/2004.htm" title="编程之美-烙饼排序" target="_blank">编程之美-烙饼排序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> package beautyOfCoding; import java.util.Arrays; /* *《编程之美》的思路是：搜索+剪枝。有点像是写下棋程序：当前情况下，把所有可能的下一步都做一遍；在这每一遍操作里面，计算出如果按这一步走的话，能不能赢（得出最优结果）。 *《编程之美》上代码有很多错误，且每个变量的含义令人费解。因此我按我的理解写了以下代码： */ </div> </li> <li><a href="/article/2131.htm" title="Struts1.X 源码分析之ActionForm赋值原理" target="_blank">Struts1.X 源码分析之ActionForm赋值原理</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>struts1在处理请求参数之前，首先会根据配置文件action节点的name属性创建对应的ActionForm。如果配置了name属性，却找不到对应的ActionForm类也不会报错，只是不会处理本次请求的请求参数。如果找到了对应的ActionForm类，则先判断是否已经存在ActionForm的实例，如果不存在则创建实例，并将其存放在对应的作用域中。作用域由配置文件action节点的s</div> </li> <li><a href="/article/2258.htm" title="[空天防御与经济]在获得充足的外部资源之前,太空投资需有限度" target="_blank">[空天防御与经济]在获得充足的外部资源之前,太空投资需有限度</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90/1.htm">资源</a> <div> 这里有一个常识性的问题: 地球的资源,人类的资金是有限的,而太空是无限的..... 就算全人类联合起来,要在太空中修建大型空间站,也不一定能够成功,因为资源和资金,技术有客观的限制.... &</div> </li> <li><a href="/article/2385.htm" title="ORACLE临时表—ON COMMIT PRESERVE ROWS" target="_blank">ORACLE临时表—ON COMMIT PRESERVE ROWS</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E4%B8%B4%E6%97%B6%E8%A1%A8/1.htm">临时表</a> <div>ORACLE临时表转临时表：像普通表一样，有结构，但是对数据的管理上不一样，临时表存储事务或会话的中间结果集，临时表中保存的数据只对当前会话可见，所有会话都看不到其他会话的数据，即使其他会话提交了，也看不到。临时表不存在并发行为，因为他们对于当前会话都是独立的。创建临时表时，ORACLE只创建了表的结构（在数据字典中定义），并没有初始化内存空间，当某一会话使用临时表时，ORALCE会</div> </li> <li><a href="/article/2512.htm" title="基于Nginx XSendfile+SpringMVC进行文件下载" target="_blank">基于Nginx XSendfile+SpringMVC进行文件下载</a> <span class="text-muted">denger</span> <a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a><a class="tag" taget="_blank" href="/search/lighttpd/1.htm">lighttpd</a> <div> 在平常我们实现文件下载通常是通过普通 read-write方式，如下代码所示。 @RequestMapping("/courseware/{id}") public void download(@PathVariable("id") String courseID, HttpServletResp</div> </li> <li><a href="/article/2639.htm" title="scanf接受char类型的字符" target="_blank">scanf接受char类型的字符</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>/* 2013年3月11日22:35:54 目的：学习char只接受一个字符 */ # include <stdio.h> int main(void) { int i; char ch; scanf("%d", &i); printf("i = %d\n", i); scanf("%</div> </li> <li><a href="/article/2766.htm" title="学编程的价值" target="_blank">学编程的价值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>发一个人会编程, 想想以后可以教儿女, 是多么美好的事啊, 不管儿女将来从事什么样的职业, 教一教, 对他思维的开拓大有帮助像这位朋友学习: http://blog.sina.com.cn/s/articlelist_2584320772_0_1.html VirtualGS教程 (By @林泰前): 几十年的老程序员，资深的</div> </li> <li><a href="/article/2893.htm" title="二维数组（矩阵）对角线输出" target="_blank">二维数组（矩阵）对角线输出</a> <span class="text-muted">飞天奔月</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a> <div>今天在BBS里面看到这样的面试题目, 1，二维数组（N*N），沿对角线方向，从右上角打印到左下角如N=4： 4*4二维数组 { 1 2 3 4 } { 5 6 7 8 } { 9 10 11 12 } {13 14 15 16 } 打印顺序 4 3 8 2 7 12 1 6 11 16 5 10 15 9 14 13 要</div> </li> <li><a href="/article/3020.htm" title="Ehcache（08）——可阻塞的Cache——BlockingCache" target="_blank">Ehcache（08）——可阻塞的Cache——BlockingCache</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/BlockingCache/1.htm">BlockingCache</a><a class="tag" taget="_blank" href="/search/%E9%98%BB%E5%A1%9E/1.htm">阻塞</a> <div>可阻塞的Cache—BlockingCache 在上一节我们提到了显示使用Ehcache锁的问题，其实我们还可以隐式的来使用Ehcache的锁，那就是通过BlockingCache。BlockingCache是Ehcache的一个封装类，可以让我们对Ehcache进行并发操作。其内部的锁机制是使用的net.</div> </li> <li><a href="/article/3147.htm" title="mysqldiff对数据库间进行差异比较" target="_blank">mysqldiff对数据库间进行差异比较</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/mysqld/1.htm">mysqld</a> <div> mysqldiff该工具是官方mysql-utilities工具集的一个脚本，可以用来对比不同数据库之间的表结构，或者同个数据库间的表结构如果在windows下，直接下载mysql-utilities安装就可以了，然后运行后，会跑到命令行下： 1）基本用法 mysqldiff --server1=admin:12345</div> </li> <li><a href="/article/3274.htm" title="spring data jpa 方法中可用的关键字" target="_blank">spring data jpa 方法中可用的关键字</a> <span class="text-muted">lawrence.li</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>spring data jpa 支持以方法名进行查询/删除/统计。查询的关键字为find 删除的关键字为delete/remove (>=1.7.x) 统计的关键字为count (>=1.7.x) 修改需要使用@Modifying注解 @Modifying @Query("update User u set u.firstna</div> </li> <li><a href="/article/3401.htm" title="Spring的ModelAndView类" target="_blank">Spring的ModelAndView类</a> <span class="text-muted">nicegege</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>项目中controller的方法跳转的到ModelAndView类，一直很好奇spring怎么实现的？ /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * yo</div> </li> <li><a href="/article/3528.htm" title="搭建 CentOS 6 服务器(13) - rsync、Amanda" target="_blank">搭建 CentOS 6 服务器(13) - rsync、Amanda</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>（一）rsync Server端 # yum install rsync # vi /etc/xinetd.d/rsync service rsync { disable = no flags = IPv6 socket_type = stream wait </div> </li> <li><a href="/article/3655.htm" title="Learn Nodejs 02" target="_blank">Learn Nodejs 02</a> <span class="text-muted">toknowme</span> <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>（1）npm是什么 npm is the package manager for node 官方网站：https://www.npmjs.com/ npm上有很多优秀的nodejs包，来解决常见的一些问题，比如用node-mysql，就可以方便通过nodejs链接到mysql，进行数据库的操作在开发过程往往会需要用到其他的包，使用npm就可以下载这些包来供程序调用 &nb</div> </li> <li><a href="/article/3782.htm" title="Spring MVC 拦截器" target="_blank">Spring MVC 拦截器</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>Controller层的拦截器继承于HandlerInterceptorAdapter HandlerInterceptorAdapter.java 1 public abstract class HandlerInterceptorAdapter implements HandlerIntercep</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.  </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>
  
  定义表头
  定义表格单元
  
  定义表格标题
  注：之间是有嵌套关系的，要复合嵌套规范。
  语义化标签

前端html+css笔记（上）

前端

VScode

网站开发

web前端的三大核心技术

HTML

html基础结构与属性