HTML标签重难点

1. a标签
- 1.1 href
- 1.2 target
3. table标签
- 3.1 相关的标签
- 3.2 table标签相关的样式
4. img标签
5. form标签
6. input标签
- type属性的值:
  - text, submit, color, password, radio, checkbox, file, hidden, number等
7. textarea标签
8. select+option标签
9. lable标签

特别提醒:
如果只设置图片高度而没有设置宽度, 图片的宽度就会自适应.
如果只设置图片宽度而没有设置高度, 图片的高度就会自适应.
如果同时给图片设置宽和高, 注意不能让图片变形, 这是前端工程师应该有的底线.

1. a标签

作用: 跳转到外部页面, 跳转到内部锚点, 跳转到邮箱或电话.
属性: href, target, download, rel=noopener. 其中常用的是href, target.

1.1 href

作用: 超链接, 默认在当前页面打开超链接. hyper reference的缩写.
取值: 网址, 路径, 伪协议, id名.
1)网址
此处的网址可以有如下三种写法:

<a href="https://google.com">我是谷歌</a>
<a href="http://google.com">我是谷歌</a>
<a href="//google.com">我是谷歌</a>

2)路径

<a href="a/b/c.html">点击这里</a>
<a href="index.html">点击这里</a>

3)伪协议

javascript: 代码;
```
<a href="javascript: alert('哈哈哈')">笑声</a>
<a href="javascript: ">空的伪链接</a>
```
(“空的伪链接”代码作用是使a标签什么都不做, 既不会刷新页面, 也不会使页面回到顶部, a 标签只会保持原样)
mailto: 邮箱地址
```
<a href="mailto: 123456789@qq.com">
```
tel: 手机号
```
<a href="tel: 12345678910">
```
4)#id名
作用: 跳转到指定的标签.
```
<a href="#xxx">转到指定的标签</a>
<div id="xxx">嗯嗯嗯</div>

```
1.2 target
作用: 设置在哪个窗口打开超链接. 超链接默认在当前页面打开.
取值: _blank, _self, _top, _parent, xxx.
举例: ```html

<a name="my53D"></a>
### 1.3 download
作用:下载网页(不是打开网页).但是很多浏览器不支持这个功能, 尤其是手机浏览器可能不支持.
<a name="JbxLs"></a>
### 1.4 rel=noopener
**补充: 用命令行打开超链接的方式:**<br />**1)通过http-server打开**<br />打开git bash > 进入文件所在目录 > 输入yarn global add http-server后回车 > 输入 http-server . -c-1 > 得到网址 > Ctrl键+单击网址 > 电脑自动打开浏览器 > 在浏览器的网址栏中的网址末尾输入 /文件名.html<br />注意: 这里http-server . -c-1可以缩写为 hs -c-1<br />**2)通过parcel打开**<br />打开git bash > 进入文件所在目录 > 输入yarn global add parcel后回车 > 输入 parcel 文件名.html 并回车>得到网址 > Ctrl键+单击网址> 电脑自动打开浏览器 > 在浏览器的网址栏中的网址末尾输入 /文件名.html
<a name="dhS3W"></a>
## 2. iframe标签
作用: 内嵌窗口. iframe现在已经很少用, 有些老系统还在用.<br />举例:
```html
<iframe src="a-target-iframe.html" frameborder="0"><iframe>.

iframe标签的name属性和a标签的target属性一起使用, 可以使在当前页面中切换到不同的超链接. 比如下面的例子

<body>
    <a href="//qq.com" target="xxx">腾讯</a>
    <a href="//baidu.com" target="xxx">百度</a>
    <hr>
    <iframe style="border:none;width: 100%;height: 500px;" name=xxx></iframe>
</body>

3. table标签

3.1 相关的标签

table,
thead, tbody, tfoot,
tr, th, td.
说明:
table标签下一级标签有三个, 即thead, tbody, tfoot.
thead, tbody, tfoot这三个标签, 其下一级标签都有tr, td, th三个标签.
tr, 是table row的缩写, 指表格里面的一行.
td, 是table data的缩写, 指表格的单元格数据.
th, 是table header的缩写, 指表头.
举例:

<body>
    <table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>weather</td>
                <td>天气</td>
            </tr>
            <tr>
                <td>climate</td>
                <td>气候</td>
            </tr>
            <tr>
                <td>humidity</td>
                <td>湿度</td>
            </tr>
            <tr>
                <td>sunshine</td>
                <td>阳光</td>
            </tr>   
        </tbody>
        <tfoot></tfoot>
    </table>
</body>

3.2 table标签相关的样式

1)table-layout
作用: 设置表格单元格的宽度。

table { table-layout="auto"; }     
/*auto,表示表格及单元格的宽度取决于其包含的内容. 此为默认格式.*/
table { table-layout="fixed"; }    /*fixed,表示表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。各个单元格平均分配表格宽度.*/

2)border-collapse
作用: 控制边框是否合并.

table { border-collapse: collapse; }
/* 这行代码作用是合并边框, 边框不会重叠也不会加粗. */

3)border-spacing
作用: 设置边框之间的空距.

table { border-collapse: 0; }
/*这行代码的作用是设置边框的空距为0, 相邻边框重叠, 显示的效果是边框变粗了. */

4. img标签

作用: 发出get请求, 展示一张图片. img是image的缩写.

4.1 属性: alt, height, width, src

<img src="a.jpg" alt="404.jpg" height="200px" width="200px">
<!-- 属性alt作用: 如果图片加载失败, 就显示alt属性的内容. alter的缩写. -->
<!-- 属性height作用: 设置图片的高度. 如果只设置高度而没有设置宽度, 图片的宽度就会自适应.-->
<!-- 属性width作用: 设置图片的宽度. 如果只设置宽度而没有设置高度, 图片的高度就会自适应. -->
<!-- 注意: 如果同时给图片设置宽和高, 注意不能让图片变形, 这是前端工程师应该有的底线.-->
<!-- 属性src作用: 图片的来源, 可以是网址, 也可以是路径. src是source的简称.-->

4.2 事件: onload, onerror

作用: 一般是测试的时候使用, 监听图片是否加载成功, 监听成功则调用onload, 监听失败则调用onerror.

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

4.3 响应式: max-width:100%

作用: 使图片在手机端的最大宽度值为屏幕宽度的100%.

img{ max-width:100%; }

4.4 可替换元素

5. form标签

作用: 发出get或post请求, 然后刷新页面. form标签经常和input标签一起使用.

5.1 属性: action, autocomplete, method, target

<form action="/yyy" method="POST" autocomplete="off" target="a">
<!-- action属性作用: 点击之后请求到指定的页面.-->
<!-- method属性作用: 控制用GET还是用POST来请求页面.-->
<!-- autocomplete属性作用: 控制是否自动填充. 有on, off两个值.-->
<!-- targer属性作用: 设置提交到哪个页面, 并且哪个页面应该刷新.-->

5.2 事件: onsubmit

作用: 点击提交就会触发这个事件.

5.3 注意

form标签里面的input标签要有name.
form标签里面要添加type=submit才能出发submit事件.
一般不监听input的click事件.

6. input标签

作用: 让用户输入内容.
属性: type, name.
事件: onchange, onfocus, onblur.
验证器: HTML5新增功能.

type属性的值:

text, submit, color, password, radio, checkbox, file, hidden, number等

<input type="text">
<!-- text作用:表示可输入文本的地方.-->
<input type="submit">
<!-- submit作用:表示提交的按钮.
这行代码,在浏览器中会根据你使用的语言自动翻译为你看得懂的文字, 比如会显示为"提交". -->
<input type="submit" value="完成">
<!--浏览器会把"submit"的中文翻译显示为"完成". -->
<input type="color">
<!-- color作用:表示输入文本的地方的背景颜色.-->
<input type="password">
<!-- password作用:输入内容时显示为黑圆点, 不展示具体内容.-->
<input name="gender" type="radio">男   
<input name="gender" type="radio">女
<!-- radio作用:选择(可设置单选,双选或多选).
让两个input标签的name属性的值相同, 即可实现二选一, 就不会两个都可以选.-->
<input type="checkbox">
<!-- checkbox作用:多选-->
<input type="file">
<input type="file" multiple>
<!-- file作用: 默认选中一个文件.加上"multiple"则可以选中多个文件.-->
<input type="hidden">
<!-- hidden作用: 隐藏输入框, 给机器输入用的, 一般不是给人类输入用的.-->
<input type="number">
<!-- number作用:输入数字.-->

和

标签默认有type=”submit”的属性 (即默认是),

 作用是提交; 如果把type属性的值设置为其他(即属性值非submit), 就不能提交.

7. textarea标签

作用: 输入框.默认右下角可以拉动.添加 style=”resize:none;”可以禁止拉动.

<textarea style="resize:none;"></textarea>

8. select+option标签

举例:

<select>
  <option value=" 1">周一</option>
  <option value=" 2">周二</option>
</select>

下面是效果图