制作html5网站,怎么开发网站平台,做网站必须要加v吗,建筑设计图纸HTML
span 行内元素
p 块级元素
br/ 强制换行 i em倾斜 b strong 加粗
u 下划线
mark 高亮
超链接 a #xff1a;a href链接地址 target_blank alt可替文本 title文字提示 tartget#xff1a;_self 自己界面打开 _…HTML
span 行内元素
p 块级元素
br/ 强制换行 i em倾斜 b strong 加粗
u 下划线
mark 高亮
超链接 a a href链接地址 target_blank alt可替文本 title文字提示 tartget_self 自己界面打开 _blank在其他界面打开 a idtips 锚 调整位置 /a br / // html5以前 使用name设定锚的名称 也是通过#name a href#tips 锚 调转提示文字/a 无序 列表ulli*n
有序列表 olli*n
摘要概述 details summary 一个details 通常含有一个summary
进度条meter progress
表格 table 行 tr 标题行 th 普通列 td cellspacing 单元框间距 cellpadding单元框内间距 去除内空格 cellspacing0 cellpadding0 [style] border-collapse:collapse; border-spacing0;
取消内边框 border0 cellspacing0 居中水平居中text-align: center 垂直居中line-height 高
行合并rowspann 列合并colspann 注意最后同行或同列的td个数要一致 表单form 表单的属性【 text 单行文本框 password 密码 默认选择checked{ radio 单选 name 相等 checkbox 多选 name 相等
}
select option下拉列表; selectedselected 默认选择 textarea 多行文本域 可通过拖拽改变大小
Cols属性每行的字符数
Rows属性文本行数 button 按钮
range 滑动块 可通过 step 滑动跨度 min10 max100 step10
进度条不可滑动value 设置值progressmeter reset 重置 submit 提交 date 日期 color 颜色 email 邮箱
number 数字
tel 电话
】 表单的参数【 把标签变成不可编辑属性 contenteditabletrue 隐藏 类型 display:none 不占位 默认提示 placeholder输入邮箱 下拉框多选 multiple 提交时无需验证 novalidate 提交时验证必须填写 required 只读 disabled不可选颜色变浅; readonly 可选但不可写样式不变 自动焦点 autofocus (多个自动焦点 会聚焦到第一个)
正则表达式 pattern
】 CSS 选择器 元素选择器 : 元素名{} id选择器#id名{} 类/class选择器 : .class名{} 并集选择器选择器1名选择器2名{} 选择器1和选择器2 后代选择器 选择器1名 选择器2名{} 针对的是 在选择器1里下的选择器2 祖先 子选择器 选择器1名选择器2名{} 针对的是 在选择器1里的直接子元素中选择器2父子 属性选择器 例:input[typetext]{ } 超链接伪类
a:hover:鼠标悬浮其上
A:link:未单击访问时
A:active:鼠标单击未释放
A:visited单击访问后 颜色
英文单词 red white
十六进制 #ffff00 【6个f 白 6个0 黑】
Rgb(255,0,0) 【 3 个0 黑3个255 白】
Rgba(255,0,0,0.5) 背景
背景颜色background-color:
背景图像background-image:url(“路径”);
背景重复background-repeat: no-repeat repeat-x/y
背景定位background-position: 水平定位 竖直定位
水平定位left right center px(正数向右负数向左)
竖直定位top bottom center px(正数向下负数向上)
简写background: red url() no-repeat 20px center; 字体
字体类型font-family:’楷体’
字体大小 font-size px
字体粗细font-weight: 100-1000 normal :400 ; 正常 bold:700; 加粗 简写font: 风格 粗细 大小 类型 文本
颜色color
文本对齐方式text-align: left right center
文本修饰text-decoration:none underline overline line-through
文本缩进text-indent: px
行高line-height
垂直对齐vertical-align: top middle bottom Css列表
列表项类型list-style-type:none disc实心圆 circle空心圆 decimal 阿拉伯数字 square 实心黑块
列表项图片List-style-image:url()
列表项位置list-stle-position:inside/outside(图标在li里/外) 盒子模型 边距border: 3px solid red; solid实线 dotted点线 dashed虚线 box-sizing: border-box; 将边框对内显示 阴影 水平正为右 垂直下为正 模糊度 颜色 盒子阴影box-shadow5px 5px 5px green; 文本阴影text-shadow 首行缩进 text-indent: 30px /* 外边距 上 右 下 左黄框的外面*/ margin: 10px 10px 0px; 内边距 padding /* 背景 背景颜色 背景图片路径 是否平铺 */ /*位于的位置left 右正 top 下正 决定 /所占整体的比例*/ background: red url(../img/image1.jpg) no-repeat left top/100% 100%; 浮动float 浮动 不在同一个层级上任何元素都可以 浮动的特性脱离标准文档流可以与其他元素并排展示可以设置宽高如果不设置会默认内容的宽高
浮动的元素互相贴靠浮动元素会贴靠上一个浮动元素的边如果宽度不够则当前浮动元素会换行显示换行后顶部不会超过上一个浮动元素的底部。
浮动元素有字围效果标准文档流的文字不会被浮动元素遮挡围绕浮动元素 定位position: relative 相对 位置还存在 相对于自己位移 position: absoule;绝对 位置不存在 相对于上一个定位的父级位移 position: fixed; /固定位置 与上级块无关 跟界面有关 属性z-index:定位时设置层级关系数字越大越靠上 clear: both; 清除浮动 left both right 位置上 溢出处理 overflow-y: scroll 隐藏 visibility: hidden; 位置存在 display: none; 不存在 Displayblock行内元素转换为块元素 Display: inline设置块元素转行内元素 Display:inline-block:块元素横向排列同时保留块元素的特性 渐变圆形 border-radius: 50%; 从内向外background-image: radial-gradient(yellow,green); 从上到下 background-image: linear-gradient(yellow,green); 弹性布局{ display: flex;默认从左到右上端对齐 不换行 从右到左 flex-direction: row-reverse; 从上到下 flex-direction: column; 从下到上 flex-direction: column-reverse; 自动换行 ,warp第一行在最上面flex-wrap: wrap; 自动换行 ,warp第一行在最下面 flex-wrap: wrap-reverse; 对齐 justify-content: flex-start; 右对齐 justify-content: flex-end; 居中对其 justify-content: center; 两端对齐 justify-content: space-between; 间隔相同 justify-content: space-around; 下端对齐 align-items: flex-end; 中间对齐 align-items: center; 单独设置对齐方式 align-self: flex-end; 排序顺序 order越小越靠前 order: 1;
} JS var 类似全局变量 let 局部变量 const 常量 数据类型typeof(变量)返回变量的数据类型 字符串 数字number 对象object 布尔 在网页输出 document.write(h1123/h1); 控制台输出 console.log(hello world); 弹窗 alert( tanC); 询问 confirm(are you already); 输入对话框prompt()
和区别 和区别
比较的是内容
比较的是内容和数据类型是否否相同
内容是否不同
内容和数据类型至少有一项不相同
常用事件
Onclick:点击事件
Onblur光标失去焦点
Onfocus聚集焦点
Onsubmit:提交事件
Onmouseover:鼠标移入事件
Onmouseout:鼠标移出事件 常用的Js内置函数
parseInt()把字符串解析成数字并返回一个正数
parseFloat()把字符串解析成数字并返回一个小数
IsNaN()判断是否是非数字 Number对象
toString():数字转字符串
toFIxed(n)保留n位小数 四舍五入 不足用0填充
计时函数
SetTImeout(”调用的函数“等待的毫秒数)等待多长时间执行一次如果要多次执行让调用函数内容调用SetTImeout
clearTimeout(setTImeout()返回的id值)清除setTimeout设置的定时 Setinerval调用的函数间隔的毫秒数每隔多长时间执行一次
ClearInerval(setINerval()返回的id值)清除setInerval设置的定时 对象String JS对象-String-CSDN博客 数组对象 JS对象-数组Array_lcatake的博客-CSDN博客JS对象-String-CSDN博客 日期对象的创建
Var date new Date();//创建当前系统时间的日期对象
Var date new Date(2023913);//创建指定的年月日日期对象
Var date new Date(2023913154350);//创建指定的年月日时分秒日期对象 Var date new Date(‘2023-9-13 154420’);//创建指定的年月日时分秒日期对象 常用函数
getFullYear():从日期对象返回四位年份
getMonth()从日期对象中返回月份0-11实际月份getMonth()1
getDate()返回一个月中的某一天
getHours()返回日期对象的小时
getMinutes()返回日期对象的分钟
getSeconds();秒
getDay()返回一个星期中的某天0-60周末
getMIlliseconds()毫秒
getTime()返回从1970-1-1至今的毫秒数
以及对应的set方法 var rep1new RegExp(正则表达式);
正则 rep1.test(str 查看 str中是否含有rep1 返回布尔类型 rep1.exec(str); 查看 str中是否含有rep1 有则返回rep1无则返回str 获取、设置属性
.className:获取/设置Class属性
.style获取/设置css样式
.getAttribute属性名获取属性的值
.setAttribute属性名属性值:设置属性的值
.hasAttribute属性名:判断是否包含指定属性
.removeAttribute属性名:删除指定属性 动态添加节点
创建一个节点 var node doucument.createElement(“li”)
创建一个文本节点 var textnode ‘hello’;
元素节点追加文本节点
node.appendChild(textnode);
找到父节点
Var father document.getElementByTagNamr(‘ul’)[0];
父节点追加子节点 father.appendChild(node); 动态删除节点 找到要删除的节点
Var chilenode document.getELementById(‘one’);
找到父节点
Var fathernode document.getElementById(‘box’);
父节点上删除子节点 fathernode.removeChild(childnode); JQ
Jq的基本使用_lcatake的博客-CSDN博客
jq的动画
JS的动画_lcatake的博客-CSDN博客
