HTML基础
HTML：(Hyper text markup language)超文本标记语言
Html结构标准
<!doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主题标签
</body>
</html>
注：网页文件后缀名html和htm两种类型是一样的。htm是因为之前电脑不支持四个字符的后缀名。后缀名不能决定文件格式，只能决定打开文件打开的方式。
Html标签分类
单标签 <!doctype html>
双标签 <html></html> <head></head>
Html标签关系分类
包含(嵌套关系) <head><title></title></head> 父子
并列关系 <head></head><body></body> 兄弟姐妹
Html标签
单标签：换行标签 <br> ， 水平线标签<hr>
双标签：段落标签<p></p> ， 标题标签<h1></h1>(h1到h6标题大小依次减小，h1在一个页面里只能出现一次) ，加粗标签<strong></strong>(常用)或者<b></b>，倾斜标签 <em></em>(常用)或者<i></i> ，删除线标签<del><del>(常用)或者<s></s>，下划线标签<ins></ins>(常用)或者<u></u>
注：这里相同的标签选择常用的原因是因为这些标签更有语义化，可读性更强。
图片标签：
路径
1.相对路径：
同级目录：直接写文件名
下级目录：文件夹/文件名
上级目录：../文件名
2.绝对路径：
直接写出文件的全部路径，电脑上的绝对路径或者互联网的绝对路径。 例：
C:/Desktop/images/xxx.png
超链接：<a href ="跳转的目标位置" titlte="鼠标放上时显示的提示文本" target="打开一个新页面的方式">我是一个超连接</a>
注：默认是在当前的窗口覆盖新的页面，如果设置target的值为_blank时将会在新的窗口打开新的页面。
锚点：设置一个锚点，利用a标签可以回到锚点的位置。锚点设置即给目标标签设置id属性，将a标签的href值等于id属性的值(前面加上#)。
空链接：<a href = "#">这是一个空链接</a>
压缩包下载：<a href = "压缩包路径"></a>工作不推荐使用
超链接优化写法：在<head>标签中声明<base target="_blank">指明所有的超链接都自动打开新窗口。
特殊字符：空格： ,<:<,>:>等等。
列表标签
1.无序列表<ul><li></li></ul>
2.有序标签<ol><li></li></ol>
3.自定义列表<dl><dt></dt><dd></dd></dl>
不常用标签：
音乐标签：
<embed src="文件路径">
滚动标签：<marquee></marquee>
meta和link标签
<meta charset="utf-8">Charset 编码 常用UTF-8通用字符集
<meta name="keyword" content = "关键字眼">在content中填写关键字给SEO(搜索引擎)来检查。
<meta name="description" content="描述内容">网页描述内容给SEO看的，会显示在搜索到的网页下方。
<meta http-equiv="refresh" content="5;http://www.baidu.com">网页重定向。网页打开后5秒后会跳转到百度首页。
<link rel="stylesheet" href="css文件路径">链接到css外部样式表
<link rel="icon" href="文件路径">设置网站的小图标
表格标签
一般结构
<table>
<tr> //行
<td>张三</td> //单元格
<td>18</td>
<td>挖掘机</td>
</tr>
<tr>
<td>马六</td>
<td>20</td>
<td>大前端</td>
</tr>
</table>
标准结构
<table> //表格
<thead> //头部
<tr> //行
<td></td> //列
<td></td>
<td></td>
</tr>
</thead>
<tbody> //主体
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot> //底部
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
属性设置
colspan="2"同一行向后合并。两个单元格合并
rowspan="2"同一列向下合并。两列单元格合并
表格标题：<tr><th></th></tr>用法跟td一样
表单标签:<form><input></form>
作用：收集信息。
<form action="2.php" method=""></form>
action:信息提交的目标位置，信息处理。
method:get/post。信息提交的方法。
文本输入框：<input type="text" maxlength="限制的字符长度" readonly ="只读状态" disable="未激活" name="输入框标识" value="默认值">
密码输入框：type="password"
单选框：type="radio" checked="checked(设置默认选中)"
注：将单选框的name属性设置为相同时才可以实现单选效果
下拉列表：<select><option>下拉列表选项</option></select>
<option selected="selected设置默认选中"></option>
<select multiple="multiple设置为多选项下拉列表"><select>
多选框：<input type="checkbox" checked="checked默认选中">
多行文本框：<textarea cols="列数，字符长度" rows="行数"><textarea>
文件上传控件：<input type="file">
提交：<input type="submit">
普通按钮：<input type="button">没有提交功能
图片按钮：<input type="image" src="图片路径">可以实现提交功能
重置按钮：<input type="reset">把信息恢复到默认状态
表单信息分组<fieldset><legend>分组名称</legend></fieldset>
H5表单补充：
<input type="url">网址输入框；<input type="date">日期；<input type="time">时间；<input type="email">邮件；<input type="number">数字；<input type="range">滑块。
标签语义化
根据内容的结构化，选择合适的标签。
CSS基础
CSS:(Cascading Style Sheets)层叠样式表.主要用来美化html标签的，相当于给页面化妆。
格式：选择器{属性：值}
选择器：选择哪个标签的过程。定位到哪种标签。
选择器
1.基础选择器
标签选择器：标签{属性：值} 例：p{font-size:14px}所有的p标签的文字大小为14
类选择器：.类名{属性：值} 类名是给标签设置的class属性值
ID选择器：#ID名{属性：值}id名是给标签设置的id属性值。
通配符：*{属性：值}
2.符合选择器
后代选择器：选择器1+空格+选择器2{属性：值}
交集选择器：选择器1+选择器2{属性：值}
并集选择器：选择器1+,+选择器2{属性：值}
子代选择器：选择器1+>+选择器2{属性：值}
文本属性连写
font-size:16px:文字大小
font-weight:300:文字粗细
font-family:宋体:文字字体
font-style:normal:文字类型
连写：font:normal 300 16px 宋体按照顺序来写，文字大小跟字体必须写。
三种样式表
1、内部样式表：写在head标签内<style>{选择器{属性：值}}</style>
2、外部样式表：写在单独的.css文件内。用link标签链接<link rel="stylesheet href="xxx.css"">
3、内联样式表：写在单独标签内。很少使用，优先级最高。
元素类型
块级元素：独占一行。嵌套下，子会元素宽度(没有定义情况下)和父块元素宽度默认一致。
行内元素：a,span,em,strong等标签。都在一行上显示，不能直接定义宽高。
行内块级元素：input，img等标签。可以设置宽高，在一行上显示。
样式选择原则
1、代码往下执行，具有层叠性。
2、继承性。h标签不能继承文字大小，a标签不能继承颜色属性。
优先级
标签选择器1(权重值)<类选择器10<ID选择器100<行内样式1000<!important1000以上
继承的权重为0。
权重可以叠加，权重值越高优先级越高。
链接伪类
a:link{属性：值}在超链接的情况下与a{属性：值}一样，默认状态。
a:visited,链接访问之后的状态
a:hover，鼠标放在链接上的状态
a:active，链接激活时的状态，鼠标按下时。
:focus，获取焦点。
注意：如果四个链接伪类都使用时，一定要按顺序书写不然出现问题。
行高
浏览器默认文字大小为16px。
行高是基线与基线之间的距离。行高=文字大小+上下边距，当行高跟元素的高度相同时，文字会居中显示。
行高的单位：
像素：px
百分比：%
比例：em 文字大小的倍数
不带单位：2
单位除了像素以外，行高都是与文字大小的乘积。
父子元素都设置文字大小时：不带单位时，行高是跟子元素文字大小相乘，其他都是与父元素的文字大小相乘。行高以像素为单位，就是定义的行高值，推荐使用像素作为行高的单位。
盒子模型
边框：border
边框合并：border-collapse：collapse；
内边距：padding 会增加盒子的值
外边距：margin
盒子=内容大小+内边距+边框
子盒子会继承父盒子的宽度，高度不会，未设置就是0。继承的盒子设置内边距不会被撑大(未超过设置的宽度时)。
注：垂直方向两个盒子都设置了外边距，浏览器会取最大值作为两个盒子的间距。
外边距塌陷：嵌套的盒子，直接给子盒子设置垂直方向外边距时，会出现塌陷(两个盒子同时往下移动。) 解决方法：1、给父盒子设置边框 2、给父盒子设置overflow：hidden。(推荐使用)bfc：格式化上下文。
补充：获取表单焦点：label标签将for属性设置为input的id值。
浮动原理
三大布局
1、文档流（标准了）：元素从左到右，自上而下，块元素独占一行，行内元素在一行上显示，碰到父级元素边框换行
2、浮动：float:left || right
3、定位：position:
特点：元素使用浮动后，不占据原来的位置（脱离标准流）；浮动的盒子在同一行显示；行内元素浮动之后转换为行内块元素(不推荐使用，因为元素脱标了)；
浮动作用：文本绕图；制作导航；网页布局；
清除浮动：
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素位置发生错误。
清除浮动不是不用浮动，是清楚浮动产生的不利影响。
方法：1、额外标签法：在最后一个浮动元素后添加标签设置属性clear:left || right || both(工作用的最多) 增加标签影响浏览器加载，很少使用。
2、给父级元素使用overflow:hidden 原理：bfc 格式化上下文。
注：如果有内容在盒子外面就不能使用这个方法。
3、伪元素：推荐使用。给父标签添加类属性.clearfix:after{ content:"";display:block;height:0;line-height:0;visibility:hidden;clear:both}兼容IE浏览器添加属性.clearfix{zoom:1}
CSS初始化
各大浏览器间兼容性不同，为使各大浏览器样式一致，故需要做一些初始化。例
body,ul,ol,li,p,h1,h2,h3,form,table,td,img,div,dl,dt,dd,input,span{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
img{border: none;
}
li{
list-style: none;
}
input,select,textarea{
outline: none;
}
textarea{
resize: none;
}
a{
text-decoration: none;
}
/*清除浮动*/
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
overflow
溢出。内容超出盒子范围。
overflow:visible默认值，正常显示不会修剪，元素显示在盒子之外。
overflow:hidden超出部分被修剪。
overflow:scroll显示滚动条。超出部分被藏起来，通过滚动条查看。
overflow:auto如果有内容超出会显示滚动条，没有则是正常显示。
定位
定位方向：left:、 right:、 top:、 bottom:
position:static静态定位：相当于标准流，默认值。
position:relative相对定位：相对于自己出发；不脱标，还占据原来的位置；子绝父相(父元素相对定位，子元素相对定位)；行内元素使用后不能转行内块。
position:absolute绝对定位：脱标，不占据原来位置；相对于浏览器出发；嵌套盒子，父盒子没有使用定位，子盒子还是从浏览器出发；嵌套盒子，父盒子使用定位，子盒子从父盒子出发；行内元素使用后会变成行内块元素。
position:fixed固定定位：脱标，不占据原来位置；相对于浏览器出发；行内元素使用后会变成行内块元素。
补充：z-index:0~99改变元素的层叠顺序，值越大，元素就越在上。
定位的盒子居中显示：left:50% margin-left:-width*0.5 先走父盒子的一半位置，然后再往回走本身的一半。
规避脱标流
margin-left:auto盒子冲到右边；
margin-right:auto盒子冲到左边；
margin:0 auto盒子居中；
尽量使用标准流，标准流不能实现的用浮动，浮动实现不了的用定位。
图片和文字垂直居中对齐
vertical-align:baseline默认基线对齐。对inline-block最敏感。
vertical-align:middle中对齐
vertical-align:top上对齐
vertical-align:bottom下对齐
css可见性
overflow:hidden溢出隐藏
visibility:hidden隐藏元素
display:none隐藏元素
display:block元素可见
第二个跟第三个的区别：第二个元素隐藏，位置还在；第三个元素隐藏，位置消失。
内容移除
使用text-indent:-5000px,如果是行内标签要转成行内块标签。
css精灵图
css精灵是一种处理网页背景图像的方式。将很多小图像合成到一张大图上。精确度某个小图像，使用
background-position等样式选择。
补充：
属性选择器
写法：标签[属性:值]后面可以跟多个属性。
JS基础
js是一款运行在客户端的网页编程语言。
组成部分：
ecmascript：js标准
dom：通过js操作网页元素
bom：通过api操作浏览器
特点：
简单易用；解释执行(逐行执行);基于对象；
补充：编译执行：java等语言都是需要编译成.dll电脑可执行文件才能运行，与解释执行对应。
JavaScript：实现网页与客户之间的互动的桥梁，让网页具有丰富的生命力；
书写位置
内嵌： <script type="text/javascript">内容代码</script>
外链：<script src="js文件路径位置"></script>
js的位置没有固定要求，但是一般写在网页加载完成之后再让js代码执行。即我们可以写在body标签最后。
注：写js代码的时候分号不要省略。
输出信息的5种方法
alert(): 页面弹出对话框，早起js调试使用；
console.log(): 控制台输出；
confirm(): 页面弹出对话框，多一个取消按钮选项；
prompt(): 页面弹出对话框，多了一个输入框，接收用户输入信息；
docment.write(): 在页面上显示信息；
\""：\转义字符，代表一个双引号。
\n：代表换行
\r：代表回车
变量
会变化的量，存储数据的容器。
常量：let
变量：var
数据类型
数字型：number
字符型：string
布尔型：boolean
未初始化：undefined 内存在存在
空：null 内存中不存在
判断数据类型：typeof()
比较运算符
> < >= <= != == ===
注：==是判断内容值是否相等 ===另外还判断类型是否相等
算术运算符
+ - * / % += -= *= /= ++ --
注：数字跟字符串相加结果是一个字符串。数字跟数字字符串相减得到一个数字类型。一个数字类型跟非数字字符串相减得到NaN。相除的时候除数为0时得到Infinity。
NaN(not are number)数字类型，代表不是一个数字。
Infinity：数字类型，代表无限大。
Date对象和Math方法
var myDate = new Date();//通过new方法创建对象
alert(Date());//返回完整的日期时间
alert(myDate.getDay());//返回周几
alert(myDate.getMonth()+1);//返回月份
alert(myDate.getFullYear());//返回年份
Math方法
Math.ceil();//向上舍入取整
Math.floor();//向下舍入取整
Math.max(x,y);//最大值
Math.min(x,y);//最小值
Math.random();//返回0到1之间的随机数
Math.pow(x,y);//返回x的y次方
Math.round();//四舍五入
数据类型转换
数字转字符串：String() .toString
字符串转数字：Number() parseInt() parseFloat()
转布尔类型：Boolean()
注：0 null undefined转布尔为false。
逻辑运算符
与&& 或|| 非！
与的优先级高于或。
网友评论