Html+css+javascrip实习随笔
菜鸟教程关于html的笔记：
1.字体标签：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示；<small> 标签定义小型文本（和旁注）
<sub>定义下标字；<sup> 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方
<del>blue</del>：字中间删除线；<ins>red</ins>：文字下面下划线，在新插入文本下添加一条下划线。
cite 属性规定指向一个文档的 URL如：<ins cite="URL">绝对路径：http://baidu.com;指向网站；相对路径：example.html：指向网站中的一个页面；
<code>定义计算机代码；<kbd>键盘输入</kbd>：定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。；<var>变量</var>；<samp>计算机样本</samp>
在用<pre>标签格式化的文档段中使用空格，可以确保文本正确的水平位置。；<address>定义地址；<bdo>定义文字方向；<blockquote> 标签定义一段长引用。
- blockquote元素中一般嵌套p元素，用于标记被引用的文本，这些引用文本并不是直接位于blockquote元素中。
- 如果引文来自在线资源（包括自己网站中的其他地方），那么可以在<blockquote>标签的cite（引用）属性中指明原始来源的URL。
- 通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。
<b> 的效果是加粗，<strong>(强调)的效果也是加粗，有什么区别吗？
查了一下资料发现：strong 是 web 标准中 xhtml 的标签，strong 的意思是 "强调"；b 是 html 的，b 的意思是 bold（粗体）。
overflow: scroll;如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。默认值是 visible：默认值。内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，并且其余内容是不可见的auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
text-overflow:ellipsis；显示省略符号来代表被修剪的文本。clip：修建文本，但没省略号，看起来像没消减。
属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素
-webkit-line-clamp: 2;限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
opacity:0.5;不透明度。从 0.0 （完全透明）到 1.0（完全不透明）和position:absolute;一块使用
left:120px; left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。设置以包含元素的百分比计的左边位置。可使用负值。
letter-spacing:12px;l etter-spacing 属性增加或减少字符间的空白（字符间距）
何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 <map>定义图像地图 <area>定义图像地图中的可点击区域
<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
易忘的零散知识
2.关于链接：
在HTML文档中插入ID:
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
访问有用的提示部分</a>
邮箱笔记：<a href="mailto:zhangrr601@163.com?subject=这是邮件的主题&body=这是邮件的内容" rel="nofollow">发送邮件</a>
会调启系统默认的邮件程序发送给 zhangrr601@163.com，并且收件人那里已经填上了我邮箱的地址。
关于创建电子邮件链接时如何进行抄送，密送.
在进行抄送时，需要使用关键字：cc
在进行密送时，需要使用关键字：bcc
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.runoob.com/images/" target="_blank"> 每30秒钟刷新当前页面:
<meta> 标签- 使用实例<meta http-equiv="refresh" content="30">每30秒钟刷新当前页面:
4.表格标签
1.显示行列
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
2.如何显示表格表头。
<h4>水平标题:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直标题:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
3.带标题 (caption) 的表格
<caption>Monthly savings</caption>
<h4>单元格跨两格:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
5.在不同的元素内显示元素
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
6.使用 Cell padding 来创建单元格内容与其边框之间的空白
<h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
7.使用 Cell spacing 增加单元格之间的距离。
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<colgroup> 和 <col> 标签为表格中的三个列设置了背景色：
colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
span： 规定列组应该横跨的列数；
列表：
有序列表：
<ol>
<li>Coffee</li>
</ol>
<h4>无序列表:</h4>
<ul>
<li>Coffee</li>
</ul>
自定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dl>
<dt> 标签定义一个描述列表的项目/名字。
<dt> 标签与 <dl> （定义一个描述列表）和 <dd> （描述每一个项目/名字）一起使用。
不同类型的有序列表
<h4>大写字母列表：</h4>
<ol type="A">
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
</ol>
不同类型的无序列表
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
</ul>
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<h4>有序无序混合嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
document.write("Hello World!")
Hello World!
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
document.write("<h1>这是一个标题</h1>"); 这是一个标题
JavaScript事件响应
<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>
JavaScript处理 HTML 样式:
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
框架（Iframe）<iframe src="demo_iframe.htm"></iframe>
< 等同于 < > 等同于 > © 等同于 ©
html5:
| article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
video 标签：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的浏览器不支持 video 标签。
</video>
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block； header, section, footer, aside, nav, main, article, figure { display: block; }
使用以上的方法来为 IE 浏览器添加 HTML5 元素，
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后。您只能对每个表格定义一个标题。提示：通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<datalist> 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据 请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
Html+css:
问题1： 当鼠标不按边框的时候没有轮廓，当按上去的时候出轮廓，如想要鼠标按上轮廓消失？ 用css样式：{ outline：none；}
问题2：边框有边框线，想让边框线四边消失？ 用css样式：{ border：none；}
问题3：当想要背景图片显示在背景墙上且不重复和移动到相应的位置用css样式：{ background-image：url（/image/xx.jpg）; background-repeat:no-repeat; background-
position:13px(左) 15px;（上）}
问题4：在input里面添了border-redius属性，但鼠标点中，会有 原来的input正方形轮廓， 想要去除原来的input轮廓设置？ 用css样式：{ border：1px red solid;}
问题5： textarea如何去掉右下角三角形图标？ 用css样式：{ resize：none；}
javascript：
onblur=" $(this).val('请输入一句话...');" 和 onblur="if(this.value==''){this.value='按店铺名称';}" 的作用是：
当鼠标放上去时，请输入消失，鼠标点到别处有出现
onfocus="$(this).val('');" 和 onfocus="if(this.value=='*'){this.value='';}" 的作用是：
得到焦点时如果值是*号则清空值
浙公网安备 33010602011771号
shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>