前端学习之路html基础(01)—

HTML：是用来描述网页的一种语言

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
-

HTML 标签：通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如<b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

声明和编码

在文件中引用<!DOCTYPE html>声明有助于浏览器正确地显示网页，声明中其所有字母均不区分大小写；
为了防止在浏览器中的中文出现乱码，我们一般需要在头部声明为UTF-8；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>页面标题</title>
</head>
<body>
<p>hello world</p>
</body>
</html>

html编辑器

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/

html头部<head>

<head>元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以在头部添加的元素标签为：<title>、<style>、<meta>、<link>、<script>、<noscript>、<base>；

<title>元素

定义了不同文档的标题，它在html文档中是必不可少的；
它定义了浏览器工具的标签、收藏夹时的标题、显示在搜索引擎结果页的标题；

<!DOCTYPE html>
<html>
<head><title>this is title</title>
</head>
<body>
this is body
</body>
</html>

<base>元素

描述了基本的链接地址、链接目标，该链接作为html文档中所有链接的默认链接地址。
如果html文档中<a>没有设置具体的值，则使用该默认链接。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <base href="http://www.runoob.com/images/" target="_blank">
</head><body><img src="logo.png"><br>
- 注意这里我们设置了图片的相对地址,图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br><a href="http://www.baidu.com">百度一下</a><br>
- 注意这个链接会在新窗口打开，因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。</body>
</html>

<link>元素

标签定义了文档与外部资源之间的关系。
标签通常用于链接到样式表:
ink 元素是空元素，它仅包含属性。
此元素只能存在于 head 部分，不过它可出现任何次数。

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

<style>元素

标签定义了HTML文档的样式文件引用地址.
在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。

<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">h1 {color: red;}p  {color: blue;}
</style><title>页面标题</title>
</head>
<body>
<h1>demo标题</h1>
<p>hello world</p>
</body>
</html>

<meta>元素

描述了一些基本的元数据；
浏览器会解析元数据，但是在页面上不会体现出来
一般元数据都定义在<head>部分；
为搜索添加关键字

<!doctype html>
<html>
<head><meta charset="utf-8"><title>页面标题</title><!-- 为搜索添加关键字 --><meta name="keywords" content="html, css, html5"><!-- 为网页添加描述性内容 --><meta name="description" content="this is the tag named meta"><!-- 定义网页作者 --><meta name="author" content="qidl"><!-- 每个n秒刷新页面 --><meta http-equiv="refresh" content="5">
</head>
<body><h1>demo标题</h1><p>hello world</p>
</body>
</html>

<scrip>元素

用于加载脚本文件，如JavaScript，以后会加以学习。

html标题、段落、文本格式化

<h1>-<h6>标题

<h1>表示最大标题，<h6>表示最小标题。

<p>段落

数据分段显示，默认换行，会忽略其中多余的空格和换行。

<br>换行

标签插入一个简单的换行符。

<hr />水平线

标签在 HTML 页面中创建水平线，用于分隔内容。

<!doctype html>
<html>
<head><meta charset="utf-8"><title>页面标题</title>
</head>
<body><h1>demo标题1</h1><hr /><h2>demo标题2</h2><h3>demo标题3</h3><h4>demo标题4</h4><h5>demo标题5</h5><h6>demo标题6</h6>
</body>
</html>

<b>粗体
<em>着重文字
<i>斜体
<small>小号字
<big>大号字
<strong>加重语气
<sub>下标字
<sup>上标字
<ins>插入字
<del>删除字

<!doctype html>
<html>
<head><meta charset="utf-8"><title>页面标题</title>
</head>
<body><b>粗体</b><br><em>着重文字</em><br><i>斜体</i><br><small>小号字</small><br><big>大号字</big><br><strong>加重语气</strong><br><sub>下标字</sub><br><sup>上标字</sup><br><ins>插入字</ins><br><del>删除字</del><br><b><i>加粗斜体字</i></b><br>
</body>
</html>

<code>计算机代码
<kbd>键盘码
<samp>计算机代码样本
<var>变量
<pre>预格式文本

<!doctype html>
<html>
<head><meta charset="utf-8"><title>页面标题</title>
</head>
<body><code>计算机代码</code><kbd>键盘码</kbd><samp>计算机代码样本</samp><var>变量</var><pre>日照香炉生紫烟
下一句话是啥忘了  ......</pre>
</body>
</html>

<abbr>缩写，在浏览器显示缩写内容，鼠标放置此处显示隐藏内容；
<address>地址
<bdo>文字方向
<blockquote>长的引用
<q>短的引用语
<cite>引用、引证，定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
<dfn>一个定义项目

<!doctype html>
<html>
<head><meta charset="utf-8"><title>页面标题</title>
</head>
<body>合肥有个<abbr title="中国科学技术大学">科大</abbr><address>qdl, china<br>2017.02.21</address><p>正常的文字显示方向</p><p><bdo dir="rtl">正常的文字显示方向</bdo></p><blockquote>今天天气不错，气温有所回升，但是雾霾还在...</blockquote><p>一位伟人曾经说过<q>人饿了就要吃饭</q></p><p>这部伟大的作品叫<cite>金瓶梅</cite></p>
</body>
</html>

html中的链接

我们用标签<a>来设置超文本链接。超链接可以是一个字、一个词、一组词、一幅画等等。
<a>中使用了href属性来描述链接的地址。
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

target属性

使用target属性可以定义被链接的文档在何处显示；
target=”_blank”会显示新的窗口；；

id属性

可用于创建在一个HTML文档书签标记。
书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”http://www.baidu.com”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.baidu.com/”。

<!doctype html>
<html>
<head><meta charset="utf-8"><title>页面标题</title>
</head>
<body><p>创建图片链接:</p><a href="http://www.baidu.com/"><img src="girl01.jpg" alt="妹子哇" width="200" height="200"></a><p><a href="#C1">查看第一部分</a><br><a href="#C2">查看第二部分</a></p><p id="C1">這就是第一部分</p></body>
</html>