第一篇 小概念普及

小概念的普及

前端三层

• HTML 搭结构、骨架
• CSS 样式(装修)
• JavaScript (JS) 交互、动态效果

用生活中的例子：HTML相当于盖房子(打地基)

网页

网页是构成网站的基本要素，HTML文件其实就是一个网页。

网站

由多个网页组成

站群 （流水线统一化管理）

由多个网站组成，为同一家公司服务
例如：整个百度下所属的子公司都有自己的网站，百度音乐、百度金融、百度外卖......

浏览器

最好用的浏览器：谷歌浏览器
IE浏览器

网页的基本组成

• HTML 骨架，搭结构
• CSS样式 (装修、衣服)
• JS 交互、动态效果

HTML (超文本标记语言)

网页文件本身是一种文本文件（除了文字暂无其他）。只有用过特定的标记描述，那些普通文件才能在浏览器中正常显示，在页面中如果遇到图片、音视频的时候如何用文本描述，需要用超文本（标签）进行引入才可以正常显示

<img src="">图片

超文本 （标签）

标签语法：由成对的尖括号和关键字组成，叫做标签
关键词(标签名)：是已经规范过的，不是自己随便制造的。

标签分类

• 开始标签<div>
• 结束标签 </div>
• 空标签 <br/> <img/>

HTML元素

可以将元素理解为一个容器，容器中放置的就是我们网页中的主要内容

元素（标签）：由标签和内容组成

元素的分类

• 由开始标签和结束标签组成的元素，元素中可以添加内容
• 只有一个空标签，只能进行功能的添加，例如 <img/> 元素，用来引入图片，<br/>用来进行换行

常用的HTML元素有哪些？

• 标题类
  • <h1></h1> h1标签在html页面中只能出现一次，其他标签可多次出现。
  • <h2></h2>
  • ... ...
  • <h6></h6>
• 文字段落
  • <p></p>
• 列表类
  • 无序列表 (前面有一个小黑点)
    • ul>li
  • 有序列表 (前面默认有序号)
    • ol>li
  • dl 自定义列表
    • dt 定义列表的标题内容
    • dd 定义列表描述内容
    • dl>dt>dd(dd可以出现很多个)
• <img/> 插入图片
  • src="" 放图片的路径地址
  • alt="" 放图片的描述文字内容 (图片路径错误或者不存在)
• 区分大模块div
• 区分小模块span
• 文字段落p
• 加粗
  • strong 强调作用
  • b
• 斜体
  • em斜体em,强调作用
  • i斜体

• 插入图片img

标签属性

标签属性提供了有关html元素更多信息
一个标签可以有多个标签属性，每个属性之间用空格隔开

语法：由标签属性名和标签属性值组成的

<img src="" alt="">
img 标签
src="" alt="" 标签属性
src 标签属性名
"timg.jpg" 标签属性值