Web前端开发精品课-HTML CSS JavaScript基础教程

目录

**部分　HTML基础

第01章　HTML简介

1.1　前端技术简介 2

1.1.1　从“网页制作”到“前端开发” 2

1.1.2　从“前端开发”到“后端开发” 3

1.1.3　学习路线 5

1.2　什么是HTML 5

1.3　教程介绍 6

1.3.1　教程简介 6

1.3.2　初学者比较关心的问题 7

第02章　开发工具

2.1　开发工具 8

2.2　使用Hbuilder 9

第03章　基本标签

3.1　HTML结构 11

3.2　head标签 12

3.2.1　title标签 13

3.2.2　meta标签 13

3.2.3　style标签 15

3.2.4　script标签 15

3.2.5　link标签 16

3.2.6　base标签 16

3.3　body标签 16

3.4　HTML注释 17

3.5　练习题 18

第04章　文本

4.1　文本简介 19

4.1.1　页面组成元素 19

4.1.2　HTML文本 20

4.2　标题标签 21

4.3　段落标签 22

4.3.1　段落标签： 22

4.3.2　换行标签：
23

4.4　文本标签 25

4.4.1　粗体标签 25

4.4.2　斜体标签 26

4.4.3　上标标签 26

4.4.4　下标标签 27

4.4.5　中划线标签 27

4.4.6　下划线标签 28

4.4.7　大字号标签和小字号标签 28

4.5　水平线标签 29

4.6　div标签 30

4.7　自闭合标签 31

4.8　块元素和行内元素 32

4.8.1　块元素 33

4.8.2　行内元素 34

4.9　特殊符号 35

4.9.1　网页中的“空格” 35

4.9.2　网页中的“特殊符号” 36

4.10　练习题 38

第05章　列表

5.1　列表简介 39

5.2　有序列表 40

5.2.1　有序列表简介 40

5.2.2　type属性 41

5.3　无序列表 42

5.3.1　无序列表简介 42

5.3.2　type属性 43

5.3.3　深入无序列表 44

5.4　定义列表 46

5.5　HTML语义化 47

5.6　练习题 48

第06章　表格

6.1　表格简介 49

6.2　基本结构 49

6.3　完整结构 51

6.3.1　表格标题：caption 51

6.3.2　表头单元格：th 52

6.4　语义化 54

6.5　合并行：rowspan 56

6.6　合并列：colspan 57

6.7　练习题 58

第07章　图片

7.1　图片标签 59

7.1.1　src属性 59

7.1.2　alt属性和title属性 60

7.2　图片路径 62

7.2.1　page1.html引用图片 62

7.2.2　page2.html引用图片 63

7.3　图片格式 64

7.3.1　位图 64

7.3.2　矢量图 66

7.4　练习题 67

第08章　超链接

8.1　超链接简介 68

8.1.1　a标签 69

8.1.2　target属性 70

8.2　内部链接 70

8.3　锚点链接 72

8.4　练习题 74

第09章　表单

9.1　表单简介 75

9.1.1　表单是什么 75

9.1.2　表单标签 76

9.2　form标签 76

9.2.1　form标签简介 76

9.2.2　form标签属性 77

9.3　input标签 78

9.4　单行文本框 79

9.4.1　单行文本框简介 79

9.4.2　单行文本框属性 79

9.5　密码文本框 81

9.5.1　密码文本框简介 81

9.5.2　密码文本框属性 82

9.6　单选框 83

9.6.1　单选框简介 83

9.6.2　忽略点 84

9.7　复选框 86

9.8　按钮 87

9.8.1　普通按钮button 88

9.8.2　提交按钮submit 89

9.8.3　重置按钮reset 89

9.8.4　button标签 91

9.9　文件上传 91

9.10　多行文本框 92

9.11　下拉列表 93

9.11.1　下拉列表简介 93

9.11.2　select标签属性 94

9.11.3　option标签属性 95

9.12　练习题 97

第10章 　框架

10.1　iframe标签 99

10.2　练习题 100

第二部分　CSS基础

第11章　CSS简介

11.1　CSS简介 102

11.1.1　CSS是什么 102

11.1.2　CSS和CSS3 102

11.2　教程简介 103

11.3　CSS引入方式 103

11.3.1　外部样式表 103

11.3.2　内部样式表 104

11.3.3　行内样式表 105

11.4　练习题 106

第12章　CSS选择器

12.1　元素的id和class 107

12.1.1　id属性 107

12.1.2　class属性 108

12.2　选择器是什么 108

12.3　CSS选择器 109

12.3.1　元素选择器 110

12.3.2　id选择器 110

12.3.3　class选择器 111

12.3.4　后代选择器 113

12.3.5　群组选择器 114

12.4　练习题 116

第13章　字体样式

13.1　字体样式简介 118

13.2　字体类型（font-family） 119

13.3　字体大小（font-size） 120

13.3.1　px是什么 120

13.3.2　采用px为单位 121

13.4　字体粗细（font-weight） 122

13.5　字体风格（font-style） 123

13.6　字体颜色（color） 125

13.6.1　关键字 125

13.6.2　16进制RGB值 125

13.7　CSS注释 126

13.8　练习题 128

第14章　文本样式

14.1　文本样式简介 129

14.2　首行缩进（text-indent） 129

14.3　水平对齐（text-align） 130

14.4　文本修饰（text-decoration） 131

14.4.1　text-decoration属性 131

14.4.2　三种划线的用途分析 133

14.5　大小写（text-transform） 134

14.6　行高（line-height） 135

14.7　间距（letter-spacing和word-spacing） 136

14.7.1　字间距 136

14.7.2　词间距 136

14.8　练习题 137

第15章　边框样式

15.1　边框样式简介 139

15.2　整体样式 140

15.2.1　边框属性 140

15.2.2　简写形式 142

15.3　局部样式 142

15.4　练习题 145

第16章　列表样式

16.1　列表项符号（list-style-type） 146

16.1.1　定义列表项符号 146

16.1.2　去除列表项符号 148

16.2　列表项图片（list-style-image） 149

16.3　练习题 150

第17章　表格样式

17.1　表格标题位置（caption-side） 151

17.2　表格边框合并（border-collapse） 152

17.3　表格边框间距（border-spacing） 154

17.4　练习题 155

第18章　图片样式

18.1　图片大小 156

18.2　图片边框 157

18.3　图片对齐 158

18.3.1　水平对齐 158

18.3.2　垂直对齐 159

18.4　文字环绕——初识float 162

18.5　练习题 163

第19章　背景样式

19.1　背景样式简介 164

19.2　背景颜色（background-color） 164

19.3　背景图片样式（background-image） 166

19.4　背景图片重复（background-repeat） 167

19.5　背景图片位置（background-position） 169

19.5.1　像素值 169

19.5.2　关键字 170

19.6　背景图片固定（background-attachment） 172

19.7　练习题 173

第20章　超链接样式

20.1　超链接伪类 174

20.1.1　超链接伪类简介 174

20.1.2　深入了解超链接伪类 175

20.2　深入了解:hover 177

20.3　鼠标样式 178

20.3.1　浏览器鼠标样式 178

20.3.2　自定义鼠标样式 180

20.4　练习题 181

第21章　盒子模型

21.1　CSS盒子模型 182

21.2　宽和高（width和height） 184

21.3　边框（border） 187

21.4　内边距（padding） 188

21.4.1　padding局部样式 188

21.4.2　padding简写形式 189

21.5　外边距（margin） 191

21.5.1　margin局部样式 191

21.5.2　margin简写形式 194

21.5.3　浏览器审查元素 195

21.6　练习题 196

第22章　浮动布局

22.1　文档流简介 197

22.1.1　正常文档流 197

22.1.2　脱离文档流 198

22.2　浮动 200

22.3　清除浮动 202

22.4　练习题 204

第23章　定位布局

23.1　定位布局简介 205

23.2　固定定位：fixed 206

23.3　相对定位：relative 207

23.4　绝对定位：absolute 209

23.5　静态定位：static 211

23.6　练习题 211

第三部分　JavaScript基础

第24章　JavaScript简介

24.1　JavaScript是什么 214

24.1.1　JavaScript简介 214

24.1.2　教程介绍 215

24.2　JavaScript开发工具 216

24.3　JavaScript引入方式 217

24.3.1　外部JavaScript 218

24.3.2　内部JavaScript 219

24.3.3　元素属性JavaScript 220

24.4　一个简单的JavaScript程序 221

24.5　练习题 222

第25章　语法基础

25.1　语法简介 223

25.2　变量与常量 224

25.2.1　变量 225

25.2.2　常量 229

25.3　数据类型 229

25.3.1　数字 229

25.3.2　字符串 230

25.3.3　布尔值 232

25.3.4　未定义值 233

25.3.5　空值 234

25.4　运算符 234

25.4.1　算术运算符 235

25.4.2　赋值运算符 239

25.4.3　比较运算符 240

25.4.4　逻辑运算符 241

25.4.5　条件运算符 244

25.5　表达式与语句 245

25.6　类型转换 245

25.6.1　“字符串”转换为“数字” 245

25.6.2　“数字”转换为“字符串” 248

25.7　转义字符 249

25.8　注释 251

25.8.1　单行注释 251

25.8.2　多行注释 252

25.9　练习题 253

第26章　流程控制

26.1　流程控制简介 255

26.1.1　顺序结构 255

26.1.2　选择结构 256

26.1.3　循环结构 257

26.2　选择结构：if 257

26.2.1　单向选择：if… 257

26.2.2　双向选择：if…else… 259

26.2.3　多向选择：if…else if…else… 260

26.2.4　if语句的嵌套 262

26.3　选择结构：switch 264

26.4　循环结构：while 267

26.5　循环结构：do…while 270

26.6　循环结构：for 271

26.7　判断整数或小数 274

26.8　找出“水仙花数” 275

26.9　练习题 276

第27章　初识函数

27.1　函数是什么？ 278

27.2　函数的定义 280

27.2.1　没有返回值的函数 280

27.2.2　有返回值的函数 282

27.2.3　全局变量与局部变量 283

27.3　函数的调用 285

27.3.1　直接调用 286

27.3.2　在表达式中调用 286

27.3.3　在超链接中调用 287

27.3.4　在事件中调用 288

27.4　嵌套函数 289

27.5　内置函数 290

27.6　判断某一年是否闰年 291

27.7　求出任意五个数*大值 292

27.8　练习题 292

第28章　字符串对象

28.1　内置对象简介 294

28.2　获取字符串长度 295

28.3　大小写转换 296

28.4　获取某一个字符 297

28.5　截取字符串 298

28.6　替换字符串 300

28.7　分割字符串 302

28.8　检索字符串的位置 304

28.9　统计某一个字符的个数 306

28.10　统计字符串中有多少个数字 307

28.11　练习题 308

第29章　数组对象

29.1　数组是什么 309

29.2　数组的创建 310

29.3　数组的获取 310

29.4　数组的赋值 311

29.5　获取数组长度 312

29.6　截取数组某部分 315

29.7　为数组添加元素 316

29.7.1　在数组开头添加元素：unshift() 316

29.7.2　在数组结尾添加元素：push() 318

29.8　删除数组元素 319

29.8.1　删除数组中**个元素：shift() 319

29.8.2　删除数组*后一个元素：pop() 320

29.9　数组大小比较 ：sort() 322

29.10　数组颠倒顺序：reverse() 323

29.11　将数组元素连接成字符串：join() 323

29.12　数组与字符串的转换操作 326

29.13　计算面积与体积，返回一个数组 326

29.14　练习题 327

第30章　时间对象

30.1　日期对象简介 329

30.2　操作年、月、日 331

30.2.1　获取年、月、日 331

30.2.2　设置年、月、日 333

30.3　操作时、分、秒 334

30.3.1　获取时、分、秒 334

30.3.2　设置时、分、秒 335

30.4　获取星期几 336

30.5　练习题 338

第31章　数学对象

31.1　数学对象简介 339

31.2　Math对象的属性 339

31.3　Math对象的方法 341

31.4　*大值与*小值 341

31.5　取整运算 342

31.5.1　向下取整：floor() 342

31.5.2　向上取整：ceil() 343

31.6　三角函数 344

31.7　生成随机数 346

31.7.1　随机生成某个范围内的“任意数” 346

31.7.2　随机数生成某个范围内的“整数” 347

31.8　生成随机验证码 347

31.9　生成随机颜色值 348

31.10　练习题 349

第32章　DOM基础

32.1　核心技术简介 350

32.2　DOM是什么 351

32.2.1　DOM对象 351

32.2.2　DOM结构 351

32.3　节点类型 352

32.4　获取元素 353

32.4.1　getElementById() 353

32.4.2　getElementsByTagName 355

32.4.3　getElementsByClassName() 359

32.4.4　querySelector()和querySelectorAll() 360

32.4.5　getElementsByName() 363

32.4.6　document.title和document.body 364

32.5　创建元素 365

32.6　插入元素 370

32.6.1　appendChild() 370

32.6.2　insertBefore() 372

32.7　删除元素 373

32.8　复制元素 376

32.9　替换元素 377

32.10　练习题 378

第33章　DOM进阶

33.1　HTML属性操作（对象属性） 380

33.1.1　获取HTML属性值 380

33.1.2　设置HTML属性值 386

33.2　HTML属性操作（对象方法） 388

33.2.1　getAttribute() 388

33.2.2　setAttribute() 390

33.2.3　removeAttribute() 391

33.2.4　hasAttribute() 393

33.3　CSS属性操作 394

33.3.1　获取CSS属性值 394

33.3.2　设置CSS属性值 396

33.3.3　*后一个问题 401

33.4　DOM遍历 404

33.4.1　查找父元素 404

33.4.2　查找子元素 406

33.4.3　查找兄弟元素 410

33.5　innerHTML和innerText 411

33.6　练习题 414

第34章　 事件基础

34.1　事件是什么 415

34.2　事件调用方式 416

34.2.1　在script标签中调用 416

34.2.2　在元素中调用事件 417

34.3　鼠标事件 418

34.3.1　鼠标单击 419

34.3.2　鼠标移入和鼠标移出 421

34.3.3　鼠标按下和鼠标松开 422

34.4　键盘事件 423

34.5　表单事件 425

34.5.1　onfocus和onblur 425

34.5.2　onselect 427

34.5.3　onchange 429

34.6　编辑事件 432

34.6.1　oncopy 432

34.6.2　onselectstart 433

34.6.3　oncontextmenu 434

34.7　页面事件 435

34.7.1　onload 435

34.7.2　onbeforeunload 437

34.8　练习题 438

第35章　事件进阶

35.1　事件监听器 439

35.1.1　事件处理器 439

35.1.2　事件监听器 440

35.2　event对象 447

35.2.1　type 448

35.2.2　keyCode 448

35.3　this 451

35.4　练习题 454

第36章　window对象

36.1　window对象简介 455

36.2　窗口操作 457

36.2.1　打开窗口 457

36.2.2　关闭窗口 462

36.3　对话框 464

36.3.1　alert() 464

36.3.2　confirm() 465

36.3.3　prompt() 466

36.4　定时器 467

36.4.1　setTimeout()和clearTimeout() 468

36.4.2　setInterval()和clearInterval() 472

36.5　location对象 476

36.5.1　window.location.href 476

36.5.2　window.location.search 477

13.5.3　window.location.hash 478

36.6　navigator对象 479

36.7　练习题 481

第37章　document对象

37.1　document对象简介 482

37.2　document对象属性 482

37.2.1　document.URL 483

37.2.2　document.referrer 484

37.3　document对象方法 484

37.3.1　document.write() 485

37.3.2　document.writeln() 485

37.4　练习题 487

后记