十三、前端开发知识快速入门
目录
- 一、HTML概述和基本结构
-
- 1.1 概述
- 1.2 基本结构
- 1.3 html文档类型
- 1.4 html注释
- 二、HTML常用标签
-
- 2.1 块标签
- 2.2 行内标签
- 2.3 字符实体
- 2.4 图片标签
- 2.5 链接标签
- 2.6 列表标签
- 2.7 表单
- 2.8 表格
- 三、页面布局
- 四、CSS样式
-
- 4.1 基本语法和页面引用
- 4.2 文本样式设置
- 4.3 颜色表示法
- 4.4 选择器
-
- 1. 标签选择器
- 2. id选择器
- 3. 类选择器
- 4. 层级(后代)选择器
- 5. (群)组选择器
- 6. 属性选择器
- 7. 父子选择器
- 8. 相邻兄弟选择器
- 9. 伪类及伪元素选择器
- 4.5 css盒子模型
-
- 1. 设置宽高
- 2. 设置边框
- 3. 设置内间距
- 4. 设置外边距
- 5. 盒子模型的实际尺寸
- 6. overflow元素的溢出处理
- 7. 块元素、内联元素、内联块元素
- 4.6 浮动
-
- 1. 浮动元素的特性
- 2. 浮动可以实现的效果
- 3. 解决浮动导致父元素高度无法撑开的问题
- 4.7 定位
-
- 1. 相对定位
- 2. 绝对定位
- 3. 固定定位
- 4.8 background属性
- 4.9 综合案例
- 五、HTML5与CSS3
-
- 5.1 css权重
- 5.2 css3新增选择器
- 5.3 css3圆角和rgba
- 5.4 css3 transition动画
- 5.5 css3 transform变换
- 5.6 css3 animation动画
- 5.7 css3 浏览器前缀
- 5.8 html5标签
- 六、移动端页面开发
-
- 6.1 视口
- 6.2 页面适配
-
- 1. 流体布局
- 2. 响应式布局
- 3. 基于rem布局
- 七、JavaScript
-
- 7.1 JavaScript嵌入页面的方式
- 7.2 变量
-
- 1. 变量类型
- 2. 语句与注释
- 3. 变量、函数、属性、函数参数命名规范
- 4. 变量的作用域
- 7.3 获取元素
-
- 1. getElementById
- 2. getElementsByTagName
- 7.4 操作元素属性
-
- 1. 通过“.”操作属性：
- 2. 通过“[ ]”操作属性：
- 3. innerHTML
- 7.5 函数
-
- 1. 函数的定义和执行
- 2. 变量与函数预解析
- 3. 提取行间事件
- 4. 匿名函数
- 5. 函数传参
- 6. 函数的return关键字
- 7.6 条件语句
- 7.7 数组及操作方法
-
- 1. 定义数组的方法
- 2. 操作数组中数据的方法
- 3. 多维数组
- 7.8 循环语句
- 7.9 字符串处理方法
- 7.10 类型转换
- 7.11 定时器
- 7.12 常用的内置对象
- 八、JQuery
-
- 8.1 jquery加载
- 8.2 jquery选择器
-
- 1. 获取元素
- 2. 对选择集进行过滤
- 3. 选择集转移
- 4. 判断是否选择到了元素
- 8.3 jquery样式操作
-
- 1. 操作行间样式
- 2. 操作样式名
- 3. 常用特殊效果样式
- 8.4 jquery常用事件
- 8.5 jquery链式调用
- 8.6 jquery动画
- 8.7 尺寸相关、滚动事件
- 8.8 jquery属性操作
-
- 1. 获取和设置html的内容
- 2. prop() 取出或设置某个属性的值
- 8.9 事件冒泡
- 8.10 事件委托
- 8.11 元素节点操作
- 8.12 JSON
- 8.13 ajax与jsonp
-
- 1. ajax
- 2. jsonp
- 九、本地化存储
-
- 9.1 cookie
- 9.2 localStorage
- 9.3 sessionStorage
- 十、JQueryUI
-
- 10.1 案例-实现数值滚动条
- 十一、移动端库和框架
-
- 11.1 移动端js事件
- 11.2 zeptojs
- 11.3 swiper
- 11.4 bootstrap
-
- 1. bootstrap容器
- 2. bootstrap栅格系统
- 3. bootstrap列偏移
- 4. bootstrap按钮
- 5. bootstrap表单
- 6. bootstrap导航菜单
- 7. bootstrap路径导航
- 8. bootstrap巨幕
- 9. bootstrap模态框
- 10. bootstrap下拉菜单
- 11. bootstrap隐藏类
- 12. bootstrap响应式图片
- 11.5 案例
-
- 1. 布局拆分
- 2. 目录结构
- 3. 导航栏实现
- 4. 巨幕实现
- 5. 活动介绍实现
- 6. 商品列表实现
- 十二、正则表达式
-
- 12.1 创建正则表达式
-
- 1. 使用构造函数创建
- 2. 使用字面量语法创建
- 12.2 匹配规则
- 12.3 量词
- 12.4 任意一个或者范围
- 12.5 限制开头结尾
- 12.6 常用的匹配方法
一、HTML概述和基本结构
1.1 概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
1.2 基本结构
一个html的基本结构如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题title>
head>
<body>
网页显示内容
body>
html>
第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”',不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。
1.3 html文档类型
目前常用的两种文档类型是xhtml 1.0和html5, 两种文档的区别:
- 文档声明和编码声明
- html5新增了标签元素以及元素属性
(1) xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
文档示例：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文档类型 title>
head>
<body>
body>
html>
(2) html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
文档示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 title>
head>
<body>
body>
html>
1.4 html注释
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
二、HTML常用标签
2.1 块标签
块级元素（block-level elements）是指在页面上显示为块状（独占一行）的 HTML 元素。这些块级元素一般用于组织和结构化页面的内容。以下是一些常见的 HTML 块级标签示例：
- ：定义一个 HTML 文档中的分区或节，并且通常用于容纳其他 HTML 元素或组织页面的布局。
：定义一个段落，用于显示一段文本。-：定义标题，表示最高级别的标题，表示最低级别的标题。- 标签表示。
和一起使用