html基本书写格式
一.基本格式
HTML: hyperText Markup language (超文本标记语言)
<html>
<head> 头部
<meta charset="utf-8" /> 编码规则
<title></title> 头部标题
</head><html>
<body> 书写内容 </body> </html>
html标签
双标签 <标签名> <html> </标签名> </html>
单表签 <meta />
元素类型
1.块元素
特点1.独占一行
2.可以设置宽高3.不受空格的影响
div（框）
p标签--（段落标签、文本标签）
h1-h6 --（标题标签 字体会越来越小）
ol --（里面必须写<li> 有序列表）
ul --（无序列表） 第一子级必须是li 后面必须跟li
dl>dt+dd (dl里面只能加dt和dd dt和dd可以包任何标签)
2.清除默认样式
ul ol 清前标：ul,li{list-style:none;} 列表样式：无； 清除默认样式：
*{margin: 0;padding: 0;}
body{font-size: 12px; line-height: 12px;}
ul,ol{list-style: none;}
img{ border:none; vertical-align:top;}
a{ text-decoration:none;}
—————————————————————
3.行内元素
一行之内的元素
1.不独占一行
2.不可以设置宽高3.受空格的影响 （仅受一个） span--() a --（超链接） b --（加粗标签） strong--（加粗链接） i --（斜体标签） em --（斜体标签） ins/u （下划线：ins一般与del联合使用）
sup（上标）
sub（下标）
<div class="box3">
2<sup>2</sup>
3 <sub>(1)</sub>
</div>
del/s 删除线 100w1k Hi
img 图片标签
如果直接使用的话，会出现双边距的bug;
解决：
1.给img标签加了一个块元素的父级;
2.给img标记加一个display: block;的css属性;
关于超链······
同一级 ./ 或直接写目标 同级目录推荐写法
下一级 / 子目录
上一级 ../
4. 1.a标签必须有一个链接属性：href 格式<a href="链接地址"></a> 列href="http://域名
4.行内块元素
（一行之内的块元素）
1.不独占一行
2.可以设置宽高
3.受空格的影响 （仅受一个）
img（图片标签）：必须写src
格式： <img src="图片路径" />
不管图片尺寸是否正合适，都要在写样式的地方，设置一下宽高
5.嵌套规则
1.如果直接使用的话会出现双边距bug
解决方法：
1.给img标签加一个块元素的父级
2.给img标签加一个 display：block；的css属性；
1.块元素可以包任何的元素。除了p标签以外，p标签只能包行内元素 2.行内元素只能包行内元素，除a标签外，a标签可以包含所有元素（不推荐)
display：none ： 隐藏内容
—————————————————————
6.元素类型转换：
1.把元素转换成块元素；
格式：display：block；（在js中，显示的效果）
2.把元素转换成行内元素： 格式：display：inline；
3.把元素转换为行内块元素： 格式：display：inline-block；
—————————————————————
7.路径
同一级 ./ 或直接写目标 同级目录推荐写法
下一级 / 子目录
上一级 ../
<!-- 相对路径 -->
<a href="_index.html">跳转</a>
<!-- 同级目录推荐写法 -->
<a href="./_index.html">跳转</a>
<!-- 子目录 -->
<a href="./项目1/a.html">跳转到a文件</a>
<!-- 绝对路径 -->
<a href="D:\_84\_课程\0726_html\07_常用标签2.html">跳转到07</a>
css样式
1.样式
-
css样式的继承性
盒子模型样式都没有继承性
文本样式标签大多数都有继承性
1. 如果想写css样式，必须写一个style标签
##2. 关于css：
1.如果想写css样式，必须要写style标签；
2.css样式里面 第一个属性：
*{margin: 0;padding: 0;}
*在代码里面代表了 通符例如
css样式；
<style> </style>
<<!-- document(文档) type(类型) :声明当前文档是html文档-->
<!DOCTYPE html>
<!-- html结构 -->
<html lang="en">
<!-- 头部 -->
<head>
<!-- 配置字符集 utf-8 -->
<meta charset="UTF-8">
<!-- 兼容IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 适配移动视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
</head>
<!-- 头部 结束-->
<!-- 身体开始 -->
<body>
</body>
<!-- 身体结束 -->
</html>
<!-- html结构 结束-->
—————————————————————
2.选择器
1.标签选择器；（元素选择器）
格式： 标签名{ css属性; } l例如 <style> div{ css属性; } </style>
2类选择器；（class选择器）
给元素起一个昵称.
格式：
.class名{
css属性名
}
例如 ——<style>
.div1{
css属性；
}
</style>
<div class="div1"></div></pre>
##3.id选择器
#
#id名{
css属性；
}
例如： <style>
#box{
css属性；
}
</style>
<div id="box"></div></pre>
4.父子选择器
父子选择器 table tr th
空格 >
<thead>
<tr>
<!-- <td>英语</td> -->
<th>英语</th>
<th>会计学</th>
<th>计算机</th>
<th>高等数学</th>
</tr>
</thead>
5.伪类选择器
: 冒号
选择第几个伪类
.box p:nth-of-type(2n){ 如果有别的标签从p标签开始数 2n 2的倍数 如果是单数2n-1
color:red
}
.box p:nth-of-child(2n){ 如果有别的标签从所有统计标签开始数
color:red
}
p:first-child 选择第一个p标签 first
p:last-child{ } 选择最后一个p标签 last
input：focus{ } 获取焦点 focus
6.兄弟选择器
~ （所有兄弟）
+（下一个兄弟元素）
7.并集选择器
, 逗号
8.属性选择器
[ ] 中括号 属性选择器
1.[name=“nyme”]获取name值
input[name="uname"] {
border: red dashed 3px;
}
9.伪元素
::after (向后添加)
::before （ 向前添加）
/* 伪元素 after(向后添加) before(向前添加)*/
.box::after {
/* 必写属性 */
content: '新增内容';
}
.box::before {
/* 必写属性 */
content: '向前新增内容<b>a<b/>';
color: darkorange;
line-height: 40px;
display: inline-block; 转换成块元素
width: 200px;
height: 80px;
background-color: darkorchid;
}
li::before {
content: '';
display: inline-block;
width: 3px;
height: 3px;
background: url(http://gss10.png) no-repeat;
background-position: 0 -282px;
margin-right: 10px;
/* 垂直对齐方式 */
vertical-align: 4px;
}
————————————————————
3.属性值
css文本：开头必须的是 -@charset "utf-8";
css属性：格式： 属性名：属性值;
设置宽度： width：像素值； 单位px
设置高度： height：像素值；——单位px
设置边框： border：边框的粗细 边框线性 边框颜色； （单位px） solid（实线） 颜色的单词|十六进制值|rab（0，0，0）； 例如：border：1px solid red；
点状线： dotted ；
双线： double
虚线： dashed；
实线： solid（实线）
字体颜色： color：颜色的单词|十六进制值|rab（0，0，0）；
字体大小： font-size：像素值；——页面默认字体最大为16px，默认最小为12px；
字体加粗： font-weight： bold|数值；
字体间距： letter-spacing：;
设置背景色： background：颜色的单词|十六进制值|rgb（0，0，0）；
选择字体字体： font-family: "微软雅黑";
阴影： box-shadow: x轴 y轴 模糊 距离 颜色
box-shadow: 1px 2px 5px 3px rgba(0, 0, 0, .2);
斜体标签 em -- i --
设置透明背景色：background: rgba(255,255,255,.5) 255.255.255 是色值 .5是透明程度（.1~1）
透明度属性： opacity 值是0-1之间 没有单位
调整图片大小： background-size: 100% 100%;
首行缩进 ： text-indent: 2em; 预留空格 2em 两个空格 em空格
文本居中 ： text-align: center;
行高\行间距： line-height：像素值
文本中横线： text-decoration：line-through(中横线) underline （下划线）
文本不换行： white-space: nowrap;
文本添加省略号 text-overflow: ellipsis;
去掉文本下划线： text-decoration：none
首字母大写 text-transform: capitalize;
文本全部大写 text-transform: uppercase;
文本全部小写 text-transform: lowercase;
垂直对齐方式： vertical-allign：像素值 ;
文本斜体： font-style: italic;
字体样式 普通 ： font-style: normal
元素隐藏： display:none;
元素透明 opacity:0;
元素可见性： visibility:hidden;
*在代码里面代表了 通符
水平居中： margin: 0 auto;
背景色： background： ；
背景图设置： background：背景图的路径 背景图是否重复 x轴的位置 y轴的位置 ； repeat-x（横向平铺） repeat-y（纵向平铺） no-repeat（不重复） x轴 left （左）| center （中间）| right（右） y轴 top（上） | center（中） | bottom（下） 例如：background：url（图片的路径） no-repeat ；
行高\行间距： line-height：像素值 如果想要文本内容上下对齐的话，高度设置多少，行高设置多少，
文本对齐： text-align：left |center |right； 左 中 右
把图形设置圆角： border-radius: 像素值|百分比；
z-index属性： 1.z轴层级最低就到:-1; 2.z-index值越大层级越高;
transform: translate(X轴,Y轴); 平移
transform: rotate(20deg); 旋转
transform: scale(1.5); 比例放大
transform: skew(30deg) ; 倾斜
transition: all 3s; 延时
轮廓线 outline: 20px dotted deeppink; solid实线 botted点线 dashed虚线
title 标签移入现实值
font-style: normal; 斜体标签文本回正
4ps软件 :
1.ctrl+r 打开标尺，2.编辑菜单-首选项-单位与标尺-像素 3.热键f8 显示信息板
如何量图:
矩形选中框---键盘的方向键---拉标尺线----矩形选中框量图
如何切图：
矩形选中框选中----ctrl+c----ctrl+n----ctrl+v----ctrl+s
保存格式，推荐使用 png格式;
1.jpg 容量大
2.png 容量小 制作透明图
—————————————————————
5.盒子模型：
内容 内边距 边框 外边距 widt/heigh padding border margin
设置宽度： width：像素值； 单位px 设置高度： height：像素值；——单位px
父元素与后代元素相邻，那么子元素设置上下边距，会传递给父元素进行渲染
怪异盒模型
box-sizing:border-box
1.内边距
（内容到边框之间的距离）
padding： 像素值； 例如： padding：10px； 内边距：四个方向； padding： 10px 20px 内边距 上下 左右 padding: 10px 20px 30px; 内边距: 上 左右 下 padding: 10px 20px 30px 40px; 内边距: 上 右 下 左
2.外边距;
----(块与块之间的距离) 特点: 外边距是控制盒子模型位置的; 格式: margin: 像素值; margin: 10px; 外边距: 四个方向; margin: 10px 20px; 外边距: 上下 左右; margin: 10px 20px 30px; 外边距: 上 左右 下; margin: 10px 20px 30px 40px; 外边距: 上 右 下 左;
————————————————————————————————————————
6.浮动;
浮动
浮动会使父元素高度塌陷，所以，一旦使用浮动，必须清除浮动
作用: 把不在一行的元素并成一行，且可以设置宽高，不受空格符影响; 格式:
文档流：半脱离文档 版浮动的意思
1.左浮动;
格式: float: left;
2.右浮动;
格式:
float: right;
***浮动三要素:
3.浮动的三要素
1.同级元素有一个加了浮动，同级的其他元素都必须加浮动; 2.加了浮动，就要清除浮动;(给父级清浮动) 1.---不推荐使用;(太强大，不知道什么时候就出现bug) clear: both; clear: left; clear: right
2.------overflow: hidden;
(1).溢出隐藏; overflow: auto； （可以用来加滚动条）
(2).清除浮动;
(3).解决margin拖拽父级的bug;
----万能清除浮动;
.clearfix:after{display: block; content: ""; clear: both;}
.clearfix{zoom: 1;} ———— 这一个针对IE浏览器
3.设置宽高;
4.清除浮动的方法
- 设置宽高
.wrap {
background: palegreen;
/* 清除浮动方法1：设置height */
height: 200px;
}</pre>
2.触发BFC机制
/* 清除浮动方法2：触发BFC机制 */
/* overflow: hidden; */
/* 触发BFC机制 【block formating context 块级格式化上下文】
所有(不仅仅是overflow)能触发BFC机制的属性都可以顺便帮我们清除浮动
1、float的值不是none
2、overflow的值不是visible
3、position的值不是static或者relative。
4、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
*/
/* float: left; */
float: left;
}
- 新增块元素 添加样式clear: both;
创建一个标签在父级框底部
clear: both; 清除左右所有浮动
clear: left 清楚左边浮动
clear:right 清楚右边浮动
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<!-- 清除浮动：clear:both -->
<div style="clear: both;"></div>
</div>
4.借用伪元素，清除浮动
给父级加一个类名
.clearfix { 兼容ie浏览器
*zoom: 1;
}
.clearfix::after {
content: '';
/* display: block; */
display: table;
/* 清除浮动 */
clear: both;
/* 为了严谨 */
height: 0;
visibility: hidden;
opacity: 0;
}
.box1,
.box2,
.box3 {
width: 300px;
height: 200px;
background: orchid;
float: left;
/* 浮动会使父元素高度塌陷，所以，一旦使用浮动，必须清除浮动 */
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
<span>
sdfasdf
</span>
</body>
—————————————————————
7.定位;position
1.相对定位;
参照物:以自身为参照物; 文档流:不脱离文档流; 格式: position: relative; left: 0; top: 0;
2.绝对定位；
:static; 默认值；静态
: relative; 相对定位；相对于原来的位置，进行移动
: absolute; 绝对定位；相对根元素进行移动-----脱离了文档流；覆盖在页面之上
--子绝父相；相对父元素移动
: fixed;固定定位，相对根元素进行移动
: sticky; 粘性定位；是relative和fixed结合体
参照物:默认以body为参照物,如果给父级加了定位,那么就以父级为参照物; 文档流:全脱离文档流; 格式: position: absolute; left: 0; top: 0; 定位层级:
z-index: ;
z-index: -1; 最低的层级;</pre>
3.固定定位;
参照物:以可视区为参照物;
文档流:全脱离文档流;
格式:
position: fixed;
left: 0;
top: 0;
—————————————————————
4.绝对居中
格式: position: absolute; left: 50%; top: 50%; margin-left: -宽度/2; margin-top: -高度/2; 透明度: 格式: opacity: ; (0-1) 0:全透明 1:不透明 filter: alpha(opacity: *100;); 例: opacity: .6; filter: alpha(opacity: 60;);
8.弹性布局
1.display: flex;
justify-content: space-between; 两个元素之间 平分剩余距离
9.html预留符
1.空格  ；
2.小于号；< & lt;
3.大于号 > & gt;
4.元人民币 ￥ ¥；
5.© 版权 ©；
9.表格
<body>
<div>
<table border="1">
<tr>
<td>
什么内容
什么标签
都可以嵌套
</td>
<td>一个格</td>
<td>一个格</td>
<td>一个格</td>
</tr>
<tr>
<td>一个格</td>
<td>一个格</td>
<td>一个格</td>
<td>一个格</td>
</tr>
</table>
</div>
1.标签：
table 表格
caption(表头)
thead 头部 下面只能跟th
tbody 身体
tfoot 尾部
th
tr
-
td
2.结构
<table class="t1" id="ttt">
<caption>
<h1>成绩表</h1>
<div>84期</div>
</caption>
<thead>
<tr>
<th>英语</th>
<th>会计学</th>
<th>计算机</th>
<th>高等数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>78</td>
<td>68</td>
<td>96</td>
<td>87</td>
</tr>
<tr>
<td>78</td>
<td>68</td>
<td>96</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<table>
<tr>
<td>78</td>
<td>68</td>
<td>96</td>
<td>87</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
<table>
<caption> ... </caption>
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
</table>
2.属性
border 边框
cellspacing 单元格间距 一行之间单元格之间的距离
cellpadding 单元格填充
width 宽
height 高
aligh 文本对齐
3.合并单元格
确定谁与谁合并 并且删除多余的那个
1.rowspan 跨行合并 同一列里的n个单元格合并了
2.colspan 跨列合并 同一行里的n个单元格合并了
<table>
<tr>
<td colspan="2">单元格1</td>
<td>单元格3</td>
</tr>
<tr>
<td rowspan="2">单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
4.样式
border-collapse: collapse; 合并边框线 行列之间的边框重合
border-spacing：0； 去掉单元格间距 去掉单元格和单元格之间的距离
table {
border-spacing: 0;
border-collapse: collapse;
}table {
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方
10.表单
1.标签
1.form 表单域 表单域标签 <form action="后台地址" method="GET/POST" name="form1">
2.input 输入框 行内块标签
3.button 按钮
4.select\optgroup\option 下拉选择
optgroup <optgroup label="河南"> 设置范围值
option <option selected="selected">郑州</option>设置文本框默认值
<select>
<option>---请选择---</option>
<optgroup label="河南">
<option selected="selected">郑州</option>
<option>洛阳</option>
<option>平顶山</option>
</optgroup>
<optgroup label="东北">
<option>天津</option>
</optgroup>
</select>
5.textarea 文本域 可以手动改变尺寸
/* 禁止手动改变尺寸 */
resize: none;
6.label 说明
<div class="item">
<span class="i-tit">我是</span>
<!-- 第一种语法 -->
<input type="radio" name="sex" id="male">
<label class="male" for="male">男</label>
<!-- 第二种语法 -->
<label><input type="radio" name="sex">女</label
</div>
<!-- 性别 -->
<div class="item">
<span class="i-tit">我是</span>
<input type="radio" name="sex" id="male">
<label class="male" for="male">男</label>
<!-- <input type="radio" name="sex" id="female">
<label class="female" for="female">女</label> -->
<label><input type="radio" name="sex">女</label>
</div>
<input type="button" value="按钮" disabled>
2.属性
1.type类型
text 文本 例如 账号
password 密码
radio 单选 name名要一样才能只选中一个 例如 性别
checkbox 复选 例如 爱好.
button 按钮
submit 提交
reset 重置
image 图片按钮
file 选择文件
submit 提交按钮 提交按钮 实现提交数据，可以跳转页面，或者刷新页面
reset 重置按钮
search 定义用于输入搜索字符串的文本字段。
date 日期表
2.value 值
3.name 名称
4.placeholder 默认提示值 文本框默认值
5.checked【checkbox、radio】 设置触发状态
6.selected【select>option】 设置下拉框的默认值
7.disabled 禁止触发
8.form的属性【action method name】
3.样式
outline: none; 清除表单控件的触发黑线
resize: both none; 规定可以由用户调整 div 元素的大小：
11.精灵图技术
/* 背景图片定位【css精灵技术、sprite】 减少http请求*/
• /* background-position: x y; */
• background-position: 0 -30px;</pre>
12.隐藏元素
display:none; ==========>display:block;
visibility:hidden;======>visibility:visible;
opacity:0;==============>opacity:1;</pre>
display 浏览器不渲染，没继承，不可重现子元素 ；不能过渡transition
visibility 浏览器渲染模块，但不可见，有继承，可重现子元素；不能过渡transition
opacity 浏览器渲染模块，但全透明，有继承，不可重现子元素；可以过渡transition
12.项目开发规划
1.样式重置文件[base.css reset.css normal.css]
2.公共文件【common.css】
3.页面引入样式
引入重置文件
引入公共文件
引入页面样式文件
13.字体图标
一.iconfont
2.选择适用的图标加入购物车
3.购物车图标全部添加至项目
4.新建项目
5.进入我的项目
6.选择font class 下载到本地，解压放到项目里
二.font-awesome
优点.
设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。
开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。
字体图标缩放不失真，不会变模糊。
减少网络请求次数，一个css文件可包含所有图标。
节约流量，图标是图片格式，每个几K到几十K，而css文件一般一共只有几K。
三.layui
2. 下载
3. 引入项目使用
4.模块居中
.box {
width: 800px;
height: 600px;
background-color: darkseagreen;
/* position: fixed; */
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
/* 外边距如果以百分比为单位，是指父元素总长的百分比 */
.box {
width: 800px;
height: 400px;
background-color: darkseagreen;
/* position: fixed; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 99999;
}
.mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
/* 开启固定定位和绝对定位的元素，可以设置height: 100%为全屏 */
height: 100%;
/* background-color: darkslateblue;
opacity: .6; */
background-color: rgba(0, 0, 0, .6);
z-index: 99998;
}
<body>
页面内容
<!-- 弹出层 -->
<div class="box"></div>
<!-- 遮罩层 -->
<div class="mask"></div>
</body>
3.超出屏幕范围的盒子居中，使用定位+平移
.banner {
width: 100%;
height: 460px;
overflow: hidden;
position: relative;
}
/* 超出屏幕范围的盒子居中，使用定位+平移 */
.banner .img-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
/* text-align: center; */
}
</style>
</head>
<body>
<div class="banner">
<div class="img-box"> <img src="./banner01.jpg" alt=""></div>
</div>
</body>
15.文本溢出省略
.p1 {
width: 300px;
background-color: burlywood;
/* 文本不换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 添加省略号 */
text-overflow: ellipsis;
}
.p2 {
width: 600px;
background-color: chartreuse;
/* 盒子弹性 */
display: -webkit-box;
/* 内容排列方向 垂直方向 */
-webkit-box-orient: vertical;
/* 行数 */
-webkit-line-clamp: 3;
/* 超出隐藏 */
overflow: hidden;
/* 添加省略号 */
text-overflow: ellipsis;
16.字体图标
一.iconfont
2. 选择适用的图标加入购物车
3. 购物车图标全部添加至项目
4. 新建项目
5. 进入我的项目
- 选择font class 下载到本地，解压放到项目里
</style>
<!-- 字体图标： iconfont 基类 -->
<span class="iconfont icon-huoguo2"></span>
二.layui
2. 下载
- 引入项目使用
17.关于链接
``
href="" 不是空链接，绝对不能用
href="#" 可以空链接，页面会跳到头部
href="JavaScript:void(0);" 是正式的空连接
