HTML前端笔记Day1-CSDN博客

本文链接：https://blog.csdn.net/m0_61729112/article/details/121235968

这篇博客介绍了HTML的基本概念，包括文档声明、元素类型和标记语言的使用。通过入门案例展示了创建HTML文件的步骤，并详细讲解了HTML的常见标签，如图片、列表、标题、超链接和输入框等。此外，还涵盖了表格的创建和样式设置，以及表单元素的应用，如密码输入、单选、多选和按钮等。

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

一，HTML

1,概述

是超文本标记语言.
网页中的元素类型可以超过文本内容
标记语言: HTML中提供了大量标记/标签,开始标签和结束标签

2,入门案例

1,右键-新建项目-输入项目名称-创建
2,右键-新建-HTML文件-输入文件名-创建
3,保存文件-运行-运行到浏览器–选择一个能用的直接测试

<!DOCTYPE html> <!--是文档声明行,用来声明这是一个HTML文件 -->
<html> <!-- HTML文件里的根元素-->
	<head> <!-- 网页中的头部分,优先于body加载,用来设置网页的属性-->
		<meta charset="utf-8"> <!-- 设置网页的编码 -->
		<title>你好,HTML</title> <!-- 设置网页的标题 -->
	</head>
	<body><!-- 网页的体部分,放展示的数据 -->
		hell&nbsp;&nbsp;&nbsp;&nbsp;o html~ 
		hello html~  <br></br>
		<!-- br标签是换行 
			 &nbsp;表示一个空格
		 -->
		hello html~ 
		hello html~ 
		hello html~ 
		hello html~ 
	</body>
</html>

二，HTML的常见标签

1，概述

1,输入框: 单选多选
2,图片
3,按钮
4,视频
5,超链接

2，标题,列表,图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 标题标签</title>
	</head>
	<body>
		<!-- 3.图片标签 
			src属性用来指定图片的位置(先保证图片资源和网页在同一级目录)
			width属性用来指定图片的宽度,单位是像素px
			height属性用来指定图片的高度,单位是百分比
		-->
		<img src="logo.png" width="30px" height="10%"/>
		<img src="logo.png" width="30px" height="10%"/>
		
		<!-- 2.列表标签 
			有序列表orderlist: ol是定义列表   li定义列表项
		    无序列表unorderlist: ul是定义列表   li定义列表项
		-->
		<ul>
			<li>31省区市新增本土确诊65例</li>
			<li>神十三航天员圆满完成出舱任务</li>
		</ul>
		<ol>
			<li>31省区市新增本土确诊65例</li>
			<li>神十三航天员圆满完成出舱任务</li>
		</ol>
		
		<!-- 1.标题标签  h1大~h6小 自动换行 -->
		<h1>hello</h1>
		<h2>hello</h2>
		<h3>hello</h3>
		<h4>hello</h4>
		<h5>hello</h5>
		<h6>hello</h6>
		
	</body>
</html>

3，超链接,输入框标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 超链接标签</title>
	</head>
	<body>
		<!-- 2.input输入框 -->
		密码输入框:<input type="password" />
		普通输入框:<input type="text" />
		数字输入框:<input type="number" />
		日历输入框:<input type="date" />
		日历输入框:<input type="week" />
		单选框:<input type="radio" />男
		多选框:<input type="checkbox" />迪丽热巴
		普通按钮: 没有提交数据的功能,只能点点
		<input type="button" value="注册"/>
		<button>登录</button>
		提交按钮:把用户在浏览器输入的数据提交给后端的java程序处理
		<input type="submit"/>
		<button type="submit">提交</button>
		
		<br />
		<!-- 1.超链接标签  
		      href属性表示可以被点击
			  target属性表示用什么方式打开
			  默认值是_self当前窗口,_blank是在新窗口打开
		-->
		<a href="http://www.baidu.com/" target="_blank">百度一下</a>
		<!-- 锚定:回到固定位置 -->
		<a name="top">我是顶部</a>
		<h1>如何套取富婆的欢心</h1>
		<h1>如何套取富婆的欢心</h1>
		<h1>如何套取富婆的欢心</h1>
		<h1>如何套取富婆的欢心</h1>
		<a href="#top">点我,回去顶部</a><!--通过#获取name属性的值-->
	</body>
</html>

4，表格标签ce

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表格标签</title>
	</head>
	<body>
		<!-- 1.准备表格 
			结构:table里包含行tr,tr里包含列td
			属性:border设置边框,width宽度,bgcolor背景色
			cellspacing单元格的距离
			colspan是列合并:把多个列合并成一个大列,值是指合并几个
			rowspan是行合并:把多个行合并成一个大行,值是指合并几个
		-->
		<table border="1px" width="500px" 
			  cellspacing="0px" bgcolor="greenyellow">
			<tr>
				<td colspan="2">11</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>
	</body>
</html>

测试：

	<body>
		<h1 align="center">流量调查表</h1>
	<table border="1px" width="90%" cellspacing="0px"  bgcolor="antiquewhite" align="center">	
		<tr align="center">
			<th >总页面流量</th>
			<th>共计来访</th>
			<th>会员</th>
			<th>游客</th>
		</tr>
		<tr>
			<td>9756488</td>
			<td>97656</td>
			<td>7538087</td>
			<td>43364677</td>
		</tr>
		<tr>
			<td>46776686</td>
			<td>85544</td>
			<td>69387</td>
			<td>56878</td>
		</tr>
		<tr>
			<td>7538087</td>
			<td>546774</td>
			<td>476897</td>
			<td>334545</td>
		</tr>
		<tr>
			<td >平均每人浏览</td>
			<td colspan="3">1.58</td>
            <!-- <td>53</td>-->
            <!-- <td>54</td>-->
		</tr>
		</table> <br>

	<form method="post" action="#">
	<table border="1px" width="70%"  height="35%" cellspacing="0px" cellpadding="4"  bgcolor="darkgray" align="center">
		<tr>
			<td align="center" colspan="2">
			<h1 align="center">注册表单</h1>
			</td>
		</tr>
			<tr>
				<td>用户名</td>
				<td><input type="text" name="user" /></td>
		  </tr>
	       <tr>
		     <td>密&nbsp;&nbsp;&nbsp;码</td>
		     <td><input type="password" name="pwd" id="" value="" </td>
           </tr>
			<tr>
			   <td>确认密码:</td>
			   <td><input type="password" name="re   pwd" id="" value="" </td>
			</tr>
			<tr>
							<td>昵&nbsp;&nbsp;&nbsp;称：</td>
							<td><input type="text" name=" nick" /></td>
			</tr>
			<tr>
							<td>邮&ndash;箱：</td>
							<td><input type="email" name="email"  /></td>
			</tr>
			<tr>
							<td>性&nbsp;&nbsp;&nbsp;别：</td>
							<td><input type="radio" name="sex"value="1" </td>男
							<input type="radio" name="sex" value="2"/>女
			</tr>
			<tr>
							<td>爱&nbsp;&nbsp;&nbsp;好：</td>
							<td><input type="checkbox" name="like" value="1"</td>篮球
							<input type="checkbox"name="like" value="2" />足球
							<input type="checkbox" name="like" value="3"/>乒乓球
			</tr>
			<tr>
							<td>城&nbsp;&nbsp;&nbsp;市：</td>
							<td>
								<!--select是定义下拉框，option 是下拉选项-->
								<select name="city">
									<option value ="1">北京</option>
									<option value ="2">上海</option>
									<option value ="3">天津</option>
								</select>
							</td>
			</tr>
			<tr>
				<td>头&nbsp;&nbsp;&nbsp;像：</td>
				<td><input type="file" name="path"/></td>	
			</tr>
			<tr>
					<td>验证码：</td>
					<td><input type="text" name="" id="" value="" />
					<img src="R-C.png" width="10%" height="10%">
					<button type="button">点我换一张</button>
					</td>
				</tr>
				<tr>
					<td >自我描述</td>
					<!--textarea 文本域是用来写大量的信息-->
					<td ><textarea rows="2" cols="">请输入自我介绍....</textarea></td>
				</tr>
				<tr>   </tr>
				<tr>
					<td colspan="2" align="center"><button type="submit">提交
					</button>&nbsp;&nbsp;<button type="reset">重置</button>
					</td>	
				</tr>
		</table>	
		</form>