一. 前端的概述
1. web的发展史
❶. web 1.0
简单的静态页面 (早期三大门户 搜狐 新浪 网易)
❷. web 2.0
更注重用户之间的交互 用户是消费者也是制造者 (微博)
❸. web 3.0
Ⅰ.人工智能
Ⅱ.复杂的页面功能
Ⅲ.即时通讯
二.浏览器
1.五大浏览器
❶. 谷歌 Chrom 内核: webkit (自主研发 blink)
❷. 火狐 Mozilla 内核: gecko (高版本兼容 webkit)
❸. 欧朋 Opear 内核: presto
❹. 微软 IE 内核: trident
❺. 苹果 Safari 内核: webkit
2. 浏览器内核
浏览器的渲染引擎
作用: 解析代码
三. web标准构成
web标准的最佳体验: 结构 样式 行为分离
1. html - 结构层
2. css - 表现层
3. js - 行为层
四. HTML语言
1. html定义
超文本标记语言 不是编程语言 是描述页面的语言
2. html基本结构
❶. 结构标签含义:
< !DOCTYPE html > 声明文档类型 html5 的声明
< html lang = "zh-CN" > < / html >当前文档显示的语言
< head > < / head > 文档头部
< meta charset = "UTF - 8" > 字体编码格式 UTF - 8 表示万国码
< meta name = "viewport" content = "width = device-width , initial - scale = 1.0 " > 设置窗口信息
< title > 标题 < / title > 标题标签
< body > < / body > 写主体 内容的标签
❷. 基本结构:
< html >
< head >
< title > 标题 < / title >
< / head >
< body >
内容
< / body >
< / html >
五. HTML常用标签
1. 常用块级标签及特点
❶. div 无语义标签 (大盒子)
❷. p 段落标签
❸. h1 ~ h6 标题标签 (h1最大 h6最小)
特点: 垂直上下排列 独占一行
2. 常用的行内标签及特点
❶. span 无语义标签(小盒子)
❷. strong b 加粗标签
区别: strong具有语义化
❸. em i 倾斜标签
区别: em具有语义化
❹. del s 删除线标签
区别: del 具有语义化
❺. sup 上标字标签
❻. sub 下标字标签
特点: 一行可写多个
3. 其他标签
❶. br 换行标签
❷. hr 水平线标签
4. 图像标签和链接标签
❶. img 图像标签
< img src = " 路径" alt = "提示" >
属性:
❶. src 图片的路径
❷. alt 提示
❸. title 鼠标悬停在图片上显示
❹.width 宽
❺.height 高
❷. a 链接标签
< a href = "地址" target = "_blank" > 内容 < / a >
属性:
Ⅰ.href 链接的地址
Ⅱ. target 打开方式 (有2个值)
■ _self 当前窗口打开 (默认值)
■ _blank 新窗口打开
❸. 改变链接默认打开方式 base
< base target = "_blank " >
六. 文件路径
1. 绝对路径
直接跳转到目标位置
主要有: 网络路径 和 本地磁盘路径
2. 相对路径
❶. 同级路径 . /
❷. 上级路径 . . /
❸. 上上级路径 . . / . . /
❹. 下级路径 /
七. HTML字符实体
1. 空格 :  ；
2. 小于号 : <；<
3. 大于号 : >；> 等等
八. 语义化
语义化 : 使用合适的标签和特有的属性去格式化文档(即合适的场合用合适的标签)
优点 :
1. 易于开发和维护
2. 用户体验比较好
3. 易于seo 易于爬虫抓取关键字和搜索引擎建立良好的沟通
4. 即使没有css 也可以呈现出良好的效果
