HTML学习第二天by SixInNight-优快云博客

本文链接：https://blog.youkuaiyun.com/hongwangdb/article/details/94756024

本文深入讲解HTML中的图像、超链接、表格与表单元素的使用方法，包括代码示例与效果预览，适合初学者快速掌握HTML核心内容。

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

HTML学习第二天

~~ 上一篇文章点击跳转 ~~ ： HTML学习第一天
~~ 下一篇文章点击跳转 ~~ ： CSS学习汇总

插入图像

<img src="路径" width="200">

src：
- 绝对路径：src="D:\day02\imgs\02.JPG"
- 相对路径：
  - 当前目录：直接写引用文件名，如 src="02.JPG"
  - 上级目录：../文件名，如src="../imgs/02.JPG"
  - 下级目录：文件夹名/文件名，如src="imgs/02.JPG"
alt：当图片不能正常显示时显示的文本
width/height：设置宽高，如果只设置宽度，高度等比变化

超链接

<a href="链接URL">文本</a>

href：如小编的空间

	<p>
		<a href="https://user.qzone.qq.com/1278824986">
										小编的空间</a>
	</p>

target：
- _blank：规定打开方式为在新页面打开
- _self：规定打开方式为在当前页面打开，如小编主页

	<p>
		<a href="https://me.youkuaiyun.com/hongwangdb" 
							target="_self">小编主页</a>
	</p>

表格

border：边框粗细
cellpadding：单元格边框与内容间距
cellspacing：单元格间距
代码样例：

<table border="2" width="25%">
	<tr>
		<td>1.1</td><td style="color:red">1.2</td><th>1.3</th>
	</tr>
	<tr>
		<td colspan="2">跨列了奥</td><td rowspan="2" style="color:red">跨行了哦</td>
	</tr>
	<tr>
		<td>3.1</td><td>3.2</td>
	</tr>
	<tr>
		<td colspan="3" align="center">又跨列了奥</td>
	</tr>
</table>

效果预览：

在这里插入图片描述

表单

代码样例：

<form id="f1" name="form1" method="post" action="https://user.qzone.qq.com/1278824986">
	   用户名:<input type="text" name="username" 
	   			 	value="SixInNight" readonly="readonly" 
	   				placeholder="请输入用户名"><br><br>
	   密码:<input type="password" name="password" 
	   			  placeholder="请输入密码" maxlength="11"><br><br>
	   			  
	   <!-- checked默认选中 -->
	   性别:<input type="radio" name="sex" value="M" 
	   			checked="checked" id="s1"><label for="s1">男</label>
			<input type="radio" name="sex" value="F" 
				id="s2">
					<label for="s2">女</label><br>
	   爱好:<input type="checkbox" name="hobby" value="fj" id="b1">
	   			<label for="b1">番剧</label>
			<input type="checkbox" name="hobby" value="nh" id="b2">
					<label for="b2">女孩</label>
			<input type="checkbox" name="hobby" value="fd" 
				checked="checked" id="b3">
					<label for="b3">发呆</label><br>
	   生日:<input type="date" name="birthday"><br><br>
	   照片:<input type="file" name="pic"><br><br>
	   住址:<select name="city">
				<option>请选择</option>
		   		<option value="bj">北京</option>
		   		<option value="sh" selected="selected">上海</option>
		   		<option value="sc">四川</option>
	      	</select><br><br>
	   自我介绍:<textarea name="intro" rows="3" cols="20" 
	   				placeholder="来唠十块钱的..."></textarea><br><br>

	   <!-- 提交按钮 -->
	   <input type="submit" value="注册">
	   <input type="reset">
	   <input type="button" value="按着玩吧">
	</form>