HTML标签（一）

[删除（380066935@qq.com或微信通知）]

更好的阅读体验请查看原文:https://www.cnblogs.com/daimenglaoshi/p/16629329.html
​/*
*作者：呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货，记得关注哦！
*vx：it_daimeng
*/

　　

  • HTML5常用标记

   Html:超文本标记语言

 

  1. 结构标签
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,  "/> 
        <title>标题</title>

    </head>

    <body>

        正文   

    </body>

</html>

　

结构标签可以省略，但不建议省略

<meta charset="utf-8" />

这是我的第一个网页

文本相关标签
 <font color="red" size="10">font标签 处理文字的颜色和大小</font>

         <b>加粗</b>

         <strong>强壮 加粗</strong>

         <i>倾斜</i>

         <u>下划线</u>

         <h1>标题1 加粗 独立占一行</h1>

          <h2>标题2</h2>

           <h3>标题3</h3>

            <h4>标题4</h4>

             <h5>标题5</h5>

              <h6>标题6</h6>

             

        a<sub>1</sub>

        a<sup>2</sup>

       

        <cite title="引自呆萌老师">引用标签</cite>

       

        <abbr title="world wide web">www 缩写标签</abbr>

       

        <details>

            <summary>文档的详情</summary>

            点击summary中的内容，才显示具体内容

      </details>

　　

  1.  图片标签
<img src="img/27125326.jpg"  width="200" height="200"

            title="标题:猴子" alt="如果图片不能正常显示时显示的文字信息"

          border="0" />

　　

        2、超链接标签

  目标 跳转的页面显示的位置(默认是_self:在本窗口内打开，_blank:在新窗口中打开)

        3、可以跳转到本网站的其它页面

<a href="index4.html" target="_blank">新闻1</a>

　　

​​​​​​​        4、跳转到其它网站

<a href='https://www.taobao.com' >淘宝</a>

　　

       ​​​​​​​5、跳转到本页面的其它地方

<a name="top">锚点</a>

<a href="#top">回到顶部</a>

　　

        ​​​​​​​6、列表标签

    

    <ul type="circle">          
 <li>校花的贴身高手</li>           
<li>伏天氏</li>           
<li>校花的贴身高手</li>           
<li>伏天氏</li>         
</ul> 点击并拖拽以移动

       

        
<ol type="1">           
<li>校花的贴身高手</li>           
<li>伏天氏</li>          
 <li>校花的贴身高手</li>          
 <li>伏天氏</li>          
 </ol>

　　

 

  1. 表格标签

   table:表格

     属性:

        cellspacing:单元格间距

        align:对齐方式

        border:边框

   caption:表名

   thead:表头

     tbody:表主体

     tfoot:表格的页脚

     tr：行 放在table 或thead 或tbody 或tfoot 里面   

     th:单元格 常放在thead中  有加粗和居中的效果  放在tr里面

td:单元格 表格中的内容只能放在单元格中(td和th中)  放在tr里面

      属性:

         colspan:合并列

         rowspan:合并行

<table border=1  cellspacing="0" align="center" width="1000">			
			<caption>各院系课程</caption>
			<thead>
				<tr>
					<th>系所编号(School Code)</th>
					<th>系所名称(Schools) </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>数学科学学院(School of Mathematical Sciences)</td>
				</tr>
				<tr>
					<td>004</td>
					<td>物理学院(School of Physics)</td>
				</tr>
				<tr>
					<td>010</td>
					<td>化学与分子工程学院(College of Chemistry and Molecular Engineering)</td>
				</tr>
			</tbody>
			<tfoot>
				<tr >
					<td colspan="2" align="right"> 补充信息</td>
				</tr>
			</tfoot>			
			
		</table>

 

​