HTML5学习感想
想过转行html5有半年多时间了，很幸运从朋友那边了解到小码哥并报了名，因家里行程原因没能面对面跟着江哥一起学习html5基础，但报名的第一天就迫不及待地下载了HTML+CSS全部视频，并开始学习和做笔记。
在看江哥视频的时候，对江哥的崇拜感油然而生，江哥讲课激情澎湃、细腻、循环渐进、思路清晰、面面俱到。带着我们从HTML的作用、基础结构，到各类标签，每个知识点都引导着我们去认识和掌握，期间也少不了巩固知识点的练习，做到真正的100%吸收。特别是路径问题这一块，需要结合江哥的练习再自己仔细总结，才能更加的巩固。江哥讲课的认真态度和激情让我对H5的学习更加地渴望，每天的学习、敲代码和总结让我更加的充实、有冲劲。
印象最深的表单标签、video标签和marquee标签，一个对应现在众多网站的注册界面，两个对应网站上的推广，江哥让我们了解了注册界面的每个细节，看完视频和跟着练习过一遍，再自己diy做几个注册界面和弹幕，非常有成就感，也感受到知识的吸收并转化。
1月中旬才盼来江哥视频的再次更新，也了解到江哥喜添丁，baby好可爱，喜欢江哥，崇拜江哥，也好期待能见到小码哥的老师们，一起学习进阶HTML5。
学HTML5就选李南江，选培训机构我只选小码哥（www.520it.com）
学习笔记
- 字符集
GBK（GB2312）仅储存汉字和常用外文，体积小
国际通用，储存了所有文字
- DTD文档声明
作用：告诉浏览器我是一个文档
- __ H标签、P标签、Hr标签__
我是标题
h1 h2 h3 h4 h5 h6标签, 只有h1到h6,其他的无效；用来添加标题，字体依次变小。
我是一段文本
- 注释
格式：
快捷键：Ctrl+/
- Img标签
1、img是英文image的缩写
2、img标签的格式：
src是英文source的缩写，资源，用来告诉img标签需要显示的图片
3、img包含的属性：
width：宽度
height：高度
title:当鼠标悬停在图片上的时候，需要弹出的描述框中显示什么内容；
alt:是英文alternate的缩写 作用是：当需要显示的图片找不到时，显示什么内容。
- Img标签的路径问题
给src属性赋值有2种方式：
1、相对路径：（掌握）
a、同级（图片和.html文件存储在同一个文件夹中）：
格式：src="xxx.jpg"
含义：在.html文件所在的文件夹中查找名称叫做xxx.jpg的图片
b、下级（存储图片的文件夹和.html文件夹在同一个文件夹中）：
格式：src="images/xxx.jpg"
含义：在.html文件所在的文件夹中找到名称叫做images的文件夹，然后再在images文件夹中找到名称叫做xxx.jpg的图片
c、上级（存储图片的文件夹和存储代码的文件夹在同一个文件夹中）
格式：src="../xxx.jpg"
含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹，然后再在上一级文件夹中找到名叫xxx.jpg的图片
2、绝对路径：（了解）
绝对路径就是每次都从指定的盘符开始查找。
- Br标签
1.作用：换行
2.格式：
- a标签
- a标签的作用：就是用于控制页面与玉面之间跳转的
- a标签的格式：
需要展现给用户查看的内容
例如：
江哥博客
- 注意点
- a标签不仅可以让文字可以点击，还可以让图片（在a标签的开始标签和结束标签之间添加img标签）也能被点击
- 一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
- 如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http://（不安全）或https://（安全）
- a标签中的其他属性：
a标签中有一个叫做target属性，这个属性的作用就是专门用于控制如何跳转- _self：用于在当前选项卡中跳转，也就是不新建界面跳转，默认就是_sel
- _blank：用于在新选项卡中跳转，也就是新建界面跳转
- 还有一个title属性，和img标签中的 title一样，都是用来控制鼠标悬停时显示的提示文本
- 所以一个完整的的a标签格式是3个属性都有
- base标签
就是专门用来统一指定当前页面中所有的超链接（a标签）需要如何打开； - 注意点：
- Base标签必须写在head标签的开始标签和结束标签之间
- 如果既在base标签中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行
a标签页面跳转
- 假链接
假链接存在的意义：
在企业开发前期，其他界面都没有写出来，那么我们就不知道应该跳转到什么地方，所以只能使用假链接来代替，当 项目后期其他界面都已经完成时再将假链接替换为真链接。 - 假链接的格式：
1、#
点我1
2、JavaScript
点我2
两种格式的区别：
"#"的假链接会自动返回网页的顶部，而JavaScript：不会返回网页的顶部锚点
要想a标签跳转到指定的位置，必须告诉a标签一个独一无二的身份证号码，这样才能找到
如果给HTML中的标签绑定一个独一无二的身份号码呢？ 在html中都有一个叫做id的属性，id属性是独一无二的
-
想要跳转到指定的位置分两步
- 给目标位置添加一个id属性，然后指定一个独一无二的值
- 告诉a标签需要跳转到的目标标签对用的独一无二的身份证号码是多少，把id贴到假链接#后面
格式：
我是顶部
跳转到中部
我是中部
我是底部
- 注意点：
- 通过a标签跳转到指定的位置，是没有过渡动画的，是直接一下子就跳转了指定位置
- a标签除了可以跳转到当前界面的指定位置以外，还可以在跳转到其他界面的同时直接跳转到其他界面的制定位置【id要贴在目标界面路径后面加个#后面】，格式如下：
假设 【锚点.html】和【锚点测试界面.html】在同个文件夹，那么
锚点.html代码
跳转到锚点测试界面
我是顶部
跳转到中部
我是中部
我是底部
锚点测试界面.html代码
我是锚点测试界面顶部
我是锚点测试界面中部
我是锚点测试界面底部
列表标签
列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆是一个整体
-
html中列表标签的分类
- 无序列表（最多）（unordered list）
- 有序列表（最少）（ordered list）
- 定义列表（其次）（definition list）
无序列表
无序列表的作用：
给一堆数据添加列表语义，并且这一对数据所有的数据都没有先后之分无序列表格式：
- 需要显示的内容
li其实就是list item（列表条目）的缩写 list：（列表） item：（条目）```
* 注意点：
1. 一定要记住ul标签是用来给一堆数据添加列表语义的，而不是用来给他们添加小圆点的
2. ul标签和li标签是一个整体，是一个组合，所以一般情况下ul标签和li标签都是一起出现的，不会单个出现。
3. 由于ul标签和li标签是一个组合，所以ul标签中不推荐包含其他标签，也就是说ul标签中指挥看到li标签
* 无序列表应用场景：
1. 新闻列表
2. 商品列表
3. 导航条
中国的城市有那些
- 北京
- 上海
- 武汉
- 天津
* 总结：
1. 虽然通过标签属性也能修改样式，但是在企业开发中千万不要这么做
2. ul中最好只放li标签，但在企业开发中，li标签中的内容可能会很复杂，所以我们可以继续在li标签中添加其他的标签来丰富我们的界面
3. 一定要记住ul标签中 最好只放li标签
4. 但是li标签中还可以继续放其他标签
5. 无序列表中的li标签中除了可以添加其他标签来丰富我们的界面以外，还可以添加ul标签来丰富我们的界面
* 在webstorm中如何编写一个ul的格式：
ul>li*4
含义：生成一对ul标签，然后在这对ul标签中再生成4对li标签
* 更加高级编写ul格式的代码的语法：
ul>li2>h2+ul>li3
就会变成下面这样：上面的加号+是同级别的意思
* __有序列表__
* 有序列表的作用：给一堆数据添加列表语义，并且这一对数据所有的数据都有先后之分。
* 有序列表的格式：
* 其他用法和ul都差不多，也就是应用场景/注意点都和ul差不多
企业开发中不用ol，用ul标签，排序的序号等教给css做
* __定义列表__
* 定义列表的作用：
* 定义列表的格式：
* 其实dt和dd都是英文的缩写：
dt是英文definition title的缩写，含义就是用来定义列表
dd是英文definition description的缩写，含义就是用来定义标题对应的描述的，描述dt的
* 定义列表的应用：
1. 做网站尾部的相关信息
2. 做图文混排
* 注意点：
* 和ul/ol一样，dl和dt/dd是一个整体，所以他们一般情况下不会单独出现，都是一起出现
* 和ul/ol一样，由于dl和dt/dd是一个组合标签
* 一个dt可以没有对应的dd，也可以有很多个对应的dd，但是都不推荐
* 和li标签一样，当需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签
* __表格标签的基本使用__
其实在过去表格标签用得非常非常多，绝大多数的网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表
* 什么是表格标签？
表格标签作用：用来给一堆数据添加表格语义，
其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式
* 表格标签格式：
table代表整个表格，也就是一堆table标签就是一个表格；
tr标签代表整个表格中的一行数据，也就是说一对tr标签就是表格中的一行
td标签代表表格中一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。
* 注意点
* 表格标签有一个边框属性，这个属性决定了边框的宽度，默认值是0，所以看不到边框
| 1.1 | 1.2 |
| 2.1 | 2.2 |
* __表格中的其他标签__
* 表格标题
在表格标签中提供了一个标签专门用来设置表格的标题，这个标签叫caption，只要将标题写在caption中
* Caption标签的注意点：
* caption一定要写在table标签中，否则无效
* caption一定要紧跟在table标签后面
* 标题单元格标签
在表格标签中提供了一个标签专门用来存储每一列的标题，这个标签叫做 th标签，只要将当前列的标题存储在这个标签中就会自动居中并且加粗文字
>到此为止我们发现，其实表格中有两种单元格，一种是td，一种是th，td是专门用来存储数据的，th是专门用来存储当前列标题的
* __表格的结构（只需了解）__
* 由于表格中存储的数据比较复杂，为了方便管理和
* 表格中存储的数据可以分为4类
① 表格标题
② 表头信息
③ 主题信息
④ 页尾信息
* 表格的完整结构
| 每一列的标题 |
|---|
| 数据 |
| 数据 |
Caption作用：指定表格的标题
Thead作用：指定表格的表头信息
Tbody作用：指定表格的主题信息
Tfoot作用：指定表格的附加信息
* 注意点:
* 如果我们没有编写tbody，系统 会自动给我们添加tbody
* 如果指定了thead和tbody，那么在修改整个表格的高度时，thead和tbody有自己的默认的高度，不会随着表格的高度变化而变化
* __单元格合并__
* 水平方向上的单元格合并
* 可以给 td标签添加一个colspan属性，来指定把某一个单元格当作多个单元格来看待（水平方向）
例如：
含义：把当前单元格 当作两个单元格（水平方向）来看待
* 注意点：
* 由于把某个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示
* 一定要记住单元格合并永远都是向后或者向下合并
* 垂直方向上的单元格合并
* 可以给td标签 添加一个rowspan属性 ，来指定把某一个单元格当作多个单元格来看待（垂直方向）
例如：
含义：把当前单元格当作两个单元格（垂直方向）来看待
* 注意点：同上
* __编程中的一些快捷键__
* 快速移动选中的代码，上下移动
往上移动 Ctrl+shift+↑（方向键上）
往下移动 Ctrl+shift+↓（方向键下）
* 快速合并和展开代码（合并和展开的是 某一个标签→鼠标放在标签内部）
合并：Ctrl+ -
展开：Ctrl+ +
* 快速合并和展开代码（合并和展开选中的所有标签）
合并：Ctrl+shift+ -
展开：Ctrl+shift+ +
* 快速新启一行
Shift+enter（回车）
* __表单标签（内有上节课2个独立练习）__
* 什么是表单？
表单就是专门用来收集用户信息的
* 什么是表单元素？
* 什么是元素？
在html中，标签/标记/元素都是指html中的标签
例如： a标签/a标记/a元素
表单元素其实就是html中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能
* 表单的格式：
* 常见的表单元素
input标签： 有一个type属性，这个属性有很多类型的取值，取值的不同就决定了input标签的功能和外观
* 明文输入框，type属性赋值text
账号：
* 暗文输入框，type属性赋值password
密码：
* 给输入框设置默认值，可以添加一个value属性
账号：
密码：
* 单选框，type属性赋值radio
性别：
男
女
保密
>注意点：
1、默认情况下单选框不会互斥，要想单选框互斥，必须给每一个单选框标签都设置一个name属性，然后name属性还必须设置相同的值；
2、要想让单选框默认选中某一个框子，那么可以给input标签添加一个checked属性（如果有多个checked，只会默认选最后一个）；
3、在html中如果属性的取值和属性的名称一样，可以只写一个，但是在xhtml中必须写上取值，所以在企业开发中我们推荐大家不要省略取值
* 多选框 type属性赋值 checkbox
爱好：
篮球
足球
棒球
足浴
* **表单标签-按钮**
* 定义普通按钮（type赋值**button**）
* 可以通过value属性来给按钮指定标题
* 作用：配合JS完成一些操作
* 图片按钮（type赋值**image**）
* 重置按钮（type赋值**reset**）
* 作用：用于清空表单中已经填写好的数据
* 注意点：
如果想修改重置按钮默认的按钮标题，可以通过value属性来修改
* 提交按钮（type赋值**submit**）
* 作用：将表单中已经填写好的数据，提交到远程服务器
* 注意点：
要想把表单中填写好的数据提交到远程服务器，必须具备两个条件：
1. 需要给form表单添加一个action属性，通过这个action属性指定需要提交到的服务器地址
4. 注意：还有虽然不是官方推荐且有局限性的方法，就是直接用label包裹文字和输入框
* **datalist标签（仅了解）**
因为众多主流浏览器不支持
* datalist标签
* 作用：给输入框绑定待选项
* datalist格式：
* 如何给输入框绑定待选列表
1. 建一个输入框
2. 建一个datalist列表
3. 给datalist列表标签添加一个id
4. 给输入框添加一个list属性，将datalist的id值赋值给list属性即可
请输入您的车型：
* **表单标签-H5（仅了解）**
因为众多主流浏览器不支持
* **表单标签-非input标签（理解）**
* **select标签**
* 作用：用于定义下拉列表
* 格式：
* 注意点：
* 下拉列表不能输入内容，但是可以直接在列表中选择内容
* 可以通过给option标签添加一个selected属性（赋值为selected）来指定列表的默认值
* 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据
* **textarea标签**
* 作用：定义一个多行输入框
* 格式：
* 注意点：
* 默认情况下输入框可以无限换行
* 默认情况下输入框有自己的宽度和高度
* 可以通过cols和rows来指定输入框的宽度和高度，但是虽然指定了列数和行数，还是可以无线往下输入
* 默认情况下输入框是可以手动拉伸的
* **video标签（掌握）**
* 什么是video标签
* 作用：播放视频
* 格式：
* Video标签的属性：
* src：用于告诉video标签需要播放的视频地址
* autoplay：用于告诉video标签是否需要自动播放视频
* controls：用于告诉video标签是否需要显示控制条
* poster： 用于告诉video标签视频没有播放之前显示的占位图片
* loop：一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放
* preload：预加载视频，但是需要注意preload和autoplay相冲，如果设置了autoplay属性，那么preload就失效
* muted:静音
* width/height:和image标签一样
* **video标签第二种格式(掌握)**
video>
* 由于视频数据非常重要，所以五大浏览器厂商都不愿意支持别人的视频格式，所以导致了没有一种视频格式是所有浏览器都支持的，这个时候w3c为了解决这个问题，推出了第二个video标签的格式。
* Video标签的第二种格式存在的意义就是为了解决浏览器适配问题
* Video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么以后当浏览器播放视频时他就会从这三种中选择一种自己支持的格式来播放
* 注意点：
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，就是浏览器必须支持html5标签，否则同样无法播放。在过去的一些浏览器是不支持html5标签的，所以为了让过去的一些浏览器也能够支持video标签来播放视频，那么我们以后可以通过一个js的框架叫做html5media来实现。
* **audio标签(掌握)**
* 什么是audio标签？
* 作用：播放音频
* 格式：
* 第一种：
* 第二种：
* 注意点：
Audio标签的使和video标签的使用 基本一样，video中能够使用的属性在audio标签中大部分能够使用，并且功能一样，只有3个属性 不能用：width/height/poster
* **详情和概要标签(理解) **
* 什么是详情和概要标签？
* 作用：利用summary标签来描述概要信息，利用details标签来描述详情信息
* 格式：
概要信息
详情信息
* **marquee标签(理解)**
* 注意点：
marquee标签不是w3c推荐的标签，在w3c官方文档中也无法查询这个标签，但是各大浏览器对这个标签的支持非常好
* 什么是marquee标签？
* 作用：跑马灯
* 格式：
* 属性：
* Direction：设置滚动方向：left/right/up/down（分别是向左/向右/向上/向下），默认向右
* Scrollamount：设置滚动速度，值越大就越快
* Loop：设置滚动次数，默认是-1，也就是无限滚动
* Behavior：设置滚动类型，有2个取值：
1. slide（滚到边界停止）；
2. alternate滚动到边界就弹回。
* **html中被废弃的标签**
* 为什么html有一部分标签被废弃掉？
因为当前html中的标签只有一个作用，就是用来添加语义；
而早期的html标签中有一部分标签是没有语义的，有一部分标签是用来修改样式的，所以部分标签就被淘汰了。
比如：
以上这些标签都是没有语义的，都是用来修改样式的
* b（bold）加粗文本，没有语义
* u（underlined）给文本添加下划线，没有语义
* i（italic）将文本倾斜，没有语义
* s（strikethrough）给文本添加删除线，没有语义
* 注意点：
以后在企业开发中，不到万不得已一定不要使用这些被废弃的标签
如果一定要使用，一般情况都是用来作为CSS的钩子来使用（i标签做一个小图标）
* 推出了代替标签
strong==b
ins==u
em==I
del=s
strong语义：定义重要性强调的文字
ins（inseted）语义：定义插入的文字
em（emphasized）语义：定义强调的文字
del（deleted）语义：定义被删除的文字
>记住一点，只需关注标签的语义，不用关注标签的样式
* **字符实体（理解）**
* 在html中对 空格/回车/tab 不敏感，会把多个空格/回车/tab当作一个空格来处理
* 什么是字符实体？
在html中有的字符是被html保留的，有的html字符在html中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西要想显示出来就必须通过字符实体。
字符实体后面一定要加上分号（;）
就是一个空格，有多少个 就有多少个空格。
< 小于符号 < less than
大于符号 > greater than
© 版权符号 ©