HTML5 成长之路（一）HTML基本语法

最新推荐文章于 2024-04-20 08:09:26 发布

koko_TT

最新推荐文章于 2024-04-20 08:09:26 发布

阅读量190

点赞数

分类专栏： HTML5成长之路文章标签： HTML5基本语法

本文链接：https://blog.csdn.net/weixin_44344462/article/details/89526917

版权

HTML5成长之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在Sublime中快速建立HTML5框架的快捷键

! + Tab
html:5 + Tab

Show me the code

请复制并保存为.html结尾的文件并用浏览器打开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML基本语法</title>

	<!-- base标签设置整体链接页面打开方式 -->
	<base target="_blank" />
	
</head>
<body>
	<h1 id= "顶端">HTML基本语法练习</h1>

	<h2>段落</h2>
	<p>这是p标签的一个段落
	测试是否换行</p>

	<div>这是div标签的一个段落
	测试是否换行</div>

	<span>这是span标签的一个段落
	测试是否换行</span>


	<h2>粗体</h2>
	<p><strong>这是strong标签的粗体效果</strong></p>
	<p><b>这是b标签的粗体效果</b></p>


	<h2>斜体</h2>
	<p><em>这是em标签的斜体效果</em></p>
	<p><i>这是i标签的斜体效果</i></p>


	<h2>下划线</h2>
	<p><ins>这是ins标签下划线效果<ins></p>
	<p><u>这是u标签的下划线效果</u></p>


	<h2>删除线</h2>
	<p><del>这是del标签删除线效果</del></p>
	<p><s>这是s标签删除线效果</s></p>


	<h2>br标签换行</h2>
	<p>这是第一行，接着插入br标签<br />
		这是第二行
	</p>


	<h2>hr标签水平线</h2>
	<hr />


	<h2>a标签#号页内锚点测试</h2>
	<a href="#顶端">点击返回顶端</a>


	<h2>a标签target= "_blank"打开新标签页</h2>
	<a href="https://www.baidu.com/" target="_blank">新标签页打开百度</a>
	

	<h2>a标签target= "_self"跳转并覆盖本页面</h2>
	<a href="https://www.baidu.com/" target="_self">覆盖本页面打开百度</a>


	<h2>小于号&lt分号，空格&nbsp分号，大于号$gt分号</h2>
	<p>&lt;&nbsp;&gt;</p>
	

	<h2>align属性居左、居中、居右</h2>
	<p align="left">居左</p>
	<p align="center">居中</p>
	<p align="right">居右</p>

	<h2>img标签，alt属性图像崩溃显示文本，title属性鼠标悬停提示</h2>
	<img src="https://www.baidu.com/img/bd_logo1.png?" alt="图像拉取失败" title="百度logo">

</body>
</html>