HTML&CSS总结

一．HTML

1，什么是HTML？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2，HTML的运用

（1）基础标签
HTML 标题（Heading）是通过
< h1> - < h6> 标签来定义的。
HTML 段落是通过标签 < p> 来定义的。
HTML 链接是通过标签 < a> 来定义的
HTML 图像是通过标签 < img> 来定义的.
标签< alt>用于替用
标签< br>表示换行
标签< center>用于文本的居中
标签< div>表示内容之间分隔
标签< dl>用于定义列表
标签< ol>用于排序列表
标签< ul>表示不排序列表

（2）元素
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

（3）属性
属性是 HTML 元素提供的附加信息 可以在元素中添加附加信息 属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

（4）标题，段落，链接
标题（Heading）是通过 < h1> - < h6> 标签进行定义的。
段落是通过 < p> 标签定义的。
HTML使用标签 < a>来设置超文本链接。

（5）HTMLCSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 区域使用

(6)HTML< div>
我认为最重要的是 < div> 元素，< div>是块级元素，它可用于组合其他 HTML 元素的容器。
< div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
< div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。
在写的网页使用 < div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

二，css

1。什么是css？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
编写CSS样式

2.css语法
（1）。CSS基础语法
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开
比如 selector{property：value}
选择器通常是需要改变样式的HTML元素。
比如 h1{color:red; font-size:14px;}
h1是选择器，color和font-size是属性，red和14px是值
（2）CSS高级语法
选择器的分组

h1,h2,h3,h4,h5,h6 {
color: green;
}
继承及其问题：根据 CSS，子元素从父元素继承属性。
body {
font-family: Verdana, sans-serif;
}
3 创建CSS
CSS 创建样式表分为三种情况：
内部样式表

行内式(内联样式)

外部样式表(外链式)

样式优先级：内联样式>内部样式>外部样式 三种样式表区别：

行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。

内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。

外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。
4.CSS元素选择器
最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。

语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
5. CSS链接 CSS列表 CSS表格
链接的四种状态是：

a:link - 正常，未访问过的链接。
a:visited - 已访问过的链接。
a:hover - 当鼠标滑动到链接上时。
a:active - 链接被点击的那一刻。
作用：1 设置不同的列表项标记 2 设置列表项标记为图像
修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

无序列表：
无序列表经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。
list-style-type 属性的默认值为 disc 实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。
有序列表：
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
图像作为列表项标记
要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;

表格边框： border
表格宽度和高度：width 和 height
表格对齐：text-align 和 vertical-align
表格内边距：tr,td的padding设置
6. CSS 三大特性
层叠、继承、优先级
CSS层叠性：是指多种CSS样式的叠加。
CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。
CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

使用了 !important声明的规则。
考虑权重时，需要注意的一些点：

继承样式的权重为0。
行内样式优先。
权重相同时，CSS遵循就近原则。
7.盒子模型（CSS重点）
CSS三大模块： 盒子模型 、浮动 、定位。
盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
​
盒子边框（border）

语法：border : border-width || border-style || border-color
常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、
dotted(点线)、double(双实线)