前端基础

概述：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

HTML和CSS的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML文件基本结构

<html>
    <head>...</head>
    <body>...</body>
</html>

<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、<meta>等标签
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来.

HTML的代码注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法:

<!-- 注释文字 -->

HTML文档树

Doctype 文档类型

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别：

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

HTML文档树之head信息

<head>

    <!-- 页面编码简写 -->
    <meta charset="UTF-8">

    <!-- 自动刷新 -->
    <meta http-equiv="Refresh" Content="5">

    <!-- 自动跳转 -->
    <meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" />

    <!-- 标题 -->
    <title>标题</title>

    <!-- 页面关键字 -->
    <meta name="keywords" content="关键字1,关键字2,关键字3,关键字4,关键字5">

    <!-- 描述 -->
    <meta name="description" content="HTML" />

    <!-- icon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- 调用CSS样式 -->
    <link href="css.css" rel="stylesheet" type="text/css">

    <!-- CSS样式段 -->
    <style>
        /* CSS样式 */
    </style>

    <!-- JS标签 -->
    <!-- 引用JS代码 -->
    <script type="text/javascript" src="static/js/test.js"></script>

    <!-- 写JS代码 -->
    <script type="text/javascript">
        // 代码块
    </script>

</head>

内联标签（行内标签）和块级标签

块级元素—h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等。
内联元素—a,b,br,em,i,img,input,strong,textarea,span,label等。

他们两个的区别：

块级元素一般用来搭建网站架构、布局、承载内容
内联元素一般用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。
它们可以互相转换。display:inline|block
块级元素的特点：每一个块级元素都识从一个新行开始显示，其后的元素需要另起一行。
内敛标签的特点:位置多少就占用多少,不会另起一行.

他们最大区别在于块元素后面的其他东西会被换到下行，而内联元素后面的东西不会：

<div>块后面的元素会被挤到下一行</div>
<a>连接</a>

<a>我是链接，后面的链接会在一行上继续挨着我</a>
<a>我会挨着上一个链接</a>

HTML <body>段常用标签

标题 <hn>

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

```

<p></p>

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。

语法：
```
<p>段落文本</p>
```
<br />

可以使用<br />标签在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。

语法:

```

<strike></strike>

文字~~删除线~~

语法:

```

<b></b>

文字加粗加粗

语法:

内容
```

<em></em> <strong></strong>

em和strong标签是为了强调一段话中的关键字时使用，它们的语义是强调，em表示强调，strong表示更强烈的强调，浏览器中em默认用斜体表示，strong用粗体表示

语法:

需要强调的文本
需要强调的文本
```

<sub></sub> <sup></sup>

上下标 3₂ 3²

语法:

3₂
3²
```

<q>

短文本引用

语法:

引用文本

```

<blockquote>

长文本引用

语法: