这篇学习笔记是在看一些教学视频学习时所记，可能比较乱，就当是自己以后复习的资料好了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5-learning-note</title>
<base target="_blank">
<style type="text/css">
div p{
color:red;
} ul{ border:1px solid #000; }
dl{ width:400px; height:200px; background:#ccc; margin:100px auto;}
dl dt{ width:10px; height:10px; float:left;}
dl dd{ width:250px; height:200px; float:left;}
dl dd h2{ line-height:50px; color:orange; margin:0 auto; font-size:16px;}
dl dd p{ line-height:19px; color:#000; font-size:12px; margin:0 auto;} table tr{font-size:50px;} textarea{resize:none;width:400px;height:50px}
div marquee{
width:200px;
height:200px;
background-color:skyblue;
text-align:center;
/*line-height: 200px;*/ }
#poem h1{color:red;text-align: center;font-family:微软雅黑}
#poem p{text-align:center;color:green;font-size:22px;font-family:微软雅黑}
#dashen1 p{font-family:"华文楷体";font-size:20px;color:black;text-indent:2em;}
</style>
</head> <body>
<h2 id="top">我是顶部</h2>
<!--1.1、标签-h,p,br,hr标签的使用-->
<hr />
<h1>h1是标题1，用于标题的其实有h1~h6,且标题会占用一行特别是h1，在企业级开发中很谨慎</h1>
<h2>这个是h2，有看到字体小一些了没，去word文档里面也有类似的标题设置，其实它们是一样的</h2>
这个是用br实现的，它呢是换行，但这种换行只是外观上换行了，字面的意思是连续的，比如淘宝中的“高级搜索”<br>
<div>
<p>这个则是用p标签写的，它也是换行的意思，但是p标签代表是段落，也就是字面的意思会被结束掉，另起一段</p>
</div> <!--1.2、标签-a标签：用于网页与网页之间的跳转，它的基本格式为：<a href="指定要跳转的目标界面，一般可以是网站网址">需要展现给用户的内容,如果跳转的是一个URL地址，必须在地址之前加入http://或https://-->
合作网站：<a href="http://www.baidu.com">百度</a> <a href="http://www.taobao.com">淘宝</a>
<p>注意这里下面这一个图其实也是一个链接，一个网站，可以点击的，这里设置跳转到百度页面</p>
<a href="http://www.baidu.com">
<img src="1.png" width=100px height=100px>
</a>
<p><a href="课程代码/7-img标签-20171112.html">7-img标签-20171112.html</a>  <a href="课程代码/6-单元格练习2-20171112.html">6-单元格练习2-20171112.html</a></p>
<!--a标签还有其他的属性，比如规定网页要如何跳转？是当前选项卡跳呢，还是另起选项卡跳转？target属性-->
<p>a标签的target属性： <a href="www.baidu.com" target="_self">百度-本选项卡跳转</a>  <a href="www.baidu.com" target="_blank">百度-另起选项卡跳转</a></p> <!--a标签中还有一个属性，叫做title属性，它的作用是给你提示看下面两个对比-->
<p>a标签的title属性： <a href="www.baidu.com" target="_self" title="这个只能在本选项卡跳转">百度</a>  <a href="www.baidu.com" target="_blank" title="这个会另起选项卡跳转">百度</a></p> <!--3.1、img图片路径设置和查找，图片一般采用，这里可以说是有应用到linux系统里的命令或是window系统里的doc命令-->
<p><img src="1.png" width=150px height=150px>
<img src="data:images/2.png" width=150px height=150px>
<img src="../3.png" width=150px height=150px></p> <h2 id="center">我是中部</h2> <!--4.1、表格合并及设置等：表格的经典格式是<table><tr><td>-->
<table bgcolor="black" cellspacing="1px" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td rowspan="4"></td>
<td></td>
</tr> <tr bgcolor="white">
<td bgcolor="green"></td>
<td></td>
</tr> <tr bgcolor="white">
<td></td>
<td></td>
</tr> <tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
<!--5.1、单选框，基本格式：<input type="radio"……>，注意需要添加name属性，加入checked的作用呢是默认选择的意思，没加也可以，只不过刚刷新网页时没全部选项都没有选择，加了就有一个已先选中-->
性别：
<input type="radio" name="1">男
<input type="radio" name="1">女
<input type="radio" name="1" checked="checked">保密 <!--5.2、多选框，基本格式：<input type="checkbox"……>-->
<p>爱好：
<input type="checkbox">乒乓球<input type="checkbox">羽毛球<input type="checkbox">看书听歌<input type="checkbox">下棋<input type="checkbox">其他</p> <p><input type="checkbox">同意开通QQ空间</p>
<p><input type="checkbox">我已阅读并同意了相关的条款</p>
<!--base标签:-->
<a href="http://news.baidu.com/">新闻</a> 
<a href="https://tieba.baidu.com/index.html?traceid=">贴吧</a> 
<a href="https://zhidao.baidu.com/">知道</a> 
<a href="http://music.baidu.com/">音乐</a> 
<a href="http://image.baidu.com/">图片</a> 
<a href="http://v.baidu.com/">视频</a> <!--6.1、假链接：点击之后不会跳转的链接，在企业开发的前期，很多要跳转的页面其实不一定都有做出来，所以先用假链接先代替，这样等到开发后期时，再直接替换成真正的链接-->
<!--6.2、#的假链接会自动回到网页的顶部，javascript：则不会，我们访问网页时经常有见到一个按钮叫“回到顶部”，其实都是采用假链接“#”做出来的-->
<p>假链接的格式:1、#，2、javascript：</p>
<a href="#" target="_self">我是假链接“#”，快点我丫( ⊙ o ⊙ )！</a> 
<a href="javascript:" target="_self">我是假链接“javascript:”快点我丫( ⊙ o ⊙ )！</a>  
<a href="#" target="_self">回到顶部↑</a> <!--7.1：锚点：要想通过a标签跳转到当前界面的某个位置，需要告知a标签具体的id信息，那如何给目标位置绑定id属性，指定一个具体的值呢？-->
<br><br>
<a href="#top" target="_self">跳转到顶部</a> 
<a href="#center" target="_self">跳转到中部</a> 
<a href="#bottom" target="_self">跳转到底部</a>
<br><br>
<a href="minefirstweb.html">跳转到另一选项卡的顶部</a>
<a href="introduction.html">跳转到另一选项卡的顶部</a> <h2 id="bottom" color="red">我是底部</h2> <!--8.1无序列表：给一堆数据添加列表语义，也就是告诉搜索引擎，告诉浏览器这一堆数据是一个整体-->
<!--列表可以分为3类：
1、无序列表（最多）unorder list,格式一般为：<ul><li></li></ul> li是list item的缩写，直译起来就是列表条目
2、有序列表（最少）order list
3、定义列表（其次）definition list
无序列表的作用：给一堆数据添加语义，并且这一堆数据中所有的数据没有先后之分-->
<!--无序列表-->
<h2>中国的城市有哪些</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
<div style="clear:both"></div>
</ul>
<!--ul标签给li标签一般是一个整体，既不会单独出现，两个列表中一般也不会嵌套其他标签-->
<!--无序列表可以用于做什么：
1、新闻列表
2、商品列表
3、导航条-->
<h2>新浪微博</h2>
<hr width=300px align="left" />
<ul type="circle">
<li>东盟峰会川普表情包来袭</li>
<li>教师捡废品12年资助学生</li>
<li>村小老师坚守2名学生</li>
<li>中国最柔软女孩15秒翻滚20米</li>
<li>镜头中的大凉山孩子</li>
<li>超模教你冬日优雅造型</li>
</ul> <!--无序列表练习2:在li标签中放其他标签来丰富li标签的内容-->
<ul>
<li><h2>《三国演义》</h2><p>《三国演义》是中国古典四大名著之一，是中国第一部长篇章回体历史演义小说，全名为《三国志通俗演义》（又称《三国演义》），作者是元末明初的著名小说家罗贯中。</p></li>
<li><h2>《水浒传》</h2><p> 《水浒传》，是中国四大名著之一，全书描写北宋末年以宋江为首的108位好汉在梁山聚义，以及聚义之后接受招安、四处征战的故事。《水浒传》也是汉语文学中最具备史诗特征的作品之一。[1] 是中国历史上最早用白话文写成的章回小说之一。版本众多，流传极广，脍炙人口，对中国乃至东亚的叙事文学都有极其深远的影响。</p></li>
<li><h2>《西游记》</h2><p>《西游记》是由明代小说家吴承恩所完善的中国古代第一部浪漫主义章回体长篇神魔小说。该书以“唐僧取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘了当时的社会现实。主要描写了孙悟空出世，后遇见了唐僧、猪八戒和沙僧三人，一路降妖伏魔，保护唐僧西行取经，所完善的经历了九九八十一难，终于到达西天见到如来佛祖，最终五圣成真的故事。</p></li>
<li><h2>《红楼梦》</h2><p> 《红楼梦》，中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说[1] ，又名《石头记》《金玉缘》。此书分为120回“程本”和80回“脂本”两种版本系统。《红楼梦》是一部具有世界影响力的人情小说作品[3] ，举世公认的中国古典小说巅峰之作，中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景，以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机[4] 。</p></li>
</ul>
<!--无序列表练习3:-->
<ul>s
<li>
<h2>蔬菜</h2>
<ul>
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>苹果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul> <!--8.2有序列表：order list相对于无序列表，数据有先后之分-->
<h2>酷狗热歌排行榜</h2>
<ol type="a">
<li>男人哭吧哭吧不是罪</li>
<li>兄弟</li>
<li>朋友</li>
<li>小酒窝</li>
<li>天涯</li>
<li>十年</li>
</ol> <!--8.3定义列表：definition list-->
<!--dt是英文definition title的缩写，也就是定义列表中的标题，而dd呢则是definition description的缩写，也就是定义标题所对应的描述内容
定义列表一般应用场景：1、做网站尾部的相关信息
2、做图文混排--> <dl>
<dt>
<img src="职工.jpg" width="400px" height="250px">;
</dt>
<dd>
<h2>陈铎鑫</h2>
<p>喜好编程开发，并且有一定编程功底，对问题有寻根问底的好奇心，学习能力强，工作上积极负责，有上进心，具有很强的团队精神与执行力，能及时完成交付于我的任务，互联网的时代，信息，数据，智能，看似已蓬勃发展，但也许只是开始，而我向往它，向往这个伟大的行业，也愿意为此去努力的付出，去挥洒我的热血。</p>
<dd>
</dl>
<!--9.1、表格标签table：过去有很多网站很多都是采用表格标签来制作的，用来给一堆数据添加表格语义，是数据的一种展现形式，可以很清晰直观的展现大量的数据-->
<!--表格标签格式：
<table> ：代表整个表格
<tr>：tr代表表格中的一行：
<td>：td代表表格中的一列：
</td>
</tr>
</table>--> <table border="1" cellpadding="1px" bgcolor="black">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr> <tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table> <!--细线合并：合并需要记住两个关键属性：colspan和rowspan，colspan:把行的多个单元格合并成一个，rowspan：把一列里的多个单元格合并成一个，需要注意的是这个colspan和rowspan合并的单元格会变大，比如rowspan="3"，这样合并成的单元格是有原来小单元格3倍那么大，需要相应的减小这个tr里的列数--> <!--10.1、表单标签：表单就是专门用来收集用户信息的
表单元素：在HTML中 标签/标记/元素都是HTML中的标签
例如a标签
表单的格式：<form>
<表单元素>
</form>-->
<!--常见表单元素：
1、input标签--> <!--10.1.1input几个关键的属性：1、单选框：type="radio"，name="1"，另外也可以加入checked作为默认选择，但注意加多个时，只有最后一个有效果。
2、多选框：type="checkbox"，当然也可以加入checked="checked"作为默认选择且可以多选
3、明文输入：用关键属性type="text"
4、暗文输入：用关键属性type="password"-->
<br><br>
<form>
<!--明文输入框-->
账号：<input type="text"><br><br>
<!--暗文输入框-->
密码：<input type="password"><br><br>
<!---->
账号：<input type="text" value="chenduoxin"><br><br>
密码：<input type="password" value="1234567890"><br><br> 性别：<input type="radio" name="1">男 <input type="radio" name="1">女 <input type="radio" name="1" checked="checked">保密 
<br><br>
<input type="checkbox" checked="checked">我同意开通QQ空间。<br><br>
<input type="checkbox" checked="checked">我已阅读并接受相关条款及隐私保护政策。<br> <!--10.2、表单标签2：回忆下基本架构：<form><input type="button"></form>-->
<input type="button" value="搜索">
<!--这里的onclick="alert(123)是一个js框架，暂时了解即可，后续学习到时或有疑惑可自行查阅相关api"-->
<input type="image" src="icon-search.png" width="30px" height="30px" onclick="alert(123);"> <!--10.2.1、重置按钮-->
<br>账号：<input type="text"><br><br>
密码：<input type="password"><br><br>
<input type="reset" value="清空">
</form> <!--10.2.2、提交按钮：两个注意点：1、需要给<form>表单添加一个action的属性，通过这个action属性指定需要到的服务器地址
2、需要给提交到服务器的表单添加一个name属性-->
<form action="http://www.520it.com">
<br>账号：<input type="text" name="xx"><br><br>
密码：<input type="password" name="yy"><br><br>
<input type="submit">
<!--10.2.3、隐藏域：是后台用于偷偷咪咪做一些获取用户数据等等的事情，目前不好理解，需要学习到Ajax才有接触到，总之目前只要知道其有这一个隐藏数据的功能即可-->
<input type="hidden" name="cc" value="love">
</form> <!--10.2.4、Label 标签：默认情况下，文字和输入框是没有关联的，也就是说点击文字输入框不会聚焦，那么就需要将输入框和文字绑定在一起，那么我们可以用label标签-->
<form>
<br><label for="account">账号：</label><input type="text" id="account"><br><br>
<label for="password1">密码：</label><input type="password" id="password1"><br><br>
</form> <br><label>账号：<input type="text"></label><br><br>
<label>密码：<input type="password"></label><br><br> <!--10.3、其他：Datalist标签-格式<datalist><option><option></datalist>-->
<br><br>
<label>请输入你的车型：<input type="text" list="cars"></label>
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>法拉利</option>
<option>宝骏</option>
<option>劳斯莱斯</option>
<option>兰博基尼</option>
</datalist>
<br><br>
<!--10.3.1、input标签在html5新增的内容-->
<form>
<label>邮箱：<input type="email"></label>
<input type="submit"><br><br>
<label>url地址：<input type="url"></label>
<input type="submit"><br><br>
<label>电话号码：<input type="number"></label>
<input type="submit"><br><br>
<label>日期：<input type="date"></label>
<input type="submit"><br><br>
<label>颜色：<input type="color"></label>
<input type="submit"><br><br>
</form> <!--10.4、一些非input系列标签
1、select标签：<select><option>列表数据</option></select>，用于下拉列表，当下拉的列表还需要分类时，可以通过optgroup进行分组。
2、textarea标签：用于多行文本输入框--> <select>
<optgroup label="中国">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
<option>厦门</option>
</optgroup>
<optgroup label="美国">
<option>纽约</option>
<option>华盛顿</option>
<option>旧金山</option>
<option>洛杉矶</option>
<option>斯坦福</option>
<option>夏威夷</option>
</optgroup> </select> <hr />
<!--文本域：下拉框来的-->
<div>
<textarea></textarea>
</div>
<!--11-1、显示我的作品展示——主要以视频展示的形式-->
<div>
<div>
<h2>我的作品展示</h2>
<hr width="360px" size="1px" align="left" color="black"/>
</div>
<video src="最终光立方.webm" width="360" height="240" controls="controls"></video>
<!--<img src="aboutme.jpg" width="400" height="250">-->
<!--video标签有几个比较重要的属性（需要注意的是添加的视频需要是.webm后缀的视频文件）
1、controls：给视频添加简单的控制，如调音量，暂停播放，全屏等
2、poster：用于视频播放前展示出来的那张图片
3、autoplay：自动播放
4、loop：一般用于广告，循环播放
5、preload：预加载，与autoplay一起时会失效，因为其本身就是矛盾的
6、mute：静音-->
<!--video有第2种格式：具体是这样的:
<video>
<source src="最终光立方.webm" type="video/webm"></source>
<source src="最终光立方.mp4" type="video/mp4"></source>
<source src="最终光立方.ogg" type="video/ogg"></source>
</video>
另外：video实际上支持3种格式，且这3种格式总有至少一种能适配当今5大浏览器，所以这3种格式都加上去就可以了
但有个问题，video是html5的一个标签，以前的老浏览器是不支持的，所以可以采用js的一个框架叫html5midia来实现-->
</div>
<!--11.2、背景音乐:audio标签，用法与video一样，但其中width,height跟poster标签不能用-->
<div>
<audio controls="controls">
<source src="仙剑奇侠传-莫失莫忘.mp3" type="audio/mp3" >
</audio>
</div>
<div id="dashen1">
<details>
<summary>陈伪娘</summary>
<p>陈伪娘，原名陈炜明，因其娘的特性，故亦有小名伪娘，广工的屌丝一枚，自2016年大光棍校毕业后，于花果山进修一年有余，
后经同事介绍到了无名海，随着伟大神的到来，无名海掀起了波澜巨浪，导致狂风18级，无名海深处水深火热之中，大神不亏是大神，
目前屈居于无名海某个小角落，郁郁寡欢不得志，欲往大城市发展。
</details>
</div>
<!--11.3、跑马灯；用marquee标签-->
<div>
<marquee>随便写点内容</marquee>
<marquee direction="right" scrollamount="20">随便写点内容</marquee>
<marquee direction="up" scrollamount="30" behavior="alternate">随便写点内容</marquee>
<marquee direction="down" scrollamount="40" behavior="slide" loop="4">随便写点内容</marquee>
<!--marquee可以实现跑马灯的效果，默认是从右到左,它有几个关键属性
1、direction：滚动的方向
2、loop：循环次数，默认值是-1，也就是无限循环
3、behavior：用于设置滚动类型，有几个值：3.1、slide（普通滑动，不会滚出边界）
3.2、alternate（滚动到边界弹回）
--> </div>
<!--12.1、被淘汰掉的标签：b,u,i,s-->
<!--b(bold) u(underlined) i(italic) s(strikethrough)-->
<!--1、b==strong
2、u==ins
3、i==em
4、s==del 后面出现的这个是用于替代之前废弃的标签，strong,ins,em,del这些是有语义的-->
<!--
strong语义：定义重要性强调的文字
ins语义（inserted）：定义插入的文字
em语义(emphasized：定义强调的文字，语义较strong轻
del语义(deleted)：定义被删除的文字--> <!--12.1.1、废弃标签-->
<div>
<b>我是文字</b>
<u>我是文字</u>
<i>我是文字</i>
<s>我是文字</s>
</div>
<hr>
<!--12.1.2、用于替代废弃标签而新增的标签-->
<div>
<strong>我是文字</strong>
<ins>我是文字</ins>
<em>我是文字</em>
<del>我是文字</del><!--添加删除线--> </div> <!--13、字符实体：由于在html对空格/回车/tab不敏感，会把多个空格/回车/tab当成一个空格来处理-->
<!--13.1、什么是字符实体：在html有的字符是被html保留的，它具备一些特定的含义，如： 代表空格
当这些特殊字符需要显示时，就需要通过字符实体来实现了
1、<(less than)："<"小于符号
2、>(greater than)：">"大于符号
3、®商标注册，©：版权符号-->
我 爱你
我<h1>爱你©
<div id="poem">
<h1>成功法则</h1>
<p>迟到毁一生</p>
<p>早退穷三代</p>
<p>按时上下班</p>
<p>必成高富帅</p>
</div>
</body>
</html>