目录
不熟悉的内容备注：
1. 浏览器内核
2. 文本标签文本标签
3. 超链接标签的target属性
4. 锚点
5.base标签
6. 表格的结构
7. 表格的属性
课程安排：
- 前端基础：
- html 2天
- css 7天
- 传统布局 9天
- HTM5+CSS3 3天
- 高级：
- js
- 移动web
- php
- node.js
- vuejs
- 其他框架
- 微信
1. 开发工具
- Chrome
- Typora
- photoshop
2. 浏览器内核
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
-
渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
-
JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。
- Trident(IE内核)
国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。
代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。
-
Gecko(firefox)
Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 -
webkit(Safari)
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。
现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器， -
Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。二次开发 -
Presto(Opera)
Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 -
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的
3. Web标准
- 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要
- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
4. HTML结构
4.1 单标签与双标签
4.2 标签的嵌套关系 和 并列关系
4.3 DOCTYPE
<!DOCTYPE html>
4.4 meta-charset
<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312:
- gb2312 简单中文 包括6763个汉字
- BIG5 繁体中文 港澳台等用
- GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- UTF-8则包含全世界所有国家需要用到的字符
5. HTML标签
5.1 普通标签
| 标签 | 含义 |
|---|---|
<head> |
HTML文档头部信息 |
<title> |
HTML文档标题 |
<h1> ~ <h6> |
文本标题 |
<p> |
段落 |
<hr> |
水平线horizontal |
<br> |
换行符 |
<div> |
块状布局 |
<span> |
跨度布局 |
注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。
5.2 文本格式化标签
| 标签 | 显示效果 |
|---|---|
<b></b> <strong></strong> |
文本以粗体方式显示 |
<i></i><em></em> |
文本以斜体方式显示 |
<s></s><del></del> |
文本以 |
<u></u><ins></ins> |
文本以下划线方式显示 |
b i s u只有使用 没有 强调的意思 ,但网页中常用它们做一些小点缀strong em del ins语义更强烈
5.3 图像标签
<img src="" alt="" title="" />
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像路径 |
| alt | 文本 | 图像无法展示时显示的文本 |
| title | 文本 | 鼠标悬停时的内容 |
| width | 像素 | 图象宽度 |
| height | 像素 | 图象高度 |
| border | 数字 | 图像边框宽度 |
width和height只要设置一个就行了，图片会按比例缩放；都设置容易让图像变形
5.4 超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
注意：
- 外部链接 需要添加
http://，比如：http:// www.baidu.com - 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“
#”(即href="#")，表示该链接暂时为一个空链接。 - 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
5.4.1 锚点
<!-- 1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）-->
<a href="#two">
<!-- 2.使用相应的id名标注跳转目标的位置。-->
<h3 id="two">第2集</h3>
5.5 base标签
base 可以设置整体链接的打开状态
<head>
<base target="_blank" />
</head>
5.6 特殊字符标签
5.7 注释标签
5.8 路径
相对路径
- 同级目录
- 上级目录
- 次级目录
绝对路径
- 完整磁盘地址：
D:\web\img\logo.gif - 完整网络地址：
http://www.sina.com.cn/images/logo.gif
6. 列表
ul
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。
ol
dl
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
7. 表格
结构：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>列名</th>
<th>列名</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
</tr>
</tbody>
</table>
table标签本身只是一个表格的框，几行几列是由tr和td决定的tr必须在table标签中，td必须在tr中，tr中只能包含td- caption 标签必须紧随 table 标签之后，且对每个表格只能定义一个标题
7.1 表格属性
| 属性名 | 含义 | 常用值 |
|---|---|---|
| border | 表格边框 | 像素 |
| cellspacing | 单元格与单元格/表格边框之间的距离，类似于单元格的margin | 像素（默认为2像素） |
| cellpadding | 单元格内容和单元格的距离，类似于单元格的padding | 像素（默认为1像素） |
| width | 表格宽度 | 像素 |
| height | 表格高度 | 像素 |
| align | 表格在页面中的水平对齐方式 | left, center, right |
tr和td也可以设置align，作用是内容水平局中；它们也有宽高
7.2 合并单元格
td或者th设置属性:
- rowspan: 跨行
- colspan：跨列
8. 表单标签
表单通常由 表单控件（也称为表单元素）、提示信息 和表单域3个部分构成。
8.1 表单控件
<input type="text" />
<input type="password" maxlength="12"/>
<input type="radio" checked=“checked ” name="male" />
<input type="checkbox" checked=“checked ”name="hobby" />
<input type="button" name="btn1" value="按钮" />
<input type="submit" name="btn1" value="提交" />
<input type="reset" name="btn1" value="重置" />
<input type="image" src="PATH/TO/IMAGE" /> <!--图象提交 -->
<input type="file" />
8.2 label
<label for="male">Male</label> <!-- for属性指定别的控件id -->
<input type="radio" name="sex" id="male" value="male">
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
8.3 textarea
<textarea cols="每行中的字符数" rows="显示的行数" style="resize:none;">
文本内容
</textarea>
8.4 select
<select name="" >
<option value="1" selected="selected">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
...
</select>
8.5 form
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/