HTML重点在当前目录运行HTTP服务器，设置为没有缓存, http-server . -c-1 download, 属

本地运行HTML文件

方法一，使用HTTP Server

下载HTTP服务器包, yarn global http-server
在当前目录运行HTTP服务器，设置为没有缓存, http-server . -c-1
点击网址，在后面输入路径，例如192.168.56.1:8080/index.html

方法二，使用Parcel

下载Parcel包, yarn global add parcel
运行HTML文件, parcel index.html

a标签

属性

herf, 包含超链接指向的URL或URL片段
target, 规定在何处打开链接文档
download, 属性规定被下载的超链接目标。
rel=noopener, 打开新的页面，不会新增窗口，同时不指向外部链接

Href的取值

网址，例如

https://baidu.com
http://baidu.com
//baidu.com

路径，例如绝对路径/a/b/c以及相对路径a/b/c，index.html以及./index.html
伪协议, javaScript:代码,早期为了运行JS代码而存在，现在主要用于制作没有任何指向动作的a标签，例如<a href="javascript:;">点击</a>
特殊属性
- mailto:邮箱 -点击指向邮箱地址，进行发送邮件操作，例如<a href="mailto:a123456@gmail.com">点击发送邮箱</a>。
- tel:手机号点击指向电话号码，进行拨打，例如<a href="tel:123456789">拨打电话</a>
- Id跳转到指定HTML部分, 例如

<p id="article"
******
******
<a href="#article">点击</a>

Target的取值

内置名字

_top, 在当前iframe的顶部打开
_blank, 在空白页面打开
_parent，在当前iframe的上一层打开
_self，默认值，在当前页面打开
_xxx, 打开一个窗口，让之后打开的窗口在前一个窗口打开

程序员命名

windows的name
iframe的name

iframe标签

表示嵌套的browsing context，它能够将另一个HTML页面嵌入到当前页面中

table标签

表示表格数据, 即通过二维数据表表示的信息,内含<thread>,<tbody>,<tfoot>,每个都含有<tr>，<tr>里含有<td>,<th>

 <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小强</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>85</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>79</td>
          <td>82</td>
          <td>92</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>100</td>
          <td>97</td>
          <td>87</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>  
          <th>总分</th>
          <td>200</td>
          <td>200</td>
          <td>200</td>
        </tr>
      </tfoot>
    </table>

效果图

img标签

PS: 作为前端，切记，不能让图片变形！

用途

将一份图像嵌入文档

属性

src(必须存在的属性）,它包含了你想嵌入的图片的文件路径。
alt, 它包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。
height, 图像的高度，在HTML5中的单位是CSS像素，在HTML 4中既可以是像素，也可以是百分比。可以只指定width和height 中的一个值，浏览器会根据原始图像进行缩放。
width, 图像的宽度，在HTML5中单位是CSS像素，在HTML 4中可以是像素也可以是百分比。

事件

onload, 该事件的处理函数将会在image元素指示的图片加载完毕之后触发。此事件触发适用于用src元素属性或用list-style-image。css属性声明元素样式。如果图片的加载源发生变化，该事件会在图片加载完毕之后再次触发。该事件不会在文档树上向上冒泡。
onerror, This event is sent to an image element when an error occurs loading the image

响应式

max-width: 100%

form标签

用途

元素表示了文档中的一个区域(类似表格），此区域包含有交互控制元件，用来向Web服务器提交信息。通常来说，发送Get或者Post请求，然后刷新页面

属性

action, 一个处理此表单信息的程序所在的URL。此值可以被 <button> 或者 <input> 元素中的formaction属性覆盖。
autocomplete, 用于指示 input元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有：
- off：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
- on：浏览器能够根据用户之前在表单里输入的值自动补全。
method, 浏览器使用这种HTTP方式来提交表单. 可能的值有：
- post：指的是HTTP POST方法；表单数据会包含在表单体内然后发送给服务器.
- get：指的是HTTP GET方法；表单数据会附加在action属性的URL中，并以? 作为分隔符，然后这样得到的URL再发送给服务器。如果这样做（数据暴露在URL 中）没什么副作用，或者表单仅包含ASCII字符时，再考虑使用这种方法吧。
- dialog：Use when the form is inside a <dialog> element to close the dialog when submitted.
target,一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复. 在HTML 4 里, 这是一个用于frame的名字/关键字. 在HTML5里，这是一个用于browsing context 浏览器上下文的名字/关键字（举例来说，标签页，窗口，或者行内 frame）。如下的关键字含有特别的含义：
- _self：在当前HTML或HTML5文档页面重新加载返回值。是默认值。译注：也就是说，如果此文档在一个frame中的话，self是在当前frame中重新加载的，而不是整个页面。
- _blank：以新的HTML 4或HTML5文档窗口加载返回值。
- _parent：在父级的frame中以HTML或HTML文档形式加载返回值，如果没有父级的frame，行为和_self一致。
- _top：如果是 HTML 4文档,清空当前文档，加载返回内容, HTML5：在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。
- iframename：返回值在指定 <iframe> 中显示。

事件

onsubmit, submit 事件会在用户点击提交按钮（<input type="submit"/> 元素）提交表单时触发。 <input>只能有纯文本，<button>可以有任意文本,标签。一个Form表单必须含有<type=submit>的标签

input标签

用途

用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent

属性

类型(type):

select
textarea
lable
button
checkbox
email
file
password
hidden
number
radio
search
submit
tel
text

其他name:

autofocus
checked
disabled
maxlength
pattern
value
palceholder

事件

onchange
onfocus
onblur

验证器

HTML新增功能，例如<input type="text" required/>

注意事项

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

HTML重点