HTML基础标签整理（一）
HTML基础标签整理（一）
前言
HTML指的是超文本标记语言，并非编程语言。通过浏览器解析HTML中的各种标签能够构建出我们所熟知的网页。
示例解析
下面通过示例配合注释的方式来逐一介绍HTML中各个标签的作用。
<!-- 声明html文档类型为 html5 -->
<!DOCTYPE HTML>
<html>
<!-- <head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style> -->
<head>
<!--meta 标签定义网页的一些基本信息，能被搜索引擎爬取-->
<meta name="author" content="ring2">
<meta name="keywords" content="HTML, CSS,JavaScript">
<!--这是定义网页的标题-->
<title>HTML 教程</title>
<!-- link 标签链接外部样式表 定义了h1的颜色为red-->
<link rel="stylesheet" href="style.css">
</head>
<!--标签内可以拥有属性，任何标签都可以有的属性称为全局属性-->
<!--常见的全局属性： class、id、style 后续介绍-->
<!--块级元素结束后自动换行-->
<!-- body标签内定义的元素为html文档的主体内容-->
<body>
<!--h1 ~ h6 为逐级递减的标题 ，块级元素 -->
<h1>这是一级标题h1</h1>
<!--水平线hr起到分隔的作用,为单标签-->
<hr />
<!--这是段落标签-->
<p>这是一段段落 p</p>
<!--br标签为换行标签 单标签-->
<br />
<!--style全局属性可以改变元素的样式，如颜色、字体大小、文本的水平对齐方式等等,后续学习css可了解更多-->
<p style="color: coral;font-size:20px; text-align: center;">你好 style</p>
<hr />
<h2>文本格式化标签</h2>
<!-- 文本加粗-->
<strong>This text is文本加粗 strong</strong>
<br />
<!--文本倾斜-->
<em>文本倾斜 em</em>
<br />
<!--文本倾斜-->
<i>文本倾斜 i</i>
<!--预格式 保留输入时的样子-->
<pre> 不会去除空格和换行
保留原来输入的样子 pre
</pre>
<!-- 这是引用 -->
<q>这是短引用，替你加引号 q</q>
<!-- 这是长引用 -->
<blockquote>这是长引用,加上外边距。 blockquote</blockquote>
<!--超链接的使用-->
<h2>超链接的使用</h2>
<br />
<!--这是超链接标签，点击跳转到href属性定义的url上、 target属性定义为_blank则在新标签页中打开,不设置则在当前页面打开-->
<!--style 中使超链接去除下划线 -->
<a href="http://www.baidu.com" target="_blank" style="text-decoration: none;">go to 百度 </a>
<hr />
<a href="#here">去锚那里</a>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>1</p>
<!--name属性定义了超链接的锚，就像是url。 其他超链接中的href属性填写name的属性值则会跳转到锚处-->
<a name="here">来这里，这是超链接的锚</a>
<!--图像img 单标签 alt: 图片无法加载时的文本显示，align：图片在行内的位置-->
<img src="img.jpg" alt="图片加载出错" align="left" style="width: 50px; height:50px;">
<br />
<br />
<br />
<!--典型的块级元素和内联元素-->
<div>div为最常使用的块级元素，常搭配css进行网页部分区域渲染</div>
<span>span为内联元素，也称行内元素，不会进行自动换行</span>
</body>
</html>
内容参考自：W3C
浙公网安备 33010602011771号