html5学习笔记（二）（摘抄讲义加部分理解）

视频地址：http://study.163.com/course/courseMain.htm?courseId=1003005

讲义地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html

第7章文档元素

文档元素的主要作用是划分各个不同的内容，让整个布局清晰明快。让整个布局元素具有语义，进一步替代 div。

元素名称	说明
h1~h6	表示标题
header	表示首部
footer	表示尾部
nav	表示有意集中在一起的导航元素
section	表示重要概念或主题
article	表示一段独立的内容
address	表示文档或 article 的联系信息
aside	表示与周边内容少有牵涉的内容
hgroup	将一组标题组织在一起
details	生成一个区域，用户将其展开可以获得更多细节
summary	用在 details 元素中，表示该元素内容的标题或说明

布局例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文档元素</title>
</head>
<body>
	<header>
		<hgroup>
			<h1>这里是一个大标题</h1>
			<h4>这里是一个副标题</h4>
		</hgroup>
		<nav>这里是一个导航</nav>
		这里是存放网页的标头部分：logo,标题，导航
	</header>
	
	<section>
		这里是文档的主题部分。
	</section>
	
	<article>
		相当于一个内置的body
		<header>...</header>
		<section>...</section>
		<address>...</address>
		<footer>...</footer>
	</article>

	<aside>
		这是一个侧栏
		<nav>...</nav>
	</aside>

	<footer>
		<h4>这里是尾部的副标题</h4>
		这里存放页面的尾部：版权声明，友情链接
		<address>这里是联系信息</address>
	</footer>
	
</body>
</html>

大概的布局：

解释：文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。只有在后面的章节学习 CSS，配合使用才能起到布局和样式的效果。

<details>元素生成详情区域、<summary>元素在其内部生成说明标签
解释：由于大多数主流浏览器尚未支持，暂略。

---------------------------

第8章嵌入元素

元素名称	说明
img	嵌入图片
map	定义客户端分区响应图
area	表示一个用户客户端分区响应图的区域
audio	表示一个音频资源
video	表示一个视频资源
iframe	嵌入一个文档
embed	用插件在 HTML 中嵌入内容
canvas	生成一个动态的图形画布
meter	嵌入数值在许可值范围背景中的图形表示
object	在 HTML 文档中嵌入内容
param	表示将通过 object 元素传递给插件的参数
progress	嵌入目标进展或任务完成情况的图形表示
source	表示媒体资源
svg	表示结构化矢量内容
track	表示媒体的附加轨道（例如字幕）

img 的私有属性

属性名称	说明
src	嵌入图像的 URL
alt	当图片不加载时显示的备用内容
width	定义图片的长度（单位是像素）
height	定义图片的高度（单位是像素）
ismap	创建服务器端分区响应图
usemap	关联<map>元素

示例1：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>嵌入元素</title>
</head>
<body>
<p>alt属性表示没有图片时显示的文字说明；ismap属性表示，点击图片任意位置，地址栏出现座标点定位</p>
	<a href="embed.html">
		<img src="0034TG2Qgy71wxSkoYh19&690.jpg" alt="风景图(ismap属性响应分区)" width="300" height="200" ismap></a><br>
<p>创建分区响应图，热点区域，超链接，用usermap关联到Map中name为“map”的标签，里面的设置可以用
	dw软件来编辑：1.选择“设计”模式2.选中图片，左下角出现“地图”显示栏，选择一个矩形，
	在图上划出一个区域，点击确定，然后输入链接（网址），目标（网页打开方式），替换（网址说明）即可3.运行，鼠标放到之前矩形区域，会出现一个小手标志，点击，即可跳转链接</p>
<img src="0034TG2Qgy71wxSkoYh19&690.jpg" alt="风景图(ismap属性响应分区)" width="300" height="200" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="26,41,73,79" href="http://www.baidu.com" target="_blank" alt="百度">
  <area shape="circle" coords="157,106,33" href="www.soso.com" target="_blank" alt="搜搜">
  <area shape="poly" coords="41,144" href="#">
  <area shape="poly" coords="35,156" href="https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/9.html" target="_blank" alt="dsf">
</map>
</body>
</html>

示例2，ifram（插入另一个文档），<embed>（嵌入插件内容:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌入2</title>
</head>
<body>
	<a href="http://www.baidu.com" target="in">百度</a>
	<a href="http://www.haoso.com" target="in">好搜</a><br>
	<iframe src="http://www.csdn.net" width = "800" height="600" name="in"></iframe><br><br>
	<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf"
	 type="application/x-shockwave-flash" width="400" height ="400"></embed>
</body>
</html>

效果如图：

点击百度，iframe框架里显示百度页面，点击好搜显示好搜页面（src 属性表示初始化时显示的页面，name 表示用于 target 的名称）。

下面的插件是一个土豆视频，type属性表示插入内容的类型。

示例3，progress进度条和meter

进度条，IE9及低版本不支持 <progress value = "30" max = "100" ></progress><br>
	显示范围里的值:min 和 max 表示范围边界， low 表示小于它的值过低，high 表示大于它的值过高，optimum 表示最佳值，但不出现效果.value为进度条的值。当value<low或value>high，进度条由绿色变为了黄色，表示警示<meter value = "20" min="10" max="100" low = "40" high = "80" optimum="50"></meter>

效果如图：

其他补充：<object>元素和<embed>一样，只不过 object 是 html4 的标准，而 embed 是 html5 的标准。而 object 不但可以嵌入 flash，还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替，我们这里暂时不对其详细讲解。

-----------------------------------

第九章音频和视频

1.<video src="第一周第二天上午_.mp4" width="640" height="480" poster="0034TG2Qgy71wxSkoYh19&690.jpg" controls muted loop></video>

poster表示封面图片或叫预览图（没有这个属性的话默认显示视频的第一帧），controls 表示播放器标志，muted 表示静音，loop表示循环播放

其他属性：autoplay自动播放（没有value值）

2.预加载设置
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
解释：preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。
3.兼容多个浏览器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>这里引入 flash 播放器实现 IE9 以下，但没必要了</object>
</video>
4.音频

<audio src="10_S_dicestop.mp3" controls autoplay></audio>

兼容：

<audio controls>
    <source src="test.mp3">
    <source src="test.m4a">
    <source src="test.wav">
</audio>

--------------------------------------------------------------------------

第10章表单元素（上）

一．表单元素总汇
在 HTML5 的表单中，提供了各种可供用户输入的表单控件。

元素名称	说明
form	表示 HTML 表单
input	表示用来收集用户输入数据的控件
textarea	表示可以输入多行文本的控件
select	表示用来提供一组固定的选项
option	表示提供提供一个选项
optgroup	表示一组相关的 option 元素
button	表示可用来提交或重置的表单按钮（或一般按钮）
datalist	定义一组提供给用户的建议值
fieldset	表示一组表单元素
legend	表示 fieldset 元素的说明性标签
label	表示表单元素的说明标签
output	表示计算结果

1.大致用法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>表单元素1</title>
</head>
<body>
	form属性说明：
	1.action如果不指定，则默认提交到本页面
	2.autocomplete默认为on，记住之前的输入内容并提示，如果设置为"off"则没有提示功能
	3.enctype表示浏览器对发送给服务器的数据所采用的编码格式，如multipart/form-data（用于上传文件到服务器）
	Input属性说明：
	autofocus自动聚焦当前元素；disabled禁用input元素；autocomplete单独设置input元素的自动完成功能;
	form让让表单外的元素和指定的表单挂钩提交
	label元素说明：
	点击input的名称，有可以光标自动跳转到该input元素
	<form id = "register" action="http://www.baidu.com" method="get" target="_blank" autocomplete="off">
		用户名：<input type="text" name="user" autofocus ><br>
		
		<label>
			label使用1：<input type="text" name="l1">
		</label><br>

		<label for="lable1">
			label使用2：
		</label>
		<input id = "lable1" type="text" name="l1">
		
		<button>提交（button在form里具有提交功能）</button>

	</form>

	电子邮件：<input name="email" form="register">
	
	<hr>

	<form action="http://www.baidu.com" target="_blank" method="get" id="ff">
		<fieldset  name = "abc">
			<legend>注册分组</legend>
			用户名:<input type="text" name="name" value="默认名称">
			密码：<input type="password" name="pwd">
		</fieldset>
		<button>提交（button在form里具有提交功能）</button>
	</form>
	<fieldset form="ff">
		表单外分组:<input type="text" name="other" >
	</fieldset>
</body>
</html>

2.button元素

<button type="submit">提交（button在form里具有提交功能）</button>
<button type="reset">重置</button>

当type为“submit”时，可以用以下属性覆盖from里的设置，

formaction 覆盖 form 元素的 action 属性
formenctype 覆盖 form 元素的 enctype 属性
formmethod 覆盖 form 元素的 method 属性
formtarget 覆盖 form 元素的 target 属性
formnovalidate 覆盖 form 元素的 novalidate 属性

例如：<button type="submit" formaction="http://www.sougu.com"m>提交（button在form里具有提交功能）</button>

扩展：

<button> 标签定义一个按钮。

<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

例如：<button>默认为submit类型<img src="0034TG2Qgy71wxSkoYh19&690.jpg"></button>

----------------------

第10章表单元素（二）

1.当 type 值为 text 时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。并且，input元素还提供了一些额外的属性。
属性名称说明
list 指定为文本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值
maxlength 设置文本框最大字符长度
pattern 用于输入验证的正则表达式
placeholder 输入字符的提示
readonly 文本框处于只读状态
disabled 文本框处于禁用状态
size 设置文本框宽度
value 设置文本框初始值
required 表明用户必须输入一个值，否则无法通过输入验证

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单(中)</title>
</head>
<body>
	<form action="http://www.baidu.com" >
		<input type="text" name = "user" maxlength="10" size = "30" value="初始值">
		<input type="text" name = "a1" maxlength="10" size = "30" value = "只能读，可以提交" readonly>
		<input type="text" name = "a2" maxlength="10" value = "禁用，不能提交" disabled><br>
		提示信息：<input type="text" placeholder="请输入内容"><br>
		建议输入内容：<input list="footlist">
			<datalist id="footlist">
 			  	 <option value="苹果">苹果</option>
  			         <option value="桔子">桔子</option>
   				 <option value="香蕉" label="香蕉">
    			         <option value="梨子">
			</datalist><br>
		<button>提交</button>
	</form>
</body>
</html>

效果如图：

用户名：<input type="text" name="name" required>

当没有输入值的时候，直接提交，就会有提示信息，如图：

2.HTML5 增加了多个新的输入类型：
color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week

a.search 解释：和文本框一致，在除 Firefox 浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和 text 一致。

效果如图：

<input type="search"><br>
			<input type="number" step="2" min="10" max="100"><br>
			<input type="date">
			<input type="month">
			<input type="time">
			<input type="week">
			<input type="datetime">
			<input type="datetime-local"><br>
			<input type="color" name="color"><br>

效果如图：

3.复选框，单选框，imgae

<form>
		复选框：
		音乐<input type="checkbox" name="favorite" value="1">
		体育<input type="checkbox" name="favorite" value="2"><br>
		单选框：
		男<input type="radio" name="sex" value="1" checked>
		女<input type="radio" name="sex" value="2"><br>
		<input type="image" src="img.png" formaction="http://www.sogou.com">
	</form>

image:生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。

4.type 为** email、tel、url 时**
<input type="email">
<input type="tel">
<input type="url">
解释：email 为电子邮件格式、tel 为电话格式、url 为网址格式。额外属性和 text 一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到 http://就能通过。

5.type="file"（accept="image/gif, image/jpeg, image/png"）， type="hidden"分别是上传文件和隐藏控件（但可以传value，经常使用）

----------------------------

第10章表单元素(下)

1,下拉列表框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单元素（下）</title>
</head>
<body>
	<form action="http://www.baidu.com" target="_blank">
		单选：<select name="fruit1">
			<option value="1">苹果</option>
			<option value="2">香蕉</option>
			<option value="3">葡萄</option>
		</select>
		可多选：<select name="fruit2" size="5" multiple="">
			<option value="1" selected>苹果</option>
			<option value="2">香蕉</option>
			<option value="3">葡萄</option>
		</select>
		分类的：
		<select name="fruit" action="http://www.baidu.com" target="_blank" size="6" multiple>
			<optgroup label="水果类1">
   			 	<option value="1">苹果</option>
   			 	<option value="2" selected>橘子</option>
   			 	<option value="3">香蕉</option>
			</optgroup>
			<optgroup label="水果类2">
   			 	<option value="4">葡萄</option>
   			 	<option value="5" selected>香瓜</option>
   			 	<option value="6">芒果</option>
			</optgroup>
		</select>
		
		<button>提交</button>
	</form>
</body>
</html>

效果如图：

selected属性表示默认选中；size表示大小，multiplse表示可以多选。optgroup里的label表示分组大标题，不能被选中，只是个标题。

2.多行文本框

<textarea name="content" rows="5" cols="40" wrap="hard">请留下您的建议</textarea>

wrap:设置是否插入换行符，有 soft 和 hard 两种

3.计算

<form action="http://www.baidu.com" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
		<input type="number" id="num1"> * <input type="number" name="num2">
		<output for="num1 num2" name="res"></output>
		<button>提交</button>
</form>

效果如图：

4.验证比较简陋且支持性差，所以还是要使用jquery完成验证功能和显示

	数字范围：<input type="number" min="10" max="12">
	正则表达式：<input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$">

//禁止表单验证
<form action="http://li.cc" novalidate>

--------------

html5学习笔记（二）（摘抄讲义加部分理解）

基于 Nginx Ingress + 云效 AppStack 实现灰度发布

12款高效开源Wiki系统推荐，打造团队知识管理利器

C语言--右移左移

一个开源且全面的C#算法实战教程

dotnet 基于 DirectML 控制台运行 Phi-3 模型

自定义MyBatis插件

一款.NET开源、功能强大、跨平台的绘图库 - OxyPlot

常用的 Git 指令

鼠标控制软件有可能和虚拟机软件产生冲突

sm4加密工具类

判斷checkBox標籤某一個選項是否被選中

jsp 回顯顯示select

sql查詢find_in_set，字段包含多個ID，並用逗號分開，查詢該字段是否包含某個ID

html5學習筆記（二）（摘抄講義加部分理解）

一個簡單的存儲過程及擴展

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結