本文详细介绍了HTML的基础标签，包括图片标签<img>及其属性，链接标签<a>的使用，锚点定位实现内部跳转，列表（有序、无序和自定义）的创建，以及表单标签的应用。同时讲解了特殊字符的表示和路径的相对与绝对概念。
四：html标签
- 图片标签
图片标签：<img />
图片标签是一个单标签，用来在网页中插入图片。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签的应用</title>
</head>
<body>
<img src="../img/hehua.jpg" alt="图片不见了" width="400px" border="10" title="世界多么美好!"/>
<img src="../img/hehua1.jpg" alt="图片不见了"/>
</body>
</html>效果：
注意：如果在设置图片的宽高时，如果只设置了其中的一个属性，那么另一个属性也会同比例变化。另外，图片也可以弄成图像地图，也就是点击图像不同的位置时，会跳转到不同的地方，这里的标签为<map></map>标签。感兴趣的可以自行学习。
- 链接标签
链接标签<a></a>
点击文字或者图片，可以使网页链接到另一个地址。
跳转的地址分为两种：
内部链接，如果是内部链接的话，直接写链接的路径加文件名就可以了
外部链接，如果是外部链接的话，必须写完整的地址，也就是要加上“http://”或者“https://”
这里的跳转方式分为两种：
self：是指在原网页的基础上进行跳转
blank：是指新建新的网页进行跳转
网页默认使在原网页的基础上进行跳转的
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接标签</title>
</head>
<body>
<a href="http://www.baidu.com" target="_self">百度</a>
<br />
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>效果：
锚点定位
锚点定位主要是用于在网页内部进行跳转，像我们有一些导航栏还有一些网页小说的目录，就是利用锚点定位来完成的。
想要完成锚点定位需要两个步骤：
a：在想要跳转的网页内部的地方的标签内添加id属性
b：设置添加链接，将href属性的值设置成#id名
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点练习</title>
</head>
<body>
<a href="#md">歌词</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p id="md">情深深雨蒙蒙，多少楼台烟雨中</p>
</body>
</html>base标签
<base target="_blank"></target>
这个标签可以对所有链接进行设置跳转方式
- 列表
列表可以分成三类：
有序列表，无序列表，自定义列表
我们浏览网页的时候，会发现一些新闻标题是非常有顺序的排列的，这些新闻标题就是用列表完成的，当然，这些列表也是可以相互嵌套的
有序列表：
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表练习</title>
</head>
<body>
<ol>
<li>我是有序列表第一项</li>
<li>我是有序列表第二项</li>
</ol>
</body>
</html>
效果：
无序列表：
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表练习</title>
</head>
<body>
<ul>
<li>我是无序列表第一项</li>
<li>我是无序列表第二项</li>
</ul>
</body>
</html>效果：
自定义列表
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表练习</title>
</head>
<body>
<dl>
<dt>我是自定义列表1的名词1</dt>
<dd>我是自定义列表1的解释1</dd>
<dd>我是自定义列表1的解释2</dd>
<dt>我是自定义列表2的名词2</dt>
<dd>我是自定义列表2的解释1</dd>
<dd>我是自定义列表2的解释2</dd>
</dl>
</body>
</html>
效果：
小练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表小结</title>
</head>
<body>
<h2 id="dingbu">我最爱的女人们</h2>
<hr >
<a href="#lixian" style="color: black;">李现</a> <a href="#denglun"style="color: black;">邓伦</a>
<a href="#wulei" style="color: black;">吴磊</a> <a href="#huge" style="color: black;">胡歌</a>
<a href="#pengyuyan" style="color: black;">彭于晏</a>
<ul>
<li>
<img id="lixian" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR-qbVY141dnGv6iGlVq3ucmLc4wM55zijJSIKRukhhkHMe8bv" width="350px">
<br />
<p> 李现，曾用名李晛，1991年10月19日出生于湖北省咸宁市，成长于湖北省荆州市 [1] ，中国内地影视男演员，毕业于北京电影学院表演系2010级 [2] 。</p>
<p> 2011年，出演个人首部电影《万箭穿心》，从而正式进入演艺圈 [2] 。2012年，主演青春爱情电影《初恋未满》 [3] 。2013年，出演绿色环保爱情喜剧电影《玩命试爱》 [4-5] 。2014年，出演国内首部原创都市奇幻单元《奇妙世纪》中第二集“最长的25米” [6] 。2015年，在青春校园网络剧《睡在我上铺的兄弟》中饰演谢训 [7] 。2016年，其主演的青春爱情电影《睡在我上铺的兄弟》上映 [8] ；同年，在悬疑刑侦网络剧《法医秦明》中饰演林涛 [9] 。2017年，首挑大梁，在网络剧《河神》中饰演男主角郭得友 [10] ；同年，获得网易年度有态度大赏年度最有态度人气演员奖 [11] 。2018年，其主演的年代情感剧《翩翩冷少俏佳人》 [12] 、都市情感剧《南方有乔木》相继播出 [13] ；同年，在青春爱情剧《亲爱的，热爱的》中饰演男主角韩商言 [14] 。2019年，出演剧情电影《中国机长》 [15] ；9月6日，获得智族GQ Men Of The Year年度人物盛典年度人气演员奖 [16] 。</p>
<a href="#dingbu">返回顶部</a>
<br />
<br />
</li>
<li>
<img id="denglun" src="https://img-blog.csdnimg.cn/2022010613453860567.jpeg" width="350px">
<br />
<p> 邓伦，1992年10月21日出生于河北省石家庄市，中国内地影视男演员，毕业于上海戏剧学院表演系。</p>
<p> 2012年，出演个人首部电视剧《花非花雾非雾》，从而正式进入演艺圈 [1] 。2013年，出演民国情感剧《新京华烟云》 [2] 。2014年，主演都市情感轻喜剧《爱情上上签》 [3] 。2015年，在都市青春偶像剧《十五年等待候鸟》中饰演柳千仁 [4] ；同年，出演年代剧《白鹿原》 [5] 。2016年，在都市情感励志剧《因为遇见你》中饰演男主角李云恺，从而受到更多关注 [6] ；同年，在都市励志情感剧《欢乐颂2》中饰演谢童 [7] ；在《楚乔传》中饰演大梁太子萧策；随后，获得“腾讯视频星光大赏”年度青春大势艺人奖 [8] 。2017年，相继主演了民国情感剧《海棠经雨胭脂透》 [9] 、古装神话剧《香蜜沉沉烬如霜》 [10] 、都市奇幻剧《一千零一夜》 [11] ；同年，作为固定嘉宾参加芒果TV亲子户外真人秀节目《爸爸去哪儿第五季》的录制 [12] 。2018年，获得国剧盛典年度新晋男演员奖 [13] ；同年，作为常驻嘉宾参加湖南卫视情境类益智互动推理秀《我是大侦探》 [14] 。2019年3月，他被评选为LikeTCCAsia亚太区最帅100张面孔第12位 [15] 、中国区最帅100张面孔第5位 [16] 。</p>
<a href="#dingbu">返回顶部</a>
<br />
<br />
</li>
<li>
<img id="wulei" src="https://img-blog.csdnimg.cn/2022010613453969787.jpeg" width="350px" />
<br />
<p> 吴磊，1999年12月26日出生于上海，中国内地影视男演员。</p>
<p> 2005年，因出演个人首部作品《封神榜之凤鸣岐山》而踏入演艺圈 [1] 。2009年，因出演喜剧《家有外星人》中唐不苦一角而被观众认识。2015年，凭借古装权谋剧《琅琊榜》获得国剧盛典最具潜质演员奖 [2] 。2016年，主演3D喜剧《大闹东海》及奇幻片阿修罗。2017年，主演改编自天蚕土豆同名小说的古装玄幻剧《斗破苍穹》 [3] ；同年，他还主演了探险题材剧《沙海》 [4] 。2018年上映的张艺谋作品《影》中，出演少年武将杨平一角 [5] 。2019年8月，获2019福布斯中国100名人榜荣誉。 [6]</p>
<a href="#dingbu">返回顶部</a>
<br />
<br />
</li>
<li>
<img id="huge" src="https://img-blog.csdnimg.cn/2022010613453916909.jpeg" width="350px" />
<br />
<p> 胡歌，1982年9月20日出生于上海市徐汇区，中国内地男演员、歌手。</p>
<p> 1996年，14岁的胡歌便成为上海教育电视台的小主持人，2005年毕业于上海戏剧学院表演系，同年在仙侠剧《仙剑奇侠传》中塑造了“李逍遥”一角，并演唱该剧插曲《六月的雨》《逍遥叹》 [1-2] 。2006年8月遭受严重车祸，2007年6月复出 [3] 。2009年主演仙侠剧《仙剑奇侠传三》 [4] 。2010年主演的穿越剧《神话》在央视八套播出 [5] 。2011年参演历史题材电影《辛亥革命》提名大众电影百花奖“最佳新人奖” [6-7] 。2012年主演玄幻剧《轩辕剑之天之痕》 [8] 。2013年主演两部话剧，凭借《如梦之梦》获得北京丹尼国际舞台表演艺术奖“最佳男演员奖” [9] 。2014年参演战争剧《四十九日·祭》提名上海电视节白玉兰奖“最佳男配角奖” [10-11] 。2015年主演的谍战剧《伪装者》、古装剧《琅琊榜》、都市剧《大好时光》相继播出，获得中国电视剧飞天奖“优秀男演员提名奖”、上海电视节白玉兰奖“最佳男主角奖”、中国电视金鹰奖“观众喜爱的男演员奖”、中国金鹰电视艺术节“最具人气男演员奖”等奖项 [12-16] 。2016年成为上海旅游形象大使，登上央视春晚演唱歌曲《相亲相爱》 [17-18] 。2017年二度登上央视春晚演唱歌曲《在此刻》，获得共青团中央“全国向上向善好青年”崇义友善好青年称号，2018年凭借都市剧《猎场》二度提名上海电视节白玉兰奖“最佳男主角奖” [19-22] 。</p>
<a href="#dingbu">返回顶部</a>
<br />
<br />
</li>
<li>
<img id="pengyuyan" src="https://img-blog.csdnimg.cn/2022010613453936884.jpeg" width="350px" />
<br />
<p> 彭于晏，1982年3月24日出生于台湾省澎湖县，毕业于加拿大英属哥伦比亚大学，加拿大籍华裔影视男演员、歌手。</p>
<p> 2002年，因出演个人首部电视剧《爱情白皮书》 ，从而正式进入演艺圈 [1] 。2005年，因在仙侠剧《仙剑奇侠传》中饰演唐钰一角而受到关注。2006年，主演剧情片《六号出口》。2007年，凭借爱情片《基因决定我爱你》提名第44届台湾电影金马奖最佳新演员，并为金马短片单元制作片头，完成了个人导演处女作 [2] 。2009年，发行个人首张EP《非爱不可》。</p>
<a href="#dingbu">返回顶部</a>
<br />
<br />
</li>
</ul>
</body>
</html>
效果：
- 表单标签
表单是用来和用户交互的，用户在浏览器端填写信息，通过表单上传到服务器端，通过一系列操作，将用户的信息进行保存或者验证。
像我们常见的申请qq号，填写个人信息等操作都是用表单完成的。
补充：
表单分组标签：<legend>用户组1</lenged>
这是表单分组标签，有的时候我们所要提交的表单不仅仅只有一类，我们就可以用这个表单分组标签来给表单分组，这样即有利于我们的查看和页面的美观
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单练习</title>
</head>
<body>
<form action="#" method="post">
用户名：<input type="text" value="123"/><br />
密码： <input type="password" /><br />
性别： <input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="2"/>女<br />
生日： <select name="bir" id="bir">
<option value ="1">公历</option>
<option value ="2">农历</option>
</select><br />
备注：<textarea cols="20" rows="3"></textarea>
<br />
<br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
- 特殊字符
有时候因为一些原因，有些文字符号显示不出来，需要用下面的代码显示。
- 注释标签
注释标签：<!-- 我是注释-->
注释标签是不会显示在浏览器上的，是写给自己和同事看的提示。
- 路径
路径分为相对路径和绝对路径。
相对路径：相对于本文件其他的路径，上一级路径用../来表示，下一级直接从文件名开始写路径。
绝对路径：从文件的更目录开始描述，或是完整的网址。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
