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()将数组进行排序，代码如下：

swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
非关系型数据库天秤-white nosql
一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
七.正则化愿风去了
吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
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
和