html学习笔记

浏览数：47 / 时间：2015年06月09日

框架标签帧标签
<iframe></iframe>
<frameset>
<frame>
</frameset>

内嵌框架标签scolling滚动条no autuo yes
<body>
<a href="tlsr.html" target="mm">表单一</a><br>
<a href="worklsr.html" target="mm">表单二</a><br>
<a href="http://www.baidu.com" target="mm">百度网</a>
<iframe src="http://www.baidu.com" scrolling="no" width="100%" height="200" frameborder="0"></iframe><hr>
<iframe src="worklsr.html" scrolling="no" width="100%" height="200" frameborder="0" name="mm"></iframe>
</body>

邮箱框架
<frameset rows="200,*" cols="*" frameborder="no" border="10" bordercolor="#E019D9">
<frame src="fram_1.html">
<frameset rows="*" cols="200,*">
<frame src="fram-2.html" >
<frame src="fram-3.html" noresize name="myt" scrolling="auto
">
</frameset>
</frameset>
<noframes>
<body>
你的浏览器不支持框架标签
</body>

fram-2.html代码编写

列表标签

circle空心圆 disc实心圆 square方块
<ul type="circle" type="disc" type="square">
<li>aaa</li>
<li>aaaa</li>
</ul>

<ol type="I" start="1">
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
</ol>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

音频html5 新标签<audio></audio> autoplay自动播放 controls显示控制台
<audio autoplay src="a.mp3" controls loop="-1"></audio> loop="-1"无线循环
<embed src="a.mp3" height="100" width="200"></embed> 360,ie都可以兼容性好
<object data="a.mp3" width="0"></object> 无显示台360,ie都可以兼容性好

html5 新标签datalist 输入单个文字或字母会让你选择
<body>
产品名称：<input type="text" list="pro">
<datalist id="pro">
<option value="my">
<option value="mysql">
<option value="ph">
<option value="php">
</datalist>
</body>

所有的<form></form>标签内容novalidate无需验证直接提交
post方法传值安全，不会在地址栏上显示
get方法，传值相关速度比较快，会在地址栏上显示，由于地址长度有限所以不能大量的字符串
<form action="save.php" method="post" novalidate></form>

单选框效果<label></label>点击文字也可以选中
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label>
<label><input type="radio" name="sex" value="保密" checked>保密</label>

复选框效果
<label><input type="checkbox" name="sex" value="男">男</label>
<label><input type="checkbox" name="sex" value="女">女</label>
<label><input type="checkbox" name="sex" value="保密">保密</label>

下拉选框
商品：
<select>
<option value="三星手机">三星手机</option>
<option value="苹果手机">苹果手机</option>
<option value="小米手机">小米手机</option>
</select>

留言本
留言：<textare row="15" cols="30" name="content">
</textare>
<span style="color:red">*</span>红色星星表示必填
required必填是个新技术
placeholder默认灰色字样 x-webkit-speech格子后面显示语音小图标需谷歌浏览器
姓名：<input type="text"required title="请填写姓名" name="sname" maxlength="5" x-webkit-speech lang="zh-CN" placeholder="请填写姓名">
密码：<input type="password" name="uname" size="100"><span style="color:red">*</span>

控制input格子长度标签可以input里面加入size="100"或者样式里面写input{
padding:10;
width:200px;
}
提交重置
<input type="submit" value="提交" name="sub">
<input type="reset" value="重置" name="usub">

input type="text password submit reset image file hidden button radio checkbox" html4.0 10个属性
type="email range date color " html5新增的部分标签
图片做为按钮
<input type="image" src="btn2.jpg">
文件上传
<input type="file" name="ff" >

图片显示不出来原因为
1.路径不对
2.图片格式不对

表格
表格标签表格布局现在流行是div+css布局
<table> 表格标签
<caption>表格标题
<tr>行
<td>单元格 <th>标题标题单元格

cellspacing格与格之间的距离，cellpading 格与内容之间的距离
细线表格
table的背景颜色为黑色tr的背景颜色为白色 border="0" cellspacing="1"边框为0格与格之间的距离为1

如果img给网页加入图片有蓝色边框只需在里面加入border=0
<th>文字加粗居中效果</th>
给网页加入图片
<img src="images/img2.jpg" title="美丽的风景" width="500px" height="500px" style="border:10px dotted red; padding:20px" onMouseMove="this.src=‘images/img3.jpg‘" onMouseOut="this.src=‘images/img2.jpg‘">
<a href="images.rar">下载images文件包</a>

<a style="color:red" href="http://www.baidu.com" onClick="return confirm(‘是否要打开百度网‘)">百度网</a>
定义锚点，#cc定义本html页面的锚点。im.html#dd定义im.html里面的锚点
<a href="#cc">第一节课</a>
<a href="im.html#dd">第二节课</a>
<a name="cc">第一节课内容</a>
<h1>科目</h1>
语文数学
语文数学
语文数学
语文数学
语文数学
语文数学
语文数学
link定义链接样式 hover定义鼠标滑过样式 active定义鼠标点下效果 visited定义鼠标点过后的效果
a:link{
color:#0200F4;
text-decoration:none;
}
a:hover{
color:#097AF1;
text-decoration:underline;
font-size:30px;
}
a:active{
color:#030303;
}
a:visited{
color:#ECD60D;

}

单标记的标签
<hr> <br> <img> <input> <frame> <link>

font是标签名 size 是属性 7是属性的值
<font style="font-size:12px; color:#EB171B">字体</font>

html5的文档规范为<!DOCTYPE html>面试题目
<marquee direction="right">热烈欢迎........</marquee>
<mark>文字高亮显示</mark>

标签属性没有先后顺序
属性之间用空格隔开

网页的基本结构
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>

notepad 为记事本

网页文件的扩展名为 .html 或 .htm

编程规范
1、文件名，文件夹名称一律使用数字或字母命名
2、不区分大小写，要求一律采用小写
3、html5文档规范是 <!DOCTYPE html>
4、标记有开始一般都有结束这样的标记为双标记
<title></title>
<body></body>
<h1></h1>
<maruqee></maruqee>
也有单标记,没有结束
<meta charset="utf-8"> 新的html5规范
<meta charset="utf-8" /> 早期xhtml规范
<hr> <br> <img> <input> <frame> <link> 新的html5规范
<hr /> <br /> <img /> <input /> <frame /> <link href="" /> 早期xhtml规范
5、<font size="7" color="blue">中华人民共和国-河南省</font>
<font color=blue>中华人民共和国-河南省</font>
font 是标签名为字体标签主要显示文字的
size 是的标签的属性 7 为size 的属性值一般用双引号引起来
color 是属性值为 blue 蓝色
标签的属性没有选择顺序，属性之间用空格隔开

网页的基本结构
title
meta
marquee
font
h1

补充字符集
gb2312 简体字符集 6763汉字
gbk 超大字符集支持简繁体推荐
gb18030
iso-8859-1 国际标准化组织定制字符集目标支持
utf-8 美国字符集支持世界各国语言推荐，兼容好
实现视频播放效果，需下载vcastr22.swf插件安装到本地电脑02.mp4和插件放在同一个文件夹
autoplay=1自动播放0为手动播放
var m = "02.mp4";
var swf_width = 500;
var swf_height = 300;
var LogoText = ‘‘
BeginSwf = ""
EndSwf = ""
var files = ‘‘ + m + ‘&vcastr_title=happy_feet&TextColor=0xffffff&IsAutoPlay=1&IsShowBar=1&BarColor=0xcc66ff&BarTransparent=60&IsContinue=1‘
document.write(‘<object width="‘ + swf_width + ‘" height="‘ + swf_height + ‘">‘);
document.write(‘<param name="movie" value="vcastr22.swf"><param name="quality" value="high">‘);
document.write(‘<param name="menu" value="false"><param name="allowFullScreen" value="true" />‘);
document.write(‘<param name="FlashVars" value="vcastr_file=‘ + files + ‘&LogoText=‘ + LogoText + ‘">‘);
document.write(‘<embed src="vcastr22.swf" allowFullScreen="true" FlashVars="vcastr_file=‘ + files + ‘&LogoText=‘ + LogoText + ‘" menu="false" quality="high" width="‘ + swf_width + ‘" height="‘ + swf_height + ‘" type="application/x-shockwave-flash" wmode="opaque" />‘);
document.write(‘</object>‘);
</script>

参考说明：
参数名称参数说明默认值
vcastr_file 方法2传递影片flv文件地址参数，多个使用|分开空
vcastr_title 影片标题参数，多个使用|分开，与方法2配合使用空
vcastr_xml 方法3 传递影片flv文件地址参数，样板参考 http://www.ruochi.com/product/vcastr2/vcastr.xml vcastr.xml
IsAutoPlay 影片自动播放参数：0表示不自动播放，1表示自动播放 0
IsContinue 影片连续播放参数：0表示不连续播放，1表示连续循环播 1
IsRandom 影片随机播放参数：0表示不随机播放，1表示随机播放 0
DefaultVolume 默认音量参数：0-100 的数值，设置影片开始默认音量大小 100
BarPosition 控制栏位置参数：0表示在影片上浮动显示，1表示在影片下方显示 0
IsShowBar 控制栏显示参数：0表示不显示；1表示一直显示；2表示鼠标悬停时显示；3表示开始不显示，鼠标悬停后显示 2
BarColor 播放控制栏颜色，颜色都以0x开始16进制数字表示 0x000033
BarTransparent 播放控制栏透明度 60
GlowColor 按键图标颜色，颜色都以0x开始16进制数字表示 0x66ff00
IconColor 鼠标悬停时光晕颜色，颜色都以0x开始16进制数字表示 0xFFFFFF
TextColor 播放器文字颜色，颜色都以0x开始16进制数字表示 0xFFFFFF
LogoText 可以添加自己网站名称等信息(英文) 空
LogoUrl 可以从外部读取logo图片，注意自己调整logo大小，支持图片格式和swf格式空
EndSwf 影片播放结束后,从外部读取swf文件，可以添加相关影片信息，影片分享等信息，需自己制作空
BeginSwf 影片开始播放之前,从外部读取swf文件，可以添加广告，或者网站信息，需自己制作空
IsShowTime 是否显示时间 : 0表示不显示时间，1表示显示时间 1
BufferTime 影片缓冲时间，单位（秒） 2

视频插入支持谷歌内核和IE浏览器
<embed src="02.mp4" height="300" width="500"></embed>
视频插入注意宽高要和视频的帧的宽高一样，支持谷歌内核和IE浏览器preload="auto"自动加载在连网的时候
<video src="02.mp4" width="480" height="360" controls loop="-1" autoplay preload="auto"></video>

html5 新增标签
<article>标签定义外部的内容（结构元素）
<nav>
<header>
<footer>
<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。（结构元素）
<figure>定义一组媒介内容的分组，以及它们的标题。（结构元素）
<section>标签定义文档中的节（section，区段）。比如章节，页眉，页脚或文档中的其他部分（结构元素）
<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量（内联元素）
<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度（内联元素）
<time>定义一个日期/时间（内联元素）

<audio>定义声音内容。
<video>定义视频
<datalist>定义下拉列表,与input元素配合使用该元素，定义input可能出现的值，datalist的选项不会被显示出来，它仅仅是合法的输入值列表（交互元素）
<details>定义元素的细节（交互元素）

<canvas>定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法
Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript 脚本语言内部完成渐变
<figcaption> 标签定义 figure 元素的标题。
section
<hgroup> 标签用于对网页或区段（section）的标题进行组合。
对网页或区段的标题进行组合
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

新增的结构标签

section元素
表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。
article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
header元素
表示页面中一个内容区块或真个页面的标题。
hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
nav元素
表示页面中导航链接的部分。
figure元素
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People‘s Republic of China was born in 1949</p>
</figure>
HTML4中常写作
<dl>
<h1>prc</h1>
<p>The People‘s Republic of China was born in 1949</p>
</dl>

新增的其他元素

video元素
定义视频。像电影片段或其他视频流。例：<video src="movie.ogg" controls="controls">video元素</video>
HTML4中写法：
<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>
audio元素
定义音频。如音乐或其他音频流。例：<audio src ="someaudio.wav">audio元素</audio>
html4中写法：
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>
embed元素
用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />
HTML4中代码示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
mark元素
主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。
HTML5<mark></mark>;HTML4 <span></span>。
progress元素
表示运行中的进程，可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。<progress></progress>。
time元素
表示日期或时间，也可以两者同时。
ruby元素
定义 ruby 注释（中文注音或字符）。
与 <ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
rt元素
定义字符（中文注音或字符）的解释或发音。
rp元素
在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
wbr元素
表示软换行。与br元素的区别：br元素表示此处必须换行；wbr表示浏览器窗口或父级元素足弓宽时（没必要换行时），不换行，而宽度不够时主动在此处换行。
canvas元素
定义图形，比如图表和其他图像。<canvas> 元素只是图形容器（画布），必须使用脚本来绘制图形。
<canvas id="myCanvas"></canvas><script type="text/javascript">
var canvas=document.getElementById(‘myCanvas‘);
var ctx=canvas.getContext(‘2d‘);
ctx.fillStyle=‘#FF0000‘;
ctx.fillRect(0,0,80,100);
</script>
command元素——貌似没什么效果。是不是支持有问题
表示命令按钮，比如单选按钮、复选框或按钮。
只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。。
<menu>
<command onclick="alert(‘Hello World‘)">
Click Me!</command>
</menu>

details标签目前只有 Chrome 支持 details 标签
用于描述文档或文档某个部分的细节。
可与 summary 标签配合使用，summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。summary应该是details的第一个子元素。

datalist标签
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

datagrid标签如何用？
定义可选数据的列表。datagrid 作为树列表来显示。
如果把 multiple 属性设置为 true，则可以在列表中选取一个以上的项目。

keygen标签如何用?
标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output标签
定义不同类型的输出，比如脚本的输出。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>
source标签
标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
menu标签
定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别，menu专门用于表单控件。
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

新增input标签

email
必须输入email
url
必须输入url地址
number
必须输入数值
range
必须输入一定范围内数值
Date Pickers（日期选择器）
拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
search
用于搜索域，域显示为常规的文本域。
color