HTML简介及a个别标签

HTML简介及a个别标签

开发工具与关键技术：VS/ HTML
作者：
撰写时间：2019年5月8日

HTML基础

	HTML 是用来描述网页的一种语言；
	HTML 指的是超文本标记语言 (Hyper Text Markup Language)；
	HTML 不是一种编程语言，而是一种标记语言 (markup language)；
	标记语言是一套标记标签 (markup tag)；
	HTML 使用标记标签来描述网页；
	HTML 文档 = 网页
	    	1、HTML 文档描述网页；	
			 2、HTML 文档包含 HTML 标签和纯文本；		
			 3、HTML 文档也被称为网页；
	HTML 文档是由 HTML 元素定义的。
		HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，也就是HTML标签。
		HTML标签：通常是成对出现的，标签对中的第一个标签是开始标签，第二个标签是结束标签，标签为小写状态。
		注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
	HTML 元素语法：
		1、HTML 元素以开始标签起始 ；		                    
		2、HTML 元素以结束标签终止 
		3、元素的内容是开始标签与结束标签之间的内容 ；        
		4、某些 HTML 元素具有空内容（empty content）；
	    5、空元素在开始标签中进行关闭（以开始标签的结束而结束）；
	    6、大多数 HTML 元素可拥有属性 ；
	HTML 文档由嵌套的 HTML 元素构成：大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
	HTML 属性：
		HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
		属性总是以名称/值对的形式出现，比如：name="value"。  属性总是在 HTML 元素的开始标签中规定。
	要求：小写属性；
	
	始终为属性值加引号；
	
	属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
	在某些个别的情况下，比如属性值本身就含有双引号，那么就必须使用单引号，
		如：name="view ' Gates' port"
		
	适用于大多数 HTML 元素的属性：
		Class：classname  规定元素的类名（classname）；       id：id  规定元素的唯一 id；
		style：style_definition  规定元素的行内样式（inline style）；
		title：text  规定元素的额外信息（可在工具提示中显示）；
		
	HTML 输出：
		当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
		需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
		对于 HTML，将无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
		
	HTML 折行：即换行；
		如果希望在不产生一个新段落的情况下进行换行（新行），请使用<br />标签：
		如需要页内容换行就使用<br>标签，VS里出现的直接是：<br />；
		因为该元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
		即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
		
	HTML 编辑器：一款简单的文本编辑器是学习 HTML 的好方法。
	      通过记事本，依照以下四步来创建一张网页。
	步骤一：启动记事本
	步骤二：用记事本来编辑 HTML
		在记事本中键入 HTML 代码：

	步骤三：保存 HTML
		在记事本的文件菜单选择“另存为”。
		当你保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据个人的喜好。
	步骤四：在浏览器中运行这个 HTML 文件
		启动你的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击你的 HTML 文件。
	1、HTML 标题标签。
		<h1>~<h6>

	但是：不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。
	注释：浏览器会自动地在标题的前后添加空行。
		默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
	
	HTML 水平线：
	<hr />标签在 HTML 页面中创建水平线。  hr 元素可用于分隔内容。
	提示：使用水平线 <hr>标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
	 	  <hr>和<hr />一样，但它们之间并非开始和结束关系。
	
	HTML 注释：<!--...--> 标签：注释标签用于在源代码中插入注释，注释不会在浏览器中显示。
	提示：合理地使用注释可以对未来的代码编辑工作产生帮助。  
			此方法不适用于<script></script>标签和<style> </style>标签里面。
		不要忘记结束标签：不允许省略结束标签。忘记使用结束标签会产生意想不到的结果和错误。
		
	2、a标签：
	HTML 链接是通过 <a> 标签进行定义的。  
	 注释：在 href 属性中指定链接的地址。
	开始标签和结束标签之间的文字被作为超链接来显示。
	
	1.1、通过使用 href 属性 - 创建指向另一个文档的链接；

	<a href="xxx .html">…</a>xxx .html为文件名称，
	此效果是:点击这a标签跳转到本地该文件页面；

    <a href="http://www.baidu.com.cn/">Visit baidu!</a>
    点击这个超链接会把用户带到 该网页 的首页。
    
	提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
		如果在href=””里面添加JavaScript:;页面刷新时将不会跳转至顶部。
		
	HTML 链接 - target 属性：
		使用 Target 属性，就可以定义被链接的文档在何处显示。
		
	例：在新窗口打开文档：
	<a href="http://www.baidu.com.cn/" target="_blank">Visit baidu!</a>
	
	HTML 链接 - name 属性：通过使用 name 属性 - 创建文档内的书签。
	
	name 属性规定锚（anchor）的名称。也可以使用 name 属性创建 HTML 页面中的书签。
	书签不会以任何特殊方式显示，它对读者是不可见的。
	当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，
	这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
	
	命名锚的语法：    <a name="label">锚（显示在页面上的文本）</a>
	
	提示：锚的名称可以是任何你喜欢的名字。也可以使用 id 属性来替代 name 属性，命名锚同样有效。

	例：首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
		 <a name="tips">基本的注意事项 - 提示</a>
    然后，我们在同一个文档中创建指向该锚的链接： 
    		 <a href="#tips">提示</a>
    也可以在其他页面中创建指向该锚的链接：    
    		<a href="网址#tips">提示</a>
	在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
	
	注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：
		href="http://www.baidu.com.cn/html"，
	
	就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，
	然后创建一个新的请求，就像这样：href="http://www.baidu.com.cn/html/"。
	
	提示：
		1、命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，
			然后把链接到这些锚的链接放到文档的上部。这样就可以快速找到自己需要的内容。
		2、假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

1、<abbr></abbr>标签：定义缩写。
	<abbr>标签指示简称或缩写，比如 "WWW" 或 "NATO"。 
	通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
	<abbr>标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。
	提示：可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr>元素上时显示出简称//缩写的完整版本。
	The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
	如果不加 title 的话就是一纯文本；

1、<acronym></acronym> 定义首字母缩写。
	HTML5 中不支持 <acronym>标签。请使用 <abbr> 标签代替。
	<acronym title="World Wide Web">WWW</acronym>
	缩写能够作为单词来朗读，例如 NATO，NASA，ASAP，GUI。
	通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。
	提示：title 属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本。
	如果不加 title 的话就是一纯文本；
	
	1、<address></address>标签：定义地址。
	定义和用法：
		<address> 标签定义文档或文章的作者/拥有者的联系信息。
		如果 <address> 元素位于<body></body> 元素内，则它表示文档联系信息。
		如果 <address> 元素位于 <article></article> 元素内，则它表示文章的联系信息。
		<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
	提示：<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
	提示：<address> 元素通常连同其他信息被包含在 <footer></footer> 元素中。
	
	例：Example.com 的联系信息：
		<address>
                Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
                Visit us at:<br>     Example.com<br>     Box 564, Disneyland<br>     USA
        </address>
        
	1、<article></article>标签：规定独立的自包含内容。
		一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
		<article> 元素的潜在来源： 
		   1、论坛帖子 ；     
		   2、报纸文章 ；     
		   3、博客条目 ；     
		   4、用户评论 ；
		   注释：该标签无论开始标签还是结束标签前后若有文本存在将自动折行。
		借鉴于老师上课文档与W3Cchool