a标签

a标签的属性

1. herf

a链接的地址

网址：

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

路径:
- 绝对路径：/a/b/c以及a/b/c
- 相对路径：index.html和./index.html
伪协议:

1. javascript:代码; 【需要写冒号和分号】

应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：

href="javascript:0;" 这就相当于执行一段没有意义的js代码

2. mailto:邮箱

href="mailto:123@qq.com"

3. tel:手机号

href="tel:123456789"

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

2. target

决定是在本页面还是新开一个页面打开链接
取值：

系统内置的名字：

a_blank 打开新页面
a_self 在当前页面打开
a_top 顶部页面打开
a_parent 在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况

程序员命名

window的name
iframe的name

3. download

下载网页但是往往没啥用

4.rel=noopener

防止某bug 现在还没学到

a标签的作用

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

img标签

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

src: 图片地址
alt: 如果图裂了，无法加载，会显示这个alt属性的文字作为备用
width 如果只写宽度，高度会自适应
height 如果只写高度，宽度会自适应 PS:一个合格的前端不能让图变形！所以目前就只写宽度或者高度！

事件

onload 加载成功
onerror 加载失败

响应式关键就是“max-width: 100%;”

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

  img {
      max-width: 100%;
  }

基本可以让图片自适应不同的屏幕大小

table标签

完整的table标签包含的元素有：

thead

tr table row 一行

th table head 表头

tbody

tr table row

td table data 数据

tfoot

例

<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>

效果图如下

实现两个表头

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

表头都用<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的间隔一般会设置为：

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

设置前

设置后

如果table-layout是fixed, 每一栏会是等宽，而如果是auto, 内容多的那一列会更宽一些

form标签

作用：

发get或者post请求，刷新页面

属性

action: 往哪里发请求
method: Get 或者 POST 控制用哪种方式请求
autocomplete 自动填充，值可以取"off"或者"on"
- off：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
- on：浏览器能够根据用户之前在表单里输入的值自动补全, 会给出填这个表单的提示
target: 在当前页面提交，还是新开一个页面提交

Input的submit和button的submit的区别

Input标签里不能再有其他的标签

button标签里可以有其他的标签

代码

 <form action="/xxx" method="GET" autocomplete="on">
        <input type="text" name="username" id="">
        <input type="submit" value="input提交">
        <button type="submit">
            <strong>button提交</strong>
        </button>
    </form>

效果

PS:一个表单必须有一个type="submit"的东西，要么是Input要么是button

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>
- 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>
```

注意事项

一般不监听Input的click
form里的Input要有Name
form里必须有一个type=submit的input或者button才能出发submit事件

本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

《HTML常用标签》

a标签