Get Started

• HTML重点标签
  ○ a标签
  ○ iframe标签
  ○ table标签
  ○ Img标签
  ○ form标签
  ○ input标签
  ※要用http-server（hs）来打开html文件，来模拟用户打开网页。

a标签

跳转页面，跳转内部锚点，或者邮箱电话等。

• href - hyper ref - 超链接
  <a href="https://google.com">超链接</a>
  ○ a的href的取值
  ○ 网址：https://google.com | http://google.com | //google.com（无协议网址）
  ○ 路径：/a/b/c以及a/b/c（在哪里开服哪里就是根目录） | index.html以及./index.html
  ○ 伪协议：JavaScript:代码；（想要一个标签但什么也不做就空着代码）|mailto:邮箱 | tel:手机号 （在手机端直接点就会进入拨号）
  ○ 跳转到指定标签：href="xxx"，< id=xxx>
• target 要在拿一个窗口打开超链接
  <a href="https://google.com" target="_blank" >超链接</a>
  ○ 内置名字
  _blank 新建页面打开
  _top 在最顶层页面打开
  _parent 在上一层打开
  _self 在当前页面打开
  ○ target="xxx"时，打开的页面叫做xxx，并且打开多个都在xxx页面里，看起来是同一个页面。（查看方法：conlose里搜索window.name显示xxx）
  ○ 程序的名字
  window的name
  iframe的name<iframe src="a-target-iframe.html" name="xxx"></iframe>
• download 是下载网页，但是有很多时候都不支持
• re=noopener 是为了防止一个bug

iframe标签
它是用来内嵌一个网页的，因为不好用，现在已经不怎么用了。

table标签

用来制作表格，table里只能有三个标签。

• thead
  ○ tr-table row，table里的一行
  ○ <tr><th></th></tr>表头
• tbody
  ○ td-table data,<tr><td></td></tr>
• tfoot
  代码的顺序不影响页面显示效果。不写thead，浏览器自动将代码添加进tbody。
  相关样式
• table-layout
  ○ aotu：自动调整宽度
  ○ fixed：要自己设置宽度
• table-collapse：collapse表格合并
• table-spacing：控制border之间的距离

img标签

• 作用
  发出get请求，展示一张图片
• 属性
  alt：当图片没有get的时候，展示的文字
  height：改变高度，宽度自适应
  width：改变宽度，高度自适应（若宽和高一起设定，且不失原本的尺寸，图片就会变形，所以最好只设置一个）
  src：图片代码
• 事件：用来监听图片是否下载成功
  onload
  onerror
• 响应式
  max-width:100% 小窗口显示同等大小

form标签

• 作用
  发get或post请求，然后刷新页面
• 属性
  action：会请求所写路径的页面
  autocomplte：是否自动填充
  method：控制是用get还是post
  target：设置需要提交到哪个页面
• 事件
  <input name="username" type="text">
<input type="submit" value="提交">
  onsubmit：点击提交按钮
  button：按钮，也具有和onsubmit相同的功能
  两者区别：button里可以加标签，但是input不可以
  ※form表单里必须有一个submit

input标签

• 作用
  让用户输入内容
• 属性
  ○ 类型type：
  button/check box/email/file（上传文件，加multiple多选）/hidden/number/
  password（小圆点）/radio/search/submit/tel/text/color/
  textarea:输入框（固定）
  <textarea style="resize: none;width: 50%;height: 300px"></textarea>
  select：
  <select>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
  ○ 其他：
  name/autofocus/checked/disabled/maxlength/pattern/value/placeholder
• 事件
  onchange：当用户输入改变时
  onfocus：当用户把鼠标集中在它身上时
  onblur：当用户的鼠标从这个范围出来时
• 验证器
  HTML5新增功能：input标签内加required时候，用户不填写提交会出现提醒。
• 注意事项
  一般不监听input的click事件
  form里面的input要有name
  form里要放一个type=submit才能触发submit事件

标签

• video：播放视频
• audio：播放音频
• canvas：画布
• svg：矢量图形