前端布局: html css
一、html: 超文本标记语言
html结构
<!DOCTYPE html> document type html
<html lang="en"> 网页根元素
<head> 头部:网页配置信息
<meta charset="UTF-8"> charset 文字编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 视口，略过
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 略过
<title>Document</title> 标题
</head>
<body> 身体: 网页内容
</body>
</html>
快捷键
生成html5文档 ! + Tab
快速生成标签 标签名 + Tab
快速生成带类名的标签 标签名.className + Tab
快速生成带ID名的标签 标签名#IDName + Tab
缩进 Tab
注释 ctrl + /
1、概述
超文本: img 超链接 video audio canvas
标记: , “” 《优逸客》
标签：
<div></div>
标签语法：被<>所包裹的标签名，整体称之为标签。
标签分类：
(1)按照语法分类：
- 单标签：只有开始标签
- 双标签：有开始标签也有结束标签。
- 开始标签 <标签名>
- 结束标签 </标签名>
注意：标签不能交叉嵌套,例如：
<body><div></body></div>
(2)按照在页面中的呈现效果分类
- 行内元素：在一行内显示不可以设置宽高。
a
span
em
e
strong
...
- 块元素：可以设置宽高独占一行。
div
p
pre
h1-h5
body
html
ul li
ol li
dl dt dd
...
- 行内块元素:在一行内显示，可以设置宽高
img
表单控件
标签转换
display:block; 转化为块元素
display:inline; 转化为行内元素
display:inline-block; 转化为行内块元素
属性：
(1)属性位置：开始标签内，标签名空格之后
(2)语法：
- 单个属性单个属性值： 属性名="属性值"
<div class='box'></div>
- 单个属性多个属性值: 属性名="属性值1 属性值2 属性值3"
<div class='box1 box2 box3'></div>
- 多个属性: 多个属性之间要空格
<div class="box1 box2 box3" style="width:200px;height:200px;background-color:red;"></div>
2、常用标签
<div></div>
<!-- 注释内容 -->
<a href=""></a>
<span>this is span</span>
<em>this is span</em>
<i>this is span</i>
<strong>this is span</strong>
<h1>this is h1</h1>
<h2>this is h2</h2>
<h3>this is h3</h3>
<h4>this is h4</h4>
<h5>this is h5</h5>
<h6>this is h6</h6>
<!--无序列表-->
<ul>
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ul>
<!--有序列表-->
<ol>
<li>第一天</li>
<li>第二天</li>
</ol>
<!--项目列表-->
<dl>
<dt>这是标题</dt>
<dd>这是列表</dd>
<dd>这是列表</dd>
<dd>这是列表</dd>
<dd>这是列表</dd>
</dl>
<!--段落标签-->
<p></p>
<pre></pre>
<!--link 引入样式表-->
<link rel="stylesheet" href="">
img
<img src="" title=''>
src 图片路径
title 图片标题，图片提示
alt 图片提示(出错情况下)
width
height
table 表格
<!--
标签:
table tr th td
属性:
border cellspacing 空隙 cellpadding 内填充 bgcolor='red'
width height align valign
rowspan 竖跨几行
colspan 横跨几列
-->
<table border='1' cellspacing="0" cellpadding='0' bgcolor='red'>
<!-- 表头 -->
<tr bgcolor='blue'>
<th width='100' height='30' valign='bottom' rowspan="2">姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小白</td>
<td>男</td>
<!-- <td>18</td> -->
</tr>
<tr>
<td>小白</td>
<td>男</td>
<td>18</td>
</tr>
</table>
iframe 内联框架
<a href="https://www.baidu.com" target="iframe">百度</a>
<iframe src="" frameborder="0" name='iframe'></iframe>
表单控件
<!-- 表单控件
表单属性:
action 提交数据的地址
method: 表单提交方式 get post
表单控件属性:
type 表单控件类型
name: 数据的键 比如 username password
value: 数据的值
disabled 不可用
readonly 只读
required 必填
常用的表单控件:
text 文本框
file 文件框
password 密码框
submit 相当于 <button></button> 表单提交按钮
button 按钮,默认不会提交表单
radio 单选按钮
checkbox 复选框
textarea 文本域
select 下拉框
html5:
日期:
date
time
month
week
颜色
电话 tel
邮箱 email
数字 number
滑块
-->
<input type="text" name="username2">
<form action="asdf.asdf" method="post">
<input type="text" name="username" value=''>
<input type="password" name="password" value='123456'>
<!-- 输入框 -->
<button>提交</button>
<input type="button">
男 <input type="radio" name="sex">
女 <input type="radio" name="sex">
<input type="checkbox" name="hippy" value='0'> 编程
<input type="checkbox" name="hippy" value='1'> 游泳
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id="">
<option value="0">杭州</option>
<option value="1" selected>上海</option>
</select>
<br>
<!-- br 换行 -->
<input type="date">
<input type="time">
<input type="month">
<input type="week">
<input type="color">
<input type="tel">
<input type="email">
<br>
<input type="number" min="0" max='10' step="2">
<input type="range" min="0" max='10' step="2">
</form>
3、文件路径
1、绝对路径：基于盘符开始的路径
2、相对路径：用来描述两个文件之间的位置关系的路径
./ 当前目录
../ 上一级目录
dir1/dir2/index2.html 下一级
二、css: 层叠样式表
1、常用样式
width:200px; 宽度
height:200px; 高度
background-color:red; 背景颜色
border:1px solid red; 边框颜色
2、常用选择器
1、标签选择器
作用: 选择页面中所有*的标签
/* 语法 */
标签名{
样式名1:样式值1;
样式名2:样式值2;
...
}
/* 举例 */
div{
width:200px;
height:200px;
background-color:red;
}
2、通用选择器
作用：选择页面中所有的标签,常用来做默认样式清除
/* 语法 */
*{
样式:样式值;
...
}
*{
margin:0; /* 外间距 */
padding:0; /* 内填充 */
list-style:none; /* 列表样式 */
}
3、类名选择器
作用：通过类名选择页面中所有匹配的标签
/* 语法 */
.类名{
样式名1:样式值;
...
}
4、ID选择器 作用:通过ID选择页面中匹配的标签
/* 语法 */
#ID名{
样式名1:样式值;
...
}
5、后代选择器 作用:选择后代元素
/* 语法 */
父元素选择器 后代元素选择器{
样式名1:样式值;
...
}
6、子类选择器 作用:选择后代元素
/* 语法 */
父元素选择器>子元素选择器{
样式名1:样式值;
...
}
7、群组选择器
作用:选择匹配全部标签
div,p,h1,.box,#box,.box .son,.box>.son{
样式名1:样式值1;
...
}
8、交叉选择器 作用:选择匹配的全部标签
div.box{
}
9、属性选择器 作用:通过属性进行匹配标签
/*attribute属性*/
[属性名]{}
[属性名=属性值]{}
10、伪类选择器
选择元素的状态，鼠标移入状态
:hover{}
3、选择器的优先级
宗旨: 越具体优先级越高，相同优先级，后定义的样式会覆盖之前定义的样式。
简单计算: ID(100) > class (10) > tab (1)
三、布局方式
1、浮动
(1) 文档流
从上到下，从左往右。
(2) 浮动原理
浮动的元素，脱离了文档流，从文档层中浮动到浮动层
(3) 浮动引发的问题
浮动的子元素撑不开父元素。
解决方式一：设置父元素的高度。
解决方式二：给父元素设置 overflow:hidden;
解决方式三：在父元素内容最后添加一个拥有清除浮动样式（clear:both;）的子元素2、盒子模型
(1) 构成部分
margin border padding content(width*height)
(2) 盒子宽高
盒子实际宽度 = border-left + padding-left + width + padding-right + border-right
(3) margin外间距
margin:10px; 上右下左
margin:10px 20px; 上下为10px 左右为20px
margin:10px 20px 30px; 上10px 左右20px 下30px;
margin:10px 20px 30px 40px; 上 右 下 左
margin-top:10;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;(4) padding内间距
同margin
(5) width height
width:数值;
width:父元素的百分比;
width:auto; 参照于父元素
auto != 100%
height:数值;
height:父元素的百分比;
height:auto; 由内容撑开，参照与子元素(6) box-sizing:border-box;
width 内容的宽度
box-sizing:border-box;width:200px; 实际宽度(7) 盒子模型所引发的问题
1、大部分元素的margin\padding都为0， /padding不为0。
2、marign可以为负数，padding不可以。
3、相邻的两个块元素的marign可以重合， 值会取最大值。
4、行内元素的margin值只有左右没有上下。
5、发生嵌套关系的两个元素， 如果父元素没有上边框，上padding， 父元素和子元素之间没有别的内容， 此时子元素的maring-top会加到父元素身上。
3、定位
(1)常用的定位
相对定位 绝对定位 固定定位
(2)定位特点
position:relative; 相对定位
特点: 相对于自身定位，保留原来的位置。
position:absolute; 绝对定位
特点：相对于最近的、定位的、祖先元素来定位，完全脱离文档流。
position:fixed; 固定定位
特点：相对于浏览器定位，完全脱离文档流。
定位元素：脱离文档流，并且多出四个样式: top:; right:; bottom:; left:;(3)定位元素居中
定位元素的居中方式：
方式一：
position:absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
方式二：
top:0; /* 权重高*/
bottom:0;
left:0; /* 权重高*/
right:0;
margin:auto;
4、层级
定位的元素会脱离文档层到定位层
同一层级的元素，后面的元素高于前面的元素。
z-index:; 大于0的数值