欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html学习笔记：常见标签的使用（一）

程序员文章站 2022-04-19 23:53:39
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习</title>
		<script type="text/javascript">
			function alertInfo(){
				window.alert("学习中")
			}
		</script>
	</head>
	<body>
		<!-- 锚点引用，使用#id或者other.html#id，默认是当前页面 -->
		<a href="study01.html#abc">跳转到底部</a>
		<!-- 标题标签： -->
		<h1 align="center">最大</h1>
		<h6>最小</h6>
		我是中国人，我是可爱的人
		<h1>窗前明月光</h1> <br>
		
		<!-- 横线 -->
		<hr style="height: 5px; ">
		
		<!-- 下划线加粗等 -->
		下标<sub>下标</sub> <br>
		上标<sup>上标</sup> <br>
		<em>斜体</em>  <br>
		<del>删除线</del>  <br>
		<ins>下划线</ins>  <br>
		<strong>粗体<strong><br>
		
		<!-- 实体字符 -->
		<!-- 空格 -->
		&nbsp;&nbsp;&nbsp;&nbsp;
		<!-- 尖括号 -->
		&lt;&gt;<br>
		<!-- 其他实体字符 -->
		&copy;&reg&trade;<br>
		
		<button type="button" onclick="alertInfo()">确定按钮</button>		
		<br>
		<br>
		<p>我是一个段落</p>
		<!-- target属性添加可以在新的标签页打开 -->
		<a href="http://www.baidu.com" target="_blank" >百度</a>
		
		<!-- 锚点，一定要使用id属性 -->
		<p id="abc" align="center">底部</p>
		
		<!-- 图片标签,是唯一一个使用align属性后，相对于文字居中的 -->
		<img src="logo.png" align="center" alt="提示文字" >图片
		
		<!-- 如何让文本和图片一起居中呢 -->
		<h3 align="center">
			<img src="logo.png"  align="middle" ><br>logo
		</h3>
		
	</body>
</html>

示例：简易的聊天代码（使用段落p，嵌套着头像）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>聊天界面</title>
	</head>
	<body>
		<p align="left">
			<img src="img1.jpg" width="100px" align="center"> 你好
		</p>
		<p align="right">
			你大爷<img src="img2.jpg" width="100px" align="center">
		</p>
		<p align="left">
			<img src="img1.jpg" width="100px" align="center"> 傻叉？
		</p>
		<p align="right">
			你傻逼<img src="img2.jpg" width="100px" align="center">
		</p>
		
	</body>
</html>
相关标签： 前端 html5 html

上一篇： HTML常见的属性以及一些标签的属性

下一篇： 纯Java版本的JDBC基础操作，支持查询结果到泛型实体类的转换

推荐阅读