二、补充及复习(HTML&CSS)

·  阅读 42
二、补充及复习(HTML&CSS)

二、补充及复习(HTML&CSS)

一)HTML(HyperText Markup Language)\

中文:超文本标记语言

作用:用于定义文档的内容和结构 \

发展历程:

1991年1.0版本出现;

2008年发布草案;

2012年形成稳定版;

**是一种 标记型的 语言

\

二)CSS(Cascading Style Sheets)

\

中文:层叠样式表

作用:用于定义HTML文档的样式

\

发展历程:

1996年发布;

1999年重新修订成css2

在使用的是css3版本,更注重模块化

**是一种 表示型的 语言

**老版本又叫做 联级样式表

三)补充

1.浏览器能读懂的语言只有三种,即html、css、js。

2.w3c专门用来定义Web的规则和标准,
中国官网:www.w3cschool.cn/

四)html5的变化

1.标签:

1)增加了doctype、meta;

2)新增了语义化标签和属性;

3)去掉了纯展示性的标签;

4)添加canvas、video、audio、本地储存、拖拽。

2.语法:

1)标记不区分大小写,不过推荐用小写;

2)空标记可以不闭合;

3)属性值可以不添加引号,建议添加;

4)属性值中包含ture和false的可以省略(用于控制属性是否生效)。

五)文档类型定义 DOCTYPE

\

作用:提示浏览器接下来需要解析的是html格式or其他格式

写在html文件的第一排

\

<!DOCTYPE html>
复制代码

\

没有的情况下会出现“怪异模式”又叫做混杂模式;(Quirks Mode)
有的话会出现“标准模式”(Standard Mode),

\

六)准备开发环境

1.安装浏览器(解析代码) 如:谷歌、ie、火狐、safai苹果系统自带翻墙

2.安装编辑器(编辑代码)

七)四种样式表

1.外部样式表(外联):

在html中的标签中添加<link rel="stylesheet "href ="">,链接html与css。

rel=relation

*两者路径若在不同的位置(文件夹),是另外的写法


2.内部样式表(内联):

在标签里通过style标签书写css样式:例:


<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
p{font-size:16px;color:black;}
<!-- 意思是下面文档中的所有的p元素的内容执行以上样式 -->
</style>
</head>

<body>
<p>008611</p>
</body>\

3.行内样式表(内嵌):

在开始标签通过style属性书写css:例:

<body>
<pstyle="font-size: 25px;
color: rgb(221, 28, 28)">1008611</p>
</body>

4.补充导入样式表:

@import(从外部导入已有的样式表,同外联,很少用)

***** 三种样式表优先执行顺序:就近原则(三种都写了的话)内嵌>内联>外联

八)css重置(清除默认样式数据)

将重置文件放在自己的css的下面,让自己的css格式最优先考虑。

在html中关联就可以了(一个html文件可以关联多个css文件)

<linkrel="stylesheet"href="reset.css">

(重置文件保存在课堂练习文件夹中-reset)

九)相关网站推荐:

掘金(年轻程序猿聚居地) juejin.cn/

csdn(老牌java聚居地) www.csdn.net/

语雀 www.yuque.com/

博客园 www.cnblogs.com/

菜鸟教程 www.runoob.com/

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改