HTML常用标签

a标签

a标签的属性

1.herf

a链接的地址，取值：

1. 网址
   推荐使用//www.baidu.com 这一种写法，放进浏览器会自动补全

2. 路径

   • 绝对路径：/a/b/c,
   • 相对路径：index.html和./index.html

   3.伪协议
   应用场景：希望点击a标签之后什么也不做，页面不刷新也不返回到顶部
   具体用法：`
   这就相当于执行一段没有意义的，只有分号的js代码

3. id: href=#id名，可以跳转到id名为Id的标签
   如<p id="xxxx"></p>, <a href="#xxx"></a>就可以定位到这个p标签

2.target

• 决定是在本页面还是新开一个页面打开链接

• 系统自带的取值：

  1.  `target="_blank"`  打开新页面
  2. `target="_self"`  在当前页面打开
  3. `target="_top"`  顶级窗口打开，最上层的iframe
  4. `target="_parent"`  在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况

• 也可以程序员自己命名target="xxx"与iframe 标签的name对应
• 没有iframe的话，target="xxx"就会打开一个window.name为xxx的标签（浏览器控制台输入window.name才能看到名字），如果已经存在就直接覆盖。

a标签的作用

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

---

img

作用：
发出GET请求，展示图片

属性

1. src:="地址 "
2. alt="提示文字" 如果图裂了，无法加载，会显示这个alt属性中的文字，提示用户这个图片是什么
3. width 如果只写宽度，高度会自适应
4. height 如果只写高度，宽度会自适应
   一个合格的前端不能让图变形！所以就只写宽度或者高度

事件
onload 加载成功
onerror 加载失败

响应式
关键就是`max-width: 100%;
这样图片就可以自适应不同的屏幕大小

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

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

---

表格table

• tr 是 table row 的缩写
• th 是 table head
• td 是 table data

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>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>

有些人不写<thead> <tbody><tfoot>，或者顺序搞错了， html也会在浏览器自动纠错

两个表头如何实现

如图所示，这里有两个表头，分别是小红小明小颖这一行和 数学语文英语这一列

表头都用`<th></th>

数据都用`<td></td>

    <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>91</td>
                <td>86</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>

table的样式

table-layout:

• table-layout: auto; auto表示根据内容来计算宽度
• table-layout: fixed; fixed表示定宽，尽可能地让宽度平均

border-collapse 和 border-spacing用来调整表格Border的间隔
一般会设置为：

<style>
  table {
     table-layout: auto;
     border-collapse: collapse;
     border-spacing: 0;
  }
</style>

---

input标签

JS事件：

• onchange 用户输入改变的时候
• onblur 用鼠标从输入界面出来
• onfocus 鼠标集中到上面

属性

type的取值:

• text 输入文本
• password 输入密码

• radio 单选
  怎么样实现两个radio类型的Input二选一
  让这两个Input有相同的name即可
  比如，我们想实现男女性别二选一

   <input type="radio" name="gender"> 男
   <input type="radio" name="gender"> 女
     

• checkbox 多选
  同样的，也需要给同类型的多选框写上相同的Name

  <input type="checkbox" name="hobby" id="">唱
  <input type="checkbox" name="hobby" id="">跳
  <input type="checkbox" name="hobby" id="">rap
  <input type="checkbox" name="hobby" id="">篮球
  

• file 上传文件
  上传一个文件 `<input type="file">
  上传多个文件 `<input type="file" multiple>
• hidden
  用于给js自动填写id、字符串之类的东西
• textarea 文本框
  需要文本框不能自由拖动，固定大小
  `<textarea style="resize:none; width:50%; height:300px;"></textarea>

• select 选择

  <select name="week" id="">
  <option value="">- 请选择 -</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
  <option value="3">星期三</option>
  </select>
  

注意事项

1. 一般不监听input的click事件
2. form里的input要有name
3. form里必须有一个type=submit的input或者button，才能触发submit事件

一些感触

• HTML+CSS+JS是前端的三大支柱，从入门的第一天就重复不断的听到这句话，随着学习深入，越来越能体会到为什么说“HTML=结构，CSS=样式，JS=行为”。
• HTML提供了很好的web网页架构，但是其标签内置的属性风格单一，操作繁杂，而且与css共同使用易使得代码可读性变差，样式重叠，给后期修改造成很大负担，所以HTML尽量只用来进行网站结构的搭建，而对于外观的美化交由css和js来做。