1.a 标签的用法

#属性

href：例如

<a href="https://google.com">超链接</a>

超链接会默认正在当前页面打开谷歌。

href 的取值有

·网址

google.com

//google.com(一般就写这个就可以了，会自动补全前面的内容)

浏览器打开调试界面然后再点Preserve log 然后再点击超链接就可以看到浏览器网址的跳转变化例如a-href.html跳转到google.com 然后跳转到wwww.google.com 然后再跳转到www.google.com

·路径

/a/b/c以及a/b/c

hs在哪里开的服务哪里就是根目录，所以这里的/a/b/c的"/"是指hs打开的服务所在的根目录（不要用双击打开的原因就在这里，绝对路径可能会出错！）

index.html以及./index.html

·伪协议

javascript:在：；中间写的代码就是可以执行的代码，以下的例子点击javascript伪协议会执行javascript的代码。

<a href="javascript:alert(1);"> javascript伪协议 </a>

如果在

<a href = " " >查看1</a>

[如果在代码里写p{$}*30按tab键就会出现30个P标签，做试验]

<a href = "#" >查看2</a>

<a href = "#xxx" >查看2</a>
# 加 id号码 可以跳转到指定的标签上，刷新的时候

点击查看2然后会发现其实页面会自动滚动到顶部，所以写#也是会有变化，所以最简单的办法就是

点击查看之后只会刷新页面，及时href是空的依旧会跳转刷新。

所以可以使用的只有在href="javascript:代码;"在冒号和分号之间插入代码，相当于执行一段javascript代码页面没有进行刷新也没有跳转到顶部。什么都没有做，只是访问了一个不存在的代码片段。所以如果想要做一个a标签但是希望他什么都不做，那就使用这样的方法。

mailto:邮箱

tel:手机号

target：target的作用是在指定的哪个窗口打开超链接

target的内置名字
_blank 在空白的页面里打开
_top 最顶级窗口页面
_parent 当前链接iframe上一个窗口打开
_self 在当前页面中打开（默认值）

例如：

<a href="https://google.com" target = "_blank">超链接</a>

可以在空白页面打开谷歌页面。

download：浏览器不支持这个,了解就可以。

<a href="https://google.com" target = "_blank" download>超链接</a>

rel=noopener

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

2.img 标签的用法

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

属性：alt/height/width/src

事件：online和onerrorr是来监听图片是否加载完成，

响应式:max-width:100%

可替换元素（可能会考）

<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

前端工程师的底线：永远不能让图片变形！只写高度或者宽度！

3.table 标签的用法

table的相关标签有thead,tbody,tfoot

table常用的三个标签tr,td,th

<table>
     <thead>
       <tr></tr>//tr表示table row 每一行
     </th     <table>
       <thead>
        <tr>
          <th></th>
          <th>阿信</th>
          <th>怪兽</th>
          <th>玛莎</th>
          <th>石头</th>
          <th>冠佑</th>
        </tr>
       </thead>
       <tbody>
         <th>数学</th>
         <td>82</td>
         <!--td是数据-->
         <td>100</td>
         <td>100</td>
         <td>100</td>
         <td>100</td>
       </tbody>
       <tfoot>
         <th>总分</th>
         <td>82</td>
         <!--td是数据-->
         <td>100</td>
         <td>100</td>
         <td>100</td>
         <td>100</td>
       </tfoot>
     </table>ead>
     <tbody>
        <td>表头</td>//table data
     </tbody>
     <tfoot></tfoot>
</table>

table-layout CSS 属性定义了用于布局表格单元格，行和列的算法。

/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

auto 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。 fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

border-collapse

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

collapse: 相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。 border-collapse: collapse;

separate: 默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。border-collapse: separate;

border-spacing

border-spacing 属性指定相邻单元格边框之间的距离（只适用于边框分离模式）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的）边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

该属性只适用于 border-collapse 值是 separate 的时候。

值

length 描述单元格之间的水平和垂直距离的一个 length 值。它只在单值语法下使用。

horizontal 描述相邻两列的单元格之间的水平距离的一个 length 值。它只在双值语法下使用。

vertical 描述相邻两行的单元格之间的垂直距离的一个 length 值。它只在双值语法下使用。

inherit 一个表示父元素的 border-spacing 的计算值的关键字，其父元素必须应用了 border-spacing 。

例如： table { border-spacing: 10px 5px; }

4.其他标签

input标签

重点：button里面可以含有标签但是input标签里面不能含有标签只能是纯文本：

<input type="file" multiple >  // 放入多个文件就在后面加multiple

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

多项选择：

<section>
   <option value=" ">-请选择-</option>
    <option value=" ">星期一</option>
     <option value=" ">星期二</option>
</section>

<input type ="text" required/> //自带的验证

注意：一般不监听input的click事件

form里面的input要有name

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

HTML 常用标签