第九周（3月30-4月5号）
HTML
HTML的概念
- HTML是用来描述网页的一种标准标记语言
- HTML指的是超文本标记语言（Hyper Text Markup Language）
- HTML 不是一种编程语言，而是一种标记语言（Markup language）
- 标记语言是一套标记标签（markup tag)
- HTML使用标记标签来描述网页
HTML的结构
-
一个HTML文档包含以下基本标签
- HTML ：HTML文档的根标签
- head ：头标签。用于指定HTML文档的一些属性。引入外部的资源
- title ：标题标签
- body ：体标签
- html5 中定义该文档是HTML文档
-
HTML的基本结构
-
例子
Title
-
-
html 常用标签
-
标题
-
-
-
标题是通过
-
等标签进行定义的
-
定义最大的标题。
定义最小的标题
-
例子
title This is a heading
This is a heading
This is a heading
-
-
段落标签
title This is paragraph
This is another paragraph
扫描二维码关注公众号，回复： 10649596 查看本文章
- 可以把HTML文档分割为若干段落
- 段落是通过
标签定义的
-
换行
TiTle 如果你希望在不产生一个新段落的情况下进行换行This is
a para
graph with line break- 如果你希望在不产生一个新段落的情况下进行换行（新行），请使用
标签
- 如果你希望在不产生一个新段落的情况下进行换行（新行），请使用
-
水平线
-
标签在html 页面中创建水平线 -
hr 元素可用于分割内容
-
例子
TItle This is a paragraph
This is a paragraph
This is a paragraph
-
-
文本格式化标签
-
:字体加粗
-
: 字体斜体
-
属性定义：
-
color :
- 1.英文单词： red ， green ,blue
- 2.rgb(值1，值2，值3）： 值得范围： 0~255 如 rgb (0,0,255)
-
- “#” 值1 值2 值3 ：值的范围： 00~FF之间 。如#FF00FF
-
width
- 1.数值： width =“20” ,数值的单位，默认是px (像素）
- 2.数值% ： 占比相对于父元素的比例
-
-
子主题 4
-
-
图片标签
-
在HTML中，图像由
标签定义
-
要在页面上显示图像，你需要使用源属性（src) src 指“source" .源属性的值是图像的URL
-
属性：
- src :指定图片的位置
- alt : 替换文本属性，在浏览器无法载入图片时，替换文本属性告诉读者他们失去的信息
-
例子
Title
-
-
CSS
CSS概述
- CSS指层叠样式表
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
- 降低耦合度，让分工协作更容易；外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一个
CSS基础语法
-
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明
-
selector
- 选择器通常是你需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成
CSS和HTML的结合
-
内联样式
- 内联样式。你需要在相关的标签内使用样式属性
-
内部样式
- 当单个文档需要特殊的样式时，就应该使用内部样式表，在head表标签内；你可以使用< style> 标签在文档头部定义内部样式表
-
外部样式
- 当样式需要应用于很多页面时，外部样式表将是理想的选择
- 在head标签内，定义link标签。引入外部的资源文件
CSS选择器
-
ID选择器
- 语法：#id 名 {属性： 属性值；}
-
元素选择器
- 语法：元素名称{属性：属性值；}
-
类选择器
- 语法： .class 名{属性： 属性值；}
-
群组选择器
- 选择符1，选择符2，选择符3… {属性： 属性值}
-
通配符选择器
-
- {color:red ;}
-
-
属性选择器
- 元素名称[属性名=“属性值”] {}
-
后代选择器
- 选择器1 选择器2{}
-
子元素选择器
- 选择器1 > 选择器2{}
-
伪类选择器
- 元素：状态{}
- a:link {属性：属性值；} 超链接的初始状态
- a:visited {属性：属性值；} 超链接被访问后的状态
- E： hover { 属性： 属性值；} 鼠标划过元素时的状态
- E： active { 属性： 属性值；} 即鼠标按下时元素的状态
CSS属性
-
文本的相关属性
- font-size :字体大小
- font-family : 字体样式类型
- font-style : 字体风格
- color： 文本颜色
- text-decoration: 划线修饰
- letter-spacing : 字母间隔
- text-align: 水平对齐方式
- vertical-align : 垂直对齐方式
- line-height: 行高
-
背景
- background-color: 背景颜色
- background-image: 背景图片
- background-repeat： 平铺状态
- background-position: 属性设置背景图像的起始位置
- 注意： ( 第一个值是水平位置，第二个值是垂直位置
-
边框
- border: 3px solid red ;
- 边框线型： solid : 实线 ； dashed :虚线， dotted : 点状线 double : 双线， none : 没有边框
- 单独设置某个方向的边框属性
- border-top: 上边框
- border-bottom :下边框
- border-left ： 左边框
- border-right: 右边框
-
尺寸
- width: 宽度
- height : 高度
盒子模型
- CSS框模型： 规定了元素框处理元素内容、内边距、边框和外边距的方式
- margin: 外边距
- padding : 内边距
- border：边框
定位
-
CSS定位属性允许你对元素进行定位
-
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
-
CSS定位机制
- CSS有三种基本的定位机制：普通流（相对定位） 浮动和绝对定位
- 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在（X） HTML中的位置决定
- 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来
-
相对定位： 相对于原有的位置发生改变，并且保留原有的空间的位置
-
绝对定位
- 绝对定位相对于他有position 属性的父级元素进行定位，如果父级元素没有postion 定位，那么就找父级的父级。直到向上找到position定位为止，如果他向上找不到position 定位。那么就以最外层的body 进行定位
- 并且绝对定位不会保留原有的位置空间
-
浮动
- 浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子，可以横向排列起来
总结：
-
CSS的概念
- CSS指层叠样式表CSS选择器
-
CSS属性： 文本相关;背景；边框；尺寸
-
盒子模型： 内容宽度：边框；外边框；内边距
-
定位： 相对定位；绝对定位；浮动
