HTML初学篇————常见标签使用

本篇博客主要是用来记录常用的html标签

1.常见标签

<!DOCTYPE html>
<!-- 关于html语言 -->
<!-- 1.上面是一个文档声明 html5
	 2.跟标签是html,包含两个部分
	 3.head:表示头部分,主要用来放置一些页面信息
	   body:表示体部分,主要用来放置html页面内容
	 4.通过成对的标签来对内容进行描述
	 5.标签不区分大小写,通常用小写-->
<html>
	<head>
		<meta charset="utf-8"> <!-- meta 用来描述网站的配置信息-->
		<title>公司简介</title> <!-- title 用来制定网站的标题-->
	</head>
	<body>
		<!-- img:图片标签
			常用属性:
			src:制定图片的路径
			width:图片的宽度
			height:图片高度
			alt:图片加载出错显示的文字								   -->
		<!-- 图片路径问题
				./表示当前路径
				../表示上一级路径
				../../表示上上级路径-->
		<img src="../img/logo.gif" width="100px" alt="图片显示错误" />
		<!-- 标题标签,h后的数字是1~6 -->
		<h1>公司简介</h1>
		<!-- 空标签,分隔符 -->
		<hr />
		<!--p 段落标签 --> <!-- ctrl + shift + R 复制整行-->
		<!-- font 描述字体的标签 
				常用属性 color 描述字体颜色
						size 描述字体大小 1~7
						face 设置字体格式 :仿宋-->
		<!-- b:加粗
			 i:斜体-->
		<p>
		<font color="red">百度(纳斯达克:BIDU)</font>,全球最大的中<b><i>文搜索引擎</i></b>、最大的中文网站。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力,抱着技术改变世界的梦想,他毅然辞掉硅谷的高薪工作,携搜索引擎专利技术,于 2000年1月1日在中关村创建了百度公司。
		</p>
		<!-- strong:加粗,带语义 -->
		<!-- em:斜体,带语义 -->
		<p>
		<strong>“百度”</strong>二字,来自于八百年前南宋词人<em>辛弃疾</em>的一句词:众里寻他千百度。这句话描述了词人对理想的执着追求。
		</p>
		<p>
		百度拥有数万名研发工程师,这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先进的搜索引擎技术,使百度成为中国掌握世界尖端科学核心技术的中国高科技企业,也使中国成为美国、俄罗斯、和韩国之外,全球仅有的4个拥有搜索引擎核心技术的国家之一。
最新新闻	
		</p>
		
		<!-- ul:无序列表 常用属性 type :circle(小圆圈) square(小方块) disc(默认的小黑点) -->
		<ul type="disc">
			<!-- li:列表项 -->
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ul>
		
		<hr />
		<!-- ol:有序列表  常用属性type:序号形式  start:序号从多少开始-->
		<ol type="1">
			<!-- a:超链接标签
					常用属性 href:指定要跳转的地址,需要加上http协议,如果访问的是本网站的html文件,可以直接写文件路径
							target:以什么方式打开
								_self:默认方式打开,在当前窗口
								_blank:新启另一个标签页面打开-->
			<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ol>
		<!-- table:表格标签 
			 常用属性:
					border:指定边框
					width:宽度
					height:高度
					bgcolor:背景颜色
					align:对齐方式-->
		<!-- 表格的合并 colspan:跨列合并 rowspan:跨行合并-->
		<table border="1px" width="400px" bgcolor="aliceblue" align="center">
			<!-- tr:表格的行 -->
			<tr bgcolor="aqua" align="center">
				<!-- td:表格的列 -->
				<td colspan="2">11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<!-- td:表格的列 -->
				<td bgcolor="red" align="center" rowspan="2">21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
			</tr>
			<tr>
				<!-- td:表格的列 -->
				<td rowspan="3" colspan="2">
					<!-- 表格的嵌套 -->
					<table border="1px" width="100%" height="100%">
						<tr>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
						<tr>
							<td>1</td>
							<td>1</td>
							<td>1</td>
						</tr>
					</table>
				</td>
				<td>34</td>
			</tr>
			<tr>
				<!-- td:表格的列 -->
				<td>41</td>
				<td>44</td>
			</tr>
			<tr>
				<!-- td:表格的列 -->
				<td>51</td>
				<td>54</td>
			</tr>
		</table>
	</body>
</html>

2.常见表单提交标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- form:表单标签
					常用属性:aciton:提交地址
							 method: get方式,默认方式
									 post方式-->
		<form action="http://www.baidu.com" method="post">
			<!-- input:输入标签 
					常用属性:type:输入控件的类型(text\password\radio\checkbox\file\submit\button\reset\hidden\date\tel\number)
							 name:在表单提交时,作为参数
							 id:给输入项一个名字,便于后期去找
							 palceholder:提示信息-->
			<input type="hidden" value="隐藏域,主要用来存放页面的id信息" />
			用户名:<input type="text" name="uername" id="id" placeholder="请输入用户名"/> <br />
			密码:<input typ="password" /><br />
			邮箱:<input type="text" /><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" />玩游戏<br />
			<!-- textarea:文本域
					常用属性 cols:指定宽
							rows:指定高-->
			自我描述:<textarea cols="40" rows="5"></textarea><br />
			<!-- select:下拉列表
					option:选择项-->
			籍贯:<select>
					<option>--请选择--</option>
					<option>河北</option>
					<option>河南</option>
					<option>山西</option>
				  </select><br />
				  
			出生日期:<input type="date" />
			<!--提交按钮,按钮上的字为提交 -->
			<input type="submit" value="提交" />
			<input type="button" value="普通按钮" />
			<input type="reset" value="重置" />
			
		</form>	
	</body>
</html>

3.后台常见框架标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="15%,*">
		<frame src="aaa.html" />
		<frameset cols="15%,*">
			<frame src="bbb.html" />
			<frame src="ccc.html" name="rightFrame" />
		</frameset>
	</frameset>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值