cuicuiv学HTML+CSS基础

学习笔记

HTML（5）

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

网页基础=html（内容）+css（样式）

---

HTML

概念：
元素=起始标记+结束标记+元素内容+元素属性
$<p属性=“”>$This is my first paragraph.$</p>$

---

属性=属性名+属性值

属性的分类：
1.局部属性：某些元素特有属性
2.全局属性：所有元素通用

☆语义化：

1.每一个HTML元素都有具体含义
2.所有元素与展示效果无关（选择什么元素，仅仅取决于内容的含义）
***为什么需要语义化？
1.为了搜索引擎优化（SEO）
2.为了让浏览器理解网页

空白折叠：在源代码中的连续空白字符，在页面显示时，会被折叠为一个空格。

具体内容：
常见元素：
##文本元素：

#h h1~h6：表示一级标题至六级标题
#p段落
#span（无语义）便于用于设置样式

##图片元素：

#img元素：src属性：图片来源 alt属性：当图片资源失效时，将用该属性代替图片
#a元素（超链接）

##多媒体元素

#video(视频）元素
#audio(音频)元素
属性：
controls:控制控件的显示，取值只能为controls
autoplay:布尔属性，自动播放
muted:布尔属性，静音
loop:布尔属性，循环
布尔属性只有两种状态：1.不写 2.取值为属性名

#列表元素

有序列表:ol
无序列表：ul 常用于制作菜单或新闻列表
写法：
定义列表：dl 通常用于一些术语的定义
写法：

#容器元素（代表一个区域，内部用于放置其他元素）

#div元素（无语义）
#header（页头）
#footer（页脚）
#article（整文）
#section（章节）
#aside（侧边栏）

元素包含关系：

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。
***元素的包含关系由元素的内容类别决定

总结：

1. 容器元素可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素
4. 标题元素和段落元素不能相互嵌套

---

CSS

css规则=选择器+声明块
#选择器：选中元素

1.ID选择器：选中的是对应id值的元素
2.元素选择器
3.类选择器

#声明块：声明块中包含很多声明(属性)，每一个声明表达了某一方面的样式。

---

#css代码书写位置
1.内部样式表：书写在style元素中
2.内联样式表(元素样式表)：直接书写在style属性中
3.外部样式表：将样式书写到独立的css文件中 ***用link元素关联

①外部样式可以解决多页面样式重复的问题
②有利于浏览器缓存，从而提高页面响应速度
③有利于代码分离(HTML和CSS)，更容易阅读和维护

---

#常见样式声明：
color—元素内部的文字颜色

rgb(0,0,0) rgb表示法 三色素数值
hex(16进制)表示法：#红绿蓝(每种颜色2位)

background-color—元素背景颜色
font-size—元素内部文字的尺寸大小

1.px：像素
2.em：相对单位，相对于父元素
3.user agent：用户代理(浏览器默认）

font-weight—文字粗细程度
font-family—文字类型
font-style—字体样式，通常用来设置斜体
text-decoration—文本修饰，给文本加线
text-indent—首行文本缩进
line-height—每行文本的高度
letter-space—文字间隙

---

---

#层叠：解决声明冲突的过程，浏览器自动处理(依次比较下列三种)
一、比较重要性（重要性从高到低）

①作者样式表中的!import样式
②作者样式表中的普通样式
③浏览器默认样式

二、比较特殊性

总体规则：选择器选择的范围越窄越特殊
具体 规则：通过选择器，计算出一个四位数(xxxx)

千位：如果是内联样式记1 不是记0
百位：选择器中所有id选择器的数量
十位：选择器中所有类选择器，属性选择器，伪类选择器的数量
个位：所有元素选择器，伪类选择器···

三、比较源次序
代码书写靠后的胜出

---

#继承
子元素会继承父元素的某些css属性，通常跟文字相关的属性都能被继承

---

#属性值的计算过程
无属性值—>每个属性都有值

①确定声明值
参考样式表中没有冲突的声明，作为css属性值
②层叠冲突
对样式表有冲突的声明使用层叠规则，确定css属性值
③使用继承
对仍然没有值的属性，若可以继承，则继承父元素
④使用默认值
(inherit：强制继承 initial：初始化)

---

#盒模型
box:盒子，每个元素在页面中都会生成一个矩形区域
**
盒子类型：①行盒：display等于inline的元素(行盒在页面中不换行)
②块盒：display等于block的元素(块盒独占一行)

应用：①改变宽高范围②改变背景覆盖范围③溢出处理④断词规则⑤空白处理
**
overflow控制处理溢出方式
word-bread影响文字在什么位置被截断
break-all 截断所有，所有字符都在文字处截断
keep-all 保持所有，所有文字都在单词之间截断
white-space:nowrap–不换行
overflow:hidden–溢出隐藏
text-overflow:ellipsis–省略号

---

#行盒的盒模型
显著特点:

1.盒子沿着内容延伸
2.行盒不能设置宽高
3.填充区、边框、外边距(水平方向有效，垂直方向仅会影响背景，不会占据空间)

---

#常规流
视觉格式化模型:页面中的多个盒子排列规则
包含块:每个盒子都有它的包含块，包含块决定了盒子的排列区域

---

#块盒
每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto(auto将剩余空间吸收掉)
若宽度、边框、内边距、外边距、计算后仍有剩余空间，由margin-right全吸收（width吸收能力强于margin）

---

#浮动
应用场景：1.文字环绕 2.横向排列
特点:①当一个元素浮动后，元素必定为块盒
②浮动元素的包含块，和常规流一样，为父元素的内容盒
操作:修改float属性 -left左浮动 -right右浮动(默认值为none)

主流浏览器：IE、谷歌、火狐、苹果（主流浏览器具有属于自己的内核）