永远不要双击打开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%;一般在程序上加上这个,便于手机用户查看图片
3.table 标签的用法
与table相关的标签
-thead(表头)
-tbody(表中)
-tfoot(表尾,tfoot无论放在tbody前面还是后面都不会有影响)
-tr (table row 行)
-td(table data 数据)
-th (表头单元格)
与table相关的样式
table-layout(auto:表格单元格的布局取决于内容/fixed:表格单元格固定)
border-collapse( 决定表格的边框是分开的还是合并的 )
border-spacing( 指定相邻单元格边框之间的距离)
4.其他感想
学习html标签先大概了解标签,然后再一个一个标签实践,熟能生巧
代码如果一直执行不了,先检查代码有没有错,再看看标点符号是不是中文的,经常犯的错,(´;︵;`)
暂时先想到这些,下次见!