HTML常用标签 – Tony's Tech Blog

今天学习了HTML的常用标签，记录如下

a标签

1. a标签的作用

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

2. a标签的属性

href输入跳转路径，取值为

<a href="https://google.com">google</a>
<a href="http://google.com">google</a>
<a href="//google.com">google</a>
<a href="/a/index.html">google</a>
<a href="a/index.html">google</a> //相对路径
<a href="javascript:;">google</a> //可以在里面写js代码，如果什么都不写，点击该标签页面不发生任何变化
<a href="mailto: 1234@qq.com">发邮件</a> //发送邮件
<a href="tel: 1380013800">打电话</a> //点击会自动拨号，多用于手机页面
<a href="#xxx">跳转到xxx</a> //跳转到内部id

target输入跳转位置，取值为

_blank 在新开窗口打开跳转页面
_self 在原窗口打开跳转页面
top 主要用于iframe嵌套页面，在顶层窗口打开跳转页面
parent 主要用于iframe嵌套页面，在父窗口打开跳转页面
可以指定跳转名为xxx窗口或名为xxx的iframe，所有target="xxx"的a标签跳转都可以在这个页面打开

download可忽略，因为不是所有浏览器都支持

iframe标签

该标签作用为把一个或多个页面内嵌到另一个页面里，但目前已不常用，写法为

<iframe src="./index.html" name="xxx"></iframe>

table标签

table标签里只能有三个标签thead, tbody, tfoot,这三个标签里可以使用另外三个标签tr,td,th, th表示表头，tr表示一行，td表示data，示例代码如下：

<table>
  <thead>
    <tr>
      <th>星期一</th>
      <th>星期二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>语文</td>
      <td>数学</td>
    </tr>
    <tr>
      <td>英语</td>
      <td>体育</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>2节课</td>
      <td>2节课</td>
    </tr>
  </tfoot>
</table>

table相关样式：table-layout, border-collapse, border-spacing, 通常用法

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

img标签

1. img标签的作用

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

2. img标签的属性

alt, height, width, src, 写法：

<img src="./image/1.jpg" width="100" alt="图片加载失败看到我" />

如要图片自适应浏览器宽度，在img标签的样式里加入

img {
  max-width: 100%;
}

定义图片的宽高有很多方式，但有一个前提，不能让图片失真，这是作为一个前端的底线。

img标签是一种可替换元素，关于可替换元素，可参考这篇文章，个人觉得比MDN上写的清楚，https://www.cnblogs.com/leyili/p/replaced_element.html

form标签

1. form标签的作用

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

2. form标签的属性

action, autocomplete, method, target, target用法同a标签，写法：

<form action="https://api.sitename.com/api/request" method="post">
   <input type="text" name="aaa" disabled /> //禁止输入
   <input type="password" name="bbb" placeholder="xxxxx" /> //没有输入时默认值为xxx
   <input type="number" name="ccc" required /> //必须输入
   <label for="male">Male</label>
   <input type="radio" name="gender" id="male" />
   <label for="female">female</label> //label 标签为 input 元素定义标注, 当点击label标签时，相对应的input将获得焦点
   <input type="radio" name="gender" id="female"/>
   <input type="checkbox" name="season" /> spring
   <input type="checkbox" name="season" /> summer
   <input type="checkbox" name="season" /> autumn
   <input type="checkbox" name="season" /> winter
   <input type="file" multiple /> 
   <select>
     <option value="1">上海</option>
     <option value="2">北京</option>
     <option value="3">广州</option>
   </select>
   <textarea name="" id=""></textarea> //resize = none 可禁止拖拽
   <button type="submit">submit</button>
</form>

2. form标签的事件

onchange, onfocus, onblur

onchange当表单的值发生变化时触发； onfocus当表单获得焦点时触发；onblur为当表单失去焦点时触发。

以上为今日所学，