前端开发(1)-HTML入门与实践1

发表于
字数统计 1k | 阅读时长 4

系列课程地址：戳这里。
系列课程共分为三部分：阶段 1：HTML+CSS；阶段 2：JavaScript；阶段 3：开发工具；阶段 4：前端框架；阶段 5：移动及服务端开发。
这里介绍阶段 1：HTML+CSS中的第一部分：HTML入门与实践；

Web基础

浏览器内核

  1. Trident(IE内核)
    国内许多双核浏览器其中一核便是Trident，美名其曰“兼容模式”。代表：IE、傲游、世界之窗、猎豹、360极速、百度……Windows10发布之后，IE将其内置浏览器命名为Edge，最显著特点就是其新内核EdgeHTML。

  2. Gecko(firefox)
    火狐浏览器采用该内核，特点是代码完全公开，因此开发程序较高，可惜遇到了猪一样的队友flash，神一样的对手chrome，故这几年已经没落。

  3. Webkit(safari)
    代表：safari、傲游3、Android4.4之前默认浏览器。

  4. Chromium/Bink(chrome)
    内置于chrome浏览器中，大部分国产浏览器最新版都采用Bink内核，以及Android4.4之后默认浏览器。

Web标准

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

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

理想状态的源码：.html .css .js

HTML入门

html骨架

1
2
3
4
5
6
7
<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

标签及分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。

1.双标签

1
<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

1
比如 <body>我是文字  </body>

2.单标签

1
<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

1
比如  <br />

开发工具sublime

在页面中输入 以下2个单词

  1. html: 5
  2. !

在sublime里面然后按下tab键盘即可生成HTML骨架。
注意：我这里在官网下载安装sublime text3之后，上述功能并不能使用，解决办法如下：

1
2
3
4
5
1.Preference ==> Browser Packages，打开文件夹，发现只有一个User文件夹；
2.下载emmet-sublime-master.zip，解压，下载地址：https://github.com/sergeche/emmet-sublime/archive/master.zip
，将解压好的文件夹——复制到第一步所提到的文件夹中；
3.重启sublime，PyV8文件夹自动加载；
4.打开sublime，用command + shift + p调出命令窗口，输入install,选中package control：install package，等待1-2秒，下拉选中emmet回车，等待2-3秒，重启sublime。

文档类型<!DOCTYPE>

1
<!DOCTYPE html>

这句话就是告知我们使用的是 html 5 的版本。html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

字符集

utf-8是目前最常用的字符集编码方式，使用utf-8这样就避免出现字符集不统一而引起乱码的情况了。

注：转载文章请注明出处，谢谢~