【前端学习整理】HTML(1):HTML头部与文本标签。

HTML头部与文本标签

HTML头部

HTML头部指的是head标签内的所有元素
在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- meta标签描述了一些基本的元数据。 -->
		<!--META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
			元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。 -->
		<!-- 为搜索引擎定义关键词: -->
		<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
		<!-- 为网页定义描述内容: -->
		<meta name="description" content="HTML基础">
		<!-- 定义网页作者: -->
		<meta name="author" content="dream">
		<!-- 每30秒钟刷新当前页面: -->
		<meta http-equiv="refresh" content="30">
		
		<title>HTML头部</title>
		<!-- <title> 标签定义了不同文档的标题。在 HTML/XHTML 文档中是必须的。 -->
		<base href="" target="_blank">
		<!-- <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接: -->
		<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
		<!-- <link> 标签定义了文档与外部资源之间的关系。 通常用于链接到样式表.-->
		<link rel="shortcut icon" href="../img/seven.jpg">
		<!-- 也可以把属性rel的值改为'shortcut icon'在网页标题左侧显示logo等图片 -->
		<style>
			.first_style{width:500px;height:500px;background: greenyellow;margin: 0 auto;}
		</style>
		<!-- <style> 标签定义了HTML文档的样式文件引用地址.在<style> 元素中你也可以直接添加样式来渲染 HTML 文档: -->
		<script type="text/javascript"></script>
		<!-- <script>标签用于加载脚本文件,如: JavaScript。 -->
	</head>
	<body>
		<div class="first_style"></div>
	</body>
</html>

以上代码内容均可直接使用html格式文件用浏览器运行

文本标签

HTMl通过文本标签对输出的文本进行格式

<body>
		<h1>我的第一个大标题!</h1>
		<h2>我的第一个小标题!</h2>
		<!-- 标题(Heading)通过 <h1> - <h6> 标签进行定义. 浏览器会自动地在标题的前后添加空行。-->
		<hr/>
		<!-- <hr> 标签在 HTML 页面中创建水平线。 -->
		<h1>h1标签对应6号字体</h1>
		<font size="6">这是6号字体文本</font>
		<h2>h2标签对应5号字体</h2>
		<font size="5">这是5号字体文本</font>
		<h3>h3标签对应4号字体</h3>
		<font size="4">这是4号字体文本</font>
		<h4>h4标签对应3号字体</h4>
		<font size="3">这是3号字体文本</font>
		<h5>h5标签对应2号字体</h5>
		<font size="2">这是2号字体文本</font>
		<h6>h6标签对应1号字体</h6>
		<font size="1">这是1号字体文本</font>
		<!-- 1到6号标题与1到6号字体逆序对应 -->
		<p>我的第一个段落!</p>
		<hr/>
		<p>我的第二个段落!</p>
		<hr/>
		<p>我的<br/>第三个段落!</p>
		<!-- p标签定义一个段落,hr可以用于分隔内容,br用于换行,hr和br都是空元素 -->
		
		<!-- 文本格式化标签 -->
		<b>这个文本是加粗的</b>
		<br />
		<strong>这个文本是加粗的</strong>
		<br />
		<big>这个文本字体放大</big>
		<br />
		<em>这个文本是斜体的</em>
		<br />
		<i>这个文本是斜体的</i>
		<br />
		<small>这个文本是缩小的</small>
		<br />
		这个文本包含
		<sub>下标</sub>
		<br />
		这个文本包含
		<sup>上标</sup>
		<pre>
		此例演示如何使用 pre 标签
		对空行和    空格
		进行控制
		</pre>
		
		<code>计算机输出</code>
		<br />
		<kbd>键盘输入</kbd>
		<br />
		<tt>打字机文本</tt>
		<br />
		<samp>计算机代码样本</samp>
		<br />
		<var>计算机变量</var>
		<br />
		<!-- 这些标签常用于显示计算机/编程代码。 -->
		
		<address>
		Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
		Visit us at:<br>
		Example.com<br>
		Box 564, Disneyland<br>
		USA
		</address>
		<!-- 地址写法 -->
		
		<abbr title="etcetera">etc.</abbr>
		<br />
		<acronym title="World Wide Web">WWW</acronym>
		<!-- 缩写和首字母缩写 -->
		
		<bdo dir="rtl">该段落文字从右到左显示。</bdo>
		<!-- 改变文字的方向 -->
		
		<q>Build a future where people live in harmony with nature.</q>
		<!-- 自动给文字打上引用语 -->
		
		<del>blue</del> <ins>red</ins>
		<!-- 删除字和插入字 -->
		
		<cite>The Scream</cite>
		<!-- <cite> 标签定义作品的标题 -->
	</body>

以上代码内容均可直接使用html格式文件用浏览器运行

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值