a 标签的用法

输入一个超链接，运行http-server 即可在浏览器中以代理服务器的ip运行。

herf :超链接

http-server . -c-1 （-c代表缓存-1代表不要缓存这个页面加载的过程中不做缓存，只是我们测试用）

点击那个超链接即可进入网址

href 等同于hyper ref 超级引用链接

target 链接打开方式打开一个新浏览器页面

download 下载网页

rel=noopener 防止BUG

a的href的取值

网址

google.com

google.com

//google.com (推荐使用) 他会自动选择带s或者不带s的网站这样不会出问题

路径

/a/b/c以及a/b/c /a 前面的根是相对于服务器地址因为他是运行在服务器地址上的

index.html以及./index.html

小技巧：

伪协议

javascript:代码;

<a href="javascript: ;> 点击链接后没有动作的a标签；

maito:邮箱

tel:手机号

<a href="#xxx: ;> 点击跳转到id为xxx的div

id锚点

href = #id

例如
，就可以跳转到这个id名的p标签

a的target的取值

内置名字

_blank 新窗口打开

_top 最顶级页面打开

_parent 父级窗口打开

_self 当前页面打开（默认）

程序员命名

window的name

iframe的name

iframe标签

内嵌窗口（已经很少使用有些老系统还在使用）

table标签

相关标签

table 表格的最外层容器

thead 定义表格的表头

tbody 定义表格主体

tfoot 定义表格的页脚

tr 定义表格行

td 定义单元格表中的数据行

th 定义表头

caption 定义表格标题

  <table>
      <thead>
        <tr>
          <th></th>
          <th>旗木卡卡西</th>
          <th>宇智波佐助</th>
          <th>漩涡鸣人</th>
          <th>春野樱</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>忍术</th>
          <td>90</td>
          <td>88</td>
          <td>90</td>
          <td>90</td>
        </tr>
        <tr>
          <th>体术</th>
          <td>85</td>
          <td>88</td>
          <td>90</td>
          <td>90</td>
        </tr>
        <tr>
          <th>幻术</th>
          <td>82</td>
          <td>96</td>
          <td>76</td>
          <td>90</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>200</td>
          <td>200</td>
          <td>200</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>

效果如下：

捕获.PNG

相关样式

table-layout：布局表格单元格行与列的算法（加快运行速度）

auto 表示根据内容来计算宽度

fixed 表示尽可能让宽度平均

border-collapse：边框合并

collapse 边框会合并为一个单一的边框

去掉边框的间隙

separate 默认值，边框会被分开

inherit 从父元素继承 border-collapse 属性的值

border-spacing 单元格间距，表示单元格边框之前的距离

边框间隙

一般设置为：

 table {
           table-layout: auto;  
           border-collapse: collapse;
           border-spacing: 0;
     }

img标签

作用

发出get请求，展示一张图片

属性

alt 标签实例带有指定代替文本的图像

height 高度

width 宽度

src url

title 文本提示

事件

onload 加载成功

noerror 加载失败

响应式

  max-width: 100%;     自适应屏幕大小

一般设置为：

* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
 img {
        max-width: 100%;
      }

form标签

作用

发get或post请求，然后刷新页面

属性

action 接口地址

autocomplete 推荐填充，可以设置"off","on"

method get/post

target 提交页面打开方式

事件

onsubmit 在表单中的确认按钮被点击时发生

input标签

作用

让用户输入内容

属性

类型type：

button 按钮（button里面还可以写标签而input不行）

checkbox 复选框

email

file 上传文件

hidden 隐藏输入域看不见的input 是给js提交一些字符串 id等东西

number

password 密码输入框

radio 单选框

search

submit 提交按钮

tel

text 普通文本输入框

其他

name

autofocus

checked

disabled

maxlength

pattern

value

placeholder

事件

onchange

onfocus

onblur

验证器

HTML5新增功能

其他输入标签

标签

select+option 下拉菜单

textarea 多行文本框

label 辅助表单

注意事项

一般不监听input的click事件

form里面的input要有name

form里面放一个type=submit才能触发submit事件

HTML快速全解—HTML常用标签