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

前端开发的核心语言

HTML
超文本标记语言 hyper text markup language

HTML基本结构
文档头类型声明　　

根元素　　

CSS
css的引入方式

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 名称的标签；　

只能存在一个