HTML常用标签

2020-08-31 本文已影响0人此人长期不在线

a 标签的用法

a 标签的属性

href 该属性指定超链接指向的URL，该属性值可以为网址，路径，伪协议，或者id。

<a href="google.com">google</a>点击该链接不会跳转到google.com，会把google.com当成文件，不是以.com为后缀就是网址，也可以是文件。
<a href="http://google.com">google</a>、<a href="https://google.com">google</a>皆是指向确定URL，若是该URL有问题，就会出现bug。
<a href="//google.com">google</a> 无协议绝对地址，默认是当前页面协议，是HTTP协议, 就跳转http://google.com
<a href="/a/b/c.html">c.html</a>指向根目录下的a/b文件里面的c.html、
<a href="a/b/c.html">c.html</a>指向相对路径a/b文件里面的c.html。如果开启了http服务，在哪里开启则哪里就是根目录。
<a href="index.html">index</a>、<a href="./index.html">index</a>指向当前目录下面的index.html。
<a href="javascript:alert(1);">javascript伪协议</a>，伪协议，会执行js后面的代码。
<a href="javascript:;">空的伪协议</a>，伪协议，使点击该标签不跳转。若href=""则该页面刷新；若href="#"则该页面跳转到顶部。
<a href="#id">查看id</a>，写锚点，会自动加到地址后面，不会发起请求，如index.html#id，虽然不会发起请求，但是页面会有变化，会自动跳转到该id。
<a href="mailto:邮箱地址">发邮箱</a>链接到发送邮件，并自动填入邮件地址
<a href="tel:13812345678">打电话</a>拨号，在手机上点击该链接，会拨号并填入改手机号。

target 该属性指定在何处窗口显示链接的资源。

target="_blank"在新窗口打开该链接。
target="_self"在当前页面加载，如果没有指定此属性的话，该值是默认值。
targe="_top"会加载到最顶层页面，当index1.html引用index2.html，index2.html引用index3.html，则index3.html中的超链接会加载到index1.html上。
target="_parent"会加载到当前页面的父页面，当index1.html引用index2.html，index2.html引用index3.html，则index3.html中的超链接会加载到index2.html上。如果没有父页面，则等同于_self。
target="window的name"如果有window的name窗口，则在该窗口打开。如果没有该窗口则创建window的name窗口，并在该窗口打开。
target="iframe的name"在iframe的name窗口打开。

download 此属性指示浏览器下载URL或者文件而不是导航到它，因此将提示用户将其保存为本地文件。不是所有浏览器都支持，尤其是手机浏览器不可能支持。

a 标签的作用

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

img 标签的用法

img 标签的作用

<img src="" alt="">使用img标签会发出get请求，获取src中的图片

img 标签的属性

src (source)用于指示图片的引用路径。
alt (alternative)当图片加载失败的时候可以显示的内容，可以是文字也可以是其他图片。
width 宽度，只写宽度，则高度会自适应。
height 高度，只写高度，则宽度会自适应

img 标签的事件

<img id="123" src="1.png" alt="">
<script>  
 123.onload=function{       
 console.log("图片加载成功");    
};
 123.onerror=function{       
 console.log("图片加载失败");
 123.src="/404.png";    
};
</script>

onload/onerror监听图片是否加载成功。

img 标签的响应式

<style>  
  img{    
    max-width:100%;  
  }
<style>

图片响应屏幕的大小，宽度和窗口保持一致。

table 标签的用法

table 相关标签

    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>target</td>
          <td>目标</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>空</td>
          <td>空</td>
        </tr>
      </tfoot>
    </table>

基本结构有4部分，table、thead、tbody、tfoot，用tr标签代表table-row也就是行，每行中如果是表头部分则用th标签，代表的是table-head，其余则用td代表的是table-data。

    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
          <th>小李</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>61</td>
          <td>91</td>
          <td>80</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>71</td>
          <td>83</td>
          <td>65</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>132</td>
          <td>174</td>
          <td>144</td>
        </tr>
      </tfoot>
    </table>

table 相关样式

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

table-layout: auto;大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
table-layout: fixed;表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。某一行的高度仅由该行首个单元格决定。

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

border-collapse: collapse;相邻的单元格共用同一条边框。
border-collapse: separate;默认值。每个单元格拥有独立的边框。

border-spancing指定相邻单元格边框之间的距离。如：border-spacing: 0px;、border-spacing: 5px 2rem;

form 标签的用法

form 的作用

表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息，发送get或post请求，然后刷新页面。

form 的属性

action处理表单提交的 URL。
autocomplete（自动填充）用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。
off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能）
on：浏览器可自动补全条目
method浏览器使用这种HTTP方式来提交表单。可能的值有：
post：指的是HTTP的POST方法；表单数据会包含在表单体内然后发送给服务器.
get：指的是HTTP的GET方法；表单数据会附加在 action 属性的URL中，并以 '?' 作为分隔符，没有副作用时使用这个方法。
target表示在提交表单之后，在哪里显示响应信息。
_self：默认值。在相同浏览上下文中加载。
_blank：在新的未命名的浏览上下文中加载。
_parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
_top：在最顶级的浏览上下文中，如果没有父级，则与 _self 表现一致。

form 的事件

onsubmit

  <input name="username" type="text" />
   <input type="submit" value="提交" />  //input标签里面不能在添加新的标签
   <button type="submit">提交</button> //button标签里面可以在添加新的标签，如span

input 标签的用法

input 的作用

用于为基于Web的表单创建交互式控件，让用户输入内容，以便接受来自用户的数据。

input 的属性

类型 type：<input>的工作方式相当程度上取决于type属性的值，如果未指定此属性，则采用的默认类型为text。

button 没有默认行为的按钮，上面显示 value属性的值，默认为空
checkbox 复选框，可设为选中或未选中。
color 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
email 编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file 让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden 不显示的控件，其值仍会提交到服务器。
number 用于输入数字的控件。
password 单行的文本区域，其值会被遮盖。
radio 单选按钮，允许在多个拥有相同name值的选项中选中其中一个。
search 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。
submit 用于提交表单的按钮。
Tel 用于输入电话号码的控件。
text 默认值。单行的文本区域，输入中的换行会被自动去除。

<input type="text" required />
  <hr>
  <input type="color" />
  <hr>
  <input type="password" />
  <hr>
  <input name="gender" type="radio" />男 <!-- 单选框需要二选一时，添加同一个name属性 -->
  <input name="gender" type="radio" />女
  <hr>
  <input name="hobby" type="checkbox" />唱 <!-- 复选框为同一组时，添加同一个name属性 -->
  <input name="hobby" type="checkbox" />跳
  <input name="hobby" type="checkbox" />Rap
 <hr>
  <input type="file" /><!-- 只能选择一个文件 -->
  <input type="file" mutiple/><!-- 可以选择多个文件 -->
  <hr>
  看不见：<input type="hidden" /><!-- 给js自动填入ID，字符串 -->
  <hr>
<textarea style="resize: none; width: 50%; height: 300px;"></textarea><!-- 可以填入多行文本，resize:none不要扩展 -->
  <hr>
  <select>
    <option value="">- 请选择 -</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
  </select>
  <hr>
  <input type="submit" />

其他

name input表单控件的名字。以名字/值对的形式随表单一起提交。
autofocus 页面加载时自动聚焦到此表单控件。
checked 用于控制控件是否被选中。
disable 表单控件是否被禁用。
maxlength 用于控制value的最大长度（最多字符数目）。
pattern 匹配有效value的模式。
value 表单控件的值。以名字/值对的形式随表单一起提交。
placeholder 当表单控件为空时，控件中显示的内容。

input 的事件

onchange 当用户输入改变时触发该事件。
onfocus 当用户把鼠标集中在它身上时触发。
onblur 当鼠标移出时触发。

注意事项

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