HTML常见标签

最新推荐文章于 2024-08-16 17:54:29 发布

峰＃

最新推荐文章于 2024-08-16 17:54:29 发布

阅读量143

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_46444588/article/details/121214763

版权

安装

开发工具：HBUilder X

官网：https://www.dcloud.io/hbuilderx.html

安装app版本，整体下来近600m。

主题

字体

默认字体i和l分不清，换成Verdana字体。

备注字体颜色

默认灰色看不清晰，可以换成黑色，直接编辑Default.xml，修改下面3行的颜色，重新启动HBuilderX即可。

项目结构

静态页面HTML

概念

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

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

结构

<!DOCTYPE html>
<html> <!--HTML文件里的根元素-->
	<head><!-- 网页中的头部分，优先于body加载，用来设置网页的属性 -->
		<meta charset="utf-8"><!-- 设置网页的编码 -->
		<title>你好</title><!-- 设置网页的标题 -->
	</head>
	<body><!-- 网页的体部分，放展示的数据 -->
		<br /><!--换行，通常写成自闭标签 -->
		he&nbsp;&nbsp;llo<!-- &nbsp;表示一个空格 -->
		hello<br></br><!-- br标签是换行 -->
		hello
	</body>
</html>

常用标签

标题标签列表标签图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试标题标签</title>
	</head>
	<body>
		<!-- 1.标题标签 h1大~h6小-->
		<h1>1号标题</h1>
		<h2>2号标题</h2>
		<h3>3号标题</h3>
		<h4>4号标题</h4>
		<h5>5号标题</h5>
		<h6>6号标题</h6>
		
		<!-- 2.列表标签 ul（orderlist）是无序列表  li是定义列表项
		               ol（unorderlist）是有序列表  li是定义列表项-->
		<ul type="circle">
			<li >苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ul>
		<ol>
			<li >苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ol>
		
		<!-- 3.图片标签 
			src属性用来指定图片的位置
			border:边框
			width:宽度，单位是像素px
			height:高度，单位是百分比%-->
		<img src="1.jpg" border=10 width="40%" height="40%">
	</body>
</html>

锚定超链接标签 input标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试超链接</title>
	</head>
	<body>
		<!-- 3.input标签 -->
		普通输入框：<input type="text" /><br>
		密码输入框：<input type="password" /><br>
		数字输入框：<input type="number" /><br>
		日历输入框：<input type="date" /><br>
		日历输入框：<input type="week" /><br>
		单选框：<input type="radio" />男<br>
		多选框：<input type="checkbox" /><br>
		按钮：
		<input type="button" value="注册"/>
		<button>登录</button>
		提交：<input type="submit" />
		<button type="submit">提交</button><br>
		
		<!-- 1.超链接标签 
			href 指定要跳转的位置
			target 指定要打开的方式
			_self:默认当前窗口
			_blank:新窗口
			-->
		<a href="http://baidu.com" target="_blank">百度一下</a>
		<!-- 2.锚定：回到固定位置 -->
		<br>
		<a name="top">我是顶部</a>
		<br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br>
		<a href="#top">点我回到顶部</a><!-- 通过#获取name属性的值 -->
	</body>
</html>

表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>各种标签</title>
	</head>
	<body>
		<!--table表格标签 
			tr 表格里的行
			td 表格里的列
			border:表格的边框
			cellspacing:单元格的间距
			bgcolor:背景颜色
			width:宽度
			align:位置
		 -->
		<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
			<tr>
				<td colspan="2">11</td> <!-- colspan是列合并,合并2列-->
				<!-- <td>12</td> -->
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td> <!-- rowspan是行合并,合并2行 -->
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<!-- <td>33</td> -->
			</tr>
		</table>
	</body>
</html>

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试表格标签</title>
	</head>
	<body>
		<table border="1" align="center">
			<caption><h3>流量调查表</h3></caption>
			<tr>
				<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>69357</td>
				<td>568787</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>
			</tr>
		</table>
			
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试表单</title>
	</head>
	<body>
		<!-- 表单标签，用来提交数据
			1.标签：form表单，table表格，tr行，td列，caption表头，h1标题，
				  select是下拉框，option是下拉选项，textarea是文本域
			2.属性：type="file"是浏览文件，type="email"是邮箱，align是元素的位置
			3.提交数据的要求：必须用form标签+必须有submit按钮+必须有name属性
			  数据都在地址栏：被拼接在了？之后			name属性的值=浏览器上输入的值
			http://127.0.0.1:8848/cgb2109/Test6.html?user=jack&pwd=123
			4.name属性用来收集用户从浏览器填的数据，value属性用来设置提交的值
			5.数据提交的方式：get和post
				get方式：默认的就是get方式，数据拼接在地址栏中，缺点是不安全。长度受限
				post方式：好处：安全，数据长度没有要求，长度不受限，但是数据不再地址栏中展示
			6.method属性用来设置数据的提交方式，默认是get
			  action属性用来指定是哪段Java程序来处理这次提交的数据-->
		<form action="#" method="post">
			<table border="1px" cellspacing="0px" cellpadding="0px"
				bgcolor="antiquewhite" bordercolor="red" align="center">
				<caption><h1>注册表单</h1></caption>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="user" id="" value="" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd" /></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="repwd" /></td>
				</tr>
				<tr>
					<td>昵称：</td>
					<td><input type="text" name="nick" /></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="email" name="mail" /></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" id="" value="1" />男
						<input type="radio" name="sex" id="" value="0" />女
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<input type="checkbox" name="like" id="" value="1" />篮球
						<input type="checkbox" name="like" id="" value="2" />足球
						<input type="checkbox" name="like" id="" value="3" />乒乓球
					</td>
				</tr>
				<tr>
					<td>城市：</td>
					<td>
						<!-- select是定义下拉框，option是下拉选项 -->
						<select>
							<option >-请选择-</option>
							<option value ="1">北京</option>
							<option value ="2">太原</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像：</td>
					<td><input type="file" name="" id="" value="1" /></td>
				</tr>
				<tr>
					<td>验证码：</td>
					<td>
						<input type="text" name="" id="" value="" />
						<img src="3.jpg" width="130" height="40">
						<input type="button" name="" id="" value="点我换一张" />
					</td>
				</tr>
				<tr>
					<!-- textarea是文本域，用来写大段文字的 -->
					<td>自我描述：</td>
					<td><textarea rows="6" cols="30">请输入描述信息~</textarea></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" name="" id="" value="提交" />
						<input type="reset" name="" id="" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

其他标签

<!-- 都可以包括各种数据，最终效果不同
			div是独占一行，p是独占一行，多个span会在一行 -->
		<div id="">你好</div>
		<div id="">你好</div>
		<div id="">你好</div>
		<p>hello</p>
		<p>hello</p>
		<p>hello</p>
		<span>yellow</span>
		<span>yellow</span>
		<span>yellow</span>
		
		<!-- 音频 controls必须有的，用来作为控制器-->
		
		<audio controls="controls" >
			<source src=""></source>
		</audio>
		<!-- 视频 controls必须有的，用来作为控制器-->
		<video controls="controls">
			<source src=""></source>
		</video>

练习学生信息管理系统MIS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 完成网页的制作，总结：
			1.标签：form表单可以提交数据，h2标题，input输入框，
					select下拉框，option下拉选项，button按钮
			2.属性：method是form提交数据的方式，默认是get，数据在地址栏中
					action是gorm提交的数据交给哪个程序处理，#是每人处理
					name是提交数据时的key，placeholder是输入框的提示，
					checked默认选中，value是提交数据的值-->
		<form action="#" method="post">
			<h2>学生信息管理系统MIS</h2>
			<div >姓名：</div>
			<div ><input type="text" name="user" placeholder="请输入姓名..." /></div>
			<div >年龄：</div>
			<div ><input type="number" name="age" placeholder="请输入年龄:" /></div>
			<div >
				性别：
				<input type="radio" name="sex"  value="1" checked="checked"/>男
				<input type="radio" name="sex"  value="2" />女
			</div>
			<div >
				爱好：
				<input type="checkbox" name="like"  value="1" />乒乓球
				<input type="checkbox" name="like"  value="2" />爬山
				<input type="checkbox" name="like"  value="3" />唱歌
			</div>
			<div >
				学历：
				<select name="edu" >
					<option value ="1">本科</option>
					<option value ="2">专科</option>
					<option value ="3">小学</option>
				</select>
			</div>
			<div >入学日期：</div>
			<div ><input type="date" name="intime"  value="" /></div>
			<span>
				<button type="submit">保存</button>
				<button type="reset">取消</button>
			</span>
		</form>
	</body>
</html>