《HTML入门笔记2-HTML常用标签》

永远不要双击打开HTML文件，必须通过输入网址打开

方法一：用http-server

①新建终端

②终端输入命令：yarn global add http-server

③终端输入命令：http server . -c-1（会出现几个地址，http server可以缩写为hs）

④把地址输入浏览器，加上路径访问如：http://192.168.0.104:8081/a-herf.html

方法二：用parcel

①新建终端

②终端输入命令：yarn global add parcel

③终端输入命令：parcel a-href.html

④把得到的地址输入浏览器http://localhost:1234

HTML常用的几个重要标签

1.a 标签的用法

a标签的作用

-跳转到外部页面

-跳转到内部锚点

-跳转到邮箱或电话等

a标签属性

-href

a的href取值：

网址

-https://google.com

-http://google.com

-//google.com（最高级，自动选用http或者https协议）

路径（相对路径和绝对路径，动手多操作几遍）

-/a/b/c 以及 a/b/c

-index.html 以及 ./index.html

伪协议（比较抽象，重在理解）

-javscript:代码;

-mailto:邮箱

-tel:手机号

-target

a的target取值

-_blank（新页面打开）

-_top（当前页面顶级窗口打开）

-_parent（在父级窗口打开）

-_self（当前页面打开）

-download

下载页面，不是所有的浏览器都支持，尤其是手机浏览器可能不支持

-rel=noopener（先跳过）

2.img 标签的用法

img标签属性

作用

-发出get请求，展示一张图片

属性

-alt（加载图片时页面显示的图片名称）

-height（图片高度，设置了高度就不要设置宽度，防止图片变形）

-width（图片宽度）

-src （source缩写，引用图片的路径）

属性

事件（监听图片加载成功还是失败）

-onload（图片加载成功）

-onerror（图片加载失败）

监听图片加载成功还是失败

响应式

-max-width:100%;一般在程序上加上这个，便于手机用户查看图片

max-width 100%

3.table 标签的用法

与table相关的标签

-thead（表头）

thead thead

-tbody（表中）

tbody tbody

-tfoot（表尾，tfoot无论放在tbody前面还是后面都不会有影响）

tfoot

-tr （table row 行）

-td（table data 数据）

-th （表头单元格）

与table相关的样式

table-layout（auto：表格单元格的布局取决于内容/fixed：表格单元格固定)

auto auto fixed fixed

border-collapse（ 决定表格的边框是分开的还是合并的 ）

border-collapse

border-spacing（ 指定相邻单元格边框之间的距离）

border-spacing 20px
border-spacing 10px

4.其他感想

学习html标签先大概了解标签，然后再一个一个标签实践，熟能生巧

代码如果一直执行不了，先检查代码有没有错，再看看标点符号是不是中文的，经常犯的错，(´;︵;`)

暂时先想到这些，下次见！