网页基础(三)HTML基本标签

标题

1. <h1>一级标题</h1>  一个页面只有一次

2. <h2>二级标题</h2>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:h1标题只能在当前页面中出现一次 
        	除非包含在hgroup标签里面
        -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

在html标准中 请使用小写标签 HTML对大小写不敏感<P>等同于<p> 但是W3CSchool中使用的是小写标签,因为万维网联盟(W3C)在HTML4中推荐使用小写,在未来(X)HTML版本中强制使用小写。

常用标签有换行水平线预定义文本在下列代码中给出实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:br:换行标签
        		 hr:水平线
        -->
		<p>马上<br />十点了</p>
		<hr />
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:pre:预定义文本
        -->
        <pre> 
        	    我
        	    是
        	    一
        	    个
        	    好
        	    人</pre>
	</body>
</html>

运行结果如下

其中字体样式的设置为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体样式</title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:<font face="设置字体样式"></font>
        	size 字体大小
        	color 字体颜色 
        	以上均被淘汰
        -->
        <p>默认字体</p>
        <p><font face="宋体" size="4">我是宋体</font></p>
        <p><font face="微软雅黑" color="#FF0000">我是微软雅黑</font></p>
	</body>
</html>

文字的格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本格式化</title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:b和strong都是文本加粗 建议用strong 因为b被淘汰掉了
        	这些都是行内元素不独占一行 宽度根据文本内容计算
        -->
		<b>这是一个粗体</b><br />
		<strong>这也是一个粗体</strong><br />
		<i>这是一个斜体</i><br />
		<em>这也是一个斜体</em><br />
		<small>字体缩小</small><br />
		<big>字体放大</big><br />
		这个字体包含了<sup>上标</sup><br />
		这个字体包含了<sub>下标</sub><br />
		张三丰不是一个<del>男生</del>,是一个<ins>女生</ins>
	</body>
</html>

下面展示超链接的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:<a href="地址" 
        		target blank是新建窗口 self当前窗口>
        		</a>超链接标签
        -->
		<a href="http://www.baidu.com" 
			target="_blank">百度一下</a>
		<a href="http://www.4399.com" 
			target="_self">4399小游戏</a><br />
			<!--
            	作者:[email protected]
            	时间:2020-02-19
            	描述:图像中的超链接
            
            -->
            <a href="HTML_文件格式化.html"><img src="../img/1.jpg"></a>
		
	</body>
</html>

锚链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>锚链接</title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	时间:2020-02-19
        	描述:锚链接就是链接到当前页面的资源
        	需要起一个锚名称 id唯一
        	href="#id"
        -->
        <a href="#p1">第一章</a><br />
        <a href="#p2">第二章</a><br />
        <a href="#p3">第三章</a><br />
        <br /><br />
        <p id="p1">这是第一章</p>
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
          <p id="p2">这是第二章</p>
          <br /><br />
          <br /><br />
          <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
          <p id="p3">这是第三章</p>
          <br /><br />
          <br /><br />
          <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         <br /><br />
         
	</body>
</html>

以上代码均有注释 如果不明白请邮件[email protected]

发布了13 篇原创文章 · 获赞 0 · 访问量 118

猜你喜欢

转载自blog.csdn.net/qq_41440413/article/details/104389224
今日推荐