HTML基本结构、CSS引入方式以及选择器

前端开发的核心语言

• HTML：结构
• CSS：样式
• JavaScript：行为

---

HTML

超文本标记语言 hyper text markup language

• 超文本：
  
  • 最重要：可以包含超链接；
  • 超越文本：文字、图片、视频、音频
• 标记语言：
  
  • 标记：
  • 单标记、双标记　

</>单标记      <></>双标记

• 标记语言：
  
  • 当我们把特定的英文单词放入我们的标记当中，我们的标记具有了新的语义，而由具有特定语义的标记的规范，我们可以称之为标记语言
  • 当我们将英语单词放入标记当中，这时候我们可以称之为标签：单标签，双标签

---

HTML基本结构

文档头(类型声明)　　

• 不是标签
• 代表的是HTML5的标准

根元素　　

• 头　　
  
  • 定义页面的标题　
  • 在页面中可见
  • 定义页面的元数据　　属性　　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 名称的标签；　
  • 只能存在一个