前端(二):html标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- pyton -->
		<!-- 注释的添加 :ctrl + /-->
		<!-- 文字:标题标签 -->
		<h1>一级标题</h1>
		<hr>
		<h2>二级标题</h2>
		<h3>这是标题 H3</h3>
		<h4>这是标题 H4</h4>
		<h5>这是标题 H5</h5>
		<h6>这是标题 H6</h6>
		<!-- 文字:段落标签 -->
		<p>
			今天(10日),<br>《加快建设全国统一大市场的意见》正式出台,提出我国将从基础制度建设、市场设施建设等方面打造全国统一的大市场。那么,何为统一大市场?打造统一大市场到底有怎样的重大意义呢?
		</p>
		<p>何为统一大市场?</p>
		<p>统一大市场是指在全国范围内,建设一个市场的基础制度规则统一,市场的设施高标准联通,要素和资源市场,以及商品和服务市场高水平统一,同时,市场的监管要公平统一,不当市场竞争和市场干预行为进一步规范的大市场。</p>
		
		<!-- 换行符:<br> -->
		<!-- 分割线  <hr> -->
		<hr>
		<!-- 
			块元素:可以设置高度和宽度,独占一行
			行内元素:不可以设置高度和宽度的,(一行中可以显示多个行内元素)
			行内块元素:可以设置高度和宽度,(一行中可以显示多个行内块元素)
				display:inline-block (将块元素和行内元素,转换为行内块元素)
				display:block (转换为块元素)	
				display:inline (转换为行内元素)
		 -->
		 <!-- 块元素:div -->
		<div style="height: 100px;background: red;">123</div>
		<div style="height: 100px;background: blue;">456</div>
		<hr>
		<!-- 行内元素:span -->
		<span style="background: yellow;height: 50px;">这个是span1</span>
		<span style="background: cadetblue;height: 80px;width: 100px;">这个是span2</span>
		<hr>
		<!-- 行内块元素: -->
		<span style="background: yellow;height: 50px;display: inline-block;">这个是span1</span>
		<span style="background: cadetblue;height: 80px;width: 100px;display: inline-block;">这个是span2</span>
		
		<hr>
		<p>	
			<!-- 字体加粗:b -->
			<b>《加快建设全国统一大市场的意见》</b>正式出台,提出我国将从基础制度建设、市场设施建设等方面打造全国统一的大市场。那么,何为统一大市场?打造统一大市场到底有怎样的重大意义呢
			<!-- i 倾斜 -->
			<i>python</i>
			<span>python</span>
		</p>
		
		<hr>
		<!-- 图像标签 :img
		src:设置图片地址
		width:宽度
		height:高度
		-->
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
		<img src="./10.png" alt="" width="300px" height="150px">

		<hr>
		<!-- 链接标签:a
		 href:设置跳转的链接地址
		 -->
		<a href="http://www.taobao.com">淘宝网</a>
		<a href="http://www.baidu.com">百度</a>
		
		<!-- 有序列表和无序列表 -->
		<!-- ol会自动生成序号 -->
		<ol>
			<li>python</li>
			<li>java</li>
			<li>php</li>
			<li>go</li>
			<li>c++</li>
			
		</ol>
		<!-- 无序列表 -->
		<ul>
			<li>python</li>
			<li>java</li>
			<li>php</li>
			<li>go</li>
			<li>c++</li>
		</ul>
		<hr>
		<!-- 表格标签 -->
		<table border="1">
			<!-- 表头行 -->
			<tr>
				<!-- 表头行里的列:th -->
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>职业</th>
			</tr>
			<!-- 内容行 -->
			<tr>
				<!-- 内容行里的列:td -->
				<td>人1</td>
				<td>18</td>
				<td></td>
				<td>IT</td>
			</tr>
			<tr>
				<!-- 内容行里的列:td -->
				<td>人2</td>
				<td>18</td>
				<td></td>
				<td>IT</td>
			</tr>
			<tr>
				<!-- 内容行里的列:td -->
				<td>人3</td>
				<td>18</td>
				<td></td>
				<td>IT</td>
			</tr>
			<tr>
				<!-- 内容行里的列:td -->
				<td>人4</td>
				<td>18</td>
				<td></td>
				<td>IT</td>
			</tr>
			
		</table>
		
		
		<hr>
		<!-- iframe标签:在页面中嵌套别的网页
		 src:嵌套页面的地址
		 width:显示的宽度
		 height:显示的高度
		 
		 -->
		<iframe width="500px" height="500px" src="https://www.baidu.com" frameborder="0"></iframe>
		<iframe width="500px" height="500px" src="http://www.taobao.com" frameborder="0"></iframe>
	
	</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值