0
点赞
收藏
分享

微信扫一扫

HTML标签学习

左手梦圆 2022-03-21 阅读 65
html5

HTML源文件,运行看效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">  说明文档类型</br>
        <title>HTML标签学习</title>
        一个html只能含一个title标签,且必须位于head标签内。内容用于显示浏览窗口标题栏
    </head>
    <body>
<!-- 注释,仅在html文本中显示,快捷键ctrl+/ -->
<!--         Ctrl+d删除一行 ;Ctrl+Shift+d复制上一行-->
1.能让标签不转义的标签: <xmp><h1></xmp>
        
2.水平线标签: <hr/>
  可选属性:对齐方式align,默认center;水平线大小(竖)size,默认2像素单位;
          颜色color,可用颜色名称等方式表示;水平线宽度(横)width,像素值或浏览              器窗口百分比默认100%。                    </br>
    eg:<hr align="left" size="10" color="red" width="150" >         </br>
        
3.换行标签: 实例</br> 文字 </br>
        
4.空格:实例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文字,包括英文分号</br>
        
5.标签属性: <标签名 属性1="属性1" 属性2="属性2"></标签名>              </br>
  注意:属性不分先后顺序;属性之间以空格分开。                           </br>
          
6.<h5>标题标签: 双标签h1-h6 </h5>                                       </br>
  可选属性:align="对齐方式" (左对齐:left;右对齐:right;居中:center)  </br>
   eg: <h5 align="center"> 居中对齐的5级标题</h5>
         
7.段落标签: <p>段落文本会根据浏览器大小自动换行,并且每段文本之间会有一定间隔</p>
  可选属性:对齐方式align;

8.文本样式标签:<font>文本样式标签在文本标签<p>中,可以添加属性为文字设置字体face、文字大小size(1-7之间整数值)、颜色color等属性</font>
    <p>无使用font标签时默认格式</p>                               </br>
    <p><font face="宋体" size="5" color="blue">使用font标签时设置的格式</font></p>                                                          </br>

9.文本格式化标签:<strong>粗体</strong>;<ins>下划线</ins>;<em>斜体</em>;
                <del>删除线</del>                           </br></br>
                
10.文本语义标签:
   (1)time标签:没有特殊显示效果,用来给机器识别的,便于搜索引擎,爬虫解析等 </br>
    time标签有以下两个属性:1.datetime,用于定义具体时间或日期,如14:00;2022-03     -21;2.pubdate,定义time标签中文本发布日期
    如:<p><time datetime="2022-02-21"><time>去旅行</p>            </br>
        <time pubdate="2022-05-01">本文发布日期2022-05-01<time>    </br>
                
    (2)mark标签:<mark>用于文本高亮显示,</mark>因作为css的任务,故很少使用。</b     r>
    (3)cite引用标签:<cite>-稚晖君《钢铁侠》</cite>引用内容会以斜体样式展示。</     br></br>

11.图形标签<img/>(装饰性图片建议用css完成设置背景图片)                     </br>
   常见图片格式:GIF、PNG、JPG。                                        </br>
   网页小图片和基本元素等,如图标,按钮等常用GIF或PNG-8;                </br>
   半透明图像考虑用真色彩PNG格式(即指一般PNG-32)                        </br>
   色彩丰富图片考虑JPG。                                                </br>

   <img/>标签属性:                                                    </br>
   1.src:图片路径;                                                    </br>
   2.alt:图片替换文本,图片无法显示时才显示的文本;                        </br>
   3.title:图片说明文本,鼠标放置图片时显示的文本;                        </br>
   4.图片格式:宽width(像素);高height(像素);边框高度border(数字);图片上下的空    白vspace(像素);图片左右的空白hspace(像素);                                  </br>

   5.对齐方式align:
     1左left;2右right;3top图片顶端与第一行文字对齐,其他文字在图片下方;4middle图片中线      与第一行文字对齐,其他文字在图片下方;5bottom图片底部与第一行文字对齐,其他文字在图片      下方。                                                           </br>
     
     实例图片:
    <img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100"       height="100" border="5" hspace="10" align="left"  title="种禾" alt="图片找不到">    
   </br></br></br></br></br>
   实例文字
   <img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100" height="100" align="top" title="种禾" alt="图片找不到">
    实例文字:第一行为图片顶端,</br>后一行为图片下方。</br>
    
    2022/2/21


​        
    </body>

</html>

---------------------------------------------------------↓便于复制↓---------------------------------------------------------

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">  说明文档类型</br>
		<title>HTML标签学习</title>
		一个html只能含一个title标签,且必须位于head标签内。内容用于显示浏览窗口标题栏
	</head>
	<body>
<!-- 注释,仅在html文本中显示,快捷键ctrl+/ -->
<!-- 		Ctrl+d删除一行 ;Ctrl+Shift+d复制上一行-->
1.能让标签不转义的标签: <xmp><h1></xmp>
		
2.水平线标签: <hr/>
  可选属性:对齐方式align,默认center;水平线大小(竖)size,默认2像素单位;
		  颜色color,可用颜色名称等方式表示;水平线宽度(横)width,像素值或浏览			  器窗口百分比默认100%。					</br>
	eg:<hr align="left" size="10" color="red" width="150" >		 </br>
		
3.换行标签: 实例</br> 文字 </br>
		
4.空格:实例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文字,包括英文分号</br>
		
5.标签属性: <标签名 属性1="属性1" 属性2="属性2"></标签名>		 	 </br>
  注意:属性不分先后顺序;属性之间以空格分开。				 	 	 </br>
		  
6.<h5>标题标签: 双标签h1-h6 </h5>							  		 </br>
  可选属性:align="对齐方式" (左对齐:left;右对齐:right;居中:center)  </br>
   eg: <h5 align="center"> 居中对齐的5级标题</h5>
		 
7.段落标签: <p>段落文本会根据浏览器大小自动换行,并且每段文本之间会有一定间隔</p>
  可选属性:对齐方式align;

8.文本样式标签:<font>文本样式标签在文本标签<p>中,可以添加属性为文字设置字体face、文字大小size(1-7之间整数值)、颜色color等属性</font>
	<p>无使用font标签时默认格式</p>   							</br>
	<p><font face="宋体" size="5" color="blue">使用font标签时设置的格式</font></p> 														 </br>

9.文本格式化标签:<strong>粗体</strong>;<ins>下划线</ins>;<em>斜体</em>;
				<del>删除线</del>						   </br></br>
				
10.文本语义标签:
   (1)time标签:没有特殊显示效果,用来给机器识别的,便于搜索引擎,爬虫解析等 </br>
	time标签有以下两个属性:1.datetime,用于定义具体时间或日期,如14:00;2022-03     -21;2.pubdate,定义time标签中文本发布日期
	如:<p><time datetime="2022-02-21"><time>去旅行</p>			</br>
		<time pubdate="2022-05-01">本文发布日期2022-05-01<time>	</br>
				
	(2)mark标签:<mark>用于文本高亮显示,</mark>因作为css的任务,故很少使用。</b     r>
	(3)cite引用标签:<cite>-稚晖君《钢铁侠》</cite>引用内容会以斜体样式展示。</     br></br>

11.图形标签<img/>(装饰性图片建议用css完成设置背景图片)	 				</br>
   常见图片格式:GIF、PNG、JPG。										</br>
   网页小图片和基本元素等,如图标,按钮等常用GIF或PNG-8;				</br>
   半透明图像考虑用真色彩PNG格式(即指一般PNG-32)						</br>
   色彩丰富图片考虑JPG。												</br>

   <img/>标签属性:													</br>
   1.src:图片路径;													</br>
   2.alt:图片替换文本,图片无法显示时才显示的文本;						</br>
   3.title:图片说明文本,鼠标放置图片时显示的文本;						</br>
   4.图片格式:宽width(像素);高height(像素);边框高度border(数字);图片上下的空    白vspace(像素);图片左右的空白hspace(像素);								  </br>

   5.对齐方式align:
     1左left;2右right;3top图片顶端与第一行文字对齐,其他文字在图片下方;4middle图片中线      与第一行文字对齐,其他文字在图片下方;5bottom图片底部与第一行文字对齐,其他文字在图片      下方。														   </br>
	 
	 实例图片:
	<img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100"       height="100" border="5" hspace="10" align="left"  title="种禾" alt="图片找不到">	
   </br></br></br></br></br>
   实例文字
   <img/ src="picture1/u=527444226,59556393&fm=193&f=GIF.jpg" width=100" height="100" align="top" title="种禾" alt="图片找不到">
	实例文字:第一行为图片顶端,</br>后一行为图片下方。</br>
	
	2022/2/21


​		
	</body>

</html>
举报

相关推荐

0 条评论