html标签（下）----常用高级标签

最新推荐文章于 2022-05-02 22:54:22 发布

字母的小草

最新推荐文章于 2022-05-02 22:54:22 发布

阅读量5.7w

点赞数 1

分类专栏： HTML 文章标签： html标签 html常用标签 html高级标签

本文链接：https://blog.csdn.net/weixin_43641971/article/details/98601725

版权

本文深入探讨HTML中的高级标签，包括其用法和在网页构建中的重要作用。通过实例代码展示，帮助读者理解并掌握这些标签的实践应用。

摘要由CSDN通过智能技术生成

下列代码可直接运行

   <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>html-1.1</title>
    	</head>
    	<body>
    		<br /><br /><br /><br /><br />
    		
    		空&nbsp;&nbsp;&nbsp;格
    		<!--空格：&nbsp;-->
    		<div style="width: 400px;height: 60px;background-color: darkgrey;">
    		
    			abcdefghijklmnopqrstuvwxyz
    			abc def ghi jkl mnop qrstuv wxy z
    			你好吗？我很好
    			<!--空格符的作用只是分隔单词(文本分隔符)，要想展示空格，需要使用&nbsp
    				中文自动每一个字符分隔
    			-->
    			<!--html编码：
    				空格：&nbsp;
    				尖角号： &lt;  (less than) 
    					    &gt; (great than)
    					    <br>  换行
    			-->
    			<hr> 水平线 &lt;hr&gt;<br>
    			
    			
    			<br /><br /><br /><br /><br />
    			
    			有序列表：<br>
    			喜欢的电影：
    				<ol type="I" reversed="reversed" start="2">
    						<!-- 
    						type用于设置序号样式;reversed="reversed使倒序排序;start="3"设定从第几个开始排，注意：是设定从第几个(只能是罗马数字)开始排，与序号形式无关！
    						type="a"  start="3"====> cde;
    						type="a" reversed="reversed start="1" ====> a 0 -1 ;倒序之后不管是什么序号形式都变成数字，从0开始 
    						-->
    					<li>美丽心灵</li>
    					<li>十月的天空</li>
    					<li>了不起的盖兹比</li>
    				</ol>
    				
    				
    				<br /><br /><br /><br /><br />
    				
    				
    				无序列表：<br>
    			喜欢的电影：
    				<ul type="circle">
    					<!--type = circle(空心圆)、disc(实心圆)、sqaure(方块)-->
    					<li>美丽心灵</li>
    					<li>十月的天空</li>
    					<li>了不起的盖兹比</li>
    				</ul>
    				
    				
    				<style type="text/css">
    					/*type="text/css"说明这个标签内所书写的代码的本质*/
    					*{
    
    						margin: 0;
    						padding: 0;
    						/*去除每个选项的距离*/
    					}
    					ul{
    
    						list-style: none;
    						/*去掉列表前面的圆圈和方块*/
    					}
    					li{
    
    						float: left;
    						/*将纵向排列的列表横向展示*/
    						margin:0 10px;
    						color: #f40;
    						font-size: 14px;
    						font-weight: bold;
    						/*将字体加粗*/
    						height: 25px;
    						line-height: 25px;
    						padding: 0 5px;
    					}
    					li:hover{
    
    						/*hover说明在鼠标移到此区域所展示的形式*/
    						border-radius: 15px;
    						/*border-radius将方角的边界展示为圆角,数值越大,展示的越圆;*/
    						background-color: #f40;
    						color: #fff;
    					}
    				</style>
    				<ul type="circle">
    					<li>天猫</li>
    					<li>聚划算</li>
    					<li>天猫超市盖兹比</li>
    				</ul>
    				
    				
    				<br /><br /><br /><br /><br />
    				
    				图片的引入：<br>
    					1.本地绝对路径：不再同一个文件夹下，必须写成全部完整的路径；<br>
    					2.本地相对路径：在同一个文件夹下，可直接通过文件名引用<br>
    					3.网上的url:直接写图片所在的网站内容，注意不是直接搜索所得到的图片地址(会无法展示)；需要右键图片，在新标签页中打开图片的url;<br>
    					
    				<img src = "https://n.sinaimg.cn/collect/crawl/20160224/j0or-fxprucs6463696.jpg" alt="这是梵高的星空" title="梵高-星空"/>
    				<!--（图片占位符）alt="这是梵高的星空"：在图片无法展示的情况下生效，用于描述图片，简单的弥补图片失效的损失。-->
    				<!--(图片提示符)title="梵高-星空"：在鼠标至于图片上时，附加小框提示图片内容-->
    				
    				<br /><br /><br /><br /><br />
    				
    				<ol>a标签
    					<li>添加超链接；href(超文本引用：hypertext reference)</li>
    					<li>添加锚点</li>
    					<li>联系</li>
    					<li>协议限定符</li>
    				</ol>
    				
    				<br /><br /><br />
    				
    				添加超链接<br />
    				<a href