DAY02

快捷键：
复制：Ctrl+C
粘贴：Ctrl+V
剪切：Ctrl+X
返回到上一步：Ctrl+Z
全选：Ctrl+A
保存：Ctrl+S
Alt+Tab:切换工作窗口
F5：刷新网页
win+D:回到桌面
Ctrl + ?/:注释

DAY02
复习
1.什么是web?
运行在Internet之上使用浏览器去访问服务器过程。俗称网站
2.什么是HTML？
Hyper Text Markup Langulage 超文本标记语言
特点:
1.由浏览器解析执行
2.以.html或.htm为后缀的文件
3.可以嵌套脚本语言（js）
4.用带有尖括号的标记来标识内容
3.标记
双标记：<标记>内容</标记>
ex:

单标记:<标记>
ex:

---

4.元素嵌套
一对标记中嵌套其它标记

5.html标准结构 ========================================================== 今日目标 一 HTML 1.URL 统一资源定位器。俗称路径或者地址 路径的表现形式; 绝对路径：完整路径

相对路径:相对于当前网页，查找资源所经过的路径称之为相对路径
同级目录：所有资源放到同一个文件夹中，如果网页需要引用图片，直接
写图片名称即可。
2.图像
标记：
属性：src,指定图像的路径
width,设置图片的宽度，取值px为单位的数字
height,设置图片的高度，取值px为单位的数字
alt,当图片加载出错时，所提示的文字

练习：图片居中显示，点击图片跳转tmooc,当图片加载出错时提示相应信息
3.链接
标记：内容
属性：href，指定链接的路径(取值为#，回到页面顶部)
target,打开新的页面的方式
取值：_self 从自身的页面中打开，默认值
_blank 从新的页面中打开链接
练习2：显示居中一张图片到页面中，要求图片具有链接效果
点击图片从新页面中打开百度；文本‘百度’，具有链接效果从自身
页面打开百度

4.列表
1.列表的作用
将具有相似特征或者具有先后顺序的内容按照从上到下（从左到右）的顺
序排列。
2.语法
所有列表都是由列表类型和列表项组成。
无序列表：

• 
  
• 内容1
• 
  
• 内容2
• 
  

属性：type,定义无序列表的标识类型
取值：disc,实心圆
circle,空心圆
square,实心方块
none,无
练习:新建网页文件，使用列表完成部分京东左侧的商品列表分类
有序列表:

1. 
   
2. 内容1
3. 
   
4. 内容1
5. 
   

属性：type,定义有序列表的标识类型
取值：1 默认值，数字
a A 字母
i I 罗马数字
start,指定起始编号
取值：无单位的数字

二 CSS概述
1.什么是css？
css:Cascading Style Sheets层叠样式表，简称样式表
2.CSS的作用
定义网页中元素的样式，修饰元素
3.CSS优势
1.实现内容与表现的分离
2.实现样式代码的重用和可维护性
3.CSS的样式效果更丰富
4.CSS和HTML的关系
HTML:负责搭建网页结构
CSS：负责构建样式

三 使用CSS方式
1.内联样式
2.内部样式
3.外部样式

使用方式详解：
内部样式：将样式定义在网页的头部，在头元素中增加一对style标记
在style标记中编写样式规则
语法：

样式规则：由选择器和样式声明组成 选择器：规定页面中哪些元素，能够使用定义好的样式 元素选择器：用元素名称作为的选择器，定义当前元素名称所对应的一类元素。 语法：元素名称{样式声明} ex: div{ } span{ } 样式声明：由样式属性和值组成，属性和值之间用冒号连接,以分号结尾。 常用CSS属性： 1.color定义文本颜色，取值以颜色的英文单词 2.font-size设置字体大小，取值为px为单位的数字 3.background设置背景颜色，取值为颜色的英文单词

四 基础选择器
1.选择器的作用
将定义好的样式匹配给页面中的元素
2.选择器详解
1.元素选择器
作用：元素名称作为的选择器，定义当前元素名称所对应的一类元素。
语法：元素名称{样式声明}
ex: div{color:red;}
2.类选择器
作用：一段公共的样式，谁想用都可以用，很灵活,可以修饰一个元素或多个元素
语法：
1.定义类选择器
.类名{ 样式声明 }
注意：类名不能以数字开头，不能包含特殊符号(可以包含_ - )
2.使用类选择器
class标准属性，通用属性（所有的标记的都有这个属性）
任何标记都可以通过class属性，引用类选择器

多类选择器:
允许一个元素使用多个类选择器
语法：
3.后代选择器
作用：依托于后代关系去匹配元素
后代关系：一级或多于一级的嵌套关系
语法：选择器1 选择器2 选择器3{样式}
ex： .one p span{样式}

添加样式

练习:按照以下布局，用后代选择器完成样式设置

设置当前元素中文本颜色为黑色，字体大小为24px

当前元素中的文本不需要修饰

4.群组选择器
作用：定义一群选择器的功能样式，选择器之间用逗号隔开
语法: 选择器1，选择器2，选择器3{ }

补充：id选择器
	1.#d1{样式声明}
	2.<any id="d1"></any>

五 尺寸与边框
1.尺寸单位
px:像素
%：百分比（相对于父元素的占比）
2.尺寸属性
默认尺寸：
块级元素：
宽度：占父元素的100%
高度：自适应

	行内元素：
			宽度：自适应
			高度：自适应
哪些元素可以设置尺寸呢？
   1.块级元素允许修改尺寸
	 2.非块级元素中，本身具备宽高属性的元素就允许修改尺寸(img,table)，不具备宽高属性的行内元素就不允许修改尺寸(span,u,i,a,b)

2.边框
1.什么是边框？
就是围绕在元素内容和内边距外的线条
2.简写方式——语法
属性:
border:width style color;
width 边框的宽度（粗细）
style 边框的样式
取值：solid 实线
dotted 虚线（点状）
dashed 虚线（线条型）
color 边框的颜色