Document

## 1. a标签 ### 作用： 1. 超链接。跳转到外部页面 2. 锚链接。跳转到当前页面的指定位置（标签） 3. 课也执行javascript代码 4. 跳转到邮箱或者电话 ### 属性： **1. href属性** hyper reference (引用、超链接)。通常表示跳转地址用法一：普通跳转`百度一下` 效果为点击“”百度一下”，跳转到百度官网 href的取值： `http://google.com` `https://google.com` `//google.com` **第三种取值方式更高级，浏览器会自动识别正确网址** ### **拓展：** 路径的写法： href的取值可以是绝对路径或相对路径 * 绝对路径：站外资源 * 相对路径：站内资源 **绝对路径的书写格式：** URL地址 ```html 协议名：//主机名：端口号/路径 achema://host:port/path ``` 当跳转页面和当前页面相同时，可以省略协议 **相对路径的书写格式：** * 以./开头，./表示当前资源所在的目录 * 可以书写../表示返回上一级目录 * 相对路径中：./可以省略用法二：锚链接 ```html Document 章节1 章节2 章节3 章节4 章节5 章节6

章节1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio odit quos ad vero nobis facilis optio culpa cum aspernatur iure, similique molestiae labore commodi doloribus corrupti eum.

章节3

Itaque incidunt obcaecati neque laudantium eius facere, tempora ipsa quam dolorum minus quis placeat amet laborum eos earum aliquid possimus at alias, nisi fugit temporibus!

章节4

Fugit, qui. Voluptate in nisi minus reprehenderit expedita excepturi et perspiciatis ea modi recusandae. Nesciunt illo quibusdam quis! Reiciendis consequuntur perspiciatis voluptates delectus fugiat excepturi, et ducimus id necessitatibus soluta dolore, quibusdam optio, accusantium ipsum voluptatum molestiae earum fuga facilis minus debitis fugit! Pariatur aliquam voluptate tenetur, magni id atque et numquam sed iure deserunt dolorem perferendis tempore corporis dignissimos voluptates quo. Veritatis modi pariatur ab molestiae explicabo adipisci molestias harum, voluptatibus, officiis fugiat saepe temporibus libero similique magni fuga cupiditate?

章节5

Similique sapiente odio illo labore laborum nobis laboriosam iusto voluptatem rerum aperiam reiciendis, aspernatur, alias fuga, voluptas deserunt inventore. Neque optio incidunt repellat voluptas earum excepturi necessitatibus tenetur quos autem quae, aliquam porro adipisci nulla rerum exercitationem. Perferendis molestiae facere neque laborum eius? Necessitatibus ad natus architecto! Consequatur, voluptatum.

``` 以上代码就是锚链接的用法，通过给h元素一个id的值,目录中写入对对应的id值，实现的效果为点击目录跳转到当前页面指定的章节. **2. target属性** target属性有两个取值，指定在哪个窗口打开 `target="_blank"`在新窗口打开 `target=“_self”`在当前页面打开，默认值 ## 2. img标签 ### 作用：发出get请求，展示一张图片在网页中显示图片 ` “这是一个关于XX的图片”’

` ### 属性： 1. width 设置图片的宽度 2. height 设置图片的高度 3. alt 当图片资源失效或出现BUG时，会显示文字提示 **注意：可以单独设置其一，另一个会自适应，绝对不能同时设置图片的高度和宽度，会破坏原图比例，可以用CSS实现** ## 3. table表格标签 ### 作用：显示列表 ### 用法： table元素中只能有以下三个子元素 `thead`表示表格头部 `tbody`表示表格主题 `tfoot`表示表格页脚 ```html Document

英文	翻译	助记
name	姓名	内幕
school	学校	思故

``` 显示效果： ![表格.png](//static.xiedaimala.com/xdml/image/fcb6828e-04d8-438b-8cad-1d4456be2db4/2021-9-10-17-5-13.png) ## 4. 感想 HTML标签只需要记住一部分经常使用或者重点难度就可以了，没有必要全记住也记不住，工作中，用百分之二十的知识点，就能解决百分之八十的问题，其他问题及时查文档解决。

HTML常用标签