html笔记（一）html4+css2.0、css基础和属性、盒模型

w3c 官网 这里是 html4 的内容

大标题小节
一、关于HTML1. 基本语法
2. HTML常用标签
3. 相对路径和绝对路径
二、css基础1. 表单元素
2. 创建样式表
3. css语法
4. css选择器
三、css的相关属性1. 列表 li 独有的属性list-style
2. 边框属性border
3. overflow
4. 浮动 float 遇到的坑
5. 文本相关属性
6. 数字单词自动换行
7. 背景相关属性background
8. 常用图片格式
9. 定位属性position
10. 透明属性
四、盒模型1. padding
2. margin
五、锚点和热点1. 锚点
2. 热点

一、关于HTML

1. 基本语法

（1）命名规则： 字母必须以英文开头，名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符，尽量不要使用大写字母；
（2）标签：

  • 双标记： <标记 属性=“属性值” 属性=“属性值”></标记>
  • 单标记：<标记 属性=“属性值” />

（3）注意点：

  • 写在 <> 中的第一个单词叫做标记，标签，元素。
  • 标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在 "" 号内。
  • 一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
  • 空标记没有结束标签，用 / 代替。

（4）基本写法

<!-- head标签里面可以放<title>, <style>,<meta>, <link>, <script>, <noscript>, and <base>  -->
<!doctype html> <!--- 声明。告诉浏览器这是html5版本的写法 ---->
<html><head> <!---页头、也叫“站头”，网站头部 ---><meta charset="UTF-8" /> <!---- 翻译国际编码。识别中文，不加这个会乱码 -----><title></title> <!---- 网站名，中文名不合适 ----></head><body></body> <!--- 主体部分 --->
</html>

2. HTML常用标签

HTML标签的种类：块元素、行元素、行内块元素

（1）块状元素：天生能换行的元素；

  • <h1>文本标题</h1> 文本标题标签(h1-h6)，h1标签常作为网站logo的父标签，h2是新闻页中的大标题。
  • <p>段落</p> 段落标签
  • <br/> 强制换行标签
  • &nbsp; 空格 网页实体
  • <hr/>水平线标签
  • <ul><li>无序</li><li>无序</li><li>无序</li></ul> 无序列表
  • <ol><li>有序</li><li>有序</li><li>有序</li></ol> 有序列表
  • <dl><dt>标题</dt><dd>内容</dd><dd>内容</dd></dl> 自定义列表

注意：①p标签 不能放“天生的块元素”;
②h标签 内不能放其他的 h标签，否则会父子变兄弟。

（2）行内元素：天生不能换行的元素；

  • <b></b> 加粗的标签
  • <i></i> 倾斜的标签
  • <u></u> 下划线标签
  • <strong></strong> 加重语气的加粗标签，强调比 b标签 更重要
  • <em></em> 加重语气的倾斜标签，强调比 i标签 更重要
  • <s></s> 删除线
  • <span></span> 文本标签
  • <a></a> 超链接标签
  • <del></del>
<!-- a标签中的两个重要属性 --->
<!-- href超链接属性，target="_blank"新窗口打开 -->
<a href="#" target="_blank"></a> <!-- 空链接,不跳转页面，但是点击会刷新页面 -->
<a href="./b.html" target="_blank"></a> <!-- 相对路径 -->
<a href="www.baidu.com" target="_blank"></a> <!-- 绝对路径 -->

（3）行内块元素：天生不能换行但能设置宽高的元素；

  • img 图片元素
  • 表单元素
<!-- img标签中的重要属性 --->
<!-- src="图片路径"，title="标题属性"鼠标放图标上回显示“标题属性”的文字属性 -->
<!-- alt="替换文本"如果无法显示图像，浏览器将显示“替换文本”的文字内容 -->
<img src="图片路径" title="标题属性" alt="替换文本" /><!-- 图片超链接 -->
<a href="#"><img src="图片路径" />
</a>

（4）表格元素

  • <table></table> 表格
  • <tr></tr> 表格行
  • <td></td> 表格列
<!-- table标签中的属性 --->
<!-- width="500"表格宽度，height="300"表格高度，border="1"表格边框 -->
<!-- bgcolor="red"表格背景颜色，bordercolor=""表格边框颜色，包括table边框和td边框 -->
<!-- cellspacing="10"单元格与单元格之间的距离（默认2px），cellpadding="10"单元格与内容之间的距离（原表格内文字默认靠左上下居中） -->
<table border="1"></table><!-- tr标签中的属性 --->
<!-- align="left/center/right" 水平对齐方式 -->
<tr align="left"></tr><!-- td标签中的属性 --->
<!-- colspan="2"合并列，rowspan="2"合并行 -->
<td colspan="2"></td>

合并规则：
合并列：合并n列，当前tr中少 n-1 个td。
合并行：合并n行，该td所在tr下面的 n-1 个 tr 中都要少1个td。

（5）块元素、行元素、行内块元素的区别


3. 相对路径和绝对路径

绝对路径就是写死的路径,缺点是换设备会出现路径找不到问题
相对路径就是灵活的路径,优点是不会因为设备更换出现路径问题,

（1）绝对路径： 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。
例如：C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。

（2）相对路径： 相对于某个基准目录的路径。包含Web的相对路径（HTML中的相对目录）。
例如：在Servlet中，"/“代表Web应用的根目录。物理路径的相对表示，例如：”./" 代表当前目录，"…/"代表上级目录。这种类似的表示，也是属于相对路径。

/表示源文件的根目录
./表示当前文件所在的目录(可以省略)
../表示当前文件所在的目录的上一级目录


二、css基础

css 层叠样式表，web 标准中的表现语音，目前推荐遵循的是 w3c 发布的 css3.0。css 样式有两部分组成：选择符（选择器）+声明（{属性：属性值}）。

1. 表单

<form></form>

（1）form 标签的属性：

  • name=“定义表单名”
  • method=“get/post”
  • action=“请求地址/跳转地址”

（2）其他表单元素：

  • <textarea>文本内容</textarea> 多行文本输入框
  • <select><option>下拉框内容1</option><option>下拉内容2</option></select> 下拉框，其中 selected="selected"表示默认选中，写在"" 标签中；
  • <input type="表单元素类型" value="默认值" /> 表单元素
<!-- type的值可以是 -->
text 单行文本输入框，常与 placeholder 属性（提示信息）一起使用
password 面膜输入框
radio 单选框，checked="checked"默认选中，常于 name 属性一起使用
checkbod 复选框，checked="checked"默认选中
submit 提交按钮
reset 重置按钮
button 自定义按钮

<input type="radio" name="sex" value="传给后台的值" checked="checked" />男
<input type="radio" name="sex" value="传给后台的值"/>女
<input type="radio" name="sex" value="传给后台的值"/>保密

（3）form 中 name 的作用

  • name 属性用于对提交到服务器后的表单数据进行标识；
  • 或者在客户端通过 JavaScript 引用表单数据。
  • 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

（4）form 中的 method = "get/post"
method,传输方式，默认 get，常用 get 的传输方式。两者的区别：

  • get 通过地址栏传输，会将信息拼接到地址栏上。而 post 不会讲信息拼接到地址栏上；
  • post 的传输方式比 get 安全；
  • post 能传输大量信息；
  • get 传输速度比 post 快；( get 没有加密 )。

2. 创建样式表

（1）内联样式表：<style type="text/css">css语法</style>，最好写在<head></head>中；

（2）外部样式表：<link rel="stylesheet" type="text/css" href="路径" /> 和 @import url(路径);；
顶部部小标签：<link rel="icon" href="<%= BASE_URL %>favicon.ico">；<%= BASE_URL %> 可以省略，主要作用是将图片编译成 base64；

区别linkimport
1. 从属关系link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。@import是 CSS 提供的语法规则，只有导入样式表（加载CSS）的作用。
2. 加载顺序当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载。而@import引用的CSS 会等到页面全部被下载完再被加载，所以有时候浏览@import加载CSS的页面时开始会没有样式。
3. 兼容性的差别link标签作为 HTML 元素，不存在兼容性问题。@import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别。
4. 使用dom控制样式时的差别当使用javascript控制dom去改变样式的时候，只能使用link标签。@import不是 dom 可以控制的。
5. 权重区别link引入的样式权重大于@import引入的样式。

（3）内联样式表（嵌入式、行间、行内）：<div style=“height:100px;background:red;” ></div>

  1. 内联样式表的优先级别（权重）最高；
  2. 内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

3. css语法

选择符(或选择器){属性:属性值;属性:属性值;} 例如：div{width:200px;height:100px;background:red; }
（1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
（2）属性必须放在花括号中，属性与属性值用冒号连接。
（3）每条声明用分号结束。
（4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序；
（5）在书写样式过程中，空格、换行等操作不影响属性显示。

注释 html 代码： <!-- 注释内容 -->
注释 css 代码： /*注释内容*/


4. css选择器的优先级（权重）

选择器就是运用不同手段来选择特定元素的方法。
内联样式表的权重最高：1000 ，继承样式的权重为：0000。
（1）id 选择符 0100
（2）class 选择符 0010
（3）伪类选择符 0010
（4）元素选择符（类型选择符）0001
（5）后代选择符 后代选择符的权重之和
（6）群组选择符
（7）通配符
选择符叠加写法：div.box.red。
例如：#box .list.list li{} 权重121，div#box .list li 权重112。

/* 可以缺少，但是不能改变位置，因为:hover和:active是同时触发的，后书写的会覆盖前面写的css*/a:link{}/*初始状态，没有点击过的状态,只有 a 标签有该伪类选择符*/a:visited{}/*被访问过后的状态,只有 a 标签有该伪类选择符*/a:hover{}/*鼠标滑过时的状态*/a:active{}/*鼠标按下不放的状态*/

三、css的相关属性

1. 列表 li 独有的属性 list-style

复合写法：list-style:square inside url('/i/arrow.gif');，可以不设置其中的某个值。
list-style: none 表示没有列表符号。

（1） list-style-type 设置列表符号。属性值： disc(实心圆) 、 circle(空心圆) 、 square(实心方块) 、 none(去掉列表符号)；

（2）list-style-image:url(路径)； 自定义图片列表符号；

（3）list-style-position 定义符号所在位置。outside(默认外边) 、 inside(里边)
常用 list-style-type:none; 因为列表符号在各浏览器显示无法统一，并且无法随心所欲的控制符号与文本内容之间的距离。


2. 边框属性 border

复合写法： border:1px solid #000;

（1）边框线型：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）；
点线的大小总是 1px ,而且各个浏览器大小都不一样

（2）单边框设置：border-left、border-right、border-top、border-bottom；

（3）单边框其他属性：border-方向-width 设置单边边框宽度、border-方向-style 设置单边边框线型、border-方向-color 设置单边边框颜色；

（4）用边框属性写出下三角形：

哪个方向的三角形，就将哪个方向的边框设置 border-方向: 大小 solid 颜色，相邻的边框颜色设置成白色（消失色），对边的边框设置为 0；

<style>div{width:0; /*块元素不设置宽度=父元素宽度*/height:0; /*可省略*/border-top:20px solid #00f;border-left:20px solid #fff;border-right:20px solid #fff;border-bottom: 0;}
</style>

补充：outline:1px solid #000; 书写input的外框；


3. overflow

（1）overflow 的属性：

overflow:visible;/*默认值*/
overflow:hidden;/*溢出隐藏*/
overflow：scroll;/*滚动*/
overflow:auto;/*自动出现滚动条*/

（2）隐藏滚动条：div::-webkit-scrollbar { display: none; }，兼容所有浏览器的超出部分滚动不显示滚动条，div 为出现滚动条的元素。

（3）单行文本溢出隐藏显示省略号：

width: 200px; //文本超出多少隐藏
white-space: nowrap; //强制不换行
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //文本溢出隐藏时出现省略号

4. 浮动 float 遇到的坑

（1）float 浮动属性：

float: none; //默认不浮动
float: left; //左浮动
float: right; //右浮动

（2）浮动的坑（特点）：

通常情况下，如两个兄弟元素设置左右浮动，我们需要设置父框高度，如果不设置，就会造成“高度塌陷”

  • 高度塌陷：父元素撑不开子元素内容；
  • 不占文档流；
  • 父元素高度不够时，浮动的子元素会影响下面的元素；
  • 当浮动元素的父元素高度不够时，会影响到与该父元素相邻元素中的浮动元素；
  • 浮动元素不能与文本元素重合在一起，它会把文字挤出去；
  • 浮动元素会把所有的元素变成一类元素，即浮动元素，可以设置宽、高、背景色等；
    在这里插入图片描述

（3）预防浮动出现：

  • 要浮动一窝都浮动（兄弟元素都浮动）；
  • 父元素必须设置足够的高度；

5. 文本相关属性

文本相关的属性会被继承，a标签 除外，因为 a标签 有一个默认的伪类效果。

  1. 网页字体大小通常为： 12px 或 14px ；
  2. 单位：px 像素，pt 点， em 倍距； 3pt = 4px；
  3. em 是根据父元素的字体大小来决定多小像素；
    字体大小默认 16px，1em=16px（文字的一倍大小，一倍距就是一个文字的大小）

复合写法： font:700 italik 12px/2 "华文琥珀"; 最简： font:字体大小 "字体类型";如果没有设置到的视为缺省值还原默认。
（1）font-size: 数字px; 设置文本大小；

（2）font-style: normal（正常）/italik（斜体）; 设置文本斜体；

（3）font-weight: normal（正常100-500）/bold（加粗600-900） 设置文本粗体；

（4）font-family: "字体1","字体2" 可以设置多个字体，如果浏览器不支持第一个字体，则会尝试下一个。自定义字体通常默认为“宋体”；

（5）text-align: left/center/right 水平位置；

（6）vertical-align: top/middle/bottom 针对图片使用，常写在图片上；

（7）line-height: 数字px; 行高；

（8）letter-spacing: value; 字间距：控制英文字母和汉字的字距；

（9）work-spacing: value; 词间距：控制英文单词词距；（只对单词生效）

（10）text-decoration: none（没有修饰）/underline（添加下划线）/overline（上划线）/line-through（删除线） 文本修饰；

（11）text-indent: 2em ：首行缩进 ；


6. 数字单词自动换行

一般字母和数字没有空格不会换行，但中文会以文字为单位自动换行。
word-wrap: normal; 默认；
word-wrap: break-word; 让字母和数字没有空格的情况下自动换行；
white-space: nowrap; 文本强制不换行；


7. 背景相关属性background

复合写法： background:#000 url(图片路径) no-repeat top center;
可以不设置其中的某个值，比如：background: #f00;。

（1）background-color : 背景色
（2）background-image : url(图片路径) 背景图片
（3）background-repeat : 背景图片平铺属性 repeat（默认平铺）、repeat-x（横向平铺）、repeat-y（纵向平铺）、no-repeat（不平铺）
（4）background-position : left/right/center(水平) top/bottom/center(垂直)

注意：如果只写一个值，另外一个值会默认为 居中，还可以书写 数值，数值可以为 负值。
background-position: 1px -2px; 表示往下平移1px，像左平移2px；


8. 常用图片格式

常用格式.jpg.png.gif
区别图片有损质量，但肉眼难分辨，用来减小图片大小，图片非镂空使用。图片有损质量，但肉眼分辨不出，用来减小图片大小，图片镂空使用。
（ps：打开图片，去除背景，虚框选中delete，png-24格式，保存）		图片有损质量严重，肉眼容易分辨，常用做动图。
（ps截图：ctrl+c复制 — ctrl+n新建 — 回车— ctrl+v粘贴 — ctrl+alt+shift+s保存）

9. 定位属性position

（1）position 的属性值：

position：只有定位元素可以使用 left、right、top、bottom、z-index；

  • static：默认值。所有元素默认的定位属性就是是 static ，一般不用；
  • absolute：绝对定位（完全脱离文档流）。
  • relative : 相对定位（占文档流）。
  • fixed : 固定定位（完全脱离文档流）。
定位属性position属性值staticrelativeabsolutefixed
称呼默认不定位相对定位绝对定位固定定位
区别没有定位，元素出现在正常的流中.根据自身初始所在位置来定位；不破坏原有元素的特性。自动向上检索，根据最近的定位元素作为父元素，如果检索不到就以 html 来定位。始终根据 html 来定位；
是否占文档流占文档流占文档流不占文档流，完全脱离文档流不占文档流，完全脱离文档流
特点或用法特点：因为相对定位占文档流，在没有设置 left、top 属性下的效果和static 默认是一样的。用法：①向上检索定位的元素作为父框；
②多个定位元素使用 z-index 来定义层级。		特点：位置不随着滚动条滚动而发生变化。
适用场合微调距离时可以用此属性。可以使用left，top，right，bottom等。通常用于做重叠效果。网页遮罩。

（2）z-index 层级

只有设置定位元素才能设置 z-index（默认值为 auto，几乎和 0 差不多）。在兄弟关系中，z-index 值越大的显示在上面。

z-index: auto; 只有在子元素也有定位的情况下出现。
在这里插入图片描述

<style>p{width: 40px;height:40px;background: #ff9;position:absolute;}.auto4{background: #999; position:absolute;left: 20px;top: 20px;z-index: 9;}.auto1{background: #f99;position:absolute;}.auto2{background: #f99;position:absolute; z-index:10}   .auto3{background: #f99; position:absolute;z-index: auto;/*这里的z-index可省略*/}.p3{position:absolute;z-index: 20;}
<style>
<body>
<!-- 第一种情况 --><div class="box"><div class="auto1"><p>ppp</p></div><div class="auto4">auto4</div></div><!-- 第二种情况 --><div class="box"><div class="auto2"><p class="p2">ppp</p></div><div class="auto4">auto4</div></div><!-- 第三种情况 --><div class="box"><div class="auto3"> <!-- z-index:auto; --><p class="p3">ppp</p> <!--定位元素中的子元素也出现定位情况 --></div><div class="auto4">auto4</div></div>
</body>

10. 透明属性

  1. opacity:0.5; 值0-1，从透明-不。0.5表示半透明，ie9以下版本无效。
  2. filter:alpha(opacity=50); 值0-100，非ie浏览器无效，兼容ie678。

（1）缺点：给父元素设置透明 子元素也会变透明。

（2）解决方法（想背景透明，子元素不透明）：

  • ①做2个层叠关系的定位元素，将父子元素变成兄弟元素；
  • ②给父元素设置透明的背景图。


四、 盒模型

  1. 盒模型的组成分为：外边距、边框、内边距、内容区；
  2. 盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）；

在这里插入图片描述

1. padding：

（1）说明：

  • 用来调整 子元素在父元素中 的位置关系；padding 属性需要添加在 父元素 上。
  • padding值 是额外加在元素原有大小之上的，若想保证元素大小不变，需从元素宽或高上减掉添加的 padding 属性值；

（2）padding 属性值

  • {padding: 10px 20px 30px 50px;} 4个值，表示：上 右 下 左；
  • {padding: 10px 20px 30px;} 3个值，表示：上 左右 下；
  • {padding: 10px 20px;} 2个值，表示：上下 左右；
  • {padding: 20px;} 1个值，表示 ：4个方向都是 20px；

（3）可单独设置某一个方向的 padding，类似 border。

  • padding-top: 10px;
  • padding-right: 10px;
  • padding-bottom: 10px;
  • padding-left: 10px;

2. margin：

margin 是用来调整兄弟元素之间的距离； 它的属性值和单边设置写法与padding相同。
margin 的坑：
（1）margin 上下会重叠（左右没事）；

<style >.box1{width: 100px;height:100px;background:pink;margin-bottom:30px;}.box2{width: 100px;height:100px;background:green;margin-top:50px;}
</style><body><div class="box1"></div><div class="box2"></div>
</body>

在这里插入图片描述
解决办法 ：设置单边就行。

（2）第一个块的子元素设置 margin-top 会无限向父元素传递，直到不是第一个子元素。

<style >.fruits{width: 150px;height:150px;background:pink; }.fruits .apple{width: 50px; height: 50px; background: red;margin-top:40px;}.fruits .banana{width: 50px; height: 50px; background: yellow;margin-top:20px;}  .foods{width: 150px;height:150px;background:green;margin-top:30px;} </style>
<body><div class="fruits"><div class="apple">苹果</div><div class="banana">香蕉</div></div><div class="foods"><div class="oil"></div><div class="salt"></div></div>
</body>

在这里插入图片描述解决办法 ：

  • ① 给 父元素 设置 border-top：1px; 或者 padding-top: 1px; 或者 float: left; 或者 overflow: hidden; ；
  • ② 给 子元素 设置 float:left; ；
  • ③ 给父元素添加伪类元素：父元素:before{content:""; display: table;}。
    因为 :before 相当于给第一个子元素之前添加一个类似 span标签 ，所以这个块元素就变成了第二个子元素。

overflow:hidden; 可以解决高度塌陷问题，可以解决 margin-top 向父元素传递效果的问题。

（3）给行元素设置上下盒模型，会穿过其他物体，左右没事。

<style>.box1{width: 200px;height:200px;background:#ff0;}span{background:#f99;padding:20px;margin:40px}.box2{width: 200px;height:200px;background:#000;}
</style>
<body><div class="box1"></div><span>1234342</span><div class="box2"></div>
</body>

在这里插入图片描述
解决办法 ：

  • ① 不要给行元素设置上下盒模型；
  • ② 给这个行元素转换成块元素：display: block;

五、热点和锚点

1. 锚点

锚点是网页制作中超级链接的一种，在网页内部进行跳转。

（1）语法：

<style>P{position:fixed;设置高;right:10px;top:0;bottom:0;margin:auto;}P a{display:block;}
</style><a href="#id名"></a>
<div id="id名"></div><!-- 或者 -->
<a href=".class名"></a>
<div class="class名"></div>

（2）示例：
点击锚点链接进行跳转时，地址栏也会有所改变。如果想要跳转到页面的某个内容区域，可以在地址上加上锚点。

<style>*{margin:0; padding:0;}div{height: 500px;}#box1{background: #99f;}#box2{background: #9f9;}#box3{background: #f99;}#box4{background: #f9f;}#box5{background: #ff9;}#box6{background: #9ff;}#box7{background: #f80;}#box8{background: #90f;}p{ position: fixed; height: 150px; left:10px; top:0; bottom:0; right: 0;margin: auto;}a{display: block; height: 16px; width: 16px; color:#fff;padding: 10px;margin-top: 2px;background:#000;}
</style>
<body><p><a href="#box1">F1</a><a href="#box2">F2</a><a href="#box3">F3</a><a href="#box4">F4</a><a href="#box5">F5</a><a href="#box6">F6</a><a href="#box7">F7</a><a href="#box8">F8</a></p><div id="box1">奢侈品</div><div id="box2">精品店</div><div id="box3">卖女鞋</div><div id="box4">卖女装</div><div id="box5">卖童装</div><div id="box6">卖男装</div><div id="box7">美食城</div><div id="box8">电影院</div>
</body>

在这里插入图片描述


2. 热点

（Dreamweaver工具）盒子模型的标准，任何元素都是以一个矩形呈现，但有时则不然。比如地图，点击某一个县需要一个链接，此时需要热点链接。

<img src="" usemap = "#名称A"/>
<map name="名称A"><area shape="poly" coords="坐标" href="连接地址" target="_blank"></area>
</map>

热点只能给图片添加，这个方法已经被抛弃了。


网页实体 ： &lt; < 和 &gt; > 和 &nbsp; 空格


相关面试、笔试题：关于HTML的面试题


下一篇：html（二）html学习-干货之 html4+css2.0

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362674.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

返回顶部小火箭

返回顶部小火箭

代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>body {width: 2000px;}.top{position: fixed;right:50px;bottom:100px;display: none;}</style&…
阅读更多...
最佳5本Java性能调优书籍–精选，必读

最佳5本Java性能调优书籍–精选，必读

为什么Java开发人员应该阅读有关性能调优的书&#xff1f; 当我很久以前第一次面对这个问题时&#xff0c;我以为以后会做&#xff0c;但是我很长一段时间都没有回过头来。 仅当我在用Java编写的任务关键型服务器端财务应用程序中遇到严重的性能和可伸缩性问题时&#xff0c;我…
阅读更多...
html笔记（三）html5+css3（html5、css3、文字相关）

html笔记（三）html5+css3（html5、css3、文字相关）

W3school在线教程 html5css3基本不兼容ie678。 大标题小节一、html51. html4 和 html5 的区别2. 标签语义化3. 智能表单的使用和规范二、css3选择器1. 属性选择器2. 结构性伪类选择器&#xff08;层级选择器/符&#xff09;3. UI状态性伪类选择器4. 相邻兄弟选择器5. 其他选择…
阅读更多...
美登杯 E、小花梨的数组* 线段树

美登杯 E、小花梨的数组* 线段树

操作过程中标记传递 询问的时候再计算 #include<bits/stdc.h> using namespace std; //input by bxd #define rep(i,a,b) for(int i(a);i<(b);i) #define repp(i,a,b) for(int i(a);i>(b);--i) #define RI(n) scanf("%d",&(n)) #define RII(n,m) sc…
阅读更多...
怎么得到scrollTop

怎么得到scrollTop

我们学习一个事件 &#xff1a; 页面滚动效果 window.onscroll function() { 页面滚动语句 } 谷歌浏览器 和没有声明 DTD <DOCTYPE > &#xff1a; document.body.scrollTop; 火狐 和其他浏览器 document.documentElement.scrollTop; ie9 和 最新浏览器…
阅读更多...
console.log打印没有效果

console.log打印没有效果

今天用谷歌调试的时候&#xff0c;遇到了一个很奇怪的现象&#xff0c;console.log() 完全不出效果&#xff0c;把它放到script下的第一行也没有用。然后借鉴了几个博主的。 直接改 https://blog.csdn.net/wujy_rrycbar2016/article/details/78341973 打开控制台 -> 改为 D…
阅读更多...
CSS实战2

CSS实战2

1. 鼠标样式 Cursor: pointer 鼠标变成小手 Cursor: default; 小白 Cursor : move; 移动 Cursor : text ; 文本输入 网页布局&#xff1a; 给一个盒子 &#xff1a; 宽度高度 背景 边框 位置 2.border-radius 圆角矩形 border-radius: 7px 7px 7p…
阅读更多...
Linux Shell 常用命令与目录分区的学习总结

Linux Shell 常用命令与目录分区的学习总结

很早就想根据自己的学习规律和遗忘规律&#xff0c;自己总结一下Linux/Unix系统的Shell命令&#xff0c;一来便于自己时常查询之用&#xff0c;二来也分享于各位博友 Linux shell是系统的用户界面&#xff0c;即命令行。它提供了用户与内核进行交互式操作与控制的接口&#xff…
阅读更多...
visual studio 应用场景

visual studio 应用场景

转载于:https://www.cnblogs.com/zhangbing12304/p/10894347.html
阅读更多...
elementUI-添加自定义图标

elementUI-添加自定义图标

elementui的小图标有限&#xff0c;跟UI给的不一样&#xff0c;这个时候咋办呢&#xff1f;百度走起。。。。参考了两篇博主分享的 自定义elementui中的图标 和 建立图标库&#xff0c;这里主要用到第一种 实际中&#xff1a; elementUI导航栏 具体代码&#xff1a; //自定…
阅读更多...
echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]

echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]

一个简单的例子 1. 下载并引入 &#xff08;1&#xff09;npm install echarts --save &#xff08;2&#xff09;import echarts from echarts //main.js引入echarts 或者在组件中按需引入&#xff0c;查看按需引入的详细模块 <script>// 引入 ECharts 主模块var echa…
阅读更多...
P3740 [HAOI2014]贴海报 离散化+线段树

P3740 [HAOI2014]贴海报 离散化+线段树

题目描述 Bytetown城市要进行市长竞选&#xff0c;所有的选民可以畅所欲言地对竞选市长的候选人发表言论。为了统一管理&#xff0c;城市委员会为选民准备了一个张贴海报的electoral墙。 张贴规则如下&#xff1a; electoral墙是一个长度为N个单位的长方形&#xff0c;每个单位…
阅读更多...
Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G​

Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G​

全书共15章&#xff0c;主要包括网页制作基础、Dreamweaver CC网页制作、Photoshop CC网页图像设计、Flash CC网页动画设计以及综合案例实战5个部分。通过本书的学习&#xff0c;不仅能让读者学会三大软件的基本操作&#xff0c;而且本书中列举的实战案例&#xff0c;还可以让读…
阅读更多...
如何使用示例从Java中的类路径加载资源

如何使用示例从Java中的类路径加载资源

Java中的类路径不仅用于加载.class文件&#xff0c;而且还可以用于加载资源&#xff0c;例如属性文件&#xff0c;图像&#xff0c;图标&#xff0c;缩略图或任何二进制内容。 Java提供了API来将这些资源读取为InputStream或URL。 假设您在项目的config文件夹中有一个属性文件 …
阅读更多...
Ext 3.0 +ASP.NET2.0 可视化开发介绍

Ext 3.0 +ASP.NET2.0 可视化开发介绍

Ext Designer 总算出来了&#xff01;&#xff01;&#xff01;基于Web的应用开发终于可以可视化开发了&#xff0c;而且可以几乎不敲1行代码。 准备工具&#xff1a; &#xff08;1&#xff09;Ext Designer 1.0.2 &#xff08;2&#xff09;Visual Studio 2005 第一步&#x…
阅读更多...
创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置

创建vue项目(一)搭建vue-cli、项目文件介绍、简单配置

记录一下 拉取项目时 npm run dev 报错 输入&#xff1a;npm rebuild node-sass 再重新 npm run dev 如果不能解决&#xff0c;请看这里 一、搭建vue-cli vue create 项目名称? Please pick a preset: > default (babel, eslint) //默认 > Manually select features …
阅读更多...
JPA / Hibernate实体状态转换的初学者指南

JPA / Hibernate实体状态转换的初学者指南

介绍 Hibernate将开发人员的思维方式从SQL语句转移到实体状态转换。 一旦实体由Hibernate主动管理&#xff0c;所有更改将自动传播到数据库。 操作域模型实体&#xff08;及其关联&#xff09;比编写和维护SQL语句容易得多。 如果没有ORM工具&#xff0c;则添加新列需要修改所…
阅读更多...
创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）

创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）

下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件 一、引入elementUi 顺便一提axios使用说明 和axios在vue中使用 二、准备静态资源 三、封装.vue公共组件 四、封装.js公共组件 五、封装公共的js代码 六、封装全局的filter、directive等 一、引入…
阅读更多...
Spring DI的配置使用

Spring DI的配置使用

1、 依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”&#xff0c;那先让我们复习一下类之间的关系&#xff1a; 泛化&#xff1a;表示类与类之间的继承关系、接口与接口之间的继承关系&#xff1b; 实现&#xff1a;表示类对接口的实现&#xff1b; 依赖&a…
阅读更多...
创建vue项目(三)路由跳转、反向代理、本地存储、状态管理

创建vue项目(三)路由跳转、反向代理、本地存储、状态管理

数据更新渲染&#xff0c;axios请求数据&#xff0c;配置环境 一、路由跳转 app.vue <template><div id"app"><keep-alive><router-view/></keep-alive></div> </template><script> export default {name: app }…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023