前端开发的核心语言
- HTML:结构
- CSS:样式
- JavaScript:行为
HTML
超文本标记语言 hyper text markup language
- 超文本:
- 最重要:可以包含超链接;
- 超越文本:文字、图片、视频、音频
- 标记语言:
</>单标记 <></>双标记
- 标记语言:
- 当我们把特定的英文单词放入我们的标记当中,我们的标记具有了新的语义,而由具有特定语义的标记的规范,我们可以称之为标记语言
- 当我们将英语单词放入标记当中,这时候我们可以称之为标签:单标签,双标签
HTML基本结构
文档头(类型声明)
根元素
- 头
- 定义页面的标题
- 在页面中可见
- 定义页面的元数据 属性 charset=”utf-8”
- 身体
CSS
css的引入方式
- 1、内联样式表:直接写在标签内部的这种方式。
- 缺点:冗余代码多;维护起来非常困难
- 优点:优先级非常高
- 使用场景:确定了的,不会在修改的单个样式
- css属性的书写方式
- 属性名:属性值
- 设置宽度 width
- 设置高度 height
- 设置背景颜色 background-color
<div style="width:100px;height:100px;background-color:red"></div>
- 2、内部样式表:
- 优点:
- 相对于 内联样式表 代码少 省略一些;
- 速度快,而且没有服务器的请求压力
- 缺点:
- 不易改版和维护
- 造成单个界面文件过大
- 代码较乱,不易前后端交互
- 使用场景:大型网站的首页
<style type="text/css">
- 3、外部样式表
- 必须通过link标签进行引入
- 属性:rel-关系 type-类型、格式编码 href-引入路径(先去找同级的,再去找下面的)
- 优点:
- 利于维护,利于改版
- 一个CSS文件控制多个页面
- 减少代码量,代码简洁,利于分工
- 缺点:
- 相对于单个界面,有垃圾数据
- 会造成服务器的请求压力
- 使用场景:用于大型网站的二三级页面
<link rel="stylesheet" type="text/css" href="css/style.css">
- 引入方式的优先级
- 内联 > 内部和外部
- 内部和外部谁生效:如果选择器优先级相同,谁后引入谁生效。 如果选择器优先级不同,选择器优先级高的生效。
CSS选择器
- 标签名选择器
- 优先级:1;直接选择某一类标签 ;
- 会针对这一类标签全部生效
- 类选择器
- 优先级:10;
- 针对某一类具有相同雷鸣的标签;
- 可以存在多个
- ID 选择器
- 优先级:100;
- 针对某一个具有相同 ID 名称的标签;
- 只能存在一个