HTML入门教程

HTML入门教程

前提：认识网页

​ 文字，图像，超链接，视频，音频，Flash等组成

常见浏览器

​ 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

浏览器内核

	浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

（1）Trident(IE内核)

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。

代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

（3） webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

（4） Bink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 大部分国产浏览器最新版都采用Blink内核。

（5） Presto(Opera)

Presto 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

Web标准

​ 规范浏览器解析

优点：

​ 1.web发展更广阔

​ 2.内容能被更多设备访问

​ 3.更容易被搜索引擎搜索

​ 4.使网站更易维护

构成：

​ Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分.

HTML

​ Hyper text markup language 超文本标记语言 主要是对网页的文本，图片，声音进行描述。

HTML骨架格式

html标签 是所有标签的根节点

head标签 用于存放title meta base style script link

title标签 展示页面标题

body标签 页面的主题部分，用于存放所有标签

HTML标签分类

1.双标签

​ 有闭合标签的叫做双标签

2.单标签（比较少）

​

---

HTML标签关系

​ 嵌套

​ 同级

属性语法

大多数单标记和双标记的始标记内部都可以包含一些属性。

<标记名字 属性1 属性2 …>

例如单标记表示在文档当前位置插入一幅图片。

其中src属性规定显示图像的路径，width属性设置图像的宽度，height属性设置图像的高度，alt属性规定图像的代替文本，src属性为必需属性，其他属性为可选属性。

注意事项

1.所有标记都要用尖括号<>括起来

2.双标签不要漏写

3.在代码中，不区分大小写

4.标记不要有空格

HTML标签

标题标签：

​ h1-h6根据重要性递减

<h1></h1>
<h2></h2>...

段落标签：

	paragraph  

<p> 文本内容 </p>

水平线标签：

​ horizontal

<hr />

换行标签：

​ break

<br />

块级标签：

​ divison:区域，划分，切割

​ span：跨度

<div></div>
<span></span>

文本格式化标签：

在网页中，有时需要为文字设置粗体、斜体、删除线下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

<b></b>     <strong></strong>粗体
<i></i>     斜体

图像标签：

​ image 图像

<img src="URL"/>

链接标签：

​ anchor 铁锚

<a href="" targe="">

base标签：

​ base可以设置整体链接的打开状态

注释标签：

<!-- 注释语句 -->

列表标签

无序列表 ul

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

有序列表 ol

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>