程序员两种查看网页方式：

1. - 安装yarn global add http-server
  - 运行hs -c-1
  - 打开网址后，需加上文件名
1. - 安装yarn global add parcel
  - 运行parcel a-href.html

a标签的用法

属性

href 写一个网址
target 指定在那个窗口打开超链接

<a href="//google.com" target="-blank">超链接</a>
-blank 在空的页面打开
-top 在顶级最上面的窗口打开
-parent 在当前链接所在的上一层打开
-self 在自己这个地方打开

download 下载这个网页
rel=noopener

作用

跳转外部页面
跳转内部锚点
跳转到邮箱或电话等

a 的href的取值

网址 google.com

google.com

//google.com 推荐这个写法,它可以自动选择用http或https

路径 /a/b/c 以及 a/b/c index.html 以及 ./index.html

<a href="a/b/c.html">c.html</a>
<a href="index.html">index.html</a>
<a href="./index.html">index.html</a>

伪协议 javascript:代码;

<a href="javascript:;">查看</a>
点击之后没有反应的a标签

mailto:邮箱

< a href="mailto:fangyinghang@foxmail.com">发邮件</a>

tel:手机号

<a href="tel:13879995556">打电话给我</a>

id 跳转到指定标签 href=#xxx

img标签的用法

作用发出get请求，展示一张图片
属性 alt/height/width/src
事件 onload/onerror

<body>
    <img id="xxx" height="400" src="tupian.jpg" alt="这是一张图片" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
      };
    </script>
  </body>

如果图片加载失败，可以设置一个补救图片

xxx.onerror = function () {
	console.log("图片加载失败");
	xxx.src = "/404.png";
};

响应式 max-width:100% *可替换元素

table标签的用法

<table>
<thead></thead> 表头
<tbody></tbody> 表身
<tfoot></tfoot> 表脚
</table>

列
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>分数</th>
    </tr>
  </thead> 
 <tbody>
   <tr>
       <td>小明</td>
       <td>99</td>
   </tr>
   <tr>
       <td>小华</td>
       <td>100</td>
   </tr>
   <tr>
       <td>小亮</td>
       <td>90</td>
   </tr>
</tbody> 
<tfoot></tfoot> 
</table>

tr->table row 一行

th->table head 表头

td->table data 数据

table相关样式

table-layout auto根据内容调整

<style>
      table {
        table-layout: auto;
      }
</style>

table-layout fixed尽量保持整齐

  <style>
      table {
        table-layout: fixed;
      }
    </style>

border-spacing 控制格与格之间的距离

      border-spacing:50px;

border-coolapse让表格合并

border-coolapse:coolapse;

form标签

作用

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

属性

action 请求页面的地址

method 控制用get还是post请求 autocomplete

target 指定提交页面

事件

onsubmit

要出发submit，必须要有type="submit"

input标签

作用让用户输入内容
属性

类型type

button	checkbox	email	file	hidden	number	password	radio	search	submit	tel	text
name	autofocus	checked	disabled	maxlength	pattern	value	placeholder

事件

onchange：当用户输入改变时触发
onfocus：用户聚焦内容
onblur：用户失去聚焦内容

其他输入标签

select+option

     <select>
       <option value="">- 请选择 -</option>
       <option value="1">星期一</option>
       <option value="2">星期二</option>
     </select>

textarea 可控制框高宽固定

<textarea style="resize: none; width: 50%; height: 300px">
</textarea>

注意事项

一般不监听input的click事件
form里面的input要有name
form里要放一个type=submit才能触发submit事件

《HTML常用标签》