html学习笔记

基本标签：

标题标签
	<h1></h1>.....<h6></h6>
段落标签
	<p>..</p>
换行标签
	<br/>
水平线
	<hr/>
样式标签
	加粗 <strong>..</strong> 或者<b>..</b>
	倾斜 <em>..</em>
	可以嵌套

特殊符号，注释

注释 <!-- -->
特殊符号  &...;
图片	<img src="" width="" height="" title="鼠标悬浮文字" />
链接	
	普通超链接：	<a href="https://www.baidu.com">点我进百度</a>
	锚链接：		<a href="a/b.html#my2mao">点我进b页面</a>		<a name="my2mao">b页面内容。。。。</a>
	功能性链接：	<a href="mailto:12345678@qq.com">点我发邮件</a>

列表：

无序列表：	ul li
	<ul type="circle">
		<li>苹果</li>
		<li type="disc">香蕉</li>
		<li>草莓</li>
	</ul>
type="disc | circle | square"
有序列表：	ol li
	<ol type="circle">
		<li>苹果</li>
		<li type="disc">香蕉</li>
		<li>草莓</li>
	</ol>
	列表可以嵌套
定义列表： <dl>   <dt>  <dd>
	<dl>
		<dt>标题</dt>
		<dd>
			正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正<br/>
			文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
		</dd>
	</dl>

表格：

<table border="1px">
	<tr>
		<td>1-1</td>
		<td>1-2</td>
		<td>1-3</td>
	</tr>
	<tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	</tr>
	<tr>
		<td>3-1</td>
		<td>3-2</td>
		<td>3-3</td>
	</tr>
</table>
水平移动  align="left  cernter  right"
垂直移动  valign="top  middle  bottom"
格线粗细  border=" px"  
跨行 跨列  rowspan="行数"   clospan="列数"

表单：

<form action="result.html" method="post" >
	<input name="file" type="file" /><br/>
	<fieldset>								<!-- 语义化表单 -->
		<legend>用户信息</legend>
		用户名：<input name="uname" type="text" size="10" maxlength="4" /><br/>
		密码：<input name="upwd" type="password" /><br/>
	</fieldset>
	兴趣爱好：<br/>
	<label for="zq">足球</label>			<!-- 单选框   表单元素的标注-->
	<input id="zq" name="足球" type="checkbox" />
	篮球<input name="篮球" type="checkbox" />
	乒乓球<input name="乒乓球" type="checkbox" ><br/>
	性别<br/>
	男<input name="sex" type="radio" >		<!-- 多选框 -->
	女<input name="sex" type="radio" >
	地区<br/>
	<select>								<!-- 下拉框 -->
		<option>成都</option>
		<option>西安</option>
		<option>深圳</option>
	</select><br/>
	<input value="按钮" type="button" />
	<input value="注册" type="submit" />
	<input value="重置" type="reset" /><br/>
	个人说明<br/>
	<textarea clos="30" rows="8" >			<!-- 多行文本-->
	</textarea>
</form>

html5新特性

表单：

视频：
	<video>	:每个video对应一个视频文件
	如果考虑浏览器兼容问题，则可以编写多个视频资源，然后嵌套在一个video中
		<video src="resources/abc.mp4" controls ></video>
		<video  controls autoplay >
			<source  src="resources/abc.mp4" type="video/mp4" />
			<source  src="resources/abc.webm" type="video/webm"  />
			<source  src="resources/abc.wvm" type="video/wvm"  />
			该浏览器不支持此类视频
		</video>
音频：
	注意type的后缀
	<audio controls autoplay >
		<source  src="resources/0.mp3" type="audio/mpeg" />
		<source  src="resources/0.ogg" type="audio/ogg" />
	</audio>
正则：
	用户名(必填)： <input type="text" required /><br/>
	邮箱：	 <input type="email"/><br/>
	网址：   <input type="url"><br/>
	数字:   <input type="number" ><br/>
	数字滑块<input type="range" >
	搜索	<input type="search" placeholder="请输入商品名">
	<input type="submit">

页面布局：

布局标签
	<header> <h1>网页的头部</h1></header>
	<section><h1>网页中的某一块</h1></section>
	<article>网页的文章</article>
	<aside>网页的侧边栏</aside>
	<nav>网页的导航</nav>
	<footer><h1>网页的底部</h1></footer>
内联框架：  iframe
	<a href="http://www.baidu.com" target="_blank">点我进百度(在新窗口中打开)</a><br/>
	<a href="http://www.baidu.com" target="_self">点我进百度(在当前窗口中打开)</a><br/><br/><br/>
	<a href="http://www.baidu.com" target="iframe">点我进百度(在内联窗口中打开)</a><br/>
	<a href="http://www.163.com" target="iframe">点我进网易(在内联窗口中打开)</a><br/>
	<iframe src="http://www.sougou.com" name="iframe" width="1200px" height="1000px"></iframe><br/>