一、html
html主要讲了各个元素的意思和使用方法
1.一个简单的html文件主要包括
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--样式 -->
<style type="text/css"></style> //样式
</head>
<!--身体 -->
<body>
<!--行为 --> //标记都是在body里面写的
<script type="text/javascript"></script>
</body>
</html>
2.标签
标签分为单标签和双标签，单标签可加或者不加闭标签，但双标签一定要有闭标签，需要符合开闭原则。
如：<div></div> <br/>
文章元素：<h1> - <h6>、<p></p>、<br>、<span>、<pre>
<h1>-<h6>标签是标题大小 <br>换行标签
<p>标签定义段落，会自动换行 <span>标签是没有任何效果的文本，不能设置宽高，span不会换行
<pre>标签是带格式的p标签，可以保留源代码格式，即代码上的缩进和换行等都保留下来，用于展示代码。
字体样式元素：<i>：表示斜体、<b>、<strong>：字体加粗
布局元素：
块级元素：默认占用一行，可以设计宽高 div 向自身或向下嵌套
行内块元素：可以直接设置宽高，但不占一整行 img
行内元素：不可以这几设置宽高，也不占一整行 span
例如：<div style="width: 20px;height: 20px;">这是一个div</div>
框架元素：<iframe>、<frameset>、<frame> => HTML5 不再支持 <frameset> 和 <frame>
表单元素：<from>、<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<label>、<fieldset>
<select><option>标签是实现下拉框选择，在里面加optgroup label可以加组的选择标题。
label标签label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验。可以获取焦点，不管点击label里的那个地方都可以获取焦点，即点击到框内。
fieldset是半包围边框，legend是半包围边框标题
列表元素：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
ul标签是显示无序列表，即没有序号，但有小圆点
ol标签是显示有序列表
二、CSS
css选择器5种
.class 类名选择器
＃id 选择器
tagName 元素名选择器
* 通配符选择器
引入方式：
内部样式：内部样式定义在文档的head部分，通过style标签来设置。需要使用元素选择器（p）来关联样式和要设置样式的标签（p标签）。
内联样式通过style属性来设置，属性值可以任意的CSS样式。例如在里面设置div和img。
外部样式：在文档外的*.css定义css样式，然后在文档的head部分通过link元素引入。
4.文件属性
border 边框
margin: 外边距 margin-top 顶部外边距
margin简写属性：（像素除0外其他都要加px）
margin auto 左右居中
margin ：0 auto 上下为0 左右居中
margin：0； 上下左右外边距都为o
margin：10 px 20px ;上下为10左右为20
margin ：1 2 3； 上1 左右 2下3个像素
margin: 1 2 3 4; 上1 右2下3左4
padding:内边距
border-radius: 设置圆角属性 当弧度等于高度一半就是圆弧了
loat：left；左浮动
相对定位，绝对定位和固定定位
相对定位：position: relative; 相对于自身位置去定位：
left：相对于自身位置的左边多出xxpx（即向右边跑）；top（下跑）；botttom（向上跑）；
绝对定位：position：absolute相对于父类元素
固定位置：position：fixed 固定位置及不管页面怎么移动都不会动
文字大小：font-size（浏览器字体大小最小10） 字体颜色：color 字体行高：line-height
text-align：center 字体左右居中 行高=高度 ：字体上下居中 字体加下划线：a标签 去掉下划线：text-decoration: none;
三、js
写脚本要加文档加载完成方法
window.οnlοad=function（）{}
console.log() 打印日志
获取结点：
①通过id获取： document.getElementById('p1');
②通过类名获取：document.getElementsByClassName
③获取div： document.getElementsByTagName
④通过css选择器 返回所有匹配元素：var ele = document.querySelectorAll('*')
⑤触发onclick事件：当鼠标单击声明的 h元素，触发事件
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
