1.1.网页是什么？
答：1.浏览新闻（足不出户可以了解天下大事，新浪，搜狐）
1.2.查询信息（查询知识，查询社保等，足不出户查询信息）
3.网上购物（足不出户，www.taobao.com/等，京东，易迅，凡客）
4.公司网站（宣传，足不出户，小米，格力）
2.网页的组成元素？
1.图像元素，文字，链接，音频，视频，flash。（必不可少的元素，学习的方向）
1.3.网页的构成?
代码--浏览器渲染---形成效果
1.4.网站的组成元素？
1.网页不等于网站，网站是由许许多多的网页组成。
2.网站分为动态和静态网站。
3.静态网站加载速度快，更新不方便。动态网站更新方便。11:53 2022/6/711:53
2.1.web的一些基本术语？
1.2.1.Internet
前身是阿帕奇网（现在是世界上最大的广域网）互联网
1.2.2 www（万维网）（提供网页浏览服务）
1.2.3 URL（统一定位符）
（网址）
1.2.4 dns（域名解析）
ip地址和网站是一一对应的 因为IP地址非常难记，所以有了URL
1.2.5(HTTP超文本传输协议)
做了一些通信协议
1.2.6web（网页）
1.2.7 W3C组织
（万维网联盟）web的语法规范，是个组织。中国官方网站（http://www.w3school.com.cn/）
12:29 2022/6/7
web标准
1.为什么要有web标准？
针对不同的浏览器而制定的web标准。
2.所制作的网页符合web标准有什么好处？
1.可以手机上使用2.大多数网页可以识别3.搜索引擎收入4.打开更快
等等...
3.什么是web标准？
web标准不是一个标准，而是一系列标准的集合，结构，行为，表现组成。由w3c 和其他组织制定。
结构：XHTML
表现：css
行为：javascript
17:13 2022/6/7
1.4 HTML的简介
HTML---XHTML---XML
css+div布局或者css+xhtml布局
-------------------------------------
1.5 Css 的简介
css 层叠样式表
（使页面更丰富多彩）
1998年css2.0----2010年css3.0（浏览器的兼容性不好，还不流行）
总结：现在网络上的网站还大多数是xHTML+css2.0
未来的趋势还是HTML5+css3
大概2020年css3.0正式发布
css提倡让我们的HTML和css相分离
9:24 2022/6/8
1.6浏览器的简介
浏览器的渲染（百度统计）
IE，Mozilla Firefox，（firebug小插件查看代码）， GoogleChrome，学习网页设计要装4~5个浏览器
————————————-————————————————————————————————————————————————————————————————————
9:38 2022/6/8
1.7 dremweaver工具的使用
网页开发 sublime， dw，editple
HTML文档的基本格式
1.DW软件
2.基本格式
3.<!DOCTYPE>标签
。。。是个标签（XHTML1.0 语言版本 transitional 过渡型）
<HTML>更标签 是页面最大的标签
命名空间
<head>头部标签
<head></head>
定义了文档的头部分
<title></title>
定义了文档的标题部分
<meta>标签
<body></body>(主题标签)
定义了文档的主题部分，以后写的大部分内容在这
-----------------------
DW上生成的部分要背（一共四个标签）
1.1.5 HTML 标记
标记的分类：
1.双标记<标记></标记>双标记是为了选取某段文字
2.单标记<标记名/>（常见的：<hr/>）有时候不选取不部分，就用单标记（比如线）
注释：隐形战斗机---雷达（DW上提供选择注释按钮）
标记属性
因为标记属性标记，所以属性写入标记里。
标记，标签
键值对 key-value
属性=值
注意：各个属性键值对用空格隔开
1.3.1
标记的关系
1.并列的关系（兄弟）
<p></p>
<p></p>
2.嵌套关系（父子关系）
<p>文字<font>内容<font></p>
<p><font></p></font>错误写法
9:36 2022/6/10
2.1.4头部相关标记
<meta name=“keywords”content=“”>关键字标签，用于网页的搜索；
<meta name= "description"content="">网页说明标签；
<title ></title>网站标题标签；
<metal name ="author"content="">作者；
刷新标签；
<link rel="stylesheet" href......>css标签
9:52 2022/6/10
1.4 HTML的常用标记
1.4.1 标题标记
在HTML里面的标题标记 H
<h1><h2><h3><h4><h5><h6>从h1 到 h6
快捷键 Ctrl+1 ...Ctrl+6（标题默认加粗，且自占一行）
水平对齐属性： align ：left right center
段落标记：
<p></p>（DW中的设计视图里按回车键可以生成段落）快捷键（选择文字，Ctrl+t ，环绕标签，加p ）
2.2.1 单标签
水平线标签<hr/>
1.4.4.换行标记<br/>快捷键（shift+enter）
10:44 2022/6/10
1.4.5文本标记<font>宋体默认（三个属性 face size color）
1.4.6 格式化文本
加粗 <strong></strong>推荐 <b></b>不推荐
倾斜 <em></em>推荐<i></i>不推荐
删除线<del></del>推荐<s></s>不推荐
下划线<ins></ins>推荐<u></u>不推荐11:05 2022/6/10
1.5HTML特殊字符
  空格字符
大于号
小于号
版权等等
HTML图像标记
2.3GIF格式
优点：支持透明，支持动画
缺点：支持的颜色只有256种
（一般的网站可以满足）
PNG格式
优点：支持透明，体积小
缺点：IE6 支持PNG8 格式的透明，但是不支持PNG 24 32
（将来是种趋势）
jpg格式
优点：颜色丰富（可以支持1650万种颜色）
缺点：图片较大，不支持透明
（做产品的展示）11:17 2022/6/10
1.5 图像标记 img
（一图胜千言）
书写方法<img src="logo.gif"/>单标记
src 图像的路径
alt 替换文本（当我们的图片因为某原因无法出现显示的文本）
（搜索引擎不认识图像）
title 提示文本
（当鼠标放到图片上的时候会出现文字提示的信息）
图片的缩放 （等比例缩放，不然图片容易失真）
width 宽度
height 高度
如果我们想要等比例缩放，只要更改其中一项就行
border （图像边框）
VSpace 图片的垂直边距
hspace图片的水平边距
align 图片对齐（和文字排版结合在一起，文字环绕一起）
1.6
相对路径和绝对路径
1.6.1绝对路径
本地的绝对路径
（一般带有盘符）非常不太提倡使用（了解）
网上的绝对路径
（网站上复制路径）
1.6.2
相对路径
（就是从文件本身出发，去寻找目标文件）
同级：直接写名字
下一级：用 / 来表示
上一级：用 ../来表示
上一级的上一级：用../../来表示
但是由于图片特多，新建一个文件夹，方便管理
————————————————————————————————————————————————————————————————————————————————
CSS 的入门
1.1css也有自己的语法规范
选择器{属性1:值1；属性2：值2;...}
选择器就是选择谁
DIV P span h1
比如说，我们只想把h1 里面的文字改成红色
h1{color:red;}
注意：1.css里面全部采取的是小写字母，但大写不提倡用
2.属性和值用冒号隔开，值后面加个分号
3.多个属性值用空格隔开
4.css的注释 /* 注释语句*/
要求：我想把strong文字变成蓝色
strong{color：blue；}
1.2 引入css样式表
我们主要从css书写的位置来分
1.2.1
行内样式表
直接在标签内部书写我们的样式
<标签 style=“属性：值；”></标签>
1.2.2
内嵌样式表
<style type=“text/css”>
书写语法
</style >
注意：这句话，我们要写到<head></head>之间，通常情况下，我们直接找到</head>之前书写。
1.2.3 链入式样式表
文件-新建-css-创建
utf-8 字符集
css doucument css文件
语法规范
<link rel=“stylesheet”type=“text/css”href =“css文件路径”/>
这句话同样写到</head>的上方
（大部分是链入式的方法来写的）
总结：行内式：控制某个标签
内嵌式：控制整个页面
链入式：控制整个站点
1.2.5导入式链式表
导入式（打开网速较慢，一般不采用）
放在内嵌式写法中，书写@import url(css文件路径)
9:14 2022/6/11
css选择器的分类：
css基础选择器：（一般的）1.标记选择器，2.类选择器（以点来进行定义，用class去执行调用）
.three{color：red;} <p class=“three”></p>
注意：1.类名不能是数字
2.不能是中文
3.ID选择器（以#进行定义，用ID进行引用）
区别：类选择器相当于人的名字，可以多次反复使用。
ID选择器相当于人的身份证，能且仅能用一次。
（与面与javascript相结合常用）
通配符选择器 * 所有的 * {margin：0 ；padding0；} 但是非常少用，但可以用于测试。
css复合选择器
9:55 2022/6/11
css的样式属性（文本样式）
1.font-size 字号大小
单位：（px,em,pt）
2.font-family字体
单位：直接写字体名称（微软雅黑）
3.font-weight 字体加粗
属性（bold 加粗,normal 正常）
4.font-vartant 变体（大写改小写）
用的比较少
5. font-style 字体风格 设置字体的格式
斜体
综合设置字体：
选择器{font-size，font-family，....}
注意：font-size和font-family不能单独写，还有color必须要单写。
字体的外观属性样式
1.字体的颜色：大部分用十六进制，rgb
2.字间距：letter-spacing（10px ）word-spacing 英文单词（改的是英文单词的间距）
3.行高：line-height（适合多行，特别适合段落）
5.文本转换：text-transform
6.文本修饰:text-decoration
7.文本水平对齐：text-align
8.首行缩进：text-indent（2em)两个字的距离
9.处理空白字符的 white-space
1.6css复合选择器
1.标签指定式选择器（交际选择器）
标签.类名{属性：值；}
2.后代选择器（嵌套效果）
其写法是把外层标记写在前面，内层标记写在后面，用空格隔开。
3.并集选择器（集体声明）
如果有多个标记具有相同的属性，我们用“，”进行隔开。
p,div,font{color：red；}代码冗余
11:02 2022/6/11
css的高级特性
1.7.1 层叠性和继承性
层叠性：
css 层叠式样式表
当出现样式冲突的时候，会出现层叠性的问题
后面的样式会层叠掉前面的样式
继承性：子集总会继承父级的一些特性
（部分继承）
css优先级
标签选择器 <类选择器 <ID选择器<行内样式表<(!important 最高级 放在最后)11:20 2022/6/11
1.1盒子模型
1.认识盒子模型
网页是标签组成，每个标签看做一个盒子
1.2 盒子模型之边框
边框粗细 border-width
边框颜色 border-color
边框样式 border-style
以上属性 可以连写
border：宽度 样式 颜色 ；三个属性没有先后顺序
因为盒子是四边形，4条边 上 top 下 左 右
border-方位名词
border-top 2px solid (实线)green（用的多）
border-top 2px dashed (虚线)blue
gray;灰色
1.3 盒子模型之内边距（padding）
1.如果是一个值，表示上下左右都是相应的属性值。
2.如果是两个值，表示上下和左右。padding：10px 30px 上下是10px 左右是30 px
3.如果有三个值，表示上 ，左右和下。padding：10px 20px 40px 上10 左右 20 下 40
4.如果有4 个值，表示 上 右 下 左 （顺时针）
1.4 盒子模型之外边距
margin：完全和padding一致
（图片和文字的外边距）
如果一个块级元素有宽度，此时我们给块级元素加上margin：0 auto；表示居中显示
清除浏览器样式的代码：*{margin：0；padding：0}22:15 2022/6/12
css的背景设置
background：
1.background-color 背景颜色 （red #foo rgb(255,0,0)）
2.background-image背景图片
3.background-repeat 背景平铺 no-repeat 不平铺
repeat 平铺 repeat-x 横向平铺 repeat-y 纵向平铺
平铺要颜色好看，把颜色找到就行FW
4.background-position 背景位置 水平 垂直位置（位置灵活）
position 100px 100 px
5.background-attachment 背景图像固定还是滚动（默认滚动）fixed（固定）
以上背景可以采取和写的方法22:37 2022/6/12
1.6 css盒子的宽度和高度
盒子总的宽（高）度=盒子的本生宽+盒子的总border+总padding+总margin
1.7 元素的分类
1.块元素
1.块级元素自己独占一行
2.它有高和宽的
div,p,li,ul,ol,dl,table
2.行内元素
1.行内元素一行可以显示放置多个
2.行内元素没有高和宽的
strong，em ,i, b ,span,font
1.8 显示模式的相互转换
1.块级元素转换为行内元素
Display 显示
Display：inline；
2.行内元素转换成块级元素
display:block
3.行内块元素
display:inline-block
1.9 css 外边距合并
以前我们认为是个bug 后来发现所有浏览器都是这样的，所有就是css 的特性
1.两个并类关系的盒子
（当盒子外边距合并之后，会以最大的外边距为准）
2.父子级盒子外边距合并
还是遵循以上的原则，解决方法，给大盒子加个外边框。（border：2px solid #ccc）
还有其他解决方法。9:23 2022/6/13
5.1列表和超链接
1.列表标记
在外面HTML中，列表分为三种，有序列表，无须列表，定义列表
1.1.1无序列表 ul
<ul>
<li>裙子</li>
<li>裙子</li>
</ul>
无序列表有一个属性是type：（Disc,Circle ,square）（小黑点，小圆圈，）
可以整体指定，也可以单个指定 一般是css样式指定，因为在不同浏览器下大小不一样，
兼容性问题。
1.1.2 有序列表 ol
有序列表是有顺序的
1.1.3定义列表 dl
dt :定义名词
dd: 是围绕dt 进行描述和解释
一个dt 可以由多个dd 来描述
利用定义列表进行图文混排10:26 2022/6/13
1.1.4列表嵌套
三个列表可以互相嵌套，但是也有一定的规则（可以实现好看的效果）
1.2列表的css样式
list-style-type：circle；提倡（浏览器的兼容性问题）
list-style-image的属性 但是我们实际工作中很少用，我们都利用li指定背景图片来做这个效果
list-style-position 属性 inside ，outside
list-style 复合属性（符号，位置，图像）
注意：我们很少用list-style 样式
list-style ：none；清除列表样式
链接使用
<a href="跳转目标target=
“弹出方式”">文本或图像</a>
默认值和加载新页面（_blank）
空链接（“#”）
CSS中，通过链接伪类可以实现不同的链接状态，主要有四种：
清除超链接图像的边框
锚点链接
在HTM语言中，创建锚点链接分为两步：
1、使用“<a href="#id名">链接文本</a>”创建链接文本
2、使用相应的id名标注跳转目标的位置
链接伪类
a:link{ CSS样式规则;} 未访问时超链接的状态
a:visited{ CSS样式规则;} 访问后超链接的状态
a:hover{ CSS样式规则;} 鼠标经过、悬停时超链接的状态
a: active{ CSS样式规则;} 鼠标点击不动时超链接的状态
text-decoration：none/underline（加不加下划线）
同时使用链接的4种伪类的时候，我们要按顺序写。
L V H A love hate
通常只要两个
去掉链接图像的边框很简单，只需将图像的边框定义为0即可。
为<a>标记中的img添加样式，代码为：
a img{/*css样式*/}13:54 2022/6/13
表格：在<table>标记中，border属性用于设置表格的边框，默认值为0。
在<table>标记中，background属性用于设置表格的背景颜色。
答案解析：
设置表格的背景图像的属性是background
height
设置行高度
像素值
align
设置一行内容的水平对齐方式
left、center、right
valign
设置一行内容的垂直对齐方式
top、middle、bottom
bgcolor
设置行背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background
设置行背景图像
url地址
C、rowspan设置单元格竖跨的行数
D、colspan设置单元格横跨的列数。
表头：<th>
<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
CSS控制表格边框
CSS控制单元格边距
控制某个单元格时，用height设置单元格的高度。
表单的构成
<select></select>用来定义下拉列表。
<form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单标记<form>的常用属性。
form标记及其属性
表单控件包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
浮动和定位
1.1网页布局格式（分为以下三种）
1.标准流
行内元素单独占一行，而块级元素是上下显示的。
以前我们学习的都是标准流。
（标准流失我们网站布局中最稳定的一种结构）
2.浮动流（float）(display:inlion-block)我们运用浮动的目的就是把多个块级元素放在同一个行上
float：left，right，none.
详细的了解一下浮动：1.浮动已经脱离标准流（脱标）
也就是说，浮动已经漂浮在标准流的上方
2.因为我们的浮动是左右浮动，所以我们的块级元素都是左右排列
浮动流是我们学习的脱离标准流的方式之一，所以我们尽量使用标准流
3.定位流
9.布局和兼容性
1.版心和布局流程
2.单列布局
3.两列布局（最合适）
4.三列布局（right，left，middle）margin-left 5px
5.通栏布局（好看）
（大盒子100%，小盒子设置宽度，并居中显示）
<div class="site-nav">
<div class="nav"></div>
</div>
网页模块的命名规范
1.不用中文
2.不用数字开头
3.不占用关键字
4.用最少的字表达意思
标志：logo
导航栏：column
css hack
针对不同的浏览器有不同的问题，就写针对性的css，例如：条件注释语句，css选择器，属性选择器
967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
