初学前端的部分标签

本文介绍了HTML5中的基本标签如div、P、h1-h6等的用法,展示了文本格式化和图片链接的应用,并针对代码错误进行了修正。同时提出了关于liveserver和openinbrowser的区别疑问。
摘要由CSDN通过智能技术生成

目录

一、学到了

二、效果展示

三、错误与纠正

四:疑问


 

一、学到了

  1. 格式命名:“.html”结尾
  2. 标签:HTML5的标签分为单独标签<元素名称>和成对标签<元素名称>元素</元素名称>
  3. 标签div:最常见的文字标签(<div 属性>文本</div>)
  4. 标签P:段落标签,对段落进行格式化
  5. 标签h1---h6:设置文字格式,文字大小的修改
  6. text-align:规定格式,是文字的排版方式。例如text-align:center是让文字居中;
  7. 标签img:图片标签(a绝对路径:定位目标比较清晰但如果文件被挪动了与需要重新设置所有相关的链接,b相对路径:站内文件夹所在服务地址发生改变时,文件夹所在内部文件地址不会发生改变但容易写错。)
  8. 标签a:超链接标签(href:链接目标地址;target_blank:新建一个窗口;target_parent:在父窗口打开;target_self:同一个窗口打开;target_top:在浏览器的整个窗口打开;)
  9. 标签br:换行符(同段落标签p的区别)

二、效果展示

1.div标签:

6595dc27d9d14d91a33a13267e8dbb45.png

e6a5e07efbd04e6b8c1feac92fe1f406.png

2.P标签:

577355f0afbe4ea694b4d4d0c65eb345.png87d914103f144cb2bf03e65990852772.png

3.h1和h6标签

fff4baf08eab472cb2f30994547dbbc6.png59f8978e54bb486aa9c07a544afba6f8.png

4.text-align:

dd807ade0e494ecfb849366f253d95ab.pnga77c3b6e5e7041dd935625531bdcfd63.png

5.img:(1)相对路径:相对于网页的内部文件

827513e8d248402386cfe7283e851edc.png271bcf15560c4e69bc8fa4eb0d1ad464.png

(2)绝对路径:从根目录出发,目录直接在硬盘上

c9c4ad42bf7c45d0afc43b9d3240a692.pngfadde34a97724006b8adb7860115b8d2.png

6.a:超链接

ca016164d5474f7c905540dbe71df092.png374bf339983e42daa43ecd8aeb1704b9.png

96940bfcbe4143b6aebafe644b00742d.png

7.br:

1e0dbb9dd62141fdba1fba08785d05ad.png786b2015e52945fd9d72ddd5431882da.png

三、错误与纠正

1.错误:代码输入中有两个p标签,但只显示了一个。找不到浏览器显示代码,需要手动输入。

f751ddf138a14715b3d1d83db5828cfd.pngff75e263421a45f2b04e906938f3e2d8.png

e3c35b70a9514499989c2b40f9202912.png

纠正:第一步,右击鼠标找到open in other browers

eb8c17c1756442e9b6ab0aa4ab3c430d.png

第二步:选择一个带电脑上的浏览器,点击即可成功。

a568890c1e4f4956a68a5f1058aad2ea.png

第三步:显示成功。

2b43bd7202f24b189c4f49aefd479345.png

2.错误:每次运行都显示下图:(没有配置html环境)

04444d90f0884642b1062231f5816ac3.png

纠错:下载live server和open in browser(在此前已经下载,下图没有显示)

bccf74f6a89d4bcfb1ecc7af9fd33184.png

四:疑问

1.live server和open in browser有什么区别?

live server能够实时更新网站的内容,不用重复去打开网页
open in browser每一次更新网站都要重新打开一次网页Alt+b

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值