《HTML常用标签》

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

---

a 标签常用的属性

• href——>超链接，链接到某个网页。
a的href的取值
• 网址
• https://google.com
• http://google.com

前两个为有协议访问

• //google.com

此为无限已访问，最高级，会自动跳转

• 路径
• /a/b/c以及a/b/c
• index.html以及./index.html
• 伪协议
• javascript:代码;
• mailto:邮箱
• tel:手机号

可自动跳转到指定标签，自动填写邮箱或者手机号，用户只需确认即可。

---

• target——>指定在哪个窗口打开超链接。
a的target的取值
• 内置名字
• _blank——>在新建的空白页面打开。
• _top——>在(多内嵌页面)最顶层页面打开。
• _parent——>在父亲窗口页面打开，即当层页面上一层。
• _self——>其实是默认值，在当前页面打开。

这是个多层嵌套示例



• 程序员命名

常与后续JS结合使用，下面介绍作用。

• windows的name

若已有命名windows.name>xxx，则在xxx窗口打开页面。若没有命名为xxx页面，则windows.name新建xxx页面后，再在此页面打开。

• iframe的name

可以指定到iframe命名的页面打开(题外话：可实现goobai页面~！)。

---

• download——>理论上是下载超链接网页。(已不支持，不建议用)
• 作用

不是打开页面，而是下载页面。

• 问题

不是所有浏览器都支持，尤其是手机浏览器。

---

• rel=noopener——>防止bug。(JS里有具体的解释)

• 发出一个ge请求，展示一张图片。



---

img 标签常用的属性

• alt——>代替，若src加载失败，则显示alt，后接与src相同。
• height——>设置图片高度。(只设置高度，宽度则自适应设置)
• width——>设置图片宽度。(只设置宽度，高度则自适应设置)
• src——>source的简写，后接图片源地址，可以是网络地址，相对路径和绝对路径。

img 在标签JS中的两个重要事件
监听图片是否加载成功。

• 若加载成功则调用onload
• 若加载失败则调用onerror

作用是：可在图片加载失败的时候进行挽救。

img 标签做响应式
max-width: 100%;
老古董Iphone5也能浏览全图

img 标签是可替换元素

table标签内常用的只能有thead,tbody,tfoot这三种标签。
t都是table的简写。
• table——>表格标签
• thead——>表的头部
• tbody——>表的驱赶
• tfoot——>表的尾部
• tr——>table raw，表的一行
• td——>table data，表内的数据
• th——>table head，一列的表头

注：若不写前三标签，不按顺序写，浏览器强悍的纠错能力也会自动把代码按顺序完整修改。(习惯不好)
示例

    <table>
        <thead>
            <tr>
                <th></th>
                <th>小明</th>
                <th>小红</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>98</td>
                <td>95</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>94</td>
                <td>99</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>192</td>
                <td>194</td>
            </tr>
        </tfoot>
    </table>
复制代码

相关的样式

• table-layout——>常用有2个设置
• table-layout: auto; 自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
• table-layout: fixed; 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由首行的单元格决定。
• border-collapse——>单元格边框合并设置。
• border-spacing——>单元格的边框距离设置。

• 要用http-server或者parcel等之类的工具来预览html文件。这样开启服务端口所在的文件即是根目录。
• 伪协议javascript:;可以满足什么都不做的a标签。
• iframe标签内嵌窗口。很少使用了，还有些老系统在使用。(不好用)
• border-collapse和border-spacing常写到reset.CSS里面。
• 还有几个常用但是与后续CSS,JS一起理解的标签
• form标签 表单
属性
• actoin——>发出页面请求，控制用那个页面，与后续JS并用。
• autocomplete——>on/off。根据name值提示输入内容，便于用户输入用户名等。
• method——>控制用get还是Post请求页面
• target——>控制要提交到那个页面。

事件

• onsubmit 提交时触发
• input标签 让用户输入内容
属性
• 类型type：button/checkbox/email/file/hidden/color/number/password/radio/search/submit/tel/text

其他

• name/autofocus/checked/disabled/maxlength/pattern/value/placedholder

事件

• onchange改写/onfocus聚焦/onblur失焦

注：一般不监听onclick事件，不好用。
验证器

• HTML5新增的自带功能。
• 其他输入标签
• select+option
• textarea
• label
• 其他标签
• video
• audio
• canvas
• svg

注：这些标签的兼容性一定要查看文档。
这些都是今后结合其他后续课程一起专门学习的。

学习感想
HTML标签多的枯燥，还与后续的课程结合才能加深理解。总结起来就是需要自己亲自写代码，复刻老师或者同学优秀的测试回答。通过之后，不管忘没忘记html，都需要再花更多时间往后学习相关的课程，这些课程都不是独立的，而是相互联系的，分配好时间能充分应对遗忘曲线。