html入门教程-优快云博客

本文围绕HTML展开，介绍了其为超文本标记语言，具备强大功能。详细阐述了常用标签，如标题、换行、加粗等标签及属性。还给出超链接、列表、表格、输入等标签的使用案例及运行结果，涉及表单提交方式等知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML概述：

HTML：Hyper Text Markup Lanuage 超文本标记语言

超文本：比普通文本功能更加强大，可以添加各种样式

标记语言：通过一组标签，来对内容进行描述.<关键字> 是有浏览器来解释执行

常用标签：

换行标签<br/>

<hr/> 水平分割线标签

<font> 改变字体标签</font>

常用属性 color ：颜色

size：改变字体大小范围1~7

face：改变字体

<img /> 加载图片标签

常用属性 src：相对路径 ./ 代表当前路径

../ 代表上一级路径

../../ 代表上上一级路径

i标签：斜体

strong标签：带语义的加粗

em标签：斜体标签带语义

入门案例：


 
   
    
   
   
    
     <!DOCTYPE html>
    
   

   
    
   
   
    
     <html>
    
   

   
    
   
   
    
     <head>
    
   

   
    
   
   
    
     <meta charset="UTF-8">
    
   

   
    
   
   
    
     <title>标题
     </title>
    
   

   
    
   
   
    
     </head>
    
   

   
    
   
   
    
     <body>
    
   

   
    
   
   
    	
     <h1>今日美句
     </h1>
     <hr/>
    
   

   
    
   
   
    	
     <p>
    
   

   
    
   
   
    		
     <font color="red" size="5">
    
   

   
    
   
   
    
     		愿你一生努力，一生被爱。最想要的都拥有，得不到的都释怀。
    
   

   
    
   
   
    		
     </font>
    
   

   
    
   
   
    	
     </p>
    
   

   
    
   
   
    	
    
   

   
    
   
   
    	
     <p>
    
   

   
    
   
   
    		
     <b>
    
   

   
    
   
   
    			
     <font color="green" size="6" face=楷体>
    
   

   
    
   
   
    
     				我还是喜欢你，像春风十里，不问归期。
    
   

   
    
   
   
    			
     </font>
    
   

   
    
   
   
    		
     </b>
    
   

   
    
   
   
    	
     </p>
    
   

   
    
   
   
    	
    
   

   
    
   
   
    	
     <p>
    
   

   
    
   
   
    		
     <font color="gray" size="5">
    
   

   
    
   
   
    
     			我爱你，
     <br/>
    
   

   
    
   
   
    
     			不光因为你的样子，
     <br/>
    
   

   
    
   
   
    
     			还因为，
     <br/>
    
   

   
    
   
   
    
     			和你在一起时，我的样子。
    
   

   
    
   
   
    		
     </font>
    
   

   
    
   
   
    	
     </p>
    
   

   
    
   
   
    	
    
   

   
    
   
   
    	
     <img alt="图片加载失败" src="imgs/731741.png" width="660" height="440"/>
    
   

   
    
   
   
    
     </body>
    
   

   
    
   
   
    
     </html>
    
   	<h1>今日美句</h1><hr/>
	<p>
		<font color="red" size="5">
		愿你一生努力，一生被爱。最想要的都拥有，得不到的都释怀。
		</font>
	</p>
	
	<p>
		<b>
			<font color="green" size="6" face=楷体>
				我还是喜欢你，像春风十里，不问归期。
			</font>
		</b>
	</p>
	
	<p>
		<font color="gray" size="5">
			我爱你，<br/>
			不光因为你的样子，<br/>
			还因为，<br/>
			和你在一起时，我的样子。
		</font>
	</p>
	
	<img alt="图片加载失败" src="imgs/731741.png" width="660" height="440"/>
</body>
</html>

运行结果：

超链接标签：无序列表ul 跟有序列表ol

<ul>无序列表标签</ul>

属性 type: circle(小圆圈）、disc(小黑圆点)、square（小方块）

<ol>有序列表标签</ol>

属性 type: 指定序号类型

start:从几开始数字

属性：href：指定要跳转去的链接地址，需要加上http协议，如果是访问本项目的html网站可以直接写路径

target：以什么方式打开

self：（默认打开方式）在当前窗口打开

blank：新起一个标签页打开

案例：


 
   
    
   
   
    
     <!DOCTYPE html>
    
   

   
    
   
   
    
     <html>
    
   

   
    
   
   
    
     <head>
    
   

   
    
   
   
    
     <meta charset="UTF-8">
    
   

   
    
   
   
    
     <title>Insert title here
     </title>
    
   

   
    
   
   
    
     </head>
    
   

   
    
   
   
    
     <body>
    
   

   
    
   
   
    	
     <ul type="square">
    
   

   
    
   
   
    		
     <li>
     <a href="http://www.baidu.com/" target="_blank">百度
     </a>
     </li>
    
   

   
    
   
   
    		
     <li>知乎
     </li>
    
   

   
    
   
   
    		
     <li>优酷
     </li>
    
   

   
    
   
   
    	
     </ul>
    
   

   
    
   
   
    	
    
   

   
    
   
   
    	
     <hr>
    
   

   
    
   
   
    	
    
   

   
    
   
   
    	
     <ol type="a" start="2">
    
   

   
    
   
   
    		
     <li>
     <a href="http://www.baidu.com/">百度
     </a>
     </li>
    
   

   
    
   
   
    		
     <li>知乎
     </li>
    
   

   
    
   
   
    		
     <li>优酷
     </li>
    
   

   
    
   
   
    	
     </ol>
    
   

   
    
   
   
    	
    
   

   
    
   
   
    
     </body>
    
   

   
    
   
   
    
     </html>

运行结果：

表格标签：table

属性：border 边框、width 宽度、 height 高度、 bgcolor 背景颜色、align 对齐方式

合并： colspan：跨列

rowspan：跨行

入门案例：


 
   
    
   
   
    
     <!DOCTYPE html>
    
   

   
    
   
   
    
     <html>
    
   

   
    
   
   
    
     <head>
    
   

   
    
   
   
    
     <meta charset="UTF-8">
    
   

   
    
   
   
    
     <title>Insert title here
     </title>
    
   

   
    
   
   
    
     </head>
    
   

   
    
   
   
    
     <body>
    
   

   
    
   
   
    	
     <table border="1" width="400" bgcolor="yellow" align="center">
    
   

   
    
   
   
    		
     <tr align="center">
    
   

   
    
   
   
    			
     <td colspan="2">11
     </td>
    
   

   
    
   
   
    			
     <td>13
     </td>
    
   

   
    
   
   
    			
     <td>14
     </td>
    
   

   
    
   
   
    			
     <td>15
     </td>
    
   

   
    
   
   
    		
     </tr>
    
   

   
    
   
   
    		
     <tr>
    
   

   
    
   
   
    			
     <td>21
     </td>
    
   

   
    
   
   
    			
     <td>22
     </td>
    
   

   
    
   
   
    			
     <td colspan="2" rowspan="2">
    
   

   
    
   
   
    				
     <!-- 表格嵌套 -->
    
   

   
    
   
   
    				
     <table border="1" width="100%">
    
   

   
    
   
   
    					
     <tr>
    
   

   
    
   
   
    						
     <td>0
     </td>
    
   

   
    
   
   
    						
     <td>0
     </td>
    
   

   
    
   
   
    						
     <td>0
     </td>
    
   

   
    
   
   
    					
     </tr>
    
   

   
    
   
   
    					
     <tr>
    
   

   
    
   
   
    						
     <td>0
     </td>
    
   

   
    
   
   
    						
     <td>0
     </td>
    
   

   
    
   
   
    						
     <td>0
     </td>
    
   

   
    
   
   
    					
     </tr>
    
   

   
    
   
   
    				
     </table>
    
   

   
    
   
   
    			
     </td>
    
   

   
    
   
   
    			
     <td>25
     </td>
    
   

   
    
   
   
    		
     </tr>
    
   

   
    
   
   
    		
     <tr>
    
   

   
    
   
   
    			
     <td>31
     </td>
    
   

   
    
   
   
    			
     <td>32
     </td>
    
   

   
    
   
   
    			
     <td rowspan="2">35
     </td>
    
   

   
    
   
   
    		
     </tr>
    
   

   
    
   
   
    		
     <tr>
    
   

   
    
   
   
    			
     <td>41
     </td>
    
   

   
    
   
   
    			
     <td>42
     </td>
    
   

   
    
   
   
    			
     <td>43
     </td>
    
   

   
    
   
   
    			
     <td>44
     </td>
    
   

   
    
   
   
    		
     </tr>
    
   

   
    
   
   
    		
    
   

   
    
   
   
    	
     </table>
    
   

   
    
   
   
    
     </body>
    
   

   
    
   
   
    
     </html>

运行结果：

输入标签：

<input /> 输入标签

属性：type 输入项类型

可选值：text 文本框、password 密码框、file 上传文件、radio 单选按钮、checkbox 勾选框

tel 手机号码、number 只允许输入数字、date 日期类型、hidden 隐藏域、submit 提交按钮

button 普通按钮、reset 重置按钮、hidden 隐藏域

placeholder：指定默认的提示信息

name :在表单提交的时候，当作参数的名称

id:给输入项取一个名字，以便于我们后期去找到他操作

<textarea cols="宽度" rows=“高度”>大文本框标签</textarea>

<option>子标签选择项</option>

get：会将参数拼接在链接后面

post：会将参数封装在请求体中

入门案例：


 
   
    
   
   
    
     <!DOCTYPE html>
    
   

   
    
   
   
    
     <html>
    
   

   
    
   
   
    
     <head>
    
   

   
    
   
   
    
     <meta charset="UTF-8">
    
   

   
    
   
   
    
     <title>Insert title here
     </title>
    
   

   
    
   
   
    
     </head>
    
   

   
    
   
   
    
     <body>
    
   

   
    
   
   
    	
     <form action="http://www.baidu.com/">
    
   

   
    
   
   
    
     		帐号：
     <input type="text">
     <br>
    
   

   
    
   
   
    
     		密码：
     <input type="password">
     <br>
    
   

   
    
   
   
    
     		性别：
     <input type="radio" name="sex">男 
     <input type="radio" name="sex">女
     <br>
    
   

   
    
   
   
    
     		籍贯：
    
   

   
    
   
   
    		
     <select>
    
   

   
    
   
   
    			
     <option>广东
     </option>
    
   

   
    
   
   
    			
     <option>广西
     </option>
    
   

   
    
   
   
    			
     <option>湖南
     </option>
    
   

   
    
   
   
    			
     <option>其他
     </option>
    
   

   
    
   
   
    		
     </select>
     <br>
    
   

   
    
   
   
    
     		出生日期：
     <input type="date">
     <br>
    
   

   
    
   
   
    
     		爱好：
     <input type="checkbox">跑步
    
   

   
    
   
   
    			  
     <input type="checkbox">看书
    
   

   
    
   
   
    			  
     <input type="checkbox">打球
    
   

   
    
   
   
    			  
     <input type="checkbox">其他
     <br>
    
   

   
    
   
   
    
     		个人介绍：
    
   

   
    
   
   
    		
     <textarea rows="4" cols="40">
     </textarea>
     <br>
    
   

   
    
   
   
    		
    
   

   
    
   
   
    		
     <input type="submit" value="提交">
    
   

   
    
   
   
    		
     <input type="reset" value="重置">
    
   

   
    
   
   
    		
     <input type="button" value="普通按钮">
    
   

   
    
   
   
    	
     </form>
    
   

   
    
   
   
    
     </body>
    
   

   
    
   
   
    
     </html>