一、初识HTML&CSS

一）概括

1.HTML（HyperText Markup Language）

中文：超文本标记语言
用于定义文档的内容和结构

2.CSS(Cascading Style Sheets)

中文：层叠样式表
用于定义HTML文档的样式（页面表现的基础，可控制布局，控制元素的渲染)(渲染：人类语言转换成计算机语言)

3.两者之间的关系：

文档里面有什么样的内容由HTML负责，内容长什么样（样式）由CSS负责。

4.JavaScript 交互

点击后出现的效果

二）html相关

1.visual

第一步新建文件夹，用visual打开；
第二步左侧资源管理器中新建文件，名字后缀格式“.html”;
第三步右侧输入“！”（英文感叹号）套入格式;
第四步在和中输入内容;
第五步保存（打开文件--勾选自动保存;
第六步点击右键在浏览器中打开（阅览）;

2.注释内容（阅览中不会显示）

显示：<！-- -->
快捷键：ctrl +？
描述代码的功能，浏览器解析的时候会忽略掉不做显示
常见用处：理清逻辑，索览，理清结构。

3.HTML元素

在页面中一切可以看见的内容，包括图片，标题、段落、文字，视频等。。

例子：<h3> ******** ******</h3>
起始标记、元素内容，结束标记

快捷方式：输入起始标记后按回车键

h3代表三级标题，共六级改数字即可，h1的字号最大，h6的字号最小，每个元素占一行。\

4.标题

在<head>中的<title> ******** </title>部分，修改****，保存阅览后网页名称会变。

head 元素是文档头，是html的第一个子元素，包含所有元数据（页面有关的附加信息）

5.a元素（行内元素，都在一行之中显示）超链接\

 起始标记            内容 结束标记
   <a href="******">&&&&</a>
 标记名 属性名 属性值       标记名
           属性（元素的额外信息附加信息）

意思为，单击&&&&可以跳转到*界面，是超链接的意思
一般来说添加同一个文件夹中的页面时可直接复制，
如果要跳转到百度或者其他网页中时，需填写完整域名如：www.baidu.com/

<标记名属性><标记名属性/>
例：<img src="" alt="">（插入图片)
src代表图片路径（图片保存在本地的位置），也可以用网络图片，需填写完整域名
alt代表图片路径错误时所显示的文字(图片的替代文字） \

7.元素的层次结构关系

前提：元素的嵌套
三种：父子关系、兄弟关系、祖先后代关系
兄弟关系（两个元素有同一个父级元素）
祖先后代关系（直接或间接包含）\

                               html
           head                                        body
 meta             title                            h3    a    img

8.还原UI设计师的稿子时的思路

第一步划分区域（将一个页面中的内容分成几个大的区域，再将大的区域细分成小的板块
第二步填充内容（将每个板块中的内容转换成html元素）

9.div元素（非语义化结构元素）

用于包含其他的元素，用于网站布局划分，代表块

10.html5 语义化结构元素

可以将无注释的div板块元素赋予意义，使页面结构变得更加清晰

<header>面或某一区域的头部；
<footer>页面或某个区域的底部；
<nav>导航栏；
<section>表示一个整体的一部分主题（独立的部分）；
<article>表示文章或其他可独立页面存在的内容；（文章）
<aside>表示与周围主题各相关的附加信息。（相关文章））

11.页面拆分

先根据六个语义化结构分出大板块，
再在不同的大板块下面加入不同的元素，
每一个从头开始的段落，文字，链接都可以用<p></p> 或<div></div>
div可以和语义化结构元素一起使用。\

三）CSS相关

1.CSS注释内容书写格式：/注释内容/

作用同html一样，
快捷键同为ctrl+？。 \

2.将.html和.css产生关联

在<head></head>之间最后部分加入元素 <link rel="stylesheet" href="*****">
<*****>代表css文件的位置
关联后点击右边按钮可以分屏同时预览。\

3.css代码

由一个一个的规则组成，每个规则指定了：对那些元素应用什么样式 \

例：

选择器声明块
h1{ color：red；text-align：center}
属性名属性值；属性名属性值
声明（属性）；声明（属性）

选择器：负责选择页面中的哪些元素（0-很多）
声明块：对选中的元素指定样式（颜色大小等）

4.颜色、字号等基础属性：

1）字体颜色

例：选择器{color: brown}
在更改颜色时，输入color后会自动显示可选颜色，选择可选颜色后，点击颜色单词，可弹出调色盘选择其他颜色\

2）段落颜色（字体背景颜色）

例：

选择器{background-color：red}\

3）背景颜色的大小（高和宽）

/ 宽 /（单位是像素）
选择器{width: 200px}\

/ 高/
选择器{height: 200px}
\

4）文本对齐方式

{text-align: right} （靠右
{text-align: left} （靠左）
{text-align: center}（居中）\

5）字体大小

例：
选择器{font-size: 200px}\

5.自动检查：

在网页浏览中按f12键
每一个区域会显示相对的每一条指令，有错误的会出现提示\

6.选择器：

1）元素选择器

选中页面中所有与该标记名相匹配的元素，并运用统一样式\

格式：元素名{声明块（属性）}
代表：选中页面中所有h3元素，应用样式
例：h3{color：red}（页面中所有h3标题都变成红色）

2）类选择器

选择页面上所有与该类名相匹配的元素，并运用统一样式
格式：.类名{声明块} （类名就是html中的clsss属性的元素）
注意：（后期补充）规范：
a、英文的小圆点开始，小圆点后面一定是英文字母，
b、可添加符号“-”、“_”\

c、大小写很敏感,如：Sp、sp 是两个不同的类名
d、类名尽量见名知意,避免出现aaa、bbb之类的，可以用英文、拼音等
e、不能是数字开头或是纯数字\

驼峰命名法footerTop
蛇形命名法footer_top
其他名法 footer-top

例子：.one{color: blue}\

在html中写作<原有标记 class="类名">(原有标记后有一个空格，类名可以自己取，双引号是英文的）

如：原：

头部加入后：头部

在css中写作.类名{声明块（属性）} .one{color： blue}

意为将html中标注了class="one"的部分的内容改为蓝色。

3）子代选择器

格式：父元素>子元素{声明块（属性）}

注意：一定要有嵌套关系的层级结构,不能跳级。

例子：

在html中写：
<div>
<section>**********</section>
<footer>**********</footer>
</div>

在css中写： div>footer{color: blue}

意为将<div>中的<footer>部分元素的字体颜色改为蓝色；

div>section{color:red}

意为将<div>中的<section>部分元素的字体颜色改为红色。

补充4）id选择器（很少用）：

写作#id名{声明块}一个元素只能有一个id名，在页面上如果id名出现了一次，就不能再出现第二次。例：

在html中：

<pid="snak">1008611

在css中：

#snak {font-size: 16px;color: rgb(231, 39, 39)}

7.盒模型及其组成

html中每一个元素都是一个盒子。

组成：

Margin 外边距，与其他盒子之间的距离

Border 边框

Padding 内边距，边框与内容之间的距离

content 内容，内容的宽度和高度

1）conter内容

内容的高度和宽度

例子：

.hemox{color: blue;width: 150px;height: 85px;background-color: brown}

/字体颜色// 宽度 // 高度 // 背景颜色 /

2）boeder边框

边框样式：solid 实线、dashed 虚线、dotted点线边框、hidden 隐藏边框、none 无边框

方位值：上 top 下bottom 右right 左 left

上边框border-top

右边框border-right

左边框border-left

下边框border-bottom

例：h2{ / 文字背景颜色 / / h2的高宽大小 /

background-color: aquamarine; width: 150px;height: 150px;

/ 上边框粗细实线颜色 / / 右边框粗细虚线颜色 /

border-top: 5px solid blue； border-right: 15px dashed rgb(24, 173, 231);

/ 左边框粗细实线颜色 / / 下边框粗细虚线颜色 /

border-left: 20px solid rgb(0, 255, 149); border-bottom: 5px dashed rgb(187, 255, 0) }

3）paddin和margin: （内外边距）

取值：

输入四个值时每个数字代表的方位：上、右、下、左

三个值：上、左右、下

两个值：上下、左右

一个值：四个方向统一大小

单一方向：padding-方位值：一个方向的值。

如：padding-top: 100px;（表示上面的内边距为100px）

上 top 下bottom 右right 左 left

*让某个元素左右居中：margin:auto（整个板块居中，不包括其中的内容图文）

8.计算元素的真实尺寸

宽度 = 内容宽度 + 左边框粗细 + 左内边距 + 左外边距 + 右边框粗细 + 右内边距 + 右外边距

高度 = 内容高度 + 上边框粗细 + 上内边距 + 上外边距 + 下边框粗细 + 下内边距 + 下外边距

9.容器和项目

容器：装东西（元素）

如：A 元素装了一个 B 元素

A：容器（父元素）

B：项目（子元素）

10.创建弹性布局

针对某个元素添加 display:flex; 过后，这个元素就是容器（父元素），里面的子元素就是项目，所有的项目都默认在一行显示。

11.内容换行

当项目的宽度之和超过容器的宽度，所有的项目都在一行显示，但每个项目都自动缩小。

如果需要换行显示则加 flex-wrap

取值：（意思）

flex-wrap: nowrap 不换行（默认）

flex-wrap: wrap 换行

flex-wrap:wrap-revevrse 换行，且第一行在最下方(倒序）

12.主轴左右对齐的方式 justify-content（左右水平方向）

justify-content：flex-start （左对齐）

justify-content：flex-end（右对齐）

justify-content：center（居中对齐）

主轴内容平均分散的三种方式

space-between、space-aroud、space-evenly的同异点

justify-content: space-between 项目和容器之间的距离为0=项目和项目之间的距离0

justify-content: space-around 项目和容器之间的距离=项目和项目之间的距离0.5

justify-content: space-evenly 项目和容器之间的距离=项目和项目之间的距离1

13.交叉轴对齐方式：Align-items（上下垂直方向）

Align-items：flex-star 为上对齐

Align-items：flex-end 为下对齐

Align-items：center 为垂直居中`