1基础了解
浏览器
我们听过很多浏览器，如IE,QQ,360,火狐，谷歌,但是程序员实际使用中建议IE高版本或者火狐或谷歌，不推荐QQ和360
编辑器
用来写代码，编辑器视频推荐sublime
2 HTML（超文本标记语言）
我们对网页右键，查看源代码，会发现很多内容，这就是我们要写的内容
我们掌握了标记，就基本掌握了语言了，标记就是li，div，a等爬虫遇见的标签名
超文本，原本只是想传输文本，实际还可以传输图片，连接等等
3 标记
标记还有地方叫元素，标签
格式<xxx></xxx> 两个尖括号，前面xxx为单词或字母，后面xxx一样，多个/，前面的叫起始标签，后面的叫结束标签
一般代码标签都是如上成对的，加做双标签，也有只有前面尖括号的叫做单标签
xxx叫做标签名
标签尖括号中可以添加属性如<人 性别="男" 名字="老王"></人> 属性值用双引号包括起来
标签名和属性名之间，属性与属性之间都用空格隔开
4编辑器
百度搜索sublime text3安装，然后运行，点菜单新建文件，CTRL+s保存为myfirst.html
sublime快速注释,选中ctrl+/
这里告诉一点tip，在空文件中输入英文!然后按tab就会显示如上html内容。
我们自己写代码都是在body标签下写内容，我们写一段文字，保存后可以右键浏览器打开，
记得每次修改后要保存，刷新网页才是新内容
<b></b>给内容加粗
5主体标签
一个html页面由一个html主标签包围，内部又有head头部，body主体两部分
<html>
<head></head>
<body></body>
</html>
头部一般是对页面的说明，用于和浏览器沟通，<head>里我们能看到title标签，这个是给浏览器显示的标题，默认是document
我们当然可以根据自己喜好修改标题，效果如上，有部分白色是因为需要屏蔽内容，不小心挖多了
当然其他大部分内容还是写在body内部
6 文本标签
对文本做特殊效果处理的标签
加粗 <b></b> 把想加粗的内容放到标签中
<strong></strong>效果和上面一样都是加粗，但是意图一般是强调
倾斜 <i></i> 或<em></em>
下划线 <u></u>或<ins></ins>
删除线 <s></s>或<del></del> 文字部分中间被水平横线贯穿
字体<font></font> 三个属性color,size,face
属性color设置颜色，属性值写颜色单词
color也可以使用色板表示#加6位16进制表示颜色
size属性调整大小，1到7，比7大也是7的尺寸
face属性，设置字体
字体变大<big></big>
字体缩小<small></small>
上标<sup></sup>
下标<sub></sub>
HTML注释
格式<!__内容__> 尖括号内感叹号，然后4个下划线，下划线中间写注释内容
帮我们记忆理解代码的，内容部分不会写在页面，但是查看源代码会看到
标签嵌套
我们之前讲的标签可以嵌套，即包裹起来实现复合效果，没啥说的，注意不能交叉嵌套
排版标签
段落<p></p>,使内容独占一行，属性align对齐
我们审查元素选中p标签，可以看到段落不光实现了换行，还保持了上下行的间距
属性align，对应属性值，left（默认）,center,right，分别左，居中，右对齐
换行<br>单标签 放在需要换行的点，和p区分是没有间隔，可能也有人写作<br />
横线<hr>单标签 加一行横线，也可写作<hr />
属性 width水平尺寸，属性值，多少个像素
属性size竖直尺寸 ，属性值,多少像素
属性color颜色，同font那里
属性align对齐，同p那里，但默认是center
属性noshade 属性值noshade 即noshade="noshade"效果是直线经过放大后不会出现阴影过渡，默认是有阴影过渡的（直接看可能看不出来，所以也很少用）
记住，以后属性名和属性值相同，我们可以只写属性名，如下图
标题标签 h1到h6双标签 h1最大，h6最小，一般作为标题使用，属性align，默认left
块标签div，使内容占据一行
行内标签span，根据内容，内容多宽，span就多宽，刚刚够包住内容
可以看到div尺寸
也可以看到span尺寸
块元素可以设置宽高，行内元素不可以
列表标签
列表标签：有序列表和无序列表
有序列表
需要按照一定顺序展示的内容，使用ol,li标签,格式如下,不能往ol方内容，只能放到li中
<ol>
<li>内容</li>
....
<li>内容</li>
</ol>
能看到内容会带列表序号，ol属性type，属性值，1数字排序，a小写字母排序，A大写字母排序，i小写罗马计数排序，I大写罗马计数排序，none不显示序号
视频中说设置type="none"会把序号和点去掉，然而我试了几次都没变化，实在是坑！！（也跟浏览器有关系，实际使用用css处理）
属性start，属性值作为起始的偏移数值
这里先加点sublime text 3的快速补全，我们输入p，再按tab就会生成<p></p>一对标签
我们输入ol>li*5再按tab,就会批量生成ol下5个li标签的效果，如下2个图
我们还可以使用列表的嵌套
无序列表
格式如下，用法和ol很像
<ul>
<li>内容</li>
...
<li>内容</li>
</ul>
效果如上，会在内容前显示点，后期也需要弄掉，也支持tab补全创建
属性type：disc实心圆（默认）circle空心圆square实心方块
我们之前是给type写在ul里，其实我们也可以写到li中，如下就实现每个内容不同的图标（ul是控制所有li属性，而li里是单独控制）
ul，li结构也支持嵌套，子项目会自动切换图标为了和上级区分，如下图
定义列表
dl定义列表 dt被dl包裹，写标题 dd被dl包裹，写内容
格式如上图
图片标签
为了在网页上展示图片而使用
<img>单标签，属性src，属性值为图片路径，路径可以为本机路径或者网上资源路径
本地路径示范（如果和html文件有参照性可以写相对路径）
互联网路径示范
还有属性width,height已经在上图中使用，用于尺寸格式化显示
链接标签
格式<a></a>要展示的内容放到标签中，属性href，属性值为网页url，内容部分会变蓝且有下划线，点击会跳转对应网页
如上例，点进去，就到了百度页面了，我们也可以把href的属性值写成我们自己编写的页面用于跳转
我们想点击图片跳转怎么办，就是将a标签包裹img标签
如上图，我们点击就可以跳转到百度
我们这样设置的网页都是点击就跳转了，如果我们想新建个网页去链接打开而不是跳转怎么办呢，要设置a标签的属性target，属性值有2种_self当前窗口打开，_blank新建窗口打开
我们链接也可以设置title属性，这个属性是公共属性，后面会讲到，属性值会作为我们鼠标放上去的显示
我们得到a标签href不光可以是网页也可以是图片
当然我们还可以给a标签href链接音乐或视频（点过去就播放），链接.txt .pdf等点了显示内容
还有一些压缩文件和不能显示的文件则点过去提示下载
假链接
我们有时候写好网页，但是链接资源还没准备好，我们就需要用#作为href的属性
<a href="#"></a>或<a href="javascript:void(0)"></a> 假链接点进去不会有任何反应
锚链接
我们之前讲的有内容的链接是超链接，这次我们讲的锚链接和其区别是，锚链接在本页面的内容进行跳转，而超链接是打开不同的页面
用法比如我们定义了标签<p id="p1"></p>则我们使用<a href="#p1">点击</a>可实现跳转到p
如上图代码和点击前状态
我们特意把图放的上下多点，这样我们点击后发现跳转到了最底下的页面，我们把连接到的本页面的资源叫做锚点，同理我们可以设置玩个点击返回顶部
我们使用#后面跟着标签的name值也可以实现跳转，但是name往往不唯一，建议使用id
pre排版标签
我们知道标签文本需要很多的属性设置才能显示一定样式，
如果我们就是想要我们输入内容格式来显示，就是用pre双标签
不过虽然显示了，好像还不是那么美观，因为开始的缩进也被识别了
引用标签
引用标签，blockquote双标签，被括起来的部分上下左右都有间隔
link标签
link标签为单标签，属性rekl="icon" href="./favicon.ico"可以设置网页图标
其实还有添加样式等等,后续会讲到
表格标签
table表格>tr一行>td一列,th一列(th指内容，td指非标题单元格)
可以往th,td加标签，但是不能再table，tr,td,th之间加标签
我们会发现th比td加粗，其实还是居中的，我们这里还设置了border边界框，否则是不显示的
上图为table的属性说明，background可以设置背景图，属性值为图片路径，background设置颜色，和图片一起出现，图片优先，cellspacing是单元格之间的距离，cellpadding是内容和但与昂的距离
tr属性bgcolor颜色，background背景图，align一行内容的水平对齐，valign一行内容的垂直对齐（属性值top,middle,bottom）
td属性也类似，记住对单元格尺寸的修改，会影响到相邻的行列，因为表格要对齐
关于td的和并，记得rowspan是上下合并，colspan是左右合并，而且合并顺序是从上往下，从左往右
比如我们要合并上图的内容1，内容2，我们会在第一个th写colspan
但是我们又发现多出来一块儿，于是就是我们要求的，合并谁，就删掉谁
表格其实还有个caption双标签，紧挨着table，用于设置表格标题
其实表格默认是table然后caption，thead,tbody,tfoot布局，后三个每个都可以写tr>td,th内容，但是我们不写，一般就默认在tbody内部，审查元素可以看到
学了这么多，我自己根据贴图，尝试写一个课程表
其实由于内容过多，怕重复就设置上下午都是2节，而且内容一样，真的不想一个一个敲了
HTML通用属性
我们之前讲了很多标签，其实这些标签都有一些通用的属性
name名称，用于给标签起名区分，比如我们了有几个div模块，如下图，但是怎么区分几个div模块呢
我们给name属性不同的值就实现了区分
但是有时候我们也会遇到这样的，比如都叫zhangsan，还要区分，那么我们就可以使用属性class来进一步区分
name一般是给标签用的，而class是给以后讲的CSS用的
class的属性值是可以多值的，如上图第一个div的类有c1,c2两种,注意不可以设置数字开头！
由于name,class都是可以重复的，为了唯一区分标签，我们则需要使用id,id也不可以数字开头！
还有title属性，当我们鼠标放上去，会提示的内容
还有style属性，设置各种风格，这个我们会结合css讲
标签的关系
像如上这种嵌套关系，管div叫p的父节点，p叫div的子节点，如果p还有子节点，那子节点对应div叫后代元素/节点
下面的p和div同级是兄弟关系
表单
表单用于收集用户信息
一个表单由很多个表单项组成，如上图，有多个需要输入的内容
表单form双标签，内部子标签为表单项，我们先体验一个例子
form属性action是提交功能，下图的结果会报错，因为我们没有a.php
form另一个属性method，值为get或post
如上图代码，我们给输入框内容设置姓名a1，我们输入123，方法get，就会显示我们的输入内容
我们使用post就没有标签及内容的显示，其实是通过表单传输我们的输入，我们常常也给form起名，用于区分多项输入
文本框
单行文本框input单标签
属性type控制其功能
提示<input type="text">用于一个输入文本框，经常在标签前用于文字提示
我们也可以设置账号密码，为了让我们提交有意义，我们常常还给输入框加name属性，这里我们还知道给input属性type设置submit属性，可以使其变成提交按钮，value为按钮的显示字符值
当然为了输入框可辨识，还常常加入id属性，输入框type若是text，我们也可以设置属性value，这时输入框打开网页就会显示我们的value，如下图
属性maxlength设置最多可输入字符，如下图，我们输入到最大长度后，再输入字符无效
属性size，设置表格宽多少个字符（会被maxlength限制），由于size不同浏览器可能不一样，我们常常交给css处理
属性readonly属性值readonly，我们将不能输入，只读的意义就是给对方看
disabled属性 ，值disabled，设置属性框禁用，变灰色，如果是只读还能选择内容，
这种属性名和属性值相同，我们可以只写属性名
密码框
还是input标签,这次设置属性为password
其实默认密码是不用存value的
密码框作为input标签，当然之前讲过文本框的属性也都有
隐藏框
input属性type设置hidden，将框隐藏，但是可以用来传递数据
我们点击按钮，可以看到传递了hidden的数据
单选项
单选项要给input的type属性设置radio值,这时候就实现可以有点选中，无点未选中的单选样式，
但实际中我们常常多个单选一起用，就是我们要建多个标签，而且要我们设置相同的name属性才能实现互斥
为了让提交有效果，我们要给标签设置value属性传值，而不是外边的文本，我们点击有上图效果
当然单选，要这些value设置不同
我们要想每次开始就给我们一个选择，比如男生多，每次选中默认在男生的位置，就可以设置checked属性为checked，因为相同可以只写checked
多选项
多选项设置type属性checkbox，我们要给他们设置共同的name，不同的value，点击提交可以看到效果
当然还是可以设置默认选择checked
文件域
input标签type属性为file
未选中文件时如上
选中及代码如下，我们选择文件后，后面的显示就是你的文件名，但是记住，我们这里不要设置value属性值，因为value是留给用户去选择的
按钮
提交按钮input的type设置为submit，一般设置value为按钮显示文字，不设置的话不同浏览器会有区别
之前也讲过就不提了，会将包裹他的表单内容进行提交
图片按钮input的type设置image，同时要设置src属性，值为图片路径
点图片按钮也能实现提交功能
重置按钮input的type设置reset，将表单的各项内容恢复默认值
设置后点击重置前
代码和点击按钮后
普通按钮
input的type设置为button，点上去没有变化，
有人说点上去没什么用那是干嘛的，其实可以和js结合让其实现很多功能，到后面再讲
区域框
fieldset双标签。功能是将Input包裹并用标题提示，用legend双标签存储标题
下拉列表
语法select双标签，子标签option双标签
我们点击下拉框，就会看到几个选项，如果我们想设置那个选项是默认选项，可以设置option的属性selected为selected，因为属性和值重复，我们只写属性名即可
我们使用select的属性size设置,可以实现展示给用户的信息数，size=2就可以使用鼠标滚轮或点击上下选择，size=3就在上下之间出现滚动条
我们设置下拉框是为了提交，我们肯定得给select添加name属性值，还有option的value可以不写，不写的情况下就是把信息框的内容作为value提交，但是我们建议还是写上value属性值
选项组
我们使用层叠的关系，比如省份，城市选择的时候，不希望我们选择省份出现其他城市，而是省份下面的城市，则需要使用optgroup双标签,optgroup一般要设置label标签值，作为高级位置的选项，包着的着的是对应的option标签
文本域
textarea双标签 一般设置row,col属性值调整尺寸，且不加内容，给用户输入
一般写长篇大论用他
按钮
button双标签，内容作为按钮文字，点击有提交功能，我们更常用input签设置type为button
label双标签
我们写账号输入框的时候，账号直接写文本就行，但是我们希望有时候点账号也能进入输入，那我们就使用label标签，
这里我们要给input框设置id值，然后给标签设置for属性对应的值即可
html5新增标签html5正在更新html4，但是还没有完全替代 ，语义化标签就是html5新增的
语义化标签
我们之前说div可以包括div，然后div还可以包括p，实现层级块结构，但是我们后来html5就增加了新的标签，本质还是和div一样，只不过我们根据标签名语义化，让其指定做一部分功能
header头部标签
双标签，用于存放网页头部块的区域
footer页脚标签
双标签，放网页底部的内容
nav导航标签
双标签，用于存放一堆导航链接a标签
section章节标签
双标签，写章节内
article文章标签
双标签，写文章内容
我们做个如上效果的网页，一页装不下
代码如下
多媒体标签
视频标签video
视频video双标签,要设置属性src值视频文件路径，我们还要设置属性才能让其播放，autoplay,controls
属性autoplay 是自动播放 controls是显示控件 loop是循环播放，我们简单代码有如上效果
因为尺寸默认的太大，我们可以设置属性宽高width,height就不那么二了
我们还可以给video标签内容加一句话，您的浏览器不支持播放器，建议使用支持html5内核，这样如果视频可播放是看不见内容的，但是如果浏览器版本低就会看到这句话
为了更人性化一点，我们可以给video添加source子标签（双标签）这时我们就可以给src属性写到source里，比如上图，我们备有mp4和avi两种格式，防止浏览器不支持而无法打开，实际使用中，如果浏览器不支持MP4就会尝试用avi播放
音频标签audio
视频了解了，音频也就不难了，属性同上
embed嵌入式多媒体标签
有的浏览器可能会不支持，不建议加内容，属性src设置资源
我们没设置autoplay controls等属性，就默认是自动播放，显示控件的
当然embed使用放swf格式更多
dialog浮动文本标签
也是html5新标签，双标签，需要open函数显示
有遮挡效果（有的移动弹窗估计就是他做的- -）
进度条
progress双标签，属性value当前值，max设置最大值，一般和函数结合，实时反应占比
mark标记
双标签，将内容加黄色底色显示
time时间标签
双标签，用于显示时间，定义时间，但是没看出来用处
地址标签
自带倾斜，放在网页偏下
画布标签
canvas，以后会结合js理解，可以在上面画图
折叠标签
details>summary 使用details双标签，summary子标签（双标签），summary放总结内容，
summary后面跟着详细内容，这些都被details包裹
代码及未点击状态
点开状态，可以再次点击收起
html5新增的input标签的type属性值
email邮箱输入框input输入验证只有满足邮箱格式的内容才能提交
效果如上，代码如下，别忘了input是放在form标签里
使用email就省了我们使用js正则判断等等麻烦
tel电话号码输入框，应该是没有校验
url网址输入框，会验证是否为符合要求的url。必须以http,https协议头开头完整url
number数字输入框，会验证是否为数字，有step属性设置步进，可以直接输入，也可以点箭头调整
search搜索框,一般不单独使用，配合其他标签构成功能，代码和效果见下2图
使用list属性为datalist的id，然后datalist里是option选项
range滑块
time时间
datetime日期
感觉没什么限制验证
week周
点击可以看到第几周，代码如下
HTML5新增input的属性
required 设置input标签内容为必填，否则无法提交，属性值和属性名重名，只写属性名即可
效果和代码如上
placeholder属性，为input标签提供默认提示，不作为value，当输入内容即被覆盖，属性值为提示内容
autofocus属性，让input标签自动获得焦点，还是只写属性名即可.我们input控件必须获得焦点才能操作，我们设置自动焦点是为了让用户快速填写信息
文件域当input的type为file时，可以设置multiple来上传不止一个文件，其为重复属性，可只写属性名
contenteditable属性，此属性不只可放在input，是设置已显示文本的标签的文本部分可编辑，还是只写属性名即可
代码和效果如上
meta标签
name属性，值keywords时，需要meta标签额外属性content，content属性值为关键字能被其他搜索引擎搜索到（如百度等）
name属性，值description时，content属性的值是我们被搜索到展示的描述信息
name属性，为Author时，content属性值为网页制作组，这个签很少出现
http-equiv属性，值refresh，此时配合content属性，值等待秒数或等待秒数加分号加url，时间到了跳转到的网址
最后特别讲下编码问题，meta标签我们设置charset="utf-8";我们使用编辑器保存默认也是utf-8，我们有些文档内容content-type也是utf-8我们都保存一致，就不会乱码，
当然也有用gbk等等，但是必须确保都一致才能不显示乱码
特殊字符-文档类型
我们知道html里<b></b>就是将文本加粗，但是我们无法直接将其作为文本显示出来
我们如上只显示加粗，而且文字被加粗了
我们给小于号用<替代，就可以实现打破识别标签的效果，当然也可以用>把>也替换，
我们在文本敲了很多个空格，但是并没有显示那么多就一个空格，这时我们就可以用 替代
当然也可以用预排版保留格式，但是字体会小
html版本文档类型
一共5种html文档类型，我们之前的程序可以看到都是html5写的
严格型与宽松型的区别是，是否区分大小写，双标签写成单标签是否补全
内嵌框架
我们在浏览器中留出一块区域用于显示别的页面的内容
我们还可以指定链接点击后输出页面到这个iframe框内，给a标签target属性设置为iframe的name值
