网页编辑器快捷键
Ctrl + s 保存 Ctrl + Z 撤销 Ctrl + R 打开浏览器查看网页 Ctrl + ? 注释 <meta charset="网页编码"/> 单标记标签 <body></body> 双标记 <head> css控制内容 </head> 引用css 《<link rel="stylesheet" href="style.css"> 网页全局布局 <style type="text/css"> h1,p,img{width: 800px;} </style> <title>网页名称</title> <body> 网页内容 只认标签 不认排版布局 </body> <h></h>h1~h2 大标签 h3~h4 小标签 h5~h6 小小标签 标题标签 h1~h6 字体大到小
<p></p> 文字段落 也有换行的效果 <img src="图片链接" style="vertical-align: middle; 图片居中对齐文字 "> 图片链接 <a href="#" style="text-decoration: none; 去掉超链接下划线 color:字体颜色;" ></a> <hr width="宽度" size="大小(数字)" noshade="noshade" 阴影效果的水平线 color="颜色" /> <br> 换行 空格先造结构再填充内容
表格结构为:
<table>表格 <tr>行 <td></td>单元格 列 </tr> </table>PS：同一行中所有单元格的高相同，同一列中的宽度相同；
<table align="center" 居中 boder="边距" border color="边框颜色"cellspacing:"边框间距px,边框粗度" style="width: 宽度px; height: 高度px; border: 1px solid color:边框颜色; boder-collapse:collapse;合并边框" > 表格 <tr> 行 <td></td> 单元格 <td><img src="图片链接"</td>表格插入图片 </tr> </table>合并表格行或者是列
<table> 行合并 <tr> <td></td> <td></td> <td rowspan="2"></td> 此单元格合并下面行的单元位 rowspan合并两个上下行的单元格 </tr> <tr> <td></td> <td></td> <!-- <td></td> -->这个单元格要删除，和上面的的单元格合并。 </tr> 列合并 <tr> <td colspan="3"></td> 此单元格和右边删除的单元格合并 <!-- <td></td> <td></td> --> 这两单元格要删除和左边的单元格合并 </tr> </table> table添加css样式 .box{ color:颜色; font-size:字体大小; background-color:背景颜色; width:宽度; height:高地; background-image:url;背景图片链接}align=" #只能用其中一个 left 左对齐 right 右对齐 center 居中对齐 " 网页默认大小字体为为16px；
<div align="center" 居中对齐> PS：左对齐右对齐或者居中前需要浮动先 <div> <div></div> <div></div> </div> </div>div添加css样式
.box{ width:800px; 宽度 height:200px; 高度 boder:solid; 边框黑线 background-color:red;背景颜色 float:left; 浮动居右 font-weight:bold;加粗 margin-left:20px; 左边距 margin-right:20px; 右边距 margin-top:20px; 头顶距 margin-bottom:20px; 底边距 }表单
<form name="表单名" action="index.html" 提交的地址 method="GET" get post 请求> action 提交路径 post用于表单-》多用于获取-》不能用于图片 需要图片进行转码 get用于表单-》上传 <input type="text" placeholder="预设提醒"> 文本输入框 <input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="checkbox" name="1" 一般使用相同name值 value="传递值" checked="checkbox" 默认选中值>复选框1 <input type="checkbox" name="1" 一般使用相同name值>复选框2 <select> 下拉框 <option value="传递值" selected="selected">广东省</option> <option>广西省<</option> 省与市可以联动 <option>A市</option> <option>B市</option> </select> <textarea rows="高度" cols="宽度" style="width: 400px; height: 200px;"></textarea> 文本域 <input type="file">文件上传 <input type="date" value="2020-07-04">时间 <input type="text" required pattern="^[027]\d{7}"> ps:"^[027]\d{7}" ^开头 [027]只能是0或者2或者7 \d数字 {7}7位数 <input type="submit" value="提交"> 提交按钮 <input type="reset" value="重置"> 重置按钮-清空form表单中输入框的内容 </form> 属性： required 必填 readonly 只读不能填 placeholder 填充文字有序列表
<ol type="序号类型" start="从什么开始" style="list-style-type: none; 没有序列表号 "> #list-style-type: none; 没有序列表号 -》这个属性无序列表和有序列表通用 list-style-type: decimal;正常 <li></li> </ol>无序列表
<ul tyle="序号形状" > circle 空心圆 disc 实心圆 square 方块黑 <li></li> </ul>自定义列表
<dl> <dt>深圳市</dt> <dd>宝安区</dd>自带缩进 <dt>广州市市</dt> </dl>< XXX > <为符号"<" >为符号">"
RGB 红绿蓝三原色
黑色：(0,0,0) 白色：(255,255,255) 红色：(255,0,0) 一个字节保存一个颜色值，---2的8次方---256种数据 颜色代码表 -》 取色器 <span>通用样式标签-》不换行不加粗-》加style使用</span> <em> 斜体-强调</em> <iframe name"1" withd="" height="" frameborder:0; 去边框>网页里面放网页</iframe> <a href ="#' target="1"></a> <table width="100%" 自适应></table> vertical-align:top 顶部内容 <body margin:0px; padding:0px>铺满自适应 </body>css内容
<h1 style="color: ;">行内样式</h1> <head style="内部样式"></head> css注释/**/ h1{ 全局标签选择器，让每个样式改变 } hd1{ ID选择器，不能重复，单独修改 } .c1{ 类标签选择器让一组不同标签拥有相同属性 } *{ *表示所有标签 }样式优先级 内样式>id选择器>类选择器>元素选择器>*所有标签
<div> <h1>你好！</h1> </div> .c1,#d1,c2,span{ color:red; }分组后代 样式
伪类
a:link 原样式 访问前 a:visited 访问后 a:hover 鼠标悬浮时 a:active 单击未释放
a:hover img{ boder:1px solid red; }background-size; 图片大小 background-repeat:no-repeat; 不铺满 background-position:50px 50px;外边距 background:url 100px宽 2px高 no-repeat不铺满; 背景图片
text-indent:1em; 文本缩进 font-weight:bold; 字体加粗 line-height:35px; 行高
<div class="box"> </div> css控制内容 .box a{ #直接用class命名 } ul li{ list-style-type:none;无序列表去除符号 line-height:28px;行高 font-size:12px;字体大小 text-indent:2em;缩进 }div 纵向有间隙的时候需要加浮动
盒子
padding:10px; width:20px height:20px; display:inline - block <div> css margin:0px auto ; /*设置div居中*/ #d3｛ display:table-cell; vertical-align:middle; 垂直居中 ｝ ps ： 设计 padding值 20px -》 witdh 800px需要减去 -40px 为 760px！