html5的学习笔记

最新推荐文章于 2025-08-15 21:07:05 发布

原创最新推荐文章于 2025-08-15 21:07:05 发布 · 626 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5学习笔记 #html5

------------html----------- 专栏收录该内容

1 篇文章

订阅专栏

1.<!--标题（Heading）是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。-->
<!DOCTYPE>
<html>
	<head>
		<meta charset = "utf-8">
		<title>我是张超</title>
	</head>
	<body>
		<h1>这是第一个标题</h1>
		<h2>这是第二个标题</h2>
		<h3>这是第三个标题</h3>
		<h4>这是第四个标题</h4>
		<h5>这是第五个标题</h5>
		<h6>这是第六个标题</h6>
	</body>
</html>

2.<!--<hr> 标签在 HTML 页面中创建水平线。-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<p>hr 标签定义水平线：</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
</body>
</html>

3.<!--如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这个<br>段落<br>演示了分行的效果</p>

</body>
</html>

4.<!--HTML 文本格式化-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

5.<!--HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。-->
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<a href= "http://blog.youkuaiyun.com/small__snail__5" target="_blank">访问small_snail_5的博客!</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

</body>
</html>

<!--可设置文字背景颜色以及可将链接的下划线去掉-->
<!DOCTYPE html>
<html>
<head>
<meta charest = "utf-8">


<title>一个链接</title>
</head>
<body>
 
<a href = "http://blog.youkuaiyun.com/small__snail__5/article/details/62445526" target = "_blank" style = "text-decoration:none;"> 访问一下我的博客</a><!--style后面的语句是去掉下划线-->

<style type="text/css">
body {background-color:yellow}
p {color:blue}

</style>
<p>我的字儿是蓝色的</p>
</body>
</html>