什么是学习笔记？
你在学习中想写的批注、摘抄及随感。
从零玩转HTML5前端+跨平台开发上, ● DTD文档声明
○ 告诉浏览器当前这个网页是用哪一个版本的HTML的规范编写的
○ <!DOCTYPE HTML>
○ 注意点：
■ 任何一个标准的HTML网页，第一行一定是DTD文档声明，必须在第一行
■ 不区分大小写
■ 不是一个标签
● html标签
○ 用于告诉浏览器这是一个网页也就是告诉浏览器这是一个html文档
○ 注意点
■ 所有的标签都必须写在HTML标签里面
● head标签
○ 用于给网站添加一些配置信息
○ 例如：
■ 指定网站的标题/指定网站的小图片
■ 添加网站的SEO相关的信息（指定网站的关键字、指定网站的描述信息）
■ 外挂一些外部的CSS/JS文件
■ -添加一些浏览器适配相关的内容
○ 注意点：
■ 一般情况下，写在head标签内部的内容都不会显示给用户看
■ h系列标签:h1-h6,在企业开发中，一个界面最好只有一个h1
● meta标签
○ 用来指定当前网页的字符集，避免乱码
○ 常见2种字符集---GBK(GB2312)/UTF-8区别：
■ GBK(GB2312)
● 存储的字符比较少，仅仅存储了汉字和一些常用外文
● 体积比较小
■ UTF-8
● 存储了世界上所有的文字
● 体积比较大
○ 如何选择GBK(GB2312)/UTF-8：
■ 如果你的网页里仅仅包含中文，那么推荐使用GBK(GB2312)，因为它的体积小，访问速度更快
■ 如果你的网页里除了中文，还有一些其他国家的语言，那么推荐使用UTF-8
■ 懒人推荐：一律用UTF-8
○ 注意点：
■ 在HTML文件中指定的字符集必须与保存这个文件的字符集一致，否则会出现乱码
● title标签
○ 专门用于指定网站的标题，并且这个标题将来还会作为用户保存这个网站的默认标题
○ 注意点
■ title标签 必须写在head标签里面
● body标签
○ 专门用来定义HTML文档中需要显示给用户看的内容（文字/图片/视频/音频）
○ 注意点：
■ 一对html标签中只能有一对body标签
● P标签<p></p>
○ 告诉浏览器哪些文字是一个段落
○ 在浏览器中会单独占一行
● hr标签<hr />或者<hr>
○ 在浏览器中添加一条分割线
○ 在浏览器中单独占一行
○ 斜杠可写可不写<hr />--XHTML或者<hr>--HTML
○
● img标签<img src=" ">
○ src代表了需要显示的图片名称
○ 给src属性赋值有2种方式：
■ 通过相对路径赋值，即直接从.html文件所在的文件夹里开始查找，不能跨盘符
● <img src=" sea.jpg ">图片和.html文件在同文件夹里的同级
● <img src=" images/sea.jpg ">图片和.html文件在同文件夹里,图片在下一级，例子种的images是放图片的文件夹名称
● <img src=" ../sea.jpg ">图片和.html文件在同文件夹里,图片在上一级
■ 通过绝对路径赋值，从指定的盘符开始查找
● <img src="C:\Users\Administrator\Desktop\html 5\images\sea.jpg"
○ 注意点：
■ 不会单独占一行
■ 在企业开发中，编写路径要用反斜杠/，不要用正斜杠\,
■ 在企业开发中，一般不使用绝对路径，因为可移植性不好，如果把写好的代码拷贝给别人，可能就不能运行了
○ 属性：
■ width图片宽度
■ height图片高度
■ title当鼠标悬停再图片上时，需要显示在弹框中的内容
■ alt是alternate缩写，但图片显示不出时需要显示的内容
● br标签
○ 换行标签
○ 注意点：
■ 多个br可以连续使用，使用了多少个br标签就会换多少行
■ br标签语义是不另起一个段落换行，而在企业开发中一般情况下换行都是因为需要另起一个段落，所以br标签很少用
■ 换行时需要考虑下这个段落是不是已经完整，正确选择br或者p
● a标签<a href="需要跳转的目标界面">需要展现给用户看的内容</a>
○ 用于控制页面与页面之间的跳转
○ a标签的target属性，用于控制跳转方式（当前页/新页面）
■ _self:在当前页打开
■ _blank：在新页面打开
○ a标签的title属性，用于控制鼠标悬停时显示的文本
○ 注意点：
■ 文字/图片，都可以点击
■ 一个a标签必须要有一个herf属性，否则a标签不知道跳转到哪里
■ 如果通过a标签的herf属性制定一个URL地址，必须要在地址前加上http://或者https://
■ a标签的herf属性可以指定网络地址或本地地址
■ <base herf=_blank> base标签可以用来统一当前网页中所有超链接需要如何打开
● 注意base标签必须要写在head标签里
● 如果同时在base标签和a标签里都指定了target，那么浏览器会按照a标签里的来执行
■ 假链接是指点击之后不会跳转的链接，在企业开发前期，其他页面都没写出来，所以需要假链接来代替，格式有2种：
● “#“：点击后网页会自动回到顶部，（回到顶部）
● ”javascript：“：点击后不会自动回到顶部
■ a标签可用于在同一页面中跳转到指定位置，需要给目标位置的标签一个id属性（注意：在html中，每个标签都有id属性）
● 格式
○ <p id="end">I don't know, Sophie thought.</p> 先指定id
○ <a href="#end">To the end</a> 再链接
● 注意点：
○ 通过a标签跳转到指定位置，是没有过渡动画的，直接跳过去
○ 除了可以在同一页面，还可以跳转到其他页面的指定位置
■ <a href="er.html#end">To the end</a>
● 列表标签
○ 用于给一堆数据添加列表语义，既告诉浏览器这些数据是一个整体
○ 分类：
■ 无序列表(ul:unordered list):数据没有先后之分，格式如下：
● <ul>
<li>需要显示的条目内容</li> (li:list item列表条目)
</ul>
● 注意点：
○ ul标签是用来添加列表语义的，不是加小圆点的。。
○ ul标签和li标签是一个整体，一般情况下同时出现
○ 由于ul和li是一个组合，所以不推荐在ul标签中出现除了li标签以外的标签
但是li标签中还可以放其他标签
○ 无序列表中的li标签除了可以添加其他标签来丰富我们的界面以外，还可以添加ul标签，即ul中有li，li中有ul
● 应用场景：
○ 新闻列表
○ 商品列表
○ 导航条
■ 有序列表(ol:ordered list)：数据有先后之分，格式如下：
● <ol>
<li>需要显示的条目内容</li> (li:list item列表条目)
</ol>
● 一般不用ol，而是用ul
■ 定义列表(dl:definition list)，给一堆数据添加列表语义，先通过dt定义标题，再通过dd给标题添加描述信息，格式如下：
● <dl>
<dt></dt> (dt:definition title 用来定义列表中的标题)
<dd></dd> (dt:definition descirption 用来定义标题对应的描述)
<dt></dt>
<dd></dd>
</dl>
● 应用场景：
○ 做网站尾部的相关信息
○ 做图文混排
● 注意点：
○ dl和dt/dd是一个整体，一般情况下不会单独出现
○ 由于dl和dt/dd是一个组合，所以dl中建议只放dt和dd
○ 虽然一个dd可以没有对应的dd，也可以对应多个dd，但是都不推荐，推荐1个dt对应一个dd
○ 当需要丰富界面时，我们可以在dt和dd中继续添加其他标签
● 表格标签
○ 用于给一堆数据添加表格语义，表格是数据的一种展现形式，当数据量非常大的时候,表格是最清晰的一种展现形式
○ 格式：<table> （一对table标签代表一个表格）
<tr> （一对tr表示表格中的一行）
<td></td>（一对td表示一行中的一个数据）
</tr>
</table>
● 注意点：
● 表格标签有边框属性，决定了边框的属性，默认情况下这个属性值为0，所以看不到边框
● <table><tr><td>是一个组合，要一起出现
● 表格标签内容仅仅需要了解，在企业开发中都要用CSS样式来控制
● 在表格标签中想通过指外边距为0来实现细线表格是不靠谱的，其实它是将2条线合并成1条，看起来很粗
● 细线表格的制作方式：（用bgcolor属性，这个属性可以用在table/tr/td上）
○ 给table设置bgcolor为黑色
○ 给tr设置bgcolor为白色
○ 设置外边距为1或者更小
○ 以上仅作为了解的内容，企业开发中要用CSS样式控制
● 在表格标签中，提供了一个标签专门用来设置表格的标题---caption，只要将标题写在caption标签里，标题就会自动相对于表格居中
○ 注意点
■ caption标签一定要写在table标签里面才有效
■ caption一定要紧跟在table标签后面
● 在表格标签中，提供了一个标签专门用来存储每一列的标题---th，只要将当前列的标题存储在这个标签中，标题就会自动加粗+居中
● 表格中有2种单元格，td和th，td是是用来存储数据的，th是用来存储当前列的标题的
● 水平方向上的单元格合并
○ 可以给td标签添加colspan,来指定某个单元格作为多个单元格看待（水平方向上）
○ 例如：<td colspan=“2”></td> 是指把当前单元格当做2个单元格
● 垂直方向上的单元格合并
○ 可以给可以给td标签添加rawspan,来指定某个单元格作为多个单元格看待（垂直方向上）
● 注意点：需要删除多余的单元格；只能向后或向下合并
● 表格标签的属性：
○ 宽度和高度的属性：可以给table标签和td标签使用
■ 表格的高度和宽度默认是按照内容尺寸调整的，也可以通过给table标签设置width/height属性来指定
■ 如果给td标签设置width和height属性，只会修改当前单元格的宽度
○ 水平对齐属性：table/tr/td
■ 给table标签设置align属性，可以控制表格在水平方向的对齐方式
■ 给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式
■ 给td标签设置align属性，只可以控制当前单元格的水平方向的对齐方式
● 注意点：如果同时设置了tr和td标签的align属性，单元格会按照td的对齐方式
○ 垂直对齐属性：tr/td
■ 给tr标签设置valign属性，可以控制当前行中所有单元格内容的垂直方向上的对齐方式
■ 给td标签设置valign属性，只可以控制当前单元格的垂直方向的对齐方式
● 注意点：如果同时设置了tr和td标签的valign属性，单元格会按照td的对齐方式
○ 外边距和内边距的属性：table
■ 外边距即单元格和单元格之间的距离，默认为2px cellspacing
■ 内边距即单元格的边框和文字的间隙，默认为1px cellpadding
● 表单标签
○ 表单是专门用来搜集用户信息的，表单元素其实就是html中的一些标签，只不过这些标签比较特殊，具有特殊的外观和默认的功能
○ 表单格式<form>表单元素</form>
○ 常见的表单元素
■ input标签：input标签中有一个type属性，这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观
■ 账号<input type="text">明文输入框
■ 密码<input type="password">暗文输入框
■ 账号<input type="text" value="123">给输入框设置默认值
■ 性别<input type="radio" name="gender" >男单选框的设置（默认情况下，单选框不会互斥，需要给每个单选框标签都设置一个name设置，并且name属性必须设置相同的值）
■ <input type="radio" name="gender" checked="checked" >女单选框默认选中某一个框子，可以给input标签添加checked属性
■ <input type="radio" name="gender" >保密
■ 爱好<input type="checkbox">篮球多选框的设置
■ <input type="checkbox" checked="checked">足球
■ <input type="checkbox">羽毛球
■ <input type="checkbox">游泳
■ <input type="button" value="我是按钮">普通按钮：可以通过value属性来给按钮指定标题，作用是配合JS完成一些操作
■ <input type="image" src="../images/buttom_play.png" width="80px">图片按钮
■ <input type="image" src="../images/buttom_stop.png" width="80px">
■ <input type="reset" value="reset">重置按钮：用于清空表单中已经写好的数据，value属性可以更改默认的按钮标题-重置
■ <input type="submit">提交按钮：用于将表单中已经填写好的数据提交到远程服务器 ，但是需要满足以下2个条件：
● 需要给form表单添加一个action属性，通过这个action属性指定需要提交到的服务器地址
● 需要给要提交到服务器的表单元素添加一个name属性
■ <input type="hidden">隐藏域按钮：配合提交按钮将一些数据悄悄德提交到服务器
■ <label for="psd"> 密码:</label><input type="password" id="psd"><br>关联文字和输入框，可以用label标签，方法如下：
● 将文字利用label标签包裹起来/给输入框添加一个id属性/在label标签中通过for属性和输入框中的id进行关联
● 直接将文字和输入框一起包裹在label标签里，但是这种方法有局限性，不能交叉关联
■ 请输入您需要的车型：<input type="text" list="cars">datalist标签：建一个输入框/建一个datalist标签/指定datalist的id属性/将input标签的list属性与datalist的id属性进行关联
<datalist id="cars">
<option>宝马</option>
<option>奔驰</option>
<option>别克</option>
<option>宾利</option>
<option>路虎</option>
</datalist>
● 非input标签
■ <select>下拉列表：注意点-下拉列表不能输入内容，只能选择/可以通过给option标签添加一个selected属性来指定列表的默认值/可以通过给option标签包裹一层optgroup标签来给下
<optgroup label="北京"> 拉表中的数据分类
<option>朝阳区</option>
<option selected="selected">昌平区</option>
<option>通州区</option></optgroup>
<optgroup label="杭州">
<option>余杭区</option>
<option>西湖区</option>
<option>上城区</option>
<option>下城区</option></optgroup>
</select>
● <textarea cols="30" rows="10">请输入您对我们的建议，谢谢！</textarea>多行输入框，有以下注意点：
○ 默认情况下可以无限换行
○ 默认情况下有自己的宽度和高度
○ 可以通过cols和rows来指定输入框的宽度和高度
○ 默认情况下输入框可以手动拉伸（CSS可以设置不能手动拉伸）
● video标签：用来播放视频
○ 属性
■ src属性，告诉video标签需要播放的视频地址
■ autoplay属性，是否需要自动播放？<autoplay="autoplay">
■ controls属性，是否显示控制条？<controls="controls">
■ poster属性,视频播放前显示的占位图片<poster="images/sea.jpg">
■ loop属性，一般用于做广告视频（可以循环播放）<loop="loop">
■ preload属，预加载视频，注意preload属性跟autoplay属性相冲，如果设置了autoplay，则preload失效
■ muted属性 ，静音<muted="muted">
■ width属性/height属性
○ 第一种格式：<video src=" "></video>
○ 第二种格式：<video>
<source src="...." type="video/...."></source>
</video>
● 这种格式存在的意义：由于视频数据非常重要，所以五大浏览器厂商都不愿意支持别人的视频格式，导致没有一种视频格式是所有浏览器都支持的。为了解决这个问题，W3C退出第二种格式来解决浏览器适配问题。video元素支持3种视频格式，我们可以把这3种格式都通过source标签指定给video标签，当浏览器播放视频时，它就会从中选择一种自己支持的格式来播放视频。
● 注意点：当前通过video标签的第二种格式虽然能指定所有浏览器都支持的视频格式，但前提条件是浏览器必须支持HTML5，否则同样无法播放；过去的有些浏览器是不支持html5的，为了让这些浏览器也能通过video标签来播放视频，我们以后可以通过JS的一种框架（html5）来实现
● audio标签：用来播放音频
○ <audio src="../images/music.mp3" controls="controls" autoplay="autoplay"></audio>格式一
○ <audio controls="controls">格式二
<source src="../images/music.mp3">
</audio>
● audio标签的使用和video标签基本一样，video中能用的属性audio中 基本都能用，除了height/weight/poster.
● 详情和概要信息：利用summary标签来描述概要信息，details来描述详情信息
○ 默认是折叠展示，想看见详情必须点击
● marquee标签：跑马灯<marquee>金灿灿白滚滚</marquee>
○ direction属性：默认从右往左滚动，direction可以设置为right/up/down,分别向右/向上/向下滚动
○ scrollamount属性，可以设置滚动速度
○ loop属性：设置滚动次数
○ behavior属性：设置滚动类型，slide滚动到边界就停止，alternate滚动到边界就弹回
● 以下标签都已经被废弃不用了，因为不具有语义
○ br/hr/font/b(bold)/u(underlined)/i(italic)/s(strikethrough)
○ 企业开发中，一般不用这些废弃的标签，除非用来当做CSS的钩子
○ strong替代b，ins替代u，em替代i，del替代s
● 字符实体：在html中有些字符是被html保留的有些字符在HTML中室友特殊含义的，是不能直接在html中显示出来的，这些东西要想显示出来就必须通过字符实体。
○  ；--------空格
○ <------< >------>
○ ©--------版权符号
快捷键：
1. 如何在webstorm中让光标移动到当前行的最后面---按END键
2. 如何在webstorm中让光标移动到当前行的最前面---HOME键
3. 如何在webstorm中让光标同时在多行闪烁---按住ALT键不放，再按住鼠标左键不放，再拖动鼠标
4. 如何在webstorm中快速复制光标所在的一行---CTRL+D
5. 如何在webstorm中快速删除光标所在的一行---CTRL+X
6. 如何在webstorm中让标签包裹一段内容，即自动在一段内容的前后加上标签--选中这段内容，再按下CTRL+ALT+T，回车
7. 注释<! --****-->的快捷键是CTRL+/
8. 快速移动选中的代码，上下移动：往上移动=Ctrl+Shift+方向键上，往下移动=Ctrl+Shift+方向键下
9. 快速合并和展开所在的某一行标签：合并=Ctrl+"-"，展开=Ctrl+"+
10. 快速合并和展开选中的所有标签：合并=Ctrl+Shift+"-"，展开=Ctrl+Shift+"+
11. 快速新起一行：Shift+回车
如何在webstorm中快速编写一个ul格式
● ul>li生成一对ul标签，然后在这对ul标签中生成一对li标签
● ul>li*3生成一对ul标签，然后在这对ul标签中生成三对li标签
ul>li*2>h2+ul>li*3，按tab键后可生成下面的代码：
<ul>
<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>
