HTML学习第二天by SixInNight

~~ 上一篇文章点击跳转 ~~ ： 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.csdn.net/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>

• 效果预览：

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

查看更多文章

计算机组成原理课程设计—硬连线、流水

Win10系统虚拟机(VMware14Pro)及Ubuntu16.04安装教程

数据库实验——表/视图的创建

Python练习题（一）

Flask笔记（一）

JS学习第一天