HTML基础(2)

超链接

  特点：
		HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当你把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。但是搜索引擎对于超链接是图片或者视频都不太友好，一般是文字，便于网络爬虫的爬取
	属性：
		href（设置链接目标地址）
			        href="链接目标地址"
		 title（悬停文本）
			title=“鼠标悬停文本内容”会弹出文本内容
		 target（设置页面打开方式）
			target="_blank"   在新窗口打开
			   target="_self"  默认，在自身窗口打开，不写的时候，就会默认
			target="框架名"，以框架打开
	链接种类：
		1) 内部链接：简单来说,就是网站内部页面之间的链接。此时href的属性值只需写相对路径就可以<a  href="1.html">内容</a>
		2) 外部链接：在网站与网站间的链接。此时href的属性值的写法为：	<a  href="http://www.baidu.com">...</a>
		3) 空链接：没有链接指向的链接。此时href的属性值的写法为：<a  href="#">内容</a>
		4) 下载链接：<a href=“.rar/.exe”>软件下载</a>    可执行文件 EXE  压缩文件  .zip  .rar
		5) 锚点链接：锚点命名：<a name=”top”> </a>   或者id属性          链接到锚点：<a href=”#top”> </a>           不同网页的锚点链接
		6）邮件链接：mailTo:xietian@163.com

容器div，span最干净的标签

1、DIV，定义块体，一般的网页的书写都需要用到，实际开发中也是常用的:
	这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。 
	标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。对于布局来说很方便
2、span，定义行内块:
	使用 <span> 来组合行内元素，以便通过样式来格式化它们。
	如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
	可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

列表

知识点1.无序列表一般在ul的后面不要加其他的标签，一般在布局的时候，结合div一起使用
		<ul  属性1=“属性值” 属性2=“属性值”> 
		<li>无序列表项</li> 
		......
	</ul>        
		ul:
			Unordered List
			属性：type（类型）
				
				空心圆：circle
				黑色方块：square
				实心圆：disc（默认）
				list-style:none可以取消li文本的前面圆点，这是开发页面常用的，很重要
		li:
			list item 列表项



知识点2.有序列表
		Ordered List
		ol:
			Ordered List默认的序号就是1到越来远大了
			属性:
				type（类型）
					type="a"、"A"、"i"、"I"、"1"（默认）
				reversed（H5新属性）
					用于指定列表倒序显示。有序列表反向：reversed=” reversed” 
				start
					从第几个序号开始
						 <ol type="a" start="2">
    	<li>nfeof</li>
        <li>wbviwb</li>
        <li>hvwi</li>
		li
			list item 列表项



知识点3.自定义列表有时候也用
		Definition List
<dl> 
    <dt>定义项</dt>  
    <dd>描述项</dd>  
	<dt>定义项</dt>
	<dd>描述项</dd>
</dl>    
		dl
			Definition List
		dt
			列表项中的标题
		dd
			列表项中的内容

表格

<table>............表格开始标记
			<tr>........行开始标记
					<td></td>单元格标记
			</tr>........行结束标记
			<tr>
					<td></td>
			</tr>
</table>............表格结束标记


thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
表格中 ，tbody可以有多个 ,thead和tfoot只能有一个。


	知识点1.table是个行内块元素

		标签自带的属性
			width    宽（单位是像素或%）
			height 高度
			align         对齐-- left/center/ right
			border        外边框
			bordercolor   外边框颜色
			bgcolor       背景色
			background    背景图片
			cellspacing      单元格间距 （默认2）
			cellpadding     表格边框与内容的间距 默认是0
			style="border-collapse:collapse;"合并边框，两条线变成一条线



	知识点2.caption表格标题可以在thead中使用
		属性
			align
				left
				right
				top
				bottom
		caption 元素定义表格标题。
		caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。




	知识点3.tr行
		属性
			height  高（单位是像素或%）
			align  水平对齐
				-- left/center/ right
			bgcolor  背景色
			valign  垂直对齐
				-- top/middle/bottom




	知识点4.td列
		属性
			width  宽（单位是像素或%）
			height  高（单位是像素或%）
			align  水平对齐
				-- left/center/ right
			valign   垂直对齐
				-- top/middle/bottom
			bgcolor  背景色
			background  背景图片
			colspan  跨列合并（column）
				规定单元格可横跨的列数。
			rowspan  跨行合并 (row）
				规定单元格可横跨的行数。
	知识点5.th表头单元格相当于td，一般为了节省class的属性可以多个选择
		 表头单元格标记，是特殊的单元格，文字会自动加粗、居中。它的用法是取代<td>的位置即可。
	
    知识点6.thead
		<thead></thead>标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
	

	知识点7.tbody
		<tbody></tbody>标签定义表格的主体
	
	知识点8.tfoot
		<tfoot></tfoot>标签定义表格的页脚（脚注或表注）

高级表格

单元格间距(该属性必须给table添加)

	border-spacing:value;

合并相邻单元格边框

	border-collapse:separate(边框分开)/collapse(边框合并两条线变为一条线)；

无内容单元格显示、隐藏

	empty-cells:show/hide;

表格布局算法

	table-layout:auto/fixed(固定宽度，不会随内容多少改变单元格宽度）

		自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。

				缺点：较慢（因为它需要在确定最终的布局前访问			表格中的所有内容）。

				优点：灵活

		固定表格布局

				优点：加快运行的速度,允许浏览器更快的对表格进行布局。

				缺点:不太灵活

表格标题

	<caption>标题内容</caption>

	表格布局元素

	th:表格列标题（放在tr里相当于td）

	valign="top/bottom/middle/baseline" 垂直对齐方式 

	rules="groups/rows/cols/all/none"    添加组分隔线

	表格行分组

		<thead></thead>      表头

		<tbody></tbody>      表体

		<tfoot></tfoot>         表尾

框架

知识点1.iframe
		属性
			width  宽
			height 高
			align 对齐
				left
				right
				top
				middle
				bottom
			frameborder 是否显示框架周围的边框
				1
				0
			marginheight 顶部和底部的边距。
			marginwidth 左侧和右侧的边距。
			name          iframe 的名称。
				超链接中，target可以指向这里的名称
			scrolling  是否在 iframe 中显示滚动条。
				yes
				no
				auto
			src    iframe 中显示的文档的 URL。
		iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe src="demo_iframe.htm" name="iframe_a“ frameborder=“0”>
</iframe>
<a href=“1.html” target=“iframe_a”>链接</a>
	



知识点3.frameset
		属性
			cols 定义框架集中列的数目和尺寸
				pixels
				%
				*
			rows定义框架集中行的数目和尺寸。
				pixels
				%
				*
		frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
	


知识点2.frame
		属性
			frameborder 是否显示框架周围的边框
				1
				0
			marginheight 顶部和底部的边距。
			marginwidth 左侧和右侧的边距。
			name          iframe 的名称。
				超链接中，target可以指向这里的名称
			scrolling  是否在 iframe 中显示滚动条。
				yes
				no
				auto
			src    iframe 中显示的文档的 URL。
			noresize 规定无法调整框架的大小
		<frame> 标签定义 frameset 中的一个特定的窗口（框架）。

表单其实就是传输数据

知识点1.form
		属性
			action（数据传送的地址）就是一般需要提交数据的网址:
					<form  action="1.html">...</form>  
          			当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
			method（数据的传送方式get（默认，少量数据）、post（大量数据））、put；一般就是用前面两个
			name（表单名称）一般这个属性和后端对接的时候可以用得到
			target（规定在何处打开 action URL）
				target="_blank"   在新窗口打开
				target="_self"  默认，在自身窗口打开
				target="框架名"，以框架打开




知识点2.fieldset字段集
		元素可将表单内的相关元素分组

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

		就是将表单分为各各部分，便于查看
	



知识点3.legend
		元素为 fieldset 元素定义标题（caption）
	



知识点4.label
		<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
		属性
			for的值是将label 绑定到哪个表单元素。
				表单的id
	


知识点5.input（文本框，密码框，图像域，单选，多选，文件域，普通按钮，提交按钮，重置按钮）含H5新增功能
		属性:
			type   input 元素的类型。
		    				button 按钮
		    				checkbox  多选框
		    					一般在用的时候和单选框一样要把name的属性值设置成一样
		    				file 文件域
		    				image 图像域
		    				password 密码框
		    				radio 单选框
		    				reset 重置按钮
		    				submit 提交按钮
		    				text 文本框
		    				Color 颜色
		    				Number 数值
		    					默认的增加的数值是1
		    				Date 日期
		    					格式是yyyy/mm/dd不可以填错
		    				Range 滑块
		    					通常使用output可以输出值的大小，结合oninput将其range的id.value和name.value绑定起来，在通过output输出
										    range:<input type="range" max="23" min="2" id="ran" /><output name="outp"></output>
										    在form中添加
										    oninput="outp.value=ran.value"
		    				Month 月份
		    				Week 星期
		    				Time 时间
		    				Datetime-local 本地时间
		    				Email 邮箱判定
		    				Tel 电话判定
		    				url 网址判定
			value  input 元素的值。
			align规定图像输入的对齐方式。（仅图像域）
		    				left
		    				right
		    				top
		    				middle
		    				bottom
			alt  定义图像输入的替代文本。（仅图像域）
			checked  input 元素首次加载时应当被选中。单选按钮组或者多选按钮组，一般checked="checked"这样的就可以直接写checked就可以了
			disabled  是否禁用
			width  宽度（仅H5）
			height  高度（仅H5）
			list  引用包含输入字段的预定义选项的 datalist 。
				<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="尚硅谷" value="http://www.atguigu.com/" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
			max--输入字段的最大值。（number  date）
			min--输入字段的最小值。（number  date）
			multiple--如果使用该属性，则允许一个以上的值。
			name  input 元素的名称。可以结合后端
			pattern 规定输入字段的值的模式或格式。
				例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
			placeholder  帮助用户填写输入字段的提示，一般是search的type类型用的多
			readonly  输入字段为只读。
			required 指示输入字段的值是必需的。
			size  定义输入字段的宽度。
			src  定义以提交按钮形式显示的图像的 URL。（仅图像域）
			step  输入字的的合法数字间隔。(Number)
		标签用于搜集用户信息。
	  根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
	

知识点7.button按钮
		<button id="b1" tabIndex="1">Button 1</button>
		<button><img src='q.png'>按钮</button>使其好看一些
		Button 对象代表一个按钮。
	


知识点8.下拉菜单（select，option）
		select
			属性
				multiple 设置或返回是否选择多个项目。
				selectedIndex 设置或返回下拉列表中被选项目的索引号。
				size 设置或返回下拉列表中的可见行数
		option
			属性
				disabled  设置或返回选项是否应被禁用。不可以选择
				selected="selected"设置值为select首次默认显示的值
	


知识点9.文本域（textarea）
		属性
			rows 设置或返回 textarea 的高度
			cols  设置或返回 textarea 的宽度
			wrap 设置内容换行模式
				off：输入文字不换行。
				virtual：输入文字在屏幕上会自动换行，但是如果访问者没有按回车键换行，则提交到服务器也视为没有换行。
				physical：输入文字时会自动换行，提交到服务器时，会将屏幕上的自动换行视为换行效果提交。
		<textarea  rows="行数"  cols="列数"  name="" wrap="virtual">初始值（可有可无）</textarea>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>智能表单</title>

</head>

<body>
<form autocomplete="off" oninput="outp.value=ran.value">
	1链接地址：<br/>
    url:<input type="url" >
    <hr/>
    2数字：<br/>
    number:<input  type="number" value="10" min="10" max="100" step="5"/>
    <hr/>
    3邮箱：<br/>
    email:<input type="email"  required="required" multiple >
    <hr/>
	4拖动：<br/>
    range:<input type="range" max="23" min="2" id="ran" /><output name="outp"></output>
    <hr/>
    5颜色：<br/>
    color:<input type="color" value="#ff0000" />
    <hr/>
    6搜索：<br/>
    search:<input type="search" value=""/>
    <hr/>
	7电话：<br/>
    tel:<input type="tel" value=""/>
    <hr/>
	8日期:<br/>
    date:<input type="date" value="1996-07-12" />
    <hr/>
    9月:<br/>
    month:<input type="month" value="1996-12" />
    <hr/>
    10周:<br/>
    week:<input type="week" value="2016-W22" />
    <hr/>
    11时间:<br/>
    time:<input type="time" value="00:00" />
    <hr/>
    12日期时间:<br/>
    datetime-local:<input type="datetime-local" value="1998-05-24T00:00" />
	<hr/>
    
   	<input type="text" id="txt" value="1" /> 
    
    
    <input type="button" id="btn" value="点击测试" />
    <input type="submit" />
</form>



</body>
<script>
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
var aInput=document.getElementsByTagName("input");
btn.onclick=function(){
	alert(aInput[txt.value-1].value);
}
</script>
</html>





<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高级表单</title>
<style>
textarea{resize:none;}/*禁止拖动*/
#ff{display:none;}
.lab{display:block;width:100px;height:32px;font:16px/2 "";text-align:center;background:#0cc;color:#fff;cursor:pointer;}
</style>
</head>
<body>

<form>
	<fieldset><!-- 表单字段集 -->
    	<legend>字段集标题</legend>
    	<table>
        	<tr>
            	<td>地址:</td>
            	<td><textarea></textarea></td>
            	<td>多行文本输入框</td>
            </tr>
        	<tr>
            	<td>城市:</td>
            	<td>
                    <select>
                    	<option>鄂尔多斯</option>
                    	<option>杭州</option>
                    	<option selected="selected">上海</option><!--默认选中-->
                    	<option>北京</option>
                    	<option>新疆</option>
                        <option>乌鲁木齐齐齐哈尔</option>
                    </select>
                </td>
            	<td>下拉框</td>
            </tr>
        	<tr>
            	<td>头:</td>
            	<td>
                	<input type="file" id="ff" />
                	<label for="ff" class="lab" >上传</label>
                </td>
            	<td>上传文件</td>
            </tr>
            <tr>
            	<td>头:</td>
            	<td>
                	<label><input type="radio" name="six" /> 人</label>
                	<label><input type="radio" name="six" /> 魔</label>
                	<label><input type="radio" name="six" /> 兽</label>
                </td>
            	<td>上传文件</td>
            </tr>
        	<tr>
            	<td></td>
            	<td>
                	<input type="button" value="自定义" />
                    <input type="submit" value="提交" />
                </td>
            	<td>自定义按钮</td>
            </tr> 
        	<tr>
            	<td></td>
            	<td>
                	<input type="hidden" name="ie" value="utf-10" />
                </td>
            	<td>隐藏类型</td>
                
            </tr> 
        </table>
    </fieldset>
</form>

</body>
</html>

H5新增语义化标签

HTML5特点
	语义特性
	本地存储特性
	设备兼容特性
	连接特性
	网页多媒体特性
		音乐视频
	三维、图形及特效特性
	性能与集成特性
	CSS3特性



知识点1.Header
	 标签定义 section 或 document 的页眉。
	HTML5: <header></header>一般在设置模块的时候可用到
	HTML4: <div></div>



知识点2.Footer
	 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
	HTML5: <footer></footer>
	HTML4: <div></div>


知识点3.Nav
	标签定义导航链接的部分。
	HTML5: <nav></nav>
	HTML4:<ul></ul>



知识点4.Aside
	标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
	<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>


知识点5.Article
	标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
	<article></article>


知识点6.Section
	 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
	HTML5: <section></section>
	HTML4: <div></div>


知识点7.Hgroup
	标签用于对网页或区段（section）的标题进行组合。
	HTML5: <hgroup></hgroup>
	HTML4: <div></div>


知识点8.canvas
	标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
	HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
	HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>


知识点9.command
	标签定义命令按钮，比如单选按钮、复选框或按钮。
	HTML5: <command onclick=cut()" label="cut">
	HTML4: none


知识点10.datalist
	标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
	HTML5: <datalist></datalist>
	HTML4: see combobox.


知识点11.details
	标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
	HTML5: <details></details>
	HTML4: <dl style="display:hidden"></dl>



知识点12.summary
	 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
	HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
	HTML4: none



知识点13.keygen
	标签定义生成密钥。
	HTML5: <keygen>
	HTML4: none



知识点14.mark
	主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
	HTML5: <mark></mark>
	HTML4: <span></span>



知识点15.output
	标签定义不同类型的输出，比如脚本的输出。
	HTML5: <output></output>
	HTML4: <span></span>



知识点16.progress	
	 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
	HTML5: <progress></progress>
	HTML4: none



知识点17.video
	标签定义视频，比如电影片段或其他视频流。
	HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
	HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>


知识点18.source
	标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
	HTML5: <source>
	HTML4: <param>


知识点19.audio
	标签定义声音，比如音乐或其他音频流
	HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
	HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>