一、前端基础概念
1.1.什么是前端开发？
- Web前端开发 - Web Front-end development
- Web后端开发 - Web back-end development
1.2.前端开发包含哪些内容？
- 结构布局 - HTML
- 样式呈现 - CSS
- 行为逻辑(页面的动态交互/数据交互处理/数据格式化渲染) - JavaScript
- 分离开发
1.3.有的网站页面后缀名只有htm，为什么？
- window 98及之前的系统只认后缀名3位的文件，不认3位以上的文件后缀名
- 常用快捷键
- ctrl + s 保存文件
- ctrl + z 回退
- ctrl + c 拷贝
- ctrl + v 粘贴
- ctrl + x 剪切
1.4.HTML相关
-
HTML：Hyper Text Marked Language，超文本标记语言
-
双标签
- <p> <p>
- 开放 闭合
- 开始 结束
- 头 尾
-
单标签
- <br />
- 单标签必须闭合
-
XHTML - HTML规范
-
HTML4.01 - HTML5之前的版本
-
HTML5 - HTML最新的版本
-
HTML5技术 - 增加画布，音视频等功能，其实是JavaScript技术
1.5.标签问题
-
物理性标签和语义化标签
-
h1，h2，h3，h4，h5，h6 - heading 标签 标题标签 - 语义化标签
-
p - Paragraph标签 段落标签
-
strong标签和b标签
- strong标签 - 语义化标签
- b标签 - 物理性标签
-
i标签和em标签
- i标签 - 物理性标签，italic标签，主要用于加图标
- em标签 - 语义化标签，emphasize标签，加强语气，加斜体
-
del标签 - delete标签 语义化标签
-
ins标签 - insert标签 加下划线 语义化标签
-
address标签 - 地址标签 语义化标签
-
网页的结构标签 布局标签
-
div标签 - division标签 容器/盒子 宽 高 块
-
img标签 - 承载图片
- src - 资源
- alt - 图片加载失败后显示的内容
- title - 鼠标放到图片上显示的内容
-
a标签 - anchor标签(锚点) 超链接标签 打电话 发邮件 锚点定位 协议限定符
- href - Hypertext Reference 超链接目标的URL
- target - 打开新的页面
1.6.元素相关
-
元素 = 标签 + 标签内的内容
-
内联元素(行间元素/行内元素) inline element
- 不独占一行、无法定义宽高
- strong em del ins
-
块级元素 block element
- 独占一行，可以定义宽高
- p hx div address
-
内联块级元素 inline-block element
-
不独占一行，可以定义宽高
-
img
-
1.7.标签嵌套
- 内联元素可以嵌套内联元素
- 块级元素可以嵌套任何元素
- 注意：
- p标签不可以嵌套div
- a标签不可以嵌套a标签
