前端
- 基础知识
-
- HTML5首先知道
-
- 1.标签成对
- 2.必有代码
- HTML5知识
-
- 1.标题
- 2.水平线
- 3.设置按钮
- 4.输入框
- 5.图像标签
- 6.插入音频
- 7.超链接
- 8.特殊字符
- 9.内联框架
- 10.表格框架
- 11.表格属性
- 12.合并单元格
- 13.列表标签
- 14.表单
- 15.`label`标签
- 16.select下拉表单元素
- 17.文本域
- CSS3知识
-
- 1.css格式：
-
- ① 类选择器(最常用)
- ② id选择器(只能调用一次)
- ③ 通配符选择器(页面上的所有标签)
- ④ 后代选择器
- ⑤ 子选择器
- ⑥ 并集选择器
- 2.字体
- 3.文本
- 四、三种样式表
- 5.Emmet句子(方便句)
- 6.格式化文档
- 7.伪选择器(添加特殊效果)
- 8.focus 伪类选择器
- 9.元素显示模式
-
- 一、块元素(常见:`h1、p、div、ul、ol、li`等）
- 二、行内元素
- 三、行内块元素(例)`img、input、td`）
- 四、元素显示模式转换
- 10.背景属性
- 11.cursor(设置光标形状)
- 12.取消列表前的点
- 13.CSS三个特性
- 盒子框架
-
- 框架相关知识
-
- 1.网页布局的本质
- 2.由盒子模型组成(Box Model)
- 3.边距(border)
- 4.内边距(padding)
- 5.外边距（margin）
- 6.清除内外边距（网页会默认添加内外边距）
- 7.盒子水平垂直
- 8.布局思想
- 9.圆角边框
- 10.盒子阴影
- 11.文字阴影
- 十二.三种布局方式：
-
- 1.标准流
- 2.浮动
- 3.定位（position）
- 13.清除浮动
- 14.定位叠放次序
- 15.绝对定位居中算法
- 16.定位注意
- 17.圆边长条框 / 圆点制作
- 18.元素显示隐藏
- 未解决的事情
基础知识
HTML5首先知道
1.标签成对
<head> <title> </title> <body></body> </head> 2.必有代码
<!DOCTYPE html>申请类型标签 <html lang="en"> 语言为英语 <html lang="zh-CN"> 语言为中文 <html lang="fr"> 语言为法语
<meta charset="UTF-8">保存文字类型（简、繁体）
<!-- 关键字 -->
<meta name="keywords" content="关键字">
<!--3秒之后刷新页面-->
<meta http-equiv="refresh" content="3;http://www.baidu.com" />
<!-- 页面描述 -->
<meta name="description" content="详情页" />
<!-- Link标签引入外部资源 -->
<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" type="image/x-icon" />
HTML5知识
1.标题
<!--标题独占一行-->
<h1></h1> ~ <h6></h6>
2.水平线
<hr>
# 修改水平线颜色
<style> border: none; //去掉边框遮掩 height: 1px; //一定要设置水平线的大小 background-color: #ccc; //再设置颜色 </style>
3.设置按钮
<button>搜索</button>
4.输入框
<input type="text" value="请输入..." class="...">
5.图像标签
<img src="(指定图像的路径与文件名,必须与网页文件夹放在一起)" alt="(当src无效时，显示alt)" title="(鼠标放在图像上时，提示的文字)" width="500" height="500" width 与 height任意选择一个设置，则保持比例缩放，都更改容易改变比例 />
① 相对路径 相对于网页文件夹，图片与网页同文件夹：
<img src="img.jpg"/>
相对于网页文件夹，图片在下级文件夹：
<img src="...（图像文件夹名）/img.jpg"/>
相对于网页文件夹，图片在上级文件夹：
<img src="../img.jpg"/>
② 绝对路径
<img src="D:\...\..."/>（不同电脑路径不同，跨电脑一般不建议使用）
6.插入音频
<!-- 标签默认不允许用户控制，加入 controls 后用户就可以自主控制了 加入 autoplay 后，自动播放（大部分浏览器不支持自动播放） 加 loop 后，设置为循环播放-->
<audio controls,autoplay,loop>
无法播放：
浏览器检测到<audio>标签，则播放，如果检测不到，则浮现这里的文字
<source src="xxx.mp3">
</audio>
7.超链接
<a href="跳转目标" target="目标弹出方式">
超链接对象
</a>
① 这里的 href 链接的
- 若是网页，与图片的连接方式相似（文件夹方式）
- 若是 # 则代表空链接
- 若是文件，则链接的是一个下载链接，点击则下载文件（文件夹方式）
②
target="-self" 当前页面打开（默认）
"-blank" 开新页
③ 锚点链接（定位至页面中的某位置）
<!--需要该定位一个id名字，才可被定位-->
<h3 id="this"> 标题 </h3>
<a href="# this"> 文本 </a>
8.特殊字符
① 空格 和  ② < <小于号 > >大于号 ③ & & ④ ¥ ¥ ⑤ © ©，版权 ⑥ ® ®，商标 ⑦ ° ° ，摄氏度 ⑧ ± ±，正负号 ⑨ ××，乘号 ⑩ ÷÷，除号 ⑩① ²²，2次方 ⑩②³ ³，3次方
9.内联框架
<iframe src="网址" width="500" height="500" frameborder="边框粗细">
10.表格框架
<table>
<tr>每一行，有几个<tr>标签对就有几行
<th>表头单元格</th>
<td>
1.行中的每一格，有几个<th>标签对，就有几格
2.中间插入图片与链接，正常嵌入即可
</td>
</tr>
</table>
11.表格属性
<!--属性一般用CSS设置-->
<!--居中-->
<table align="center">
<!--边框-->
<table border="1" 有 border="0" 无>
<!--文本与框的距离-->
<table cellpadding="2">
<!--单元格之间-->
<table cellspacing="2">
<!--高度、宽度-->
<table width="600" height="400">
12.合并单元格
① 跨列 . colspan (左右) eg.首行2,3列合并，则在第2个<th>上改成
<td clospan="2"> </td>
然后删除第三个<td>即可
② 跨列 . rowspan (上下) eg.某列的第2,3行合并，则在第2个<td>上改成
<td rowspan="2"> </td>
然后删除第三个<td>即可
13.列表标签
各种列表之间可以互相嵌套 ① 无序列表
<ul>
<li>任意</li>
<li>任意</li>
</ul>
② 有序列表
<ol>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ol>
<dl>
<dt>首行</dt>
<dd>下拉选项</dd>
<dd>下拉选项</dd>
</dl>
14.表单
① 表单域（保存数据）
<form action="url地址" method="提交方式" name="名称">
各控件
</form>
② 表单控件（元素）
xxx<input type="属性值">
name：名字 value：默认值
1.<!--文本输入框-->
<input type="text" maxlength="最长输入x字符" placeholder="表单默认内容，但并不记录">
2.<!--密码框-->
<input type="password" maxlength="最长输入x字符">
3.<!--单选框（圆框）-->
xxx<input type="radio" name="名字要相同，才变成单选" value="返送值，该选项代表的值">
4.<!--复选框（方形框）-->
xxx<input type="checkbox" value="返送值，该选项代表的值">
<!--3单选框与4复选框加 checked="checked" 默认打开网页则选中带checked属性的选项-->
5.<!--提交-->
<input type="submit" value="无值默认显示提交">
6.<!--重置-->
<input type="reset" value="无值默认显示重置">
7.<!--按钮-->
<input type="button" value="无值默认不显示">
8.<!--上传文件-->
<input type="file" value=无值默认显示“选择文件”>
9.<!--隐藏输入字段-->
hidden
10.<!--图像形式提交按钮-->
image
15.label标签
<label for="名字">...</label>
<input type="属性" id="名字">
<input type="radio" name="sex" id="nan">
<label for="nan">
<img src=光莲.jpg width="20">男</label>
16.select下拉表单元素
<select>
<option selected="selected"加上后默认选择>...</option>
<option>...</option>
</select>
17.文本域
<textarea cols="每行中字符数" rows="显示行数">
......
</textarea>
CSS3知识
1.css格式：
<!--基本格式-->
<head>
...
<style> （区域名）{
规则1；规则2；......} </style>
</head>
① 类选择器（最常用）
1、注意不用特定标签名做名字 2、尽量使用英文命名 3、多选择器之间，使用空格隔开
.name1{
...}
.name2{
...}
<div class="name1">...</div>
<div class="name1 name2">...</div>
② id选择器（只能被调用一次）
#name1{
...}
<div id="name1">...</div>
③ 通配符选择器（应用于页面内的所有标签）
*{
...}
④ 后代选择器
一、空格隔开 二、可以多级定位，从大到小排列
eg.ol>li，ul>li，ul>li三组并存，找到最后一个 ul>li 设置。
<style> .nav li a{
...} </style>
<ol> ... </ol>
<ul><li><a> ...</a></li></ul>
<ul class="nav">
<li><a> ... </a></li>
<ul>
⑤ 子选择器
一、就近原则 二、只选择最近的一个选择器 三、必须用“>”隔开
<div class="nav">
<a href="#" class="nav2">测试文字1（影响了这一行）</a>
<p>
<a href="#">测试文字2</a>
</p>
</div>
.nav > a{
text-decoration: none;
}
⑥ 并集选择器
可以不同标签同时改
div,p,pig li{
...}
<div> 被影响 </div>
<p> 被影响 </p>
<ul class="pig">
<li> 被影响 </li>
<ul>
2.字体
.name{
字体样式 font-family:"微软雅黑";
字体大小 font-size:12px;
字体粗细 font-weight:normal; 正常
bold; 粗体
bolder; 特粗
lighter; 细体
800; 数字自定义大小
行高 line-height:24px; 带单位的是高度
1.5; 不带单位的是倍速
斜体 font-style:italic;
综合复写顺序：斜体 粗体 字体大小写/行高 [字体样式（务必要有）]
eg.font: italic 700 16px/20px "微软雅黑";
}
3.文本
.name{
颜色 color:red;/#FF0000;/rgh(200,0,0);
水平对齐 text-align:center; 居中
left; 靠左
right; 靠右
垂直居中：使文字行高等于盒子高度
若行高<盒子高度 = 文字偏上
若行高>盒子高度 = 文字偏下
line-height:12px;
height:12px;
文本装饰 text-decoration:underline; 下划线
overline; 上划线
line-through; 删除线
none; 取消装饰
文本缩进 text-indent:20px 20像素
2em 2文字（常用）
行间距 line-height:20px;
}
4.三种样式表
所有CSS代码放在<style> </style>中，置于<head>里面
用于局部或特殊修改，则直接元素修改（用于简单修改）
<p style="color:pink;"> ... </p>
用于样式特别多的情况，单独写CSS文件，在引入 一、首先建立一个CSS文件，专门直接写CSS样式代码 二、<link>引入文件
<link rel="stylesheet" href="文件路径">
5.Emmet语句（便捷语句）
xxx*2 => <xxx 标签：5w200kr碳膜电阻