Html补充

Html补充

background-image:url(abc.gif) 背景图片

background-size:cover 等比例缩放

background-repeat: repeat-x水平重复

         repeat-y 垂直重复

      no-repeat  不重复

background-attachment:固定活滚动背景属性设置

      -attachment:fixed,scroll跟随也固定滚动条

font-size: 字体大小
font-family: 字体
font-weight:bolder 字体加粗
    lighter 字体变细
text-align: 文本对齐
  -align:right; 右对齐
  -align:center; 居中
-align:justify; 文本对齐
text-indent: 文本前有多少像素空位
text-justify:distribute-all-lines; 中文文本对齐
text-decoration:none   去下画线
text-decoration:underline     下划线
       overline     上划线
       line-through 中划线
       blink      定义闪烁的文本
       inherit     继承上一级
text-transform:capitalize 每个单词的首字母大写
uppercase 转换成大写
lowercase 转换成小写  

text-stlye:normal 默认标准字体
   italic斜体(字样)     书写不同
   oblique倾斜(斜着摆放) 显示不同
text-shadow:0px 0px 0px 颜色 ;阴影的右下移动 模糊
border-width: 边框宽度
border-color: 边框颜色
border-style:solid:实线
       dotted:点线(边框样式)
     double:双线
      groove: 3D凹边框
       ridge:3D凸边框
      radius: 圆角(数值)
       inset,outset内嵌,外嵌
   border-image:边框图片
border-image-source:边框无图片
border-image-width:边框图片宽度
border-image-slice:fill,边框图片切割(fill 设定边框图片填充部分 数字不能加px)
border-image-outset:边框图片扩展(默认扩展为0)
border-image-repeat:边框图片重复(默认为stretch 拉伸。repeat/round:重复/对图片进行图片缩放)
top,left: 上,左边距
letter-spacing:字母的间距
line-height: 上下对齐
word-spacing: 单词的间距
white-space:nowrep  禁止换行定位:(通过:left right top bottom 设置)
position:relative     相对定位
position:absolute   绝对定位 
position:fixed固定定位
z-index: z轴索引号,用于层
外连接css <link href=" .css  " rel="stylesheet" type="text/css" / > 
表格
table-layout:fixed   表格锁定
caption-side:bottom 标题在表格下
border-collapse:collapse 合并边框
border-spacing:  表格内间距(与合并表格样式合用冲突)
empty-cells:hide 隐藏空单元格(与合并表格样式合用冲突)
hover{backgroun-color:red}鼠标放于表格改变底色(IE5,6不支持)
<select >
    <option></option>   
    <option></option>
    <option></option>
</select> 下拉列表


a:link    默认颜色   (IE可以,但猎豹不行)
a:visited   鼠标点击后颜色
a:hover   鼠标点上去颜色
a:active   点击后颜色
frist-child 第一个子元素
frist-letter 首字符
frist-line 首行
cursor:pointer  鼠标为手型
overflow:hidden  隐藏滚动条
list-style-position列表(设置值)inside内部 outside外部
list-style-image列表图片符号
list-style-type:square方块

   decimal              阿拉伯数字

   upper-roman 罗马数字
height:auto;overflow:hidden;高度自适应,随内容增大而增高
display:block/inline/inline-block   块行级互换及共存
display:none 隐藏元素
float:left   浮动
clear:left/both 清除左侧/两侧悬浮元素
visibility:visible/hidden 控制显示英语隐藏(保留位置)而display:none 隐藏不保留位置
clip:rect(top、right、bottom、left)剪切
overflow:visible、hidder、scroll auto 溢出显示、隐藏、出现纵横滚动条、纵向滚动条

布局
<!doctype html>: html5 协议
<header> 头标签
<nav> 导航栏标签
<aside> 侧栏标签
<sidebar> 内容标签
<footer> 尾标签
<small> 小字体标签
<ruby> 注释标签


input
<input type="email"> email 格式验证
<input type="url"> url 网址验证
<input type="number"> number 数字增值器
<input type="range"> range 条形增值器(value="1" max="100" min="1" step="2")
<input type="date"> date 时间选择器
<input type="month"> month 年月选择器
<input type="week"> week 年月选择器
<input type="time"> time 小时分钟秒
<input type="datetime-local"> datetime-local 本地时间
<input type="color"> color 颜色选择器
<input type="text"autocomplete="on/off"> autocomplete 文本框保留项选项
<label for="id"> label for   光标跳转到...对应的ID
<input type="submit" autofocus="on"> autofocus 光标初始在相应的input上
formnovalidate 表格跳过验证


video
<video src="" controls="controls"> 视频播放多格式视频播放
<source src="movie.ogg"type="video/ogg">
<source src="movie.webm"type="video/webm">
autoplay 视频自动播放
loop 视频循环播放
poster 视频封面


audio

<audio src="刘忻 - 一个人.MP3" controls autoplay></audio>音频播放
画布

canvas   画布
beginPath() 开始路径
moveTo() 起始点
lineTo() 结束点
stroke() 为路径上色
lineWidth() 设置直线宽度
strokeStvle() 直线颜色
HTML5 canvas支持3种直线的端点样式,
  包括:butt,round,square 设定端点样式用lineCap属性设定,
缺省情况下,将使用butt样式 --直线端点样式
arcTo() 弧线、曲线
quadraticCurveTo() 绘制二次曲线
bezierCurveTo() 贝塞尔曲线



Map标签(area图形后可加HTML路径)
<img="" width,height,border,usemap="#Map" />
<map name,id="Map">
<area shape="circle" coords="X,Y,R" />圆:X与Y为圆心位置,R为半径
<area shape="rect" coords="X1,Y1,X2,Y2" />矩形:X1Y1为定点,X2Y2为对角定点
<area shape="rect" coords="X1,Y1,X2,Y2,..." />不规则图形:XY为各个顶点,自动封闭
</map>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 HTML 和 JavaScript 来实现输入框文字补充提示的功能。具体实现方式如下: 1. 在 HTML 中创建一个输入框和一个用于显示提示的下拉框。输入框使用 input 元素,下拉框使用 select 元素。代码如下: ```html <input type="text" id="myInput"> <select id="mySelect" style="display:none;"></select> ``` 2. 使用 JavaScript 监听输入框的 input 事件,并在输入框中输入内容时,根据输入内容动态生成提示下拉框中的选项。代码如下: ```javascript const inputElement = document.getElementById('myInput'); const selectElement = document.getElementById('mySelect'); inputElement.addEventListener('input', function(event) { const inputValue = event.target.value; // 在这里根据输入内容动态生成提示下拉框中的选项 selectElement.innerHTML = ''; if (inputValue) { const option1 = document.createElement('option'); option1.value = '选项1'; option1.innerText = '选项1'; selectElement.appendChild(option1); const option2 = document.createElement('option'); option2.value = '选项2'; option2.innerText = '选项2'; selectElement.appendChild(option2); } // 显示或隐藏提示下拉框 if (inputValue && selectElement.children.length > 0) { selectElement.style.display = 'block'; } else { selectElement.style.display = 'none'; } }); ``` 在上面的代码中,我们首先获取了一个 id 为 "myInput" 的输入框和一个 id 为 "mySelect" 的下拉框,并使用 addEventListener 方法为输入框添加了一个 input 事件监听器。当用户在输入框中输入内容时,就会触发该事件监听器中的回调函数。在这个回调函数中,我们首先获取了输入框中的输入内容,然后根据输入内容动态生成提示下拉框中的选项。此处的代码只是示例,我们可以根据实际需求来生成选项,比如从后端接口获取数据进行补充提示。 最后,我们根据输入框中的输入内容和提示下拉框中的选项数量来决定是否显示提示下拉框。如果输入框中有内容并且提示下拉框中有选项,则显示下拉框;否则隐藏下拉框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值