零、学习目标
熟悉HTML标签的使用
掌握CSS样式的引用方式
掌握CSS选择器的常用属性
熟悉DOM与BOM的相关知识
掌握JavaScript的使用
熟悉Bootstrap框架的下载与使用
掌握BootStrap框架的常用组件
一、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、编写第一个网页
二、常用的HTML标签
（一）段落、行内和换行标签
目标：熟悉HTML的段内、行内和换行标签
在chapter01文件夹中新建HTML文件htmlDemo02.html
（二）文本样式标签
目标：熟悉HTML的文本样式标签
在HTML中，使用标签控制网页中文本的样式，如字体、字号和颜色
标签的基本语法格式：<font 属性=“属性值”>文本内容
在chapter01文件夹中新建HTML文件htmlDemo03.html
- 源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo02</title>
<link rel="stylesheet" type="text/css" href="style02.css">
</head>
<body>
<div class="two">
<p><span class="title">相思</p>
<p> <span class="author">唐·王维</p>
<p>
<span class="content">红豆生南国，<br/>
春来发几支。<br/>
劝君多采撷，<br/>
此物最相思。<br/></span>
</p>
</div>
<div class="two">
<p><span class="title">锦瑟</p>
<p> <span class="author">李商隐</span></p>
<p><span class="content">
锦瑟无端五十弦，一弦一柱思华年。<br/>
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br/>
沧海月明珠有泪，蓝田日暖玉生烟。<br/>
此情可待成追忆? 只是当时已惘然。<br/>
</p>
</body>
</html>
（三）表格标签
目标：掌握表格标签，学会使用border属性改变表格的边框
在HTML网页中要想创建表格，需要使用相关的表格标签才能创建表格
在HTML网页中创建表格的基本语法格式
（四）表单标签
目标：掌握表单标签，学会使用表单标签收集数据信息
表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。
（五）多行文本标签
HTML提供了标签，通过此标签可以创建多行文本框。
标签基本语法格式
（六）列表标签
目标：掌握列表标签，包括无序列表、有序列表和定义列表
1、无序列表
无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。
定义无序列表的基本语法格式
2、有序列表
有序列表是一种强调排列顺序的列表，使用ol标签定义，内部可以嵌套多个li标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。
定义有序列表的基本语法格式
3、定义列表
定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。
定义列表的基本语法格式
（七）超链接标签
目标：掌握超链接标签的使用，可以使用超链接完成页面的跳转
超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
使用标签创建超链接的基本语法格式：文本或图像
标签是一个行内标签，用于定义超链接，href和target是标签的常用属性
（八）图像标签
目标：掌握图像标签，学会使用图像标签显示图像
要想在HTML网页中显示图像就需要使用图像标签
标签基本语法格式：
注意：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是标签的必需属性。图像源可以使本地图片文件，也可以是网络图片资源
在chapter01文件夹中添加一个名称为bear.png的图片文件，然后创建一个HTML文件htmlDemo11.html
三、CSS技术
（一）初识CSS
目标：了解CSS的概念和基本格式，能够知道CSS用于做什么
1、CSS的作用
使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不适用标签属性设置显示样式，所有的样式交由CSS来设置。
2、CSS的定义
CSS 是Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS定义的规则：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…}
在上述的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。
通过CSS样式对
div{ border: 1px solid red; width: 600px; height: 400px;}
1
div为选择器，表示CSS样式作用的HTML对象，border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值“1px solid red;”分别表示该边框为1像素、实心边框线、红色。
3、CSS的计量单位
在CSS中，通常使用像素单位px作为计量文本、边框等元素的标准量，px 是相对于显示器屏幕分辨率而言的。而百分比（%）是相对于父对象而言的，例如一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。
4、CSS中颜色的取值
（1）预定义的颜色值
如red、green、blue等
（2）十六进制表示的颜色值
如#FF0000、#FF6600、#29D794等。实际工作中，十六进制是最常用的定义颜色的方式
可以利用颜色对照表选择自己喜欢的颜色对应的十六进制
（二）CSS样式的引用方式
目标：掌握CSS样式4种的引用方式，分别为行内式、内嵌式、链入式和导入式
四、JavaScript基础
（一）JavaScript概述
目标：了解JavaScript的概念和引用方式，能够知道JavaScript的组成
1、什么是JavaScript？
JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。
2、JavaScript的组成
（1）ECMAScript
ECMAScript是JavaScript的核心。ECMAScript 规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。
（2）DOM（Document Object Model）
文档对象模型，是W3C组织推荐的处理可扩展标签语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作（如大小、位置、颜色等）。
（3）BOM（Browser Object Model）
浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作（如弹出框、控制浏览器导航跳转等）
3、JavaScript的引入方式
（1）行内式
行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中。
在chapter01文件夹中创建一个名称为JavaScriptDemo01的HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript行内式</title>
</head>
<body>
<input type="button" value="单击我" onclick="alert('欢迎使用行内式脚本~')" />
</body>
</html>
- 运行程序，使用浏览器打开文件JavaScriptDemo01。
（2）内嵌式
在HTML文档中，可以通过标签及其相关属性引入JavaScript代码。当浏览器读取到
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript内嵌式</title>
<script type="text/javascript">
alert('欢迎使用内嵌式脚本~');
</script>
</head>
<body>
</body>
</html>
（3）外嵌式
外链式是指将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML文件中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript外嵌式</title>
<script type="text/javascript" src="jsDemo.js"></script>
</head>
<body>
</body>
</html>
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
