HTML、CSS、JavaScript 学习笔记

元素是块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用

 元素进行文档布局不是表格的正确用法。
 元素的作用是显示表格化的数据。
HTML  元素是内联元素，可用作文本的容器 
  元素也没有特定的含义。 
 当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。

<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题h1>div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单b><br>
HTML<br>
CSS<br>
JavaScriptdiv>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.comdiv>

div>

body>
html>
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="http://www.baidu.com" width="400" height="400">iframe>

<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)title> 
head> 
<body>

<iframe src="demo_iframe.htm" name="iframe_a">iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COMa>p>

<p><b>注意：b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。p>

body>
html>
HTML 符号实体参考手册
 
   http://www.runoob.com/tags/ref-entities.html 
  
HTML 速查列表
HTML 基本文档

<html>
<head>
<title>文档标题title>
head>
<body>
可见文本...
body>
html>
基本标签（Basic Tags）
<h1>最大的标题h1>
<h2> . . . h2>
<h3> . . . h3>
<h4> . . . h4>
<h5> . . . h5>
<h6>最小的标题h6>

<p>这是一个段落。p>
<br> （换行）
<hr> （水平线）

文本格式化（Formatting）
<b>粗体文本b>
<code>计算机代码code>
<em>强调文本em>
<i>斜体文本i>
<kbd>键盘输入kbd> 
<pre>预格式化文本pre>
<small>更小的文本small>
<strong>重要的文本strong>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本">a>
邮件链接： <a href="mailto:[email protected]">发送e-maila>
书签：
<a id="tips">提示部分a>
<a href="#tips">跳到提示部分a>
图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
style>
<div>文档中的块级元素div>
<span>文档中的内联元素span>
无序列表
<ul>
    <li>项目li>
    <li>项目li>
ul>
有序列表
<ol>
    <li>第一项li>
    <li>第二项li>
ol>
定义列表
<dl>
  <dt>项目 1dt>
    <dd>描述项目 1dd>
  <dt>项目 2dt>
    <dd>描述项目 2dd>
dl>
表格（Tables）
<table border="1">
  <tr>
    <th>表格标题th>
    <th>表格标题th>
  tr>
  <tr>
    <td>表格数据td>
    <td>表格数据td>
  tr>
table>
框架（Iframe）
<iframe src="demo_iframe.htm">iframe>
表单（Forms）

"demo_form.php" method="post/get">
type="text" name="email" size="40" maxlength="50">
type="password">
type="checkbox" checked="checked">
type="radio" checked="checked">
type="submit" value="Send">
type="reset">
type="hidden">

"comment"</span> rows=<span class="hljs-string">"60"</span> cols=<span class="hljs-string">"20"</span>>


实体（Entities）
&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©
CSS3 transition
transition 属性是一个简写属性，用于设置四个过渡属性： 
 http://www.w3cplus.com/content/css3-transition
transition-property     规定设置过渡效果的 CSS 属性的名称。
transition-duration     规定完成过渡效果需要多少秒或毫秒。
transition-timing-function  规定速度效果的速度曲线。
transition-delay    定义过渡效果何时开始。
 transition: all 0.5s ease-in 0.3s;
-webkit-transition: all .5s ease-in-out 1s;
  -o-transition: all .5s ease-in-out 1s;
  -moz-transition: all .5s ease-in-out 1s;
  transition: all .5s ease-in-out 1s;

<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div:hover{
    width:300px;
}
style>
head>
<body>

<div>div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。p>

<p><b>注释：b>本例在 Internet Explorer 中无效。p>

body>
html>
效果： 
 
CSS-box-shadow
向 div 元素添加 box-shadow：
div{
    box-shadow: 10px 10px 5px #888888;
}
box-shadow 属性向框添加一个或多个阴影。 
 http://www.w3school.com.cn/tiy/t.asp?f=css3_image_gallery
CSS-float

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div img{
            width:300px;
        }
        div{
            float: left;
        }
        .main{
           // width: 900px;
        }
    style>
head>
<body>
    <div class="main">
        <div> <img src="img/11.jpg">div>
        <div> <img src="img/22.jpg">div>
        <div> <img src="img/33.jpg">div>
    div>
body>
html>
CSS-Position的嵌套
相对定位和绝对定位嵌套：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Positiontitle>
    <style type="text/css">
        div.div1{
            width: 400px;
            height: 200px;
            margin: 0 auto;
            background: goldenrod;
            border:1px solid red;
            position: relative;
            left:10px;
        }
        .div2{
            margin: 0 auto;
            position: absolute;
            width: 300px;
            height: 50px;
            background: black;
            color: white;
            /*文字垂直 水平居中*/
            line-height: 50px;
            text-align: center;


            left: 0;
            bottom:0;
            right:0;
        }

    style>
head>
<body>
    <div class="div1">  <div class="div2">我是子元素div>div>

body>
html>
CSS :position、Z-index
position 属性规定元素的定位类型。
 
   这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 
  
relative的特点
 
   relative的作用，就是在其默认显示的位置的基础上，偏移一定的尺寸，可以是上下左右四个参数来设置。但是这个偏移是悄悄的，只有它自己知道，仅仅是显示出来的效果偏移了，但它实际还占用着原来的位置，就像放风筝，风筝随着风向的改变而偏移relative了一定距离，而实际人还是站在原来的位置，且所占用的平面面积不变。 
 如果div的position设置了relative属性，但是没有指定偏移量，则相当于默认的position：static。 
  
absolute的特点：
 
   生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，如果在 body 中仅有一个 div 设置成 position:absolute ,则这个 div 的父元素就是body ，div相对于浏览器进行偏移，如果div 外嵌套了其他块级元素，并且，这个块级元素设置了 position:relative,则这个div 相对于这个块级元素进行偏移。 
   relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。  
  
定位 h2 元素：
<html>
<head>
<style type="text/css">
h2.pos_abs {
    position:absolute;
    left:100px;
    top:150px
}
style>
head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。p>
body>

html>
h2标签相对于body这个容器定位。
可能的值
 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
 
    
     
     值 
     描述 
     
    
    
     
     absolute 
     生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 
     
     
     fixed 
     生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 
     
     
     relative 
     生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。 
     
     
     static 
     默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 
     
     
     inherit 
     规定应该从父元素继承 position 属性的值。 
     
    
   
  更多示例：http://www.w3school.com.cn/cssref/pr_class_position.asp 
  <html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
style>
head>

<body>
<h1>这是一个标题h1>
<img class="x" src="/i/eg_mouse.jpg" /> 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。p>
body>

html>
 
   
  z-index 
  z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 
   
   元素可拥有负的 z-index 属性值。 
 Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ 
 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。 
   
  该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 
 可能的值： 
  auto    默认。堆叠顺序与父元素相等。
number  设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。 
  CSS :hover 选择器 
  选择鼠标指针浮动在其上的元素，并设置其样式： 
  a:hover{ 
    background-color:yellow;
} 
   
   提示：:hover 选择器可用于所有元素，不只是链接。 
   提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。 
   注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited之后（如果存在的话），这样样式才能生效。 
   
  选择未访问、已访问、悬浮和活动链接，并设置它们的样式： 
  a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;} 
  CSS display 属性 
  display 属性规定元素应该生成的框的类型。 
  常用于< a> < span>这两个标签，因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效 
  块级元素(block-level elements)： 
   
   占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子； 
   
  行内元素( inline elements )： 
   
   自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。 
   
  block和inline 
   
   block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。>  
   大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）： 
 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。 
 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。 
   block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。 
 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。 
 http://www.cnblogs.com/KeithWang/p/3139517.html 
   
  值   描述
none    此元素不会被显示。
block   此元素将显示为块级元素，此元素前后会带有换行符。
inline  默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block    行内块元素。（CSS2.1 新增的值）
list-item   此元素会作为列表显示。
run-in  此元素会根据上下文作为块级元素或内联元素显示。
compact     CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker  CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table   此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table    此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group  此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group  此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row   此元素会作为一个表格行显示（类似 <tr>）。
table-column-group  此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column    此元素会作为一个单元格列显示（类似 <col>）
table-cell  此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption   此元素会作为一个表格标题显示（类似 <caption>）
inherit     规定应该从父元素继承 display 属性的值。 
  CSS-cursor 
  一些不同的光标： 
  <html>

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：p>
<span style="cursor:auto">
Autospan><br />
<span style="cursor:crosshair">
Crosshairspan><br />
<span style="cursor:default">
Defaultspan><br />
<span style="cursor:pointer">
Pointerspan><br />
<span style="cursor:move">
Movespan><br />
<span style="cursor:e-resize">
e-resizespan><br />
<span style="cursor:ne-resize">
ne-resizespan><br />
<span style="cursor:nw-resize">
nw-resizespan><br />
<span style="cursor:n-resize">
n-resizespan><br />
<span style="cursor:se-resize">
se-resizespan><br />
<span style="cursor:sw-resize">
sw-resizespan><br />
<span style="cursor:s-resize">
s-resizespan><br />
<span style="cursor:w-resize">
w-resizespan><br />
<span style="cursor:text">
textspan><br />
<span style="cursor:wait">
waitspan><br />
<span style="cursor:help">
helpspan>
body>

html>
 
  层模型–绝对定位 
  如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 
  如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 
  div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1">div> 
  效果如下： 
   
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式title>
<style type="text/css">
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    right:100px;
    top:20px;
}
style>
head>
<body>
<div id="div1">div>
body>
html> 
  盒模型代码简写 
  外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： 
  margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 
  通常有下面三种缩写方法: 
  1、如果top、right、bottom、left的值相同，如下面代码： 
  margin:10px 10px 10px 10px; 
  可缩写为： 
  margin:10px; 
  2、如果top和bottom值相同、left和 right的值相同，如下面代码： 
  margin:10px 20px 10px 20px; 
  可缩写为： 
  margin:10px 20px; 
  3、如果left和right的值相同，如下面代码： 
  margin:10px 20px 30px 20px; 
  可缩写为： 
  margin:10px 20px 30px; 
   
   注意：padding、border的缩写方法和margin是一致的。 
   
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式title>
<style type="text/css">
p{
    padding:13px ;/*padding: 13px 13px 13px 13px;*/
    margin:10px 40px;/*margin:10px 40px 10px 40px;*/

    border-width:1px 10px 20px 30px;
    border-color:red;
    border-style:solid;
    /*
    border-width:2px 3px
    border: 3px dotted red;
     */
}
style>
head>
<body>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。p>
body>
html> 
  颜色值缩写 
  关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。 
  例子1： 
  p{color:#000000;} 
  可以缩写为： 
  p{color: #000;} 
  例子2： 
  p{color: #336699;} 
  可以缩写为： 
  p{color: #369;} 
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式title>
<style type="text/css">
p{
    color:#369;/*#336699*/
}
style>
head>
<body>
    <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。p>
body>
html> 
  字体缩写 
  网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码： 
  body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
} 
  这么多行的代码其实可以缩写为一句： 
  body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
} 
  注意： 
  1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 
  2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 
  一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用： 
  body{
    font:12px/1.5em  "宋体",sans-serif;
} 
  只是有字号、行间距、中文字体、英文字体设置。 
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字体缩写title>
<style type="text/css">
body{
    font-style:italic;/*斜体*/
    font-variant:small-caps;/*英文字体大写*/
    font-weight:bold; /*粗体*/
    font-size:24px; 
    line-height:1.6em;/*行间距*/
    font-family:"宋体",sans-serif;/*多种字体保证调用*/
}
body{
    font:12px/1.5em  "宋体",sans-serif;
}

style>
head>
<body>
    <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.p>
    <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.p>
    <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.p>
body>
html> 
  颜色值 
  在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 
  1、英文命令颜色 
  前面几个小节中经常用到的就是这种设置方法： 
  p{color:red;} 
  2、RGB颜色 
  这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 
  p{color:rgb(133,45,200);} 
  每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： 
  p{color:rgb(20%,33%,25%);} 
  3、十六进制颜色 
  这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。 
  p{color:#00ffff;} 
  配色表 
   
   
   HTML 颜色http://www.runoob.com/html/html-colors.html 
   
  长度值 
  长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 
  1、像素 
  像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。 
  2、em 
  就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码： 
  p{font-size:12px;text-indent:2em;} 
  上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。 
  下面注意一个特殊情况： 
  但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码： 
  html: 
  <p>以这个<span>例子span>为例。p> 
  css: 
  p{font-size:14px}
span{font-size:0.8em;} 
  结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。 
  3、百分比 
  p{font-size:12px;line-height:130%} 
  设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。 
  
<html>
<head>
  <meta charset="utf-8">
  <title>长度title>
  <style type="text/css">
    p{font-size:14px}
    span{font-size:0.8em;}
  style>
head>
<body>
    <p><span>超酷的互联网span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心span>，内容专业、<span>有趣易学span>。专注服务互联网工程师快速成为技术高手！p>
body>
html> 
  水平居中设置-行内元素 
  我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。 
  这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？ 
  如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码： 
  html代码： 
  <body>
  <div class="txtCenter">我想要在父容器中水平居中显示。div>
body> 
  css代码： 
  <style>
  .txtCenter{
    text-align:center;
  }
style> 
  
<html>
<head>
<meta charset="utf-8">
<title>定宽块状元素水平居中title>
<style>
div{
    border:1px solid red;
    margin:20px;
    text-align:center;
}
.txtCenter{
    text-align:center;
}

style>
head>

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。div>



<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" />div>
body>
html> 
  水平居中设置-定宽块状元素 
  当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。 
  这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。) 
  满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中： 
  html代码： 
  <body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。div>
body> 
  css代码： 
  <style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

style> 
  也可以写成： 
  margin-left:auto;
margin-right:auto; 
  注意：元素的“上下 margin” 是可以随意设置的。 
  水平居中总结-不定宽块状元素方法（一） 
  在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。) 
  不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多） 
   
   1.加入 table 标签 
 2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置 
 3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的 
   
  为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。 
  第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。 
  第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。 
  html代码： 
  <div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本li>
        <li>我是第二行文本li>
        <li>我是第三行文本li>
    ul>
    td>tr>
  tbody>
 table>
div> 
  css代码： 
  <style>
table{
    border:1px solid;
    margin:0 auto;
}
style> 
  
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中title>
<style>
table{
    margin:0 auto;
    border:1px solid;
}

/*下面是任务区代码*/
.wrap{
    background:#ccc;    
     display:table;
     margin:0px auto;
}
style>
head>

<body>
<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本li>
        <li>我是第二行文本li>
        <li>我是第三行文本li>
    ul>
    td>tr>
  tbody>
table>
div>

<div class="wrap">
  设置我所在的div容器水平居中  
div>
body>
html> 
  水平居中总结-不定宽块状元素方法（二） 
  ，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。 
  第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子： 
  html代码： 
  <body>
<div class="container">
    <ul>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
    ul>
div>
body> 
  css代码： 
  <style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
style> 
  这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。 
  
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中title>
<style>
.container {
    text-align: center;
}

.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

.container li {
    margin-right: 8px;
    display: inline;
}
/*text-align:center(文本居中)*/
/*list-style:none(消除li圆点) margin:0;padding:0（消除文本与div边框之间的间隙）*/
/*display:inline（变成行内元素，也就是把ul文本列变成行。另外从border来看未设置inline之前宽度是无限的，设置后宽度变为随文本宽度）*/
/*margin-right:8px（设置li文本之间的间隔） display:inline（变成行内元素，也就是把li文本列变成行*/
style>
head>

<body>
    <div class="container">
        <ul>
            <li><a href="#">1a>li>
            <li><a href="#">2a>li>
            <li><a href="#">3a>li>
        ul>
    div>
body>
html> 
  水平居中总结-不定宽块状元素方法（三） 
  除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。 
  方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。 
  我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。 
  代码如下： 
  <body>
<div class="container">
    <ul>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
    ul>
div>
body> 
  css代码： 
  <style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
style> 
  这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。 
  
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中title>
<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:24px;}


/*下面是代码任务区*/

.wrap-center{
    background:#ccc;


}
style>
head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
    ul>
div>


<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。div>
div>
body>
html> 
  垂直居中-父元素高度确定的单行文本 
  这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。 
  本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？ 
  父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。 
  line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。 
  这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。 
   
   宽度100px，内容每行的行间距为50px，上面间距，下面间距，刚好100px。 
   
  
<html>
<head>
<meta charset="utf-8">
<title>垂直居中title>
<style>

.wrap h2{
    margin:0;
    height:50px;
    line-height:50px;
    text-align:center;
    background:#ccc;
}

style>
head>

<body>


<div class="wrap">
    <h2>hi,imooc!      
    h2>
div>
body>
html> 
  双行文字。 
  
<html>
<head>
<meta charset="utf-8">
<title>垂直居中title>
<style>

.wrap h2{
    margin:0;
    height:100px;
    line-height:50px;
    text-align:center;
    background:#ccc;
}

style>
head>

<body>


<div class="wrap">
    <h2>hi,imooc!  <br>
    我是第二行
    h2>
div>
body>
html> 
  JavaScript 
  我的第一个 JavaScript 程序 
  
<html>
<head>
<meta charset="utf-8">
<title>title>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
script>
head>
<body>

<h1>我的第一个 JavaScript 程序h1>
<p id="demo">这是一个段落p>

<button type="button" onclick="displayDate()">显示日期button>

body>
html> 
  windows.open 
  open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 
  http://www.w3school.com.cn/jsref/met_win_open.asp 
 语法 
  window.open(URL,name,features,replace) 
   
    
     
     参数 
     描述 
     
    
    
     
     URL 
     一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 
     
     
     name 
     一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记  和  的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。 
     
     
     features 
     一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。 
     
     
     replace 
     一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。 
     
    
   
  实例1 
  下面的例子讲在新浏览器窗口中打开 about:blank 页： 
  <html>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
script>
body>
html> 
  实例2 
  <td align="center"><a href="#" onClick="window.open('readerType?action=readerTypeModifyQuery&ID=<%=ID%>','','width=292,height=175')">修改a>td> 
  DOM 文档对象模型 
  <input id="userName" name="userName2" type="text" class="input"> 
   
   通过ID访问页面元素 
   
  var userName = document.getElementById("userName").value; 
   
   通过Name访问页面元素 
   
  var userNameInput = document.getElementsByName("userName2");//返回数组
var userName = userNameInput[0].value; 
   
   通过标签名访问页面元素 
   
  type="button" value="登录" onClick="login()"> 
  var inputs = document.getElementByTagName("input");
alert(inputs.length); //1 有一个 input 对象 
   
   获得当前页面所有的 Form 对象 
   
  var frms = document.forms;// 获取含对象的数组
var loginfm = frms[0];// 获取第一个form对象，if exist 
  获取对象之后可以改变对象所在元素的样式 
  改变HTML样式 
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式title>
head>
<body>
  <h2 id="con">I love JavaScriptH2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="#CCC";
    mychar.style.width="300px";


  script>
body>
html> 
  显示和隐藏（display属性） 
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>displaytitle>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="none";
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="block";
        }
    script> 
head> 
<body>  
    <h1>JavaScripth1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    form>
body> 
html> 
  控制类名（className 属性） 
  className 属性设置或返回元素的class 属性。 
  语法： 
  object.className = classname 
  作用: 
  1.获取元素的class 属性 
 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性title>
<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    style>
head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className="one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className="two";
       }
    script>
body>
html> 
  测试 
  小伙伴们，请编写”改变颜色”、”改变宽高”、”隐藏内容”、”显示内容”、”取消设置”的函数，点击相应按钮执行相应操作，点击”取消设置”按钮后，提示是否取消设置，如是执行操作，否则不做操作 
  
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascripttitle>
<style type="text/css">
body {
    font-size: 12px;
}
#txt {
    height: 400px;
    width: 600px;
    border: #333 solid 1px;
    padding: 5px;
}
p {
    line-height: 18px;
    text-indent: 2em;
}
style>
head>
<body>
<h2 id="con">JavaScript课程H2>
<div id="txt">
  <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。h5>
  <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。p>
  <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。p>
  <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。p>
div>
<form>
  
  <input type="button" value="改变颜色" onclick="changleColor()" >
  <input type="button" value="改变宽高" onclick="changleWH()">
  <input type="button" value="隐藏内容" onclick="displayContext()">
  <input type="button" value="显示内容" onclick="showContext()">
  <input type="button" value="取消设置" onclick="cancelEdit()">
form>
<script type="text/javascript">
//定义"改变颜色"的函数
    function changleColor(){
        var mytxt = document.getElementById("txt");
        mytxt.style.background="#CCC";
        mytxt.style.color="red";
        }

//定义"改变宽高"的函数
    function changleWH(){
        var mytxt = document.getElementById("txt");
        mytxt.style.width="400px";
        mytxt.style.height="500px";
        }

//定义"隐藏内容"的函数

    function displayContext(){
        var mytxt = document.getElementById("txt");
        mytxt.style.display="none";
        }
//定义"显示内容"的函数
    function showContext(){
        var mytxt = document.getElementById("txt");
        mytxt.style.display="block";
        }

//定义"取消设置"的函数
    function cancelEdit(){
        var rs = confirm("是否取消设置");
        if(rs){
            document.getElementsByTagName("div")[0].removeAttribute("style"); 
            }
        else{}
        }


  script>
body>
html> 
  保持先后顺序(操作符优先级） 
  我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如： 
  var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;  // 结果为0 
  如果我们要改变运算顺序，需添加括号的方法来改变优先级: 
  var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75 
  操作符之间的优先级（高到低）: 
  算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号 
  如果同级的运算是按从左到右次序进行,多层括号由里向外。 
  var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //结果为false 
  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作符优先级title>
<script type="text/javascript">
var numa,numb,jq1;
numa=5;
numb=2;
jq1=numa + 30 >10 && numb * 3<20;
jq2=((numa + 30) / (7-numb)) * 3
document.write("jq1的值是:"+jq1+"
");
document.write("jq2的值是:"+jq2);
script>
head>
<body>
body>
html> 
  事件 
   
    
     
     事件分类 
     事件 
     事件句柄 
     
    
    
     
     窗口事件 
     当文档载入时 
     onload 
     
     
      
     当文档卸载时 
     onunload 
     
     
      
      
      
     
     
     表单元素事件 
     用户改变元素的内容 
     onchange 
     
     
      
     提交按钮被点击 
     onsubmit 
     
     
      
     被重置时 
     onreset 
     
     
      
     元素被选取时 
     onselect 
     
     
      
     元素失去焦点时 
     onblur 
     
     
      
     元素获取焦点 
     onfocus 
     
     
      
      
      
     
     
     鼠标事件 
     被单击 
     onclick 
     
     
      
     被双击 
     ondblclick 
     
     
      
     鼠标按钮被按下 
     onmousedown 
     
     
      
     鼠标指针移动时 
     onmousemove 
     
     
      
     鼠标移出某元素时 
     onmouseout 
     
     
      
     鼠标指针悬停于某元素之上 
     onmouseover 
     
     
      
     鼠标按钮被松开时 
     onmouseup 
     
     
      
      
      
     
     
     键盘事件 
     键盘被按下 
     onkeydown 
     
     
      
     键盘按下又松开时 
     onkeypress 
     
     
      
     键盘松开时 
     onkeyup 
     
    
   
  测试 
  使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。 
  
<html>
 <head>
  <title> 事件title>  
  <script type="text/javascript">
   function count(){

    //获取第一个输入框的值
    var a = parseInt(document.getElementById("txt1").value);
    //获取第二个输入框的值
    var b = parseInt(document.getElementById("txt2").value);

    //获取选择框的值
    var s = document.getElementById("select").value;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    var sum;
    switch(s){
        case "+" :
             sum=a+b;
             break;
        case "-" :
             sum=a-b;
             break;
        case "*" : 
             sum=a*b;
             break;
        case "/" : 
            sum=a/b;
              break;            
        }
    //设置结果输入框的值 
      document.getElementById("fruit").value=sum;
   }
  script> 
 head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+option>
        <option value="-">-option>
        <option value="*">*option>
        <option value="/">/option>
   select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()"/>  
   <input type='text' id='fruit' />   
 body>
html> 
  数组排序sort() 
  sort()方法使数组中的元素按照一定的顺序排列。 
  语法: 
  arrayObject.sort(方法函数) 
  参数说明： 
  1.如果不指定<方法函数>，则按unicode码顺序排列。 
  2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。 
  myArray.sort(sortMethod); 
  注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：  
  若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。 
 若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。 
 若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。 
  1.使用sort()将数组进行排序，代码如下：

移动端城市区县二级联动选择功能实现包 good2know
本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
SpringMVC的执行流程
1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，
js操作样式郝加升
DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge
Selenium 特殊控件操作与 ActionChains 实践详解小馋喵知识杂货铺 selenium 测试工具
1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
微信公众号回调java_处理微信公众号消息回调 weixin_39607620 微信公众号回调java
1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.
人工智能应用研究快讯 2021-11-30 峰谷皆平
[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin
【Jupyter】个人开发常见命令 TIM老师 #Pycharm &VSCode python Jupyter
1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju
用代码生成艺术字：设计个性化海报的秘密
本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
前端面试每日 3+1 —— 第39天浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
GDP经济社会人文民生栅格数据下载网站汇总疯狂学习GIS
本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
【MySQL】MySQL数据库如何改名武昌库里写JAVA 面试题汇总与解析 spring boot vue.js sql java 学习
MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://
移动端适配rem方案简单的码农
1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s
Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录二倍速播放前端 vue.js
1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
redis反弹shell时kali无法接收回弹的解决方法显哥无敌 shell redis
无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta
native.js设置可缩放的webview并隐藏缩放控件 Nanayai
需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala
Redis反弹Shell 波吉爱睡觉 web安全 #未授权访问漏洞 #SSRF redis 网络安全 web安全
这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell
26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSS css 前端 html
总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
Windows下Oracle安装图解叫我老村长
Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g
震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript 前端 javascript html5
一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSS html 前端
总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
从0到1学PHP（一）：PHP 基础入门：开启后端开发之旅
目录一、PHP简介与发展历程1.1PHP定义与特点1.2在后端开发中的地位1.3发展阶段及重要版本更新二、PHP开发环境搭建2.1Windows系统下搭建步骤2.2Mac系统下搭建方法及常用工具2.3适合初学者的集成开发环境三、第一个PHP程序3.1编写"HelloWorld"程序3.2程序基本结构和执行过程3.3PHP代码的嵌入方式（在HTML中）一、PHP简介与发展历程1.1PHP定义与特点P
C# 单问号 ? 与双问号 ?? 三分明月墨 C#
https://www.runoob.com/csharp/csharp-nullable.html
关于前端的性能优化
性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
Grid布局参考资料 kiterumer
Grid布局张鑫旭-写给自己看的display:grid布局教程阮一峰-CSSGrid网格布局教程在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。Grid布局则适用于更大规模的布局（
解决 Webpack 报错 “No module factory available for dependency type: CssDependency“ 的方法 cmmav33990 webpack rust 前端
这个错误表明Webpack在处理CSS依赖时找不到合适的模块工厂，通常发生在配置不完整或依赖冲突的情况下。以下是详细的解决方案：核心解决方案方案1：安装并配置正确的CSS处理器（最推荐）bashnpminstall--save-devcss-loaderstyle-loader#或使用mini-css-extract-plugin替代style-loadernpminstall--save-dev
JSP编程从入门到精通：现代Web开发与AI集成实战指南 AI编程员 001AI传统＆编程语言 002AI编程工具汇总 003AI编程作品汇总人工智能 AI编程笔记开发语言深度学习
JSP编程从入门到精通：现代Web开发与AI集成实战指南一、JSP基础与环境搭建1.1JSP核心概念与工作原理JSP（JavaServerPages）是一种动态网页开发技术，通过在HTML中嵌入Java代码实现服务器端逻辑。其本质是Servlet的扩展，当客户端首次请求JSP页面时，服务器会将其编译为Servlet类（如index_jsp.java），再执行该类的_jspService()方法生成
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Pokedex（宝可梦图鉴）
我们继续50个小项目挑战！——Pokedex组件仓库地址：https://github.com/SunACong/50-vue-projects项目预览地址：https://50-vue-projects.vercel.app/使用Vue3结合PokeAPI来创建一个炫酷的宝可梦图鉴应用。通过这个项目，你将能够浏览前150只宝可梦的信息，包括它们的名字、类型、身高、体重以及能力等。而且，每只宝可梦
CSS基础（3） Zzz_睡不醒 css 前端 html
CSS背景操作1.多重背景(MultipleBackgrounds)div{background-image:url(image1.png),url(image2.png);background-position:rightbottom,lefttop;background-repeat:no-repeat,repeat;background-size:auto,cover;}background
《博客园精华集》web标准分册第2论筛选结果文章列表
《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying
vue 使用 iFrame 嵌套带有登录的网站登录成功无法跳转 WHY<=小氣鬼=> 前端
这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录，如果不在的话会出现登录成功但是无法跳转的问题3.在Vue项目中使用iFrame嵌套本地.html文件，本地.html文件向父页面抛出的方法或
PHP，安卓，UI，java，linux视频教程合集 cocos2d-x小菜 java UI linux PHP android
╔-----------------------------------╗┆
zookeeper admin 笔记 braveCS zookeeper
Required Software 1) JDK>=1.6 2)推荐使用ensemble的ZooKeeper(至少3台)，并run on separate machines 3)在Yahoo!，zk配置在特定的RHEL boxes里，2个cpu，2G内存，80G硬盘数据和日志目录 1)数据目录里的文件是zk节点的持久化备份，包括快照和事务日
Spring配置多个连接池 easterfly spring
项目中需要同时连接多个数据库的时候，如何才能在需要用到哪个数据库就连接哪个数据库呢？ Spring中有关于dataSource的配置： <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" &nb
Mysql 171815164 mysql
例如，你想myuser使用mypassword从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI TH GRANT OPTION; 如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器，并使用mypassword作
CommonDAO（公共/基础DAO） g21121 DAO
好久没有更新博客了，最近一段时间工作比较忙，所以请见谅，无论你是爱看呢还是爱看呢还是爱看呢，总之或许对你有些帮助。 DAO(Data Access Object)是一个数据访问（顾名思义就是与数据库打交道）接口，DAO一般在业
直言有讳永夜-极光感悟随笔
1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313 精华: “直言有讳”是阿里巴巴提倡的一种观念，而我在此之前并没有很深刻的认识。为什么呢？就好比是读书时候做阅读理解，我喜欢我自己的解读，并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重，我觉得阿里巴巴很多价值观其实是基本的做人
安装CentOS 7 和Win 7后，Win7 引导丢失随便小屋 centos
一般安装双系统的顺序是先装Win7，然后在安装CentOS，这样CentOS可以引导WIN 7启动。但安装CentOS7后，却找不到Win7 的引导，稍微修改一点东西即可。一、首先具有root 的权限。即进入Terminal后输入命令su，然后输入密码即可二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改 v
Oracle备份与恢复案例 aijuans oracle
Oracle备份与恢复案例一. 理解什么是数据库恢复当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（硬件故障、软件故障、网络故障、进程故障和系统故障）影响数据库系统的操作，影响数据库中数据的正确性，甚至破坏数据库，使数据库中全部或部分数据丢失。因此当发生上述故障后，希望能重构这个完整的数据库，该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
JavaEE开源快速开发平台G4Studio v5.0发布無為子
我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。访问G4Studio网站 http://www.g4it.org 2013-04-06 发布G4Studio_V5.0版本功能新增 (1). 新增了调用Oracle存储过程返回游标，并将游标映射为Java List集合对象的标
Oracle显示根据高考分数模拟录取百合不是茶 PL/SQL编程 oracle例子模拟高考录取学习交流
题目要求: 1,创建student表和result表 2,pl/sql对学生的成绩数据进行处理 3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选 1,创建student表,和result表学生信息表; create table student( student_id number primary key,--学生id
优秀的领导与差劲的领导 bijian1013 领导管理团队
责任优秀的领导：优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了，那么他知道该受责备的人是他自己，并且敢于承认错误。差劲的领导：差劲的领导觉得这不是他的问题，因此他会想方设法证明是他的团队不行，或是将责任归咎于团队中他不喜欢的那几个成员身上。努力工作优秀的领导：团队领导应该是团队成员的榜样。至少，他应该与团队中的其他成员一样努力工作。这仅仅因为他
js函数在浏览器下的兼容 Bill_chen jquery 浏览器 IE DWR ext
做前端开发的工程师，少不了要用FF进行测试，纯js函数在不同浏览器下，名称也可能不同。对于IE6和FF，取得下一结点的函数就不尽相同： IE6：node.nextSibling,对于FF是不能识别的； FF：node.nextElementSibling,对于IE是不能识别的；兼容解决方式：var Div = node.nextSibl
【JVM四】老年代垃圾回收：吞吐量垃圾收集器(Throughput GC) bit1129 垃圾回收
吞吐量与用户线程暂停时间衡量垃圾回收算法优劣的指标有两个：吞吐量越高，则算法越好暂停时间越短，则算法越好首先说明吞吐量和暂停时间的含义。垃圾回收时，JVM会启动几个特定的GC线程来完成垃圾回收的任务，这些GC线程与应用的用户线程产生竞争关系，共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值，因此，好的GC应该占
J2EE监听器和过滤器基础白糖_ J2EE
Servlet程序由Servlet，Filter和Listener组成，其中监听器用来监听Servlet容器上下文。监听器通常分三类：基于Servlet上下文的ServletContex监听，基于会话的HttpSession监听和基于请求的ServletRequest监听。 ServletContex监听器 ServletContex又叫application
博弈AngularJS讲义(16) - 提供者 boyitech js AngularJS api Angular Provider
Angular框架提供了强大的依赖注入机制，这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象，例如控制器，指令，过滤器动画等。那注入器怎么知道如何去创建这些特殊的对象呢？ Angular提供了5种方式让注入器创建对象，其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
java-写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 bylijinnan java
public class CommonSubSequence { /** * 题目：写一函数f(a,b)，它带有两个字符串参数并返回一串字符，该字符串只包含在两个串中都有的并按照在a中的顺序。 * 写一个版本算法复杂度O(N^2)和一个O(N) 。 * * O(N^2)：对于a中的每个字符，遍历b中的每个字符，如果相同，则拷贝到新字符串中。 * O(
sqlserver 2000 无法验证产品密钥 Chen.H sql windows SQL Server Microsoft
在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。这样做, 收到以下错误信息CD KEY的 SQ
[新概念武器]气象战争 comsci
气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织.... 原因如下: 地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
oracle 中 rollup、cube、grouping 使用详解 daizj oracle grouping rollup cube
oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示转自namesliu -- 使用oracle 的样列库，演示 rollup, cube, grouping 的用法与使用场景 --- ROLLUP ，为了理解分组的成员数量，我增加了分组的计数 COUNT(SAL)
技术资料汇总分享 Dead_knight 技术资料汇总分享
本人汇总的技术资料，分享出来，希望对大家有用。 http://pan.baidu.com/s/1jGr56uE 资料主要包含： Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...) Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...) Ser
初一下学期难记忆单词背诵第一课 dcj3sjt126com english word
could 能够 minute 分钟 Tuesday 星期二 February 二月 eighteenth 第十八 listen 听 careful 小心的，仔细的 short 短的 heavy 重的 empty 空的 certainly 当然 carry 携带；搬运 tape 磁带 basket 蓝子 bottle 瓶 juice 汁，果汁 head 头；头部
截取视图的图片, 然后分享出去 dcj3sjt126com OS Objective-C
OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast. I implemented a category method on UIView to get the vi
MySql重置密码 fanxiaolong MySql重置密码
方法一: 在my.ini的[mysqld]字段加入： skip-grant-tables 重启mysql服务，这时的mysql不需要密码即可登录数据库然后进入mysql mysql>use mysql; mysql>更新 user set password=password('新密码') WHERE User='root'; mysq
Ehcache（03）——Ehcache中储存缓存的方式 234390216 ehcache MemoryStore DiskStore 存储驱除策略
Ehcache中储存缓存的方式目录 1 堆内存（MemoryStore） 1.1 指定可用内存 1.2 驱除策略 1.3 元素过期 2 &nbs
spring mvc中的@propertysource jackyrong spring mvc
在spring mvc中，在配置文件中的东西，可以在java代码中通过注解进行读取了： @PropertySource 在spring 3.1中开始引入比如有配置文件 config.properties mongodb.url=1.2.3.4 mongodb.db=hello 则代码中 @PropertySource(&
重学单例模式 lanqiu17 单例 Singleton 模式
最近在重新学习设计模式，感觉对模式理解更加深刻。觉得有必要记下来。第一个学的就是单例模式，单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例，保证只有一个实例。单例模式的常用实现方式有两种，就人们熟知的饱汉式与饥汉式，具体就不多说了。这里说下其他的实现方式静态内部类方式: package test.pattern.singleton.statics; publ
.NET开源核心运行时，且行且珍惜 netcome java .net 开源
背景 2014年11月12日，ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie，在Connect全球开发者在线会议上宣布，微软将开源全部.NET核心运行时，并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布，其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器（GC）和核心
使用oscahe缓存技术减少与数据库的频繁交互 Everyday都不同 Web 高并发 oscahe缓存
此前一直不知道缓存的具体实现，只知道是把数据存储在内存中，以便下次直接从内存中读取。对于缓存的使用也没有概念，觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术，发现还是很有必要一探究竟的。缓存技术使用背景：一般来说，对于web项目，如果我们要什么数据直接jdbc查库好了，但是在遇到高并发的情形下，不可能每一次都是去查数据库，因为这样在高并发的情形下显得不太合理——
Spring+Mybatis 手动控制事务 toknowme mybatis
@Override public boolean testDelete(String jobCode) throws Exception { boolean flag = false; &nbs
菜鸟级的android程序员面试时候需要掌握的知识点 xp9802 android
熟悉Android开发架构和API调用掌握APP适应不同型号手机屏幕开发技巧熟悉Android下的数据存储熟练Android Debug Bridge Tool 熟练Eclipse/ADT及相关工具熟悉Android框架原理及Activity生命周期熟练进行Android UI布局熟练使用SQLite数据库；熟悉Android下网络通信机制，S

HTML、CSS、JavaScript 学习笔记

HTML-CSS

块级元素和内联元素

HTML 和

HTML框架

HTML 符号实体参考手册

HTML 速查列表

HTML 基本文档

基本标签（Basic Tags）

文本格式化（Formatting）

链接（Links）

图片（Images）

样式/区块（Styles/Sections）

无序列表

有序列表

定义列表

表格（Tables）

框架（Iframe）

表单（Forms）

实体（Entities）

CSS3 transition

CSS-box-shadow

CSS-float

CSS-Position的嵌套

CSS :position、Z-index

z-index

CSS :hover 选择器

CSS display 属性

CSS-cursor

层模型–绝对定位

盒模型代码简写

颜色值缩写

字体缩写

颜色值

长度值

水平居中设置-行内元素

水平居中设置-定宽块状元素

水平居中总结-不定宽块状元素方法（一）

水平居中总结-不定宽块状元素方法（二）

水平居中总结-不定宽块状元素方法（三）

垂直居中-父元素高度确定的单行文本

JavaScript

我的第一个 JavaScript 程序

windows.open

实例1

实例2

DOM 文档对象模型

改变HTML样式

显示和隐藏（display属性）

控制类名（className 属性）

测试

保持先后顺序(操作符优先级）

事件

测试

数组排序sort()

你可能感兴趣的:(html,css)

HTML
和