HTML/CSS菜鸟系列-今天就说说&lt;a&gt;标签

lt;a>标签是常用的标签之一，今天就一起说说这个<a>标签，不足之处，还望指正。

<a>标签的作用：链接、下载、锚点等。其中最为重要的属性为href.

链接是其最基本的功能，例如：

<a href="#">这是一个链接</a>

<a href="##">这是一个链接</a>

那么这时候就会产生一个链接指向#或者##

第二个属性target

<a href="#" target=“_blank”>这是一个链接</a>

这时候，点击链接时，会在一个新的页面打开，那么target有哪些值呢？如下：

_self -- 在当前窗体打开链接,此为默认值

_blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接（我喜欢用name）

_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)（跳出框架）

我们做的都是文字链接，当然也可以生成图片链接：

下载功能：

<a href="#">下载</a> 此时#为文件地址

锚点功能：

此外，<a>标签还有伪类，伪类选择符包括：

① a:link：未访问链接 ,如 a:link {color:blue}

② a:visited：已访问链接 ,如 a:visited{color:blue}

③ a:active：激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue}

④ a:hover：鼠标移到链接上时 ,如 a:hover {color:blue}

一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。

前三者分别对应body元素的link、vlink、alink这三个属性。

【重要】四个“状态”的先后过程是：a:link ->a:visited->a:hover ->a:active。另外，a:active不能设置有无下划线（总是有的）。

TML 代码约定

很多 Web 开发人员对 HTML 的代码规范知之甚少。

在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。

使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。

而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。

使用正确的文档类型

文档类型声明位于HTML文档的第一行：

<!DOCTYPE html>

如果你想跟其他标签一样使用小写，可以使用以下代码：

<!doctype html>

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母：

混合了大小写的风格是非常糟糕的。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。

不推荐:

<p>这是一个段落。</p>

</SECTION>

非常糟糕:

<p>这是一个段落。</p>

</SECTION>

推荐:

<body>

<p>菜鸟教程，学的不仅是技术，更是梦想。

菜鸟教程，学的不仅是技术，更是梦想。

菜鸟教程，学的不仅是技术，更是梦想。</p>

</body>

表格实例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表实例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。

以下 HTML5 文档是正确的:

实例:

<!DOCTYPE html>

<head>

</head>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

尝试一下 »

不推荐省略 <html> 和 <body> 标签。

<html> 元素是文档的根元素，用于描述页面的语言：

<!DOCTYPE html>

声明语言是为了方便屏幕阅读器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。

省略 <body> 在旧版浏览器 (IE9)会发生错误。

省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。

默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

实例

<!DOCTYPE html>

<html>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

</body>

</html>

尝试一下 »

	现在省略 head 标签还不推荐使用。

元数据

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:

标题和语言可以让搜索引擎很快了解你页面的主题:

<!DOCTYPE html>

<head>

</head>

HTML 注释

注释可以写在  中:

比较长的评论可以在  中分行写：

<!--

这是一个较长评论。这是一个较长评论。这是一个较长评论。

这是一个较长评论这是一个较长评论。这是一个较长评论。

-->

长评论第一个字符缩进两个空格，更易于阅读。

样式表

样式表使用简洁的语法格式 ( type 属性不是必须的):

短的规则可以写成一行:

p.into {font-family: Verdana; font-size: 16em;}

长的规则可以写成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

将左花括号与选择器放在同一行。
左花括号与选择器间添加以空格。
使用两个空格来缩进。
冒号与属性值之间添加已空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用符号。
只有属性值包含空格时才使用引号。
右花括号放在新的一行。
每行最多 80 个字符。

	在逗号和分号后添加空格是常用的一个规则。

在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 尽量使用相同的命名规则。

访问 JavaScript 代码规范。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格，我们建议统一使用小写的文件名。

文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

区别在于：

.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。

在 Unix 系统中后缀没有特别限制，一般用 .html。

技术上区别

如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。

如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。

但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件吗。

不管怎样，HTML 完整的后缀是 ".html"。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

人问我前端课程难吗？这怎么说呢！天下事有难易乎?为之,则难者亦易矣不为,则易者亦难矣。

能不能自学成功贵在自我的坚持当然还有配合正确科学的方法。我负责科学的方法你负责坚持。

首先你需要一台个人电脑，最好不要是台式机，笔记本更佳，MAC系统的毕竟本更好，如果你的财力允许的话。笔记本更便于携带，几乎每个前端工程师都有自己的笔记本电脑，Mac系统更稳健好用，不像Windows运行几年就变慢了。

其次你需要安装一款适合自己的前端开发软件，也就是你的开发工具。

”假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。”--《劝学》

有一刻合适的开发工具会让你的效率提高很多，事半功倍。那么有哪些开发工具呢？

Dreamweaver是个由Macromedia公司所开发的著名网站开发工具，一个很古老的前端网站开发工具，多数前端工程师都用他起步的，DW的好处是，有设计和源码两种模式，所见即所得，功能齐全，非常适合刚入门的工程师，但不推荐大家使用DW ，虽然他功能强大但很多功没什么实际用处，所见即所得的开发方式也不利于工程师成长，重点是不免费啊，还的费劲儿去找破解版。

Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮，功能强大很多插件，安装方便，重点是免费，但还是不推荐初学者使用。

Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器，虽然一个轻量级的编辑器，但有丰富的插件和第三方支持，插件需要翻墙安装，对于初学者也不是太合适，不推荐使用。

WebStorm 是一款比较Nice 的JavaScript开发工具，被众多前端工程师誉为“Web前端开发神器” 主要是各种提示比较给力，而且除了代码管理，还提供了对ES6的支持。打开有点慢。可以选择使用。

hbuilder是一款知名的且广受好评的专门为前端研发的开发工具，而且全中文，语法库齐全和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。。其强大全面的提示功能、调试等功能，让程序员用起来感觉非常顺手，而且是免费的，推荐初学者使用。

没错记事本也能做为前端的开发工具，但很少有人使用这玩意儿，完全不推荐初学者使用。

好了工具装完了，完事具备了只欠东风，是不是就可以开始学习了呢？

莫慌，我们再看看网络上有哪些能帮助我们学习的网站。初级阶段不用花钱看免费的资料就行。网络上一抓一大把，主要是你的学会找到这些资料。

在线教育机构有很多，他们会提供一些免费的视频和成体系的课程，不过也是鱼龙混杂，死了一批活了一批。我推荐给不错的网站，供大家参考。

声明：所有排名不分先后

成立于2014年02月

极客学院也是一家纯粹做线上的在线教育平台，开设课程有前端，Python，go，Android和iOS。极客学院不同之处在于其模式类似于硅谷的培训机构Udacity，通过包月与包年的会员制，为学生提供相应的课程视频、文档资料。并且试水“一对一”的在线教育模式，当然了极客的模式和传统的“一对一”有所不同，极客学院的“一对一”主要指老师为学生一对一批改作业等，而在授课方式上，采取的依然是一对多模式。。

成立于2012年05月

麦子学院是比较纯粹做在线教育的IT培训教育平台，课程体系根据用户人群需求不同分为自学课和企业直通班（有导师进行跟踪辅导，基本上可以看做是把线下的培训模式实现了在线化），开设的课程种类非常的多，几乎涵盖了互联网的各个领域。

教学模式纯粹的在线化，课程可以在官网上找到，课程制作相对比较优质。

成立于2013年8月

慕课网主打免费IT技能培训，当然了现在也有收费的实战项目课程。慕课网在所有的在线培训平台中算是口碑比较良好的一个吧，这可可能和其免费优质的策略有关。就课程体系而言慕课网也几乎涵盖了所有的课程分类，课程特色为其规划好的一些职业体系，方便一些自学入门的用户可以按部就班的获得一个系统的知识体系。其次慕课网内置的代码编辑器也是非常的出色，所见即所得不需要配置本地环境，更加快捷，省去了很多的麻烦。

成立于2016年4月（进入国内的时间）

优达学城是一家来自硅谷的在线教育机构，“骨骼清奇”和硅谷多家世界知名企业达成合作，这也展示在其课程上，像人工智能，自动驾驶等课程算是国内独树一帜，但是对于国内大部分的学习者来说，其英文的课程是一个不小的挑战。优达学城独具特色的地方在于课程免费，对一些认证考试和就业介绍进行收费，作为其盈利点。

在其进入国内，根据国情也对少数的课程添加了汉语字幕，其次也努力的和国内的一些互联网企业寻求合作，目标群体基本上定位在专业度高计算机基础稳固的人群。

当然还有很多其他在线教育的网站，不过大多上来就弹窗，问你要不要报名啊，想尽办法让你花钱，烦。

不喜欢看视频的同学可以选择 W3C 菜鸟教程。这个教程简单易用，非常适用于初学入门者。

首先学习html5 了解各种标签的使用以及什么是语义化。当然只看html5是远远不够的，接下来就是css了。html5只是页面的结构编写更多美好的工作还需要css来完成，具体的学习周期大概2~3周，大家就能记的差不多了。

大家在菜鸟教程中可以到css和css3两种教程，学习顺序别搞错了是学完css再学习css3,因为css3是作为css的一个补偿存在的。

学习完css3就到了JavaScript学习阶段了

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。JavaScript之后还后ECAMScript6 哈哈

ES6的学习看看栾一峰的文件就可以了：http://es6.ruanyifeng.com/

这些都学完了就到框架阶学习段了，目前流行的前端框架有三种：

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单。

Angular2 是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。Angular2 是 Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开发组件。Angular2 发布于2016年9月份，它是基于ES6来开发的。

建议学习Vue.js 目前比较盛行，不会Vue都不好意思说自己是前端工程师了。

资料和路径都有了你可以开始自学了。不过一个学习一但遇到问题就麻爪了，一个小问题卡住能停下一个星期。如果能组团一起学习可以进行交流。

还有如果有人带你一起做项目是不是会更快呢？

最好找一个行内人士为师，好随时进行指点，才可事半功倍。

欢迎关注，小故事演绎大前端。多多交流，一起学习。

在线咨询

上一篇：HTML基础之HTML常用标签
下一篇：PyQt5-5.控件使用2（Radio Button、Check Box）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML/CSS菜鸟系列-今天就说说&amp;lt;a&amp;gt;标签

您的项目需求

HTML/CSS菜鸟系列-今天就说说<a>标签