第一章 Web基础

  • 浏览器：渲染网页展示

1、常见浏览器

  • IE、Edge
  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera

2、浏览器内核

  • 浏览器内核可以分成两部分：渲染引擎（Layout engineer 或者 Rendering Engine）和 JS 引擎。

  • 渲染引擎负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后输出至显示器或打印机。

  • JS引擎则是解析JavaScript语言，执行JavaScript语言来实现网页的动态效果。

    Trident（IE内核）

  • IE、Edge、360

  • 大多多核浏览器的兼容内核

    Gecko（firefox内核）

  • 代码开源，可开发程度高

  • 打开速度慢、升级频繁

    webkit（Safari内核）

  • 早期chrome使用webkit内核，现在改为blink

    chromium/Blink（chrome内核）

  • blink实际上是webkit的分支

    Presto（opera内核）

  • presto是opera早期内核，现在已经换为谷歌的blink内核。

    移动端的浏览器内核

移动端的浏览器内核说的是系统内置浏览器的内核。

ios平台主要是webkit，Android 4.4之前的内核是webkit，后面切换到了chromium，Windows Phone 8的内核是Trident。

3、web标准

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

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。

样式标准：表现用于设置网页元素的板式、颜色、大小等外观样式，主要指的是CSS。

行为标准：行为是指网页模型的定义以及交互的编写，主要包括DOM和ECMAScript两个部分。

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

第二章 HTML入门

1、HTML初识

  • HTML（英文Hyper Text Markup Language的缩写），中文译名为“超文本标签语言”，主要是通过对HTML标签对网页中的文本、图片、声音等内容进行描述。
<strong>加粗文本</strong>

2、骨架格式

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

3、标签

（1）必要的标签

  • html标签：作为所有html中标签的一个根节点
  • head标签：用于存放title、meta、base、style、script、link，head标签中必须设置的标签是title
  • title标签：页面标题
  • body标签：页面主体部分

（2）标签分类

  • 在HTML页面中，带有<>符号的元素被称为标签或元素。

  • 1、双标签：该语法中<标签名>表示该标签的作用开始，一般称为开始标签；表示该标签的作用结束，一般称为结束标签。

<标签名>内容</标签名>
  • 2、单标签：单标签也称空标签，是指一个标签符号即可完整地描述某个功能的标签。
<标签名/>
比如 <br />

（3）标签嵌套和并列关系

  • 嵌套关系：html嵌套head，head嵌套title
<head>	<title></title>		</head>
  • 并列关系：比如head和body
<head></head>
<body></body>
  • 下列哪个标签是错误的？
A	<head></head><body></body>
B	<strong><div></div></strong>
C	<head><title></head></title>	X
D	<body><div></div></body>

4、开发工具：快速生成标签、骨架

  • Dreamweaver
  • sublime
  • WebStorm
  • HBuilder
  • VSCode

5、doctype文档类型

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

6、字符集简介

<meta charset="UTF-8">
  • utf-8是目前最常用的字符集编码方式，还有gbk和gb2312等较常用。
  • GB2312简单中文，包含6763个汉字
  • GBK包含全部中文字符，是GB2312的扩展，兼容GB2312
  • UTF-8包含全世界所有国家需要用到的字符

第三章 HTML标签

1、标签的语义化

  • 标签语义化即标签的含义。
  • 语义化标签
1、方便代码的阅读和维护
2、同时让浏览器方便解析
3、搜索引擎优化
核心：合适的地方给一个合理的标签。
语义良好：去掉CSS后，网页结构依然组织有序，并且有良好的可读性。
原则：先确定语义的HTML，再选合适的CSS。

2、排版标签

  • 排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签。

（1）标题标签

  • 单词缩写head，头部、标题
  • HTML提供了6个等级的标题：< h1 >到< h6 >
  • 语义：作为标题使用，并且依据重要性递减
  • 最小到6级标题，数字再大无效
<html>
	<head>
		<title>标题标签测试</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

（2）段落标签

  • 单词缩写：paragraph
  • 就像写文章一样的，对内容分段
<p>一段文字</p>
  • 是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

（3）水平线标签

  • 单词缩写：horizontal 横线
  • 在网页中用水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以通过标签完成。
  • 单标签
<hr/>
  • 在网页中显示默认样式的水平线。

（4）换行标签

  • 单词缩写：break 打断，换行
  • 在HTML中，一个段落中的文字会从左到右依次排列，知道浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。
  • 单标签
<br />

（5）div span标签

  • div就是division的缩写
  • span 跨度，跨距；范围
  • div和span是没有语义的，是网页布局主要的两个盒子
<div> 这是头部 </div>	<span>今日价格<span>

3、文本格式化标签

  • 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊方式显示。
  • 表格中的标签不带内左右不带空格，因为CSDN不加空格显示不出来
标签 显示效果
< b >< /b >，< strong >< /strong > 文字以粗体方式显示（XHTML推荐使用strong）
< i >< /i >，< em >< /em> 文字以斜体方式显示（XHTML推荐使用em）
< s >< /s >，< del >< /del > 文字以加删除线方式显示（XHTML推荐使用del ）
< u >< /u >，< ins >< /ins > 文字以加下划线方式显示（XHTML推荐使用ins）
  • 四列的后者语义更强烈

4、标签属性

  • 属性就是特性，使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置，其基本语法如下：
<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>
  • 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均用空格分开。
  • 任何标签的属性都有默认值，省略该属性则取默认值。
  • 采取 键值对 的格式 key=“value”
  • 比如 水平线长度（宽）width为400，颜色为红色
<hr width="400" color="red" />

5、图像标签

  • 单词缩写：image 图像
  • 图像标签的语法如下：
<img src="图像URL" />
  • 图像标签的属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比） 设置图像的宽度
alt 像素（XHTML不支持%页面百分比） 设置图像的高度
border 数字 设置图像边框的宽度

6、链接标签

  • 单词缩写：anchor 锚
  • 创建超链接，需要用链接标签环绕被链接的对象即可，语法如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

  • href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。Hypertext Reference的缩写

  • target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

  • 注意：

    （1）外部链接 需要添加 http:// （2）内部链接 直接链接内部页面名称即可，比如 < a href=“index.hrml”>首页< /a> （3）如果当时没有确定链接目标时，通常将链接标签的href属性值定义为#，表示该链接暂时为一个空链接。 （4）不仅可以创建文本超链接，在网页中的各种元素，如图像、表格、音频、视频等都可以添加超链接。

7、锚点定位

  • 通过创建锚点链接，用户能快速定位到目标内容；比如CSDN博客的目录。
  • 创建锚点链接分两步：
1、使用以下语句创建链接文本
<a href="#id名">链接文本</a>
2、使用相应的id名标注跳转目标的位置

8、base标签

  • base可以设置整体链接的打开状态
  • 比如把链接都设置为新窗口打开
<head>
	<base target="_blank" />
</head>

9、特殊字符

  • HTML为这些特殊字符准备了专门的替代代码，可以用于CSDN博文。
  • 字符的代码中，&后没有空格，在CSDN博文中不加就被当特殊字符转义了
特殊字符 描述 字符的代码
空格 & nbsp;
< 小于号 & lt;
> 小于号 & gt;
& 小于号 & amp;
￥ 人名币 & yen;
© 版权 & copy;
® 注册商标 & reg;
° 摄氏度 & deg;
± 正负号 & plusmn;
× 乘号 & times;
÷ 除号 & divide;
² 平方（上标2） & sup2;
³ 立方（上标3） & sup3;

10、注释标签

  • 如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。语法如下：
<!-- 注释语句 -->
  • 注释内容不会显示在浏览器窗口中，但是作为HTML文档的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

11、路径

  • 路径可以分为：相对路径和绝对路径

  • 相对路径：

    （1）图像文件和HTML文件位于同一文件夹：只需要输入图像文件的名称即可。 （2）图像文件位于HTML文件的下一级文件夹：输入文件夹和文件名，之间用/分开。 （3）图像文件位于HTML文件的上一级文件夹：在文件名之前加“…/”，如果是上两级，则需要使用“…/…/”，以此类推。

  • 绝对路径：完整的地址信息。

12、列表标签

  • 容器内装载着文字或者图表的一种形式，叫列表。
  • 列表最大的特点是整齐、有序。
  • 列表分为无序列表、有序列表和自定义列表。

(1)无序列表 ul

  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。基本语法如下：
<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	···
</ul>
  • 注意事项：

< ul>< /ul>中只能嵌套< li>< /li>，直接在无序列表标签中输入其他标签或者文字的做法是不允许的。 < li>与< /li>之间相当于一个容器，可以容纳所有元素。 无序列表会带有自己的样式属性。

(2)有序列表 ol

  • 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	···
</ol>

(3)自定义列表

  • 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	···
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
</dl>