第一章 Html简介
1.html是一种超文本标记语言，主要组成部分：
*文档的声明<!DDCTYPE>:声明了html的类型和版本号
*html的根标记<html> </html>:标识了html的开始和结束
*html的头标记<head> </head>:设置页面信息
*html的主题标志<body> </body>:展示内容
2. html的书写规范：
*html的文件后缀名可以是.html或者.htm
*html文件的格式
*html文件必须以<html>开始，以</html>结束
*html语法不区分大小写
*有结束标记 <font> </font>
*如果没有结束标记，则自己结束。 比如：<hr/>
3.html作用：编写网页，通过thml标记文本图片和视频
第二章 标记
1.单标记：就是没有结束标记。 语法：<hr/> <br/>
双标记：有开始和结束。 语法：<font> </font>
2.文本控制和文本样式标记
*段落标记<p> </p>和换行标记<br/>
*段落标记：段落之间会自动换行
*文本样式标记：<font></font> 例如：<font face="微软雅黑" size="7" color="green">文本</font>
-其中size最大值为7，超过7按7处理
*其他标记：标题标记<h1></h1>......;字体样式标记：<b></b> <i></i> <u></u>
3.图像标记：在网页上面引用图片 语法：<img src="图像的url" alt="图片的描述" width="60" height="20" border="1"/>
路径分为绝对路径和相对路径 alt的值默认不会显示，但在有些浏览器上图片无法加载时显示，更重要的是，搜索引擎会参考值，宽度和高度等比例缩放
补充：图片格式
注释标记：<!--图像标记-->
4.html描述网页的语言，不是很严谨，被浏览器解析，展示效果
5.表格标记：<table border="1">
<tr>
<td>语文</td>
<td>数学</td>
</tr>
</table>
*tr表示行 td表示单元格 th表示单元格，表头自动居中加粗
align描述表格的位置 bgcolor边框的厚度 cellspacing描述表格的大小 cellpadding描述文字与边框的距离
6.表单标记：用来让用户输入数据，表单把数据封装起来提交到指定服务器
组成：*表单控件：用户输入数据，比如输入用户名，密码。
*提示信息；告诉用户输入框要输入什么值。
*表单域：表示表单的开始和结束 语法：<form>提示信息：表单控件</form>
<form action="htmlDemo.html" method="post">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="psw"/><br/>
<input type="submit" value="提交"/>
</form>
常用属性：action:表示表单要提交的位置
method:表单提交的方式，常用的有get提交和post提交，默认是get提交；get提交数据会显示在浏览器，不安全，post相反。
7.表单控件：<input/>,注意：表单想要把数据提交到指定位置，输入框必须要有name属性
输入框控件的属性type:文本框：text 密码框：password 单选按钮：radio 复选按钮：checkbox 上传按钮：file 提交按钮：submit
重置按钮：reset
8.文本域标签；<textarea rows="5" cols="7"></textarea>
9.列表标记和超链接标记
*列表标记有；有序列表<ol>li、无序列表<ul>li和自定义列表<dl>dd dt
*超链接标记：语法：<a href="跳转的url" target="目标窗口的弹出方式">文本或图片</a>
*target:_self 在原有窗口打开 _blank 在新窗口打开
10.<div>标记：用来实现网页布局，结合css
第三章 css
1.简介：是层叠样式表，作用是增强网页的显示效果，目的是让网页内容和样式分离，便于网站代码后期的维护
2.书写规范：选择器{属性1：值1；属性2；值2......}
3.css样式的引用方式；不能单独使用，必须和html配合使用
*链入式：步骤：先创建一个css 文件，再在网页里面使用link表亲引入 具体代码：<link type="text/css" href="外部css的url地址" rel="stylesheet"
*行内式：直接在html标记里面使用css样式 语法：<div style="文本</div>
*内嵌式； 语法：<style type="text/css">css代码</style> 注意：一定要放在<head>标记里面，从上往下加载
*导入式
4.css选择器和常用属性
*标签选择器；直接使用html标记作为选择器
比如；<div>标记选择器</div> 语法：div{属性：值；}
*类选择器：直接使用html标记的class属性的值作为选择器
比如：<div class="divclass">class选择器</div> 语法：.divclass{属性：值；}
*id选择器：直接使用html标记的id属性的值作为选择器
比如:<div id="divid">id选择器</div> 语法：#divid{属性：值；}
*通配符选择器；让所有的标记显示相同的样式 语法：*{属性：值；}
注意选择器的优先级：id选择器>class选择器>标记选择器>通配符选择器
*复合选择器（交集选择器） 可以选中满足多个选择器的元素 例如：我想让<h1>和<span>都为黄色，而且让<span>选中的文字字号为20px,
先设置类选择器，在给<span>设置复合选择器 span.类名{.....}
*后代元素选择器 选中指定元素的指定后代元素 语法：指定标签 指定标签的后代{....}例如：给<div>里面的<span>的文字设置背景颜色 代码：div span{background-color:red;} 当我们想要选取指定元素的全部后代元素时，语法：指定元素>*{......}
*子元素选择器 选中指定元素的子类标签 语法：指定元素 > 指定元素的子类
*伪类选择器 表示元素的一种特殊的状态 :link 表示普通的链接 :visited 表示访问过的 :hover 表示鼠标滑过的状态:actived 表示鼠标点击时的状态 :focus 表示获取焦点时的状态 ::selection 表示被选中时的状态 例如：a:visited{ color:red;}
*伪元素选择器 表示元素中一些特殊的位置 例如：要给段落的第一个字改状态 p:first-letter{ color:red;} p:first-line{ color:red;}
*兄弟选择器 语法：1）前一个+后一个 注意：这两个兄弟必须紧挨着，中间不能有其他的标签 2前一个~后边指定兄弟：表示选中后边所有指定的兄弟，中间可以有其他标签
*属性选择器：1)标签[属性]{....} 2)标签[属性="值"]{....} 3)标签[属性 小三角="值"] 以值开头的 .......
第四章 JS
1.DOM：Document Object Model 文档对象模型
2.块元素和内联元素： *块元素：独占一行的元素 有<div> <p> <h1> <h2>.... *div这个标签主要用来对页面进行布局，不会为他里边的元素设置任何的默认样式 *行内块元素：与相邻元素在同一行内，但之间存在间隙，间隙大小为字体大小，默认宽度为自身宽度，高度、宽度、自身内外边距都可以设置 有<input> <img>
*内联元素（行内元素） 只占自身大小的元素 有<span></span>，<a> img iframe ...... *span标签专门来选取文字
总结：块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式，一般用块元素去包含内联元素， a元素可与包含任何元素，但是除了他本身。 p元素不可以包含任何的块元素
3.css内嵌式优先级小于行内式
4.title属性可以给任何标签指定，当鼠标移到标签上时，会显示title属性的值
5.<meta>标签设置网页中的元数据，是给浏览器看的 语法：<meta name="keywords" content="html,css,js" charset="UTF-8"/> keywords表示关键字，中间用逗号隔开
<meta name="description" content="这是一个非常好的网站" charset="UTF-8"/> description用于描述网页，值会显示在搜索结果上
6.布局标签：header main footer nav(表示网页的导航) aside(和主题相关的其他内容，主要用于网页的侧边栏) artical(表示一篇独立的文章) section表示一个独立的区域 div没有语义，表示一个区块，用的是最多的
7.相对路径语法：使用.或者..开头 ./ 表示当前文件所在目录 ../表示当前文件所在的上一级目录
8.ID属性：在计算机中唯一不重复，同一页面不能出现重复的ID，而超链接可以标签的ID值在页面中进行跳转
9.内联框架（iframe）:向当前页面引入一个新的页面 语法：<iframe src="" frameborder=""></iframe> 内联框架使用较少，了解就行
10.引入音视频：<audio src="" controls></audio> <vedio src="" contrals></vedio> controls表示用户可以控制音视频 可能会出现浏览器不谦容，可用source标签表示src
11.样式的继承：发生在祖先和后代标签上，有利于我们的开发，我们可以将一些标签通用的样式定义在共同的祖先标签上
注意：并不是所有的样式都会被继承，像布局、背景相关的样式就不会被继承
12.补充选择器的权重：内联样式 ID选择器 类和伪类选择器 元素选择器
13.超链接伪类要写在最前边，否则不起作用
14.长度单位：*像素 *百分比：百分比可以设置属性相对于父元素属性的百分比 *em :相对于元素的字体大小来计算 1em=1 font-size
*rem:相对于根元素
第四章 盒子模型和浮动
1.文档流：网页是一个多层的结构，一层摞着一层，通过css为每一层设置样式，最顶层称为文档流，是网页的基础，我们所创建的元素默认在文档流中进行排列，所以元素由两个状态，在文档流中和不在文档流中
2.元素在文档中的特点：1）在文档流中：-块元素：*会在页面中独占一行（自上向下垂直排列）
*默认宽度是父元素的全部（把父元素撑满）
*默认高度被内容撑开（子元素）
-行内元素：*不会独占一行，只占自身大小
*在页面中自左向右排列
*默认宽度和高度被内容撑开
3.定义边框三样式：border-width border-color: border-style: 必须按顺序写，且第一个可以省 可写为：border:10px solid red
注意：border-width四个值全写是表示上右下左 写两个是前值表示上下，后值表示左右 写三个值，分别表示上，左右，下
指定左边距：border-left-20px,其他三边默认三个像素
4.padding是一个属性，可以同时指定四个方向的边距，代码为：padding:10px 10px 20px 30px
5.设置外边距左和上是移动自身，设置下和右是移动别人，设置负值是朝相反方向移动 可以同时指定四个方向的边距，代码为：magin:10px 10px 20px 30px margin会影响盒子实际占地面积 margin:0px auto 设置在父元素的中间表示