主要内容
互联网原理
纯文本和html
html基础
html基本语法
标签
一、互联网的原理
html：用来制作网页
互联网的原理：上网即请求数据
通过在浏览器上输入网址，通过http协议向相应的服务器发出请求，
把相应的网页数据传输到本机计算机，再通过浏览器进行渲染
数据：文字、图片、音频、视频等。
1.服务器：server
作用：用来存放数据；必须24小时在线，掉线则不能正常访问；可以通过个人计算机里面的ftp软件远程控制服务器
2.浏览器：browser
作用：发送和接收http请求
全球五大浏览器的厂商：IE,火狐（Firefox），谷歌（chrome），欧朋（opera），苹果（safari）
同一浏览器有不同版本
临时文件夹：第二次访问同一个网站速度变快，因为第一次浏览的时候，大部分软件已经缓存本地
3.http（Hyper Text Transfer Protocol）：超文本传输协议
包括两个部分：请求（request）和响应（response）
请求：通过浏览器输入网址向相应的服务器发送请求
响应：服务器根据响应文件，向本地计算机传输数据，在客户端进行渲染。一次请求会发送多个http请求
发送请求的方法：通过网址输入，点击超级链接
通过network面板查看
二、纯文本和html
纯文本最简单的案例：记事本文件
记事本文件：只保存文字内容，不保存格式
word文档：既保存文字内容又保存文字样式，word文档文件大小远大于txt文件
txt文件方便本地查看，可以更改文字样式，但是在保存过程中只保存文字内容
html css js都是纯文本文件
纯文本文件可以用任意的纯文本编辑器编辑
最基本：记事本
常见：记事本、Edit plus、notepad++
专门制作网页的软件：Dreamweaver（入门）、sublime（高效率程序书写工具）、web storm（高级项目编程工具）
html：超文本标记语言（Hyper Text Markup Language），用文本来标记文本
作用：制作网页
语义：人类的语言有标题和内容
html：给文本增加语义。标签本身就是超文本
问：h1标签的作用是什么？
答：不是给文本添加加粗加大字体的样式，而是给文本添加一个主标题的语义。真正控制文字样式的是css
<h1>春晓</h1>
<p>春眠不觉晓</p>
<style>
h1{
font-size:14px;
color:red;
}
</style>
3.sublime
快捷键使用：
新建文件：ctrl+n
保存：ctrl+s
快速生成html骨架：html:xt+tab
生成标签对：标签关键词+tab
生成多个相同的标签：标签关键词*n
复制标签所在行：ctrl+c：
粘贴光标所在行：ctrl+v
同时控制多行文本：鼠标+滚轮
快速删除光标所在行：ctrl+x
代码变大变小：ctrl+鼠标滚轮
光标所在行上移下移：shift+ctrl+上箭头/下箭头
布局管理：多列（alt+shift+2 ：2列）
三、html骨架
1.基本骨架
<html>
<head>
<tittle>网页标题</tittle>
</head>
<body>
主体部分，给用户看的
</body>
</html>
html表示整个网页
head标签里面的内容是给浏览器看的
body标签里面的内容是给用户看的
2.DTD 文档类型的定义（Doctype Definination）
规定我们的html使用的是哪个版本的html规范
规范（html css js）都是W3c组织规定（w3school）
html1-html5
html4.01是Xhtml1.0版本的升级，后者要求所有标签小写，标签必须有关闭符号（/），引号必须用双引号；
两者又有小规范：
strict 严格版：不能用废弃标签 font ，i，b，u，不能使用框架集
transitional 通用版：可以用废弃标签，不能使用框架集
frameset 框架集：可以使用框架集
严格程度：
XHTML1.0 strict>html4.01 strict?xhtml transitional>html transitional
3.html标签
双标签（必须有关闭符号）
html表示整个网页
xmlns是html标签的一个属性，是设置命名空间（namespace），因为网页是给不同用户看的，需要设置相同ns，规范html中标签表示含义
language，设置html标签必须使用英文
4.head标签
是配置html网页的。
字符集：charset=“UTF-8”
UTF-8:国际标准字库。包括中文，英文等其他国家所有文字。一个汉字占三个字节
GBK/gb2312：中国标准字库.包括所有中文简体，大部分繁体，字符，片假名等。一个汉字占2个字符
外文网站：UTF-8
大量中文，还要加载速度快，使用gbk
注意：网页设置的字符集和软件保存的文字编码要一致
网页标题：提高网页搜索引擎的优化（SEO）。爬虫搜索时先查找咱们标题里面的内容
5.body标签
主体部分，内容呈现给用户看
内部书写html标签组成的网页结构
f12是控制台
四、html语法
1.标签之间对空格、换行、缩进不敏感。对嵌套关系敏感(ctrl+alt+f)进行快速缩进
缩进：tab 撤销缩进：shift+tab
2.文本有空白折叠现象
文本内容区域有多个空白、缩进或者换行，在浏览器进行渲染时，只会出现一个空格
3.标签的语法
a.标签名必须写在一对尖括号里面，里面书写标签关键字
b.双标签必须成对出现。单标签除外
c.结束标签必须有关闭符号（/）
d.标签的分类：
容器级标签：h1 可以存放任何标签和文本
文本级标签：p 只能存放文本，图片，表单元素，以及font，b，i等废弃标签
4.标签的属性
写法：k=“v”
k：key 属性
v：value 属性值
用空格进行分割 一个标签可以有多个属性
五、a标签
a表示超级链接，anchor，
百度
herf:跳转路径，可以是相对路径也可以是网址形式的绝对路径。
<img src=“images/cat.jpg"alt=”"/>
(图片)
title（属性）：设置鼠标悬停文本
百度
target：设置新网页打开位置
_blank：表示在新窗口打开；不设置的默认值表示在当前窗口打开
百度
scr(cource):图片路径
alt：设置图片不能加载时的提示文本
width/height：设置图片的宽高
锚点跳转：
1.在本页面中进行锚点跳转
只需要更改href属性值。
a标签有一个name属性，或者是其他的标签的id 属性
写法：#name名/ id名
2.跨页面跳转
只需要更改href属性值
写法：
六、列表
无序列表、有序列表、自定义列表
1.无序列表
<html>
<head>
<tittle>无序列表</tittle>
</head>
<body>
<h3>手机品牌</h3>
<ul>
<li>苹果</li>
<li>华为</li>
<li>小米</li>
<li>诺基亚</li>
</ul>
</body>
</html>
无序列表就是给文本添加无序列表的语义。列表项之间没有顺序之分
ul:unordered list
li:list item 表示列表项
ul li是我们学习的第一对组标签，必须同时出现。ul里面只能放li标签不能放其他标签.ul里面可以放1个li标签也可以放多个标签。li标签是典型的容器级标签，里面可以放任何标签甚至ul li标签
<html>
<body>
<h3>服装分类</h3>
<ul>
<li>
<h4>男装</h4>
<ul>
<li>夹克</li>
<li>西服</li>
</ul>
</li>
</ul>
</body>
</html>
无序列表只添加无序列表语义，前面的小圆点并不是ul，li控制的
2.有序列表
<html>
<head>
<tittle>有序列表</tittle>
</head>
<body>
<h4>成绩</h4>
<ol>
<li>html成绩</li>
<li>css成绩</li>
<li>js成绩</li>
<li>node成绩</li>
</ol>
</body>
</html>
有序列表是文本添加有序列表的与哟，列表项之间有顺序之分。
ol：ordered list 有序列表
li：list item 列表项
ol，li也是一组标签，不能单独存在
ol标签里只能存放li，不能放其他标签
li是容器级标签，可以存放ol li
ol li只添加有序列表的语义，前面的阿拉伯数字不是ol li控制的，而是后面的css语句
3.自定义列表
涉及三个标签 dl、dt、dd
<html>
<head>
<tittle>自定义列表</tittle>
</head>
<body>
<dl>
<dt>苹果</dt>
<dd>苹果手机价格昂贵，功能强大，市场份额有点减少</dd>
<dt>华为</dt>
<dd>华为手机价格适中，功能强大，市场份额再增加</dd>
</dl>
</body>
</html>
dl：definition list：自定义列表
dt：definition title：标题
dd：definition decription：定义描述
dl是给文本添加自定义列表的语义，只能存放dt和dd
dt和dd是容器级标签
dl里面嵌套dt和dd，dt和dd是同级关系，dd是解释dt的，dd可以有也可以没有（表示没有嵌套关系）
dl>(dt+dd)+tab
通常将一个dl只放一个dt和dd
实际工作中，根据语义判断具体使用哪个列表
七、div和span
div：表示大区域、大范围
span：表示小区域、小范围
div：division ，范围、区域
将相近或者结构相似的内容放在一个div里面
div本身没有任何默认样式,容器级标签，自己独占一行；span是文本级标签，里面的文字会连续写下去
<html>
<head>
<tittle>div和span</tittle>
</head>
<body>
<div>div内容</div>
<div>div内容</div>
<span>span内容</span>
<span>span内容</span>
</body>
</html>
div>span
p>span>a
之前网站都是表格布局，没有做到结构和样式的分离，不便于书写
现在的网页都是div+css布局，便于结构和样式分离，书写过程简单，便于更改
七、表格
1.最简单的格式
<html>
<head>
<tittle>表格</tittle>
</head>
<body>
<table border="1">
<tr>
<td>第1行第1单元格</td>
<td>第1行第2单元格</td>
<td>第1行第3单元格</td>
</tr>·
<tr>
<td>第2行第1单元格</td>
<td>第2行第2单元格</td>
<td>第2行第3单元格</td>
</tr>
<tr>
<td>第3行第1单元格</td>
<td>第3行第2单元格</td>
<td>第3行第3单元格</td>
</tr>
</table>
</body>
</html>
table:表格
tr: table rows 行
td：table dock 单元格
如果表格有表头的概念，只需要将td换成th
<html>
<head>
<tittle>表格</tittle>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>MOR</td>
<td>FAMALE</td>
<td>20</td>
</tr>
<tr>
<td>LAN</td>
<td>MALE</td>
<td>17</td>
</tr>
</table>
</body>
</html>
2.合并单元格
td有两个属性来设置合并单元格
rowspan 跨行合并 ，属性值是多少就表示跨几行
colspan 跨列合并 ，属性值是多少就表示跨几列
<html>
<head>
<tittle>合并单元格</tittle>
<style type="text/css">
td{
width: 50px
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">6</td>
<td colspan="2">7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td colspan="4">10</td>
</tr>
<tr>
<td>11</td>
<td colspan ="2">12</td>
<td colspan="2" >13</td>
</tr>
</table>
</body>
</html>
3.三个划分区域的标签
caption：表格标题
thead：表头
tbody：表格主体
<html>
<head>
<tittle>表格</tittle>
</head>
<body>
<table border="1">
<caption>标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>MOR</td>
<td>FAMALE</td>
<td>20</td>
</tr>
<tr>
<td>LAN</td>
<td>MALE</td>
<td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
八、表单元素
1.form标签
网页中用户进行输入或者选择的控件就是表单元素，所有表单必须放在form标签内部
form标签是功能性标签，不是结构性标签
form标签有两个属性，分别设置表单元素提交的位置和方式。
action：提交位置
method：提交方式
<form action="1.php" method="get"></form>
2.表单元素
input（单标签，自封闭标签）：提供给用户进行输入或者选择空间
通过type属性设置不同控件
单标签：meta、img、input
(1)单行文本输入框
type=“text”。提供给用户进行文本输入的控件
value属性，表示默认文本
(2)密码框
type=“passwords”
(3)单选框
type=“radio”
一组单选框必须设置相同的name属性
(4)复选框
type=“checkbox”
必须设置相同的name属性
属性值 checked=“checked” 默认选中
(5)文本域
textarea标签是双标签
标签之间输入内容表示默认文本
(6)下拉列表
select>option 一组标签
name 以及value属性值是向后台处理的数据
属性值 selected=“selected” 默认选中
实际工作中，下拉列表不用select>option.
而是用ul>li实现
(7)按钮
button：普通按钮
submit：提交按钮 默认value值：提交
reset：重置按钮 默认value值：重置
重置和提交都会清空输入内容，不会清理默认
<html>
<head>
<tittle>DOC</tittle>
</head>
<body>
<form action="1.php" method="get">
<p>
姓名： <input type="text" />
</p>
<p>
密码： <input type="password" >
</p>
<p>
性别：<input type="radio" name="sex">女
<input type="radio" name="sex" >男
<input type="radio" name="sex">保密
</p>
<p>
爱好：
<input type="checkbox" name="hobby">music
<input type="checkbox" name="hobby">animal
<input type="checkbox" name="hobby" checked="checked">reading
</p>
<p>
<textarea cols="30" rows="10">suggestion：</textarea>
</p>
<p>
<select name="city">
<option value="">北京</option>
<option value="" selected="selected">上海</option>
<option value="" >广州</option>
</select>
</p>
<p>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
</p>
</form>
</body>
</html>
九、html杂项
1.注释：内容不会显示在网页中
快捷键：ctrl+/
作用：标注某内容的开始或者结束
2.字符实体
转义字符
空格： 
大于号：>
小于号：<
版权信息：©
花符号：&
w3school查询
3.废弃标签
font , b(加粗) ,i(倾斜), u(下划线),em(倾斜，有强调语义), del(删除线),
strong(加粗，有强调语义)，
(强制换行)
案例
<html>
<body>
<style type="text/css" >
table{
border-collapse: collapse;
}
th {
border:2px solid;
border-color: #483D8B;
text-align: right;
width: 250px;
height: 30px
}
td {
border:2px solid;
border-color: #483D8B;
width: 400px;
height:30px
}
</style>
<table border="1">
<form>
<caption>用户资料修改页面</caption>
<tr>
<th>真实姓名：</th>
<td>
<input type="text" value="Jack" style="background: #cccccc " readonly="readonly" >
</td>
</tr>
<tr>
<th>用户名称：</th>
<td><input type="text" value="nickname"></td>
</tr>
<tr>
<th>密码：</th>
<td><input type="password" ></td>
</tr>
<tr>
<th>确认密码：</th>
<td><input type="password" ></td>
</tr>
<tr>
<th>性别：</th>
<td>
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
</td>
</tr>
<tr>
<th>身份证号：</th>
<td><input type="text" ></td>
</tr>
<tr>
<th>联系电话：</th>
<td><input type="text"></td>
</tr>
<tr>
<th>手机：</th>
<td><input type="text" ></td>
</tr>
<tr>
<th>兴趣爱好：</th>
<td>
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">画画
<input type="checkbox" name="hobby">爬山
</td>
</tr>
<tr>
<th>民族：</th>
<td>
<select name="re">
<option selected="selected">汉族</option>
<option>回族</option>
<option>维吾尔族</option>
<option>其他族</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" >
<input type="reset" >
</td>
</tr>
<form>
</table>
</body>
</html>
Css基础
1.css概念：cascading style sheet：层叠式样式表
概念包括层叠式、样式
2.css作用
前端3层：
html 结构层
css 样式层
JavaScript 行为层
css涉及两个部分：选择器（给某个元素或者标签设置样式），样式属性（给选择器添加某属性）
<html>
<head>
<style type="text/css">
div{
width:300px;
height: 300px;
background-color: pink;
font-size: 20px;
font-family: "Microsoft Yahei";
color: black
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
作用：
（1）盒子实体化，进行页面布局
（2）设置文字样式
css一些样式
width、height、background-color、
border:20px solid black
font-size
font-family
color
A.文字
width:宽度，单位像素（px）
height：高度，单位像素（px）
background-color：背景颜色。
单词
十六进制 ：#000000
rgb： rgb（255，255，255）（对应十六进制）
background：复合属性，单一属性用短横线连接
border：10px solid #ffff00;
线的宽度:10px
线的类型：solid （实线） dashed（虚线）dotted（点线）
线的颜色：#ffff00
B.文字样式
color：设置文字的颜色。用色值表示法
color：#ff0000；//红色
font是复合属性，其中的单一属性用短横连接
font-size：20px；//设置字号
font-family：“隶书”；//设置字体类型
字体分为中文字体 和英文字体
英文字体：黑体，Arial
中文字体：微软雅黑，宋体
设置字体时，因为不同用户，字体不一样，尽量使用计算机默认字体
先写英文字体，再写中文字体,再写备用字体
每个字体用逗号隔开
font-family:“Arial”,“Microsoft Yahei”,“Simsun”;
C.css书写位置
1.行内式：标签有一个style属性，可以把所有css样式写在stlye属性里,包括css全部属性，但是行内式的样式一般是后台程序员添加
<p style="color: red">我是一个段落</p>
2.内嵌式（嵌入式）：写在head标签内部，一个style标签里,看前面例子，逐条进行书写
style标签里有一个type属性，属性值“text/css”表示标签内部是纯文本的css，type属性可以不写，要写的话就必须写对
3.外链式
控制台内灰色框内是默认样式
D.css杂项
html中键值对：k=“v”
css键值对：k:v
css中分号：每条属性之间用分号分隔，每个样式逐条书写，提高代码可读性
css中对空格，缩进不敏感
1.基础选择器
1.标签选择器
标签名是什么就写什么，前面不加任何符号
特点：能够选中页面上所有同种标签，不管嵌套多少层都可以被选中
用途：清空默认样式，或者重置默认样式
2.id选择器
通过标签的id属性进行设置
书写方法：#id名 中间不加空格
tips：任何一个标签的id名是唯一的，即使是不同的标签也不能用相同的id名字
命名规则：以字母开头可以有数字、下划线、横线符号
层叠性体现：同一元素既有标签设置，同时又有id设置，这些属性都会被体现在这个元素上
p{
color:red;
}
#pa{
font-size:30px;
}
<p id="pa">文字</p>
3.类选择器
通过元素上面的class属性的值可以选中相同类名的所有标签属性。常用
命名规则：以字母开头，可以用下划线、横线、数字，严格区分大小写
这是一个段落
特殊应用：原子类
.fs20{
font-size:20px;
}
.fs21{
font-size:21px;
}
.red{
color:red;
}
.green{
color:green;
}
一个元素可以有多个类名，类名之间用空格隔开
<p class="fs20 green">这是一个段落</p>
类上样式，id上行为
4.通配符
通配符：*，能够选择页面上所有的元素，包括body
```html
*{
padding:0;
margin:0;
font-size:30px;
color:#ff0000;
}
作用：清楚默认样式
2.高级选择器
在基础选择器上进行延伸
（1）后代选择器
通过有嵌套关系的类选择器或者标签选择器，确定一个大的范围，在大范围内进行选择，可以选择多次
写法：用空格隔开每一层
div.p+tab键 生成
在style标签里面设置
```html
.box p{
color: green;
}
```
两个div里面的p都可以被选中
```html
<body>
<div class="box">
<p>这是一些文字</p>
<p>这是一些文字</p>
<p>这是一些文字</p>
</div>
<p> div外面</p>
<p> div外面</p>
<p> div外面</p>
<div class="box">
<div>
<p>稍微靠里的p</p>
</div>
</div>
</body>
```
后代选择器可以补全也可以简写，但是无论如何必须对应嵌套关系
<html>
<head>
<style type="text/css">
/*通配符*/
/*
*{
padding: 0;
margin: 0;
}
*/
.header{
width: 1000px;
height: 40px;
background-color: #ff0000
border:10px solid #ffffff;
margin: 0 auto;
}
.header.logo{
float: left;
width: 100px;
height:40px;
background-color: pink;
border:10px solid #ffffff;
}
.header.nav{
float:right;
width: 850px;
height: 40px;
background-color: lightgreen;
}
.content{
width: 100px;
height: 500px;
background-color: #eee
margin:20px auto;
border:1px solid #ddd;
}
.content.slide{
float: left;
width:300px;
height: 450px;
background-color: yellowgreen;
}
.content.main{
float: right;
width: 650px;
height: 500px;
background-color: skyblue;
}
.footer{
width: 1000px;
height: 40px;
background-color: orange;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="slide"></div>
<div class="main"></div>
</div>
<div class="footer">
</div>
</body>
</html>
（2）交集选择器
交集选择器：同时满足几个条件
写法：几个选择器的点写 不能出现空格
有空格出现是后代选择器
例如 para.fs20{}是交集选择器
para .fs20{}是后代选择器
<html>
<head>
<style type="text/css">
p.para{
color: skyblue;
}
</style>
</head>
<body>
<div>
<p>我是第一层的p</p>
<div class="para">
<p>我是第二层的几个p</p>
<p class="para">我是第二层的几个p</p>
<p>我是第二层的几个p</p>
</div>
</div>
</body>
</html>
我是第二层的几个p
这句话是变蓝色的，因为是p标签，也是para类别（3）并集选择器
同时选中多个元素
表示方法：用逗号分隔每一个元素，表示“或”的意思
p,h3,li {color:pink}
表示p h3 li标签字体颜色是粉色
类名也可以用并集选择器
.para,.fs20,.orange{color:skyblue}
表示.para类别.fs20类.orange类字体颜色是sky blue
合并写。
一。继承性和层叠性
1.css的继承性
css中给祖先设置一些样式，后代元素中会继承这些样式
文字属性能继承，盒子属性不能继承
文字属性：font系列，color，line-系列，text-系列
盒子属性：width,height,background-系列，border-系列，浮动，定位
继承性可以简化css代码。（比如说直接设置body属性）
2.css层叠性
不同选择器都选中同一个元素，设置相同的属性，涉及权重概念，针对性越强权重越高
id选择器>类选择器>标签选择器
权重高的层叠掉权重低的
先比较id选择器的数量，id选择器数量多的权重高，id数量相同，就比较类选择器，类选择器多的权重高，id和类选择器数量相同，就比较标签数量，标签选择器数量多的权重高，id和类，标签选择器的数量都相同，就看谁写在最后，就是谁的样式
1个id=255个类
.box1 .box2 #box3{}
.box1 #box2 .box3{}
#box1 .box2 .box3{}
看谁写在最后就是哪个样式
没有选中元素，样式看继承性
没有选中元素有权重，只是权重为0，无法比较，看继承性。
<html>
<head>
<style type="text/css">
body{
color:yellow;
}
.box1{
color:blue;
}
.box1 .box2{
color: green;
}
#box1{
color:orange;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">我是div</div>
</div>
</div>
</body>
</html>
因为都没有选中元素，看html结构中的距离远近，遵循就近原则。.box1 .box2{}距离box3元素最近，所以显示绿色
如果距离相同，就看权重。
先比较id选择器的数量，id选择器数量多的权重高，id数量相同，就比较类选择器，类选择器多的权重高，id和类选择器数量相同，就比较标签数量，标签选择器数量多的权重高，id和类，标签选择器的数量都相同，就看谁写在最后，就是谁的样式
.box1 #box2{}
.box1 .box2{}
则比较权重，上述是前者
!important
选中元素时，!important 权重最高
没选中元素时，不影响就近原则
important只能调高一个属性的权重，不是选择其中所有的属性
二。文字属性
css属性：文字属性，盒模型，背景，浮动，定位
1.color：文字颜色
属性值：rgb(),单词,十六进制 ,hsl
2.font-size:字号
单位：像素px
现阶段需要自己获取字号
3.font-famil：字体
中文字体：微软雅黑、宋体
英文字体：黑体
先写英文字体，再写中文字体，然后备用字体
4.font-weight
字体文字加粗
属性值用数字表示：100~900
normal：数值是400
bold：数值是700
5.font-style
属性值：normal，italic（英文会自动找有倾斜字体的字母替换），oblique（简单的倾斜）
6.line-height
行高，一行文字实际占有的高度，行高内文字垂直居中
表示方法：像素表示法和百分数表示法
行高尽量写字号的后面，因为用百分号表示时是和字号进行比较的
行高的测量：
1.从上一行文字的底部到下一行文字的底部
2.匹配方法
复合属性：
font:italic bold 20px/200% “Microsoft Yahei”;倾斜、实线、字号/行高，字体 ’‘’
*文本控制属性：
text-align（文字左右居中）
属性值：left、center、right
默认属性值：left（文本居左）
文字水平居中：text-align：center （和文本是否是单行没有关系）
text-indent
文本缩进两个单位：text-indent：2em
还可以用像素表示法表示：text-indent：60px 是多少表示多少
百分比法：text-indent：10%，缩进父盒子宽度的百分比
text-decorition（有无下划线）
属性值：undeiline，none
标签默认值是没有下划线的（a标签除外）
text-
四。盒模型
1.盒模型初步
宽度，高度，内边距，外边距，边框。
宽度：内容的宽度，width
高度：图片的高度，height
内边距：边框和内容的距离，padding
外边距：盒子与盒子的距离，margin
边框：border
<html>
<head>
<style type="text/css">
.box{
width: 500px;
height: 300px;
padding: 20px;
border:10px solid #ddd;
margin: 30px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
</html>
盒子实际占有的宽度：borderx2+width+paddingx2
=500+20x2+10x2
盒子实际占有的宽度：borderx2+height+paddingx2
=300+20x2+10x2
2.padding
padding:内边距。复合属性
按照方向拆分：上右下左
padding-top/right/bottom/left
padding：10px 20px 30px 40px（四值法，上、右、下、左）
padding：10px 20px 30px （三值法，上、左右、下）
padding：10px 20px（二值法，上下、左右）
3.margin 外边距，复合属性
四值法：上、右、下、左
三值法：上、左右、下
二值法：上下、左右
单值法：上下左右
按照方向：margin-top/right/bottom/left
4.border
边框，复合属性
（1）按照方向：
boder-top：3px solid #ddd；
border-right：3px solid #ddd；
border-bottom：3px solid #ddd；
border-left：3px solid #ddd
（2）按照类型划分
border-width：3px；//线的宽度
boeder-style：solid；//线的类型
border-color：#ddd//线的颜色
复合写法：
border：3px solid #ddd；
border-collapse：塌陷
默认值：separate，表格线分开
collapse，线塌陷，用于制作单线表格（border-collapse：collapse；）
盒模型扩展
1.清除去默认样式
在写网页时，有些标签有默认的padding和margin值，还有一些标签ul，dl等有默认的小圆点样式，
写网页第一步就是清除网页默认样式
*{}通配符（效率低）
应当用并集选择器进行书写
2.宽度剩余法
在写网页时，左内边距是固定的，右侧根据内容的多少不固定有内边距，直接给盒子一个足够的宽度，右侧自动剩余
padding-left：20px；
padding-right：0px；
3.高度
（一般新闻页面）高度通常不要固定，根据内容的多少自动撑高（不用设定高度）
4.margin
垂直方向会塌陷
有两个垂直排列的盒子，上盒子有一个上margin，下盒子有上margin，之间距离并不是两个margin和而是大的margin值
父子盒模型中，子盒子和父盒子之间有个上间距，不能给子盒子设置margin-top，因为子盒子会带着父盒子撑开一个间距。
解决办法：
1.可以强制给父盒子限制区域加个border（border：1px solid #ddd）
2.用padding（padding-top：20px）
5.父子盒模型
子盒子的最大占有宽度不能超过父盒子的内容区域宽，当子盒子有内边距和边框时，需要注意宽度！！内减
（！先清除默认样式）
6.居中
1.单行文本垂直居中
行高等于盒子的高度
line-height：20px；
height：20px；
2.文本居中
text-align：center
3.多行文本的垂直居中（不给盒子设置高度，用上下相同padding撑开）
padding：40px 0px
4.盒子水平居中（margin：0auto）
auto：自动（左右撑开相同的最大距离，让盒子水平居中，让盒子一定有宽度值）
5.盒子的垂直居中（不给盒子设置高度，用上下相同padding撑开）
JavaScript简介
1.概述
前端三层：
结构层：html 从语义角度搭建网页结构
样式层：css 从装饰角度美化页面
行为：JavaScript 从交互的角度描述页面行为
用途：数据验证、读写html元素、与浏览器窗口及其内容的交互效果、网页特效、web游戏制作 基于Node.js技术进行服务器端编程
JavaScript、Jscript、action script等脚本语言都是基于ECMAScript标准实现的。
三者声明变量，操作数组等语法完全一样，但是在操作浏览器对象等方面又有各自独特的方法（各自语言的拓展）
JavaScript由ecmascript dom 和 bom三者组成
2.基础内容
（1）书写位置：
a直接在body标签内书写
b在head标签内部，通过外部引入js文件
<html>
<head>
<script type="text/javascript" src="07.js">
</script>
</head>
<body>
<script type="text/javascript">
alert("hello world!");
// 弹出框
</script>
</body>
</html>
（2）注释
快捷键：ctrl+/
表示单行注释
//balabala
快捷键：ctrl+shift+/
表示多行注释
/*
balabala
balabala
*/
编写
java需要编译、javascript是解释性语言
Javascript源代码放在html里面
<html>
<body onLoad="alert('hi')">
<script>
document.write("<h1>hello world!</h1>")
</script>
</body>
</html>
1.变量
<script>
var hello = "hello";//第一个字符不能是数字 可用字母数字下划线，不能用保留字
document.write(hello);
</script>
2.计算
<script>
var hello = "hello"//字符串
var age = 16 * 2;//+ - * / %
var ot = true;//false true
document.write(hello+age);
</script>
3.判断
<script>
var age = 20；
document.write("你的年龄是"+age)；
if (age>=18){
alert("成年")；
}
alert("*****")
</script>
嵌套语句
if —else—
if --else if—else
switch(t){
case 1:
alert(“*”);
break;
case 2:
alert(“^”);
break;
default::
alert(“*”);
}
逻辑：
and：&&
not：！
or：||
三元运算符：exp? v1 : v2
if(exp==true) v1;
else v2;
4.循环
while (){}先判断再执行
do{}while()//先执行一次再判断，至少做一次
for (){}//循环次数可计，固定
功能等价
无限循环 :
while(true){}
do{}while(true)
for( ; ; ){}
break；//跳出循环
continue；//跳过当前循环步，进入下一步循环
5.函数
function fun_name(){}
var f = new Function(“x”,“y”,return xy);
等价于
function f(x,y){return x*y}
1995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
