网页开发基础01

一、HTML基础

（一）HTML简介

1、HTML

• HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。

2、HTML语言的基本格式

3、<!DOCTYPE>声明

• 声明必须是 HTML 文档的第一行，位于 标签之前。声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范，网页在开头处使用声明为所有的HTML文档指定HTML版本和类型，这样浏览器将该网页作为有效的HTML文档，并按指定的文档类型进行解析。声明和浏览器的兼容性相关，声明被删除后，如何展示HTML页面的权利就交给了浏览器，即页面的显示效果由浏览器决定。

4、html标签

• 标签位于声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，标签标志着HTML文档的开始，标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。

5、head标签

• 标签用于定义HTML文档的头部信息，也被称为头部标签。标签紧跟在之后，主要用于封装其他位于文档头部的标签，如

6、body标签

• 标签用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标签内，才能最终展示给用户。需要注意的是，一个HTML文档只能含有一对标签，且标签必须在标签内，位于标签之后，与标签是并列关系。

7、编写第一个网页

• 在D:\web_work里创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个文本文件（.txt后缀），将文件的名称更改为htmlDemo01，后缀名改为.html。
• 
• 在htmlDemo01.html文件中编写代码
  

8、关于编写HTML文件的工具

• 读者在编写HTML文件时，可以使用系统自带的记事本编写，也可以使用Notepad++、EditPlus、UltraEdit、HBuilder或IDEA等工具编写HTML文件，当使用工具创建HTML文件时，文件中的基本标签会被自动创建，编辑工具还会有代码颜色和代码提示功能，开发者只需根据需求完善功能代码即可，工具的使用有助于提高编码效率，减少出错率。
• Notepad++编辑器
• HBuilder开发工具
• IDEA开发工

9、HTML标签概述

（1）单标签

• 单标签也被称为“空标签”，是指用一个标签符号就可以完整地描述某个功能的标签。
  单标签基本语法格式：<标签名 />
  注意：在标签名与“/”之间有一个空格，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。
  为什么要有单标签？HTML标签的作用原理是选择网页内容进行描述，也就是说需要描述谁，就选择谁，所以才会有双标签的出现，双标签有开始和结束标签。而单标签本身就可以描述一个功能，不需要选择谁，例如水平线标签
  ，按照双标签的语法，它应该写成“
  ”，但是水平线标签不需要选择谁，它本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称后面加一个关闭符

（2）双标签

（3）注释标签

二、常用的HTML标签

（一）段落、行内和换行标签

（二）文本样式标签

（三）表格标签

（四）表单标签

1、表单域<form>

2、表单控件<input>

（五）多行文本标签

（六）列表标签

1、无序列表

2、有序列表

3、定义列表

（七）超链接标签

（八）图像标签

三、CSS技术

（一）初识CSS

1、CSS的作用

2、CSS的定义

3、CSS的计量单位

4、CSS中颜色的取值

（1）预定义的颜色值

（2）十六进制表示的颜色值

（3）RGB代码表示的颜色值

（二）CSS样式的引用方式

1、行内式

2、内嵌式

3、外链式

4、导入式

（三）CSS选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

（四）CSS常用属性

四、JavaScript基础

（一）JavaScript概述

1、什么是JavaScript？

2、JavaScript的组成

（1）ECMAScript

（2）DOM（Document Object Model）

（3）BOM（Browser Object Model）

3、JavaScript的引入方式

（1）行内式

（2）内嵌式

（3）外嵌式

4、JavaScript的数据类型

5、JavaScript的变量和关键字

6、JavaScript的运算符

（1）算术运算符

（2）比较运算符

（3）逻辑运算符

（4）赋值运算符

（5）三元运算符

7、运算优先级

8、条件if语句

（1）单向判断语句

（2）双向判断语句

（3）多向判断语句

（二）DOM相关知识

1、什么是DOM

2、DOM树的结构图

3、DOM节点的关系

（1）子节点

（2）父节点

（3）兄弟节点

4、节点的访问

5、Node对象的常用属性

6、获得文档的指定元素

（1）通过元素的id属性获取元素

（2）通过元素的name属性获取元素

（三）BOM相关知识

1、什么是BOM

2、window.onload 加载事件

3、document.DOMContentLoaded加载事件

（四）JavaScript的使用

1、函数的定义及调用

2、事件处理

3、JavaScript常用的事件类型

4、JavaScript常用对象

（1）window对象

（2）Date对象

（3）String对象

5、脚本案例 - 登录表单非空校验

五、Bootstrap框架基础

（一）Bootstrap框架简介

1、什么是Bootstrap

2、Bootstrap的特点

（1）响应式设计

（2）移动设备优先

（3）浏览器支持

（4）低成本、易上手

（5）CSS预编译

（6）框架成熟

（7）丰富的组件库

（二）Bootstrap框架的下载

1、三种下载方式

2、下载安装压缩包

六、Bootstrap框架的常用组件

（一）按钮

（二）导航

（三）面包屑导航

（四）分页

（五）列表

（六）表单