前端基础--HTML标签

拼搏现实的明天。 2022-03-25 02:42 257阅读 0赞

开发工具与关键技术：DW/浏览器 ；熟悉HTML标签。  
作者：刘佳明  
撰写时间：2019年1月 17 日

在编写页面的过程中必不可少就是熟悉的运用各式各类的标签；下面就为大家介绍常见的HTML标签；

对html 和css 中不可用的代码内容进行注释；

h1~h6 标签；hmtl中的标题标签  
![在这里插入图片描述][20190118110344918.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]

--------------------

标签表示分割线；；

![在这里插入图片描述][20190118110500514.png]

字体标签

表示段落标签； 表示斜体标签； 表示斜体加粗

表示粗体； 表示行内标签，行内标签并非只局限于文字

表示文字加删除线 表示文字加下划线

表示文字加大； 表示文字缩小；

<div class="contain">
    		<p>我是一个P标签</p>  
           <hr>
            <i>我是一个i标签</i>
            <hr>
            <em>我是一个em标签</em>
            <hr>
    		<b>我是一个b标签</b> 
    		<hr>
     		<span>我是一个span标签</span>
     		<hr>
    		<u>我是一个u标签</u>
    		<hr>
    		<big>我是一个big标签</big>  
           <hr>
            <small>我是一个small标签</small>
            
      </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]  
弹幕式，跑马灯标签；顾名思义该标签可让文本呈现跑马灯效果；

最简单跑马灯标签；

我是一个跑马灯标签

效果是文字：“我是一个跑马灯”会沿箭头所指的方向运动  
![在这里插入图片描述][20190118110802233.png]  
在构建网页时；如有需要构建入竖向文字标识的时候；标签多采用列表式标签；  
列表标签=有序列表+无序列表；两者的差别在于有无序号编辑；

有序列表；

1.  
2.  
3.

![在这里插入图片描述][20190118110937682.png]  
无序列表

*    
    
 *  
 *    
    
 *  
 *    
    
 *  
 *

![在这里插入图片描述][20190118111203460.png]  
表格标签；

<table></table>定义表格 书写在表格的开始和结束位置 
    
    <tr></tr>表示表格的行；
    
    
    <td></td>表示表格的单元格；
    
    <th></th>设置表格头:通常是黑体居中文字；
    <div class="contain">
    	<table>
    				<tbody>
    				<tr>
    					<th>1</th>
    					<td>Mark</td>
    					<td>Otto</td>
    					<td>@mdo</td>
    				</tr>
    				<tr>
    					<th>2</th>
    					<td>Jacob</td>
    					<td>Thornton</td>
    					<td>@fat</td>
    				</tr>
    				<tr>
    					<th >3</th>
    					<td>Larry</td>
    					<td>the Bird</td>
    					<td>@twitter</td>
    				</tr>
    			</tbody>
    	</table>
    
      </div>

具体网页效果如下；

![在这里插入图片描述][20190118111349684.png]  
From表单标签；编辑表单时必要的标签，密码框，文本框，文本域 ，下拉框等多类文本编辑的表单标签；

![在这里插入图片描述][20190118111429673.png]

![在这里插入图片描述][20190118111500621.png]

[20190118110344918.png]: /images/20220325/bf549d9ec429403b8e2ebebe20481812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220325/82e20d1b22fd451289ac0509b6072aa8.png
[20190118110500514.png]: /images/20220325/8d2f381b2c1e4f0bada45de860a906e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]: /images/20220325/6cb27b0e51ff44b1a41d62512c1ae6bd.png
[20190118110802233.png]: /images/20220325/67ebc77085a74e62baa87933be7cb4b1.png
[20190118110937682.png]: /images/20220325/1449b32bfe5441019d9056d12039b428.png
[20190118111203460.png]: /images/20220325/96c03ef0033a4198b7671eef575d12dd.png
[20190118111349684.png]: /images/20220325/d827228f1f234ad9a4c881ad75e8ffde.png
[20190118111429673.png]: /images/20220325/e9f1482d3e184ec19f90eeca29f8d1ee.png
[20190118111500621.png]: /images/20220325/3f83d6f733c14a4982b91e91c9b77aa6.png