HTML基础标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40440225/article/details/82016635

<body>
	<!--1.字体标签 font
			   color:颜色
		       size:大小1-7
		        face:改变字体
		-->

	<font color="red" size="5" face="微软雅黑">
		你好,世界！！！
	</font>

	<!--2.p标签: 段落标签-->
	<p>第一段</p>
	<p>第二段</p>

	<!--3.h标签:标题标签1-6-->
	<h1>标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
	<!--4.br换行-->
	第一行<br />第二行
	<!-- 5.hr水平分割线-->
	<hr />
	<!--6.b加粗,strong:加粗  包含语义-->
	<b>将字体加粗</b>
	<strong>将字体加粗(包含语义)</strong>
	<!--7.i斜体,em:斜体  包含语义-->
	<i>斜体</i>
	<em>斜体(包含语义)</em>

</body>

图片

<body>
	<!-- 
		常用属性	
		src:指定图片路径
		alt:文件加载失败时,提示信息
		width 宽
		height高
		
		图片的相对路径问题
		./代表当前路径
		../代表上一级路径
		../../代表上上一级路径
		 
		-->
	<img src="../img/001.jpg" / width="100px" height="60px" alt="这张图片可能加载有问题">
</body>

无序列表、有序列表、友情链接

<body>

		<!--无序列表
			ul
			  li 列表项
			  type="circle"空心小圆圈
			  type="disc"  实心小圆圈(默认)
			  type="square"实心方形
		-->
		<ul type="square">
			<li>百度</li>
			<li>新浪微博</li>
			

		</ul>
		<!--有序列表
			  type:取值 1,a,A,i,I
			  start:开始的取值
		-->
		<ol type="1" start="2">
			<li>百度</li>
			<li>新浪微博</li>
			
		</ol>
		<!--
          使用无序列表
          href:指定要跳转去的链接地址,需要加上HTTP协议
          target:以什么方式打开
          _self:默认打开方式,在当前窗口打开
          _blank:新起一个标签页打开页面
        -->
		<ul>
			<li><a href="https://www.baidu.com" target="_blank">百度</a></li>

		</ul>
	</body>

表格

<body>
		<!--
			table
			常用属性:
			  border:指定边框
			   width:宽度
			   height:高度
			   bgcolor:背景色
			   align: 对齐方式
			 tr 标签
			 td 标签
		-->
		<table border="" width="" height="">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
		<!--
		表格的合并
		     colspan:跨列
		     rowspan:跨行
	-->
	</body>

表单标签

	<body>
		<!--
			表单标签 <form><form/>
			  action:提交的地址
			  method:
			          get 方式    默认提交方式,会将参数拼接在链接后面,又大小限制,4k
			          post 方式  会将参数封装在请求体中,没有大小限制
			  input:
			        type: 指定输入项的类型
			             text:文本
			             password:密码框
			             radio:单选按钮
			             checkbox:复选框
			             file    :上传文件
			             submit: 提交按钮
			             button: 普通按钮
			             reset: 重置按钮
			             hidden:隐藏域
			             
			             date: 日期类型
			             tel: 手机号类型
			             number:主允许输入数字
			        placeholder:指定默认的提交信息
			        name: 在表单提交的时候,当作参数的名称
			        id  : 给输入项取一个名字,以便于后期找到它,并且操作它
			     
			textarea:文本域,可以输入一段文字
			          cols:指定宽度
			          rows:指定高度
			select:下拉列表
			   option:选择项
			        
		-->
		<form action="../04-网站首页/网站首页.html" method="get">
			<!--隐藏域
				主要是用来存放页面上一些ID信息
			-->
			<input type="hidden" value="cndfjvkhvfhdvedgvg" name="uid" />
			<!--文本输入框-->
			用户名:<input type="text" name="username" /> <br />
			<!--密码框-->
			密码: <input type="password" /><br /> 确认密码: <input type="password" /><br /> 邮箱:
			<input type="text" /><br /> 手机号码:
			<input type="tel" /><br /> 靓照:
			<input type="file" /><br /> 性别:
			<input type="radio" name="sex" />男
			<input type="radio" name="sex" />女<br /> 爱好:
			<input type="checkbox" />吃饭
			<input type="checkbox" />唱歌
			<input type="checkbox" />睡觉
			<input type="checkbox" />打豆豆
			<br /> 其他信息:
			<textarea cols="40" rows="4"></textarea>
			<br /> 籍贯:
			<select>
		  		<option>请选择</option>
		  		<option>北京市</option>
		  		<option>湖北省</option>
		  		<option>山东省</option>
		  	</select>
			<br /> 出生日期:
			<input type="date" />
			<br /> 验证码: <input type="text" />
			<br />

			<input type="submit" value="注册" />
			<input type="button" value="普通按钮" />
			<input type="reset" value="重置按钮" />
		</form>
	</body>

<!--如果使用需要frameset标签
	          需要将body标签去掉
	          cols:按列划分列表
	          rows:按行划分列表
	          -->
		<frameset cols="10%,30%,*">
			<frame src="aaa.html"/>
			<frame src="bbb.html"/>
			<frame src="ccc.html"/>
			
		</frameset>