一、html介绍
html不是一种编程语言，是一种标志语言- 标记语言是由一套标识标签组成的
html使用标签来描述网页
二、html标签
<html> <head> <body>标签
<h1>—-<h6>仅仅用于标题文本，不要为了产生粗体文本使用它们
<p>标签 段落标签
<strong><b>标签
<strong>用于强调文本，强度更深，表示重要文本—>用于SEO优化
<b>只是视觉加粗效果—>单纯为了产生加粗
<em> <i>标签em用于强调文本i
只是视觉斜体效果
<strong>比<em>强调更强
图片标签写法 ：<img src="" alt="" width="" height="" />
height="" 图片高度 和图片大小保持一致
width="" 图片宽度 和图片大小保持一致
alt="" 图片含义
src="" 图片路径
<div>是一个块级元素，<div> 标签可以把文档分割为独立的、不同的部分。 <div>主要用来块的定位在div中能加多种属性，如:id选择器，类选择器，style 也可以通过z-index来设置div层，值越大的越在前面，也就是说数值大的会覆盖 数值小的层
三、css简介
CSS 工作原理. 编辑. CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。. CSS样式可以直接存储于HTML网页或者单独的样式单文件。. 无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。. 外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。. 样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。. 样式规则由一个或多个样式属性及其值组成。. 内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
css基本语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
三种引入方式
行内样式
行内样式，就是将css样式代码写在具体网页中的一个html标签元素内；行内样式要在特定的HTML标记内使用，使用style属性来设置特定HTML标记的样式。比如：<div style="color:#f00"></div>
外部样式
外部样式就是把 CSS 代码保存在一个单独的文件中，文件的扩展名为 .css，然后在 HTML 页面中引入这个 CSS 文件即可。
HTML 文件引入外部样式表有两种方式，分别是链接式和导入式。
链接外部样式表
链接外部样式表就是在 HTML 文件中使用 <link/> 标签链接外部样式表，且 <link/> 标签必须放到 HTML 中的 <head> 标签内。在一个 HTML 页面中可以链接多个 CSS 文件，一个 CSS 文件也可以被多个 HTML 页面引用。
导入外部样式表
导入外部样式表就是在 HTML 页面中使用 @import 导入外部样式表，导入样式表的语法需要放置到 <style> 标签中。
内部样式
内部 CSS用于定义单个 HTML 页面的样式。
内部 CSS是在 HTML 页面的<head>部分中<style>元素中定义的。
盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
美化网页
字体
font-family 字体
font-size 字体大小
font-weight 字体的粗细
color 字体的颜色
文本样式
颜色
单词
RGB 0 ~ F
RGBA A：0 ~ 1
文本对齐的方式
text-align: center;（水平居中）
首行缩进
text-indent: 2em;
行高
line-height: 300px;
垂直居中：line-height = height
装饰
/下划线/
text-decoration: underline;
/中划线/
text-decoration: line-through;
/上划线/
text-decoration: overline;
文本水平对齐
vertical-align: middle;
浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
img
{
float:right;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
