html5i标签设置颜色,HTML 5 <i> 标签 - HTML 参考手册

本文介绍了HTML中的`<i>`标签,用于呈现斜体文本,强调内容的不同部分。虽然HTML5推荐使用CSS来控制样式,但`<i>`标签在没有其他语义元素适用时仍可使用。文章探讨了HTML4.01与HTML5在使用该标签上的差异,并提到了相关属性和事件属性。
部署运行你感兴趣的模型镜像

定义和用法

标签呈现斜体的文本。

标签定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。在没有其他元素可以使用时,比如 ,

, , , , ,

,请使用 标签。

HTML 4.01 与 HTML 5 之间的差异

没有区别。

但是在 HTML 4.01 中,存在着一种理解,即应该使用 CSS 来制作斜体文本。在 HTML 5 中,情况没有改变,但是你应该使用

标签把部分文本定义为某种类型,而不只是利用它在布局中所呈现的样式。

例子

The Felis silvestris catus is cute.

The term prose content is defined above.

There is a certain je ne sais quoi in the air.

属性

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

如需完整的描述,请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述,请访问 HTML 5

中事件属性。

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型,相比 3.0 版本,它提升了图像质量、运行速度和硬件效率

<template> <div> <div style="margin-bottom: 20px"> <RouterLink to="/test">通过router跳转到Test.vue</RouterLink> <a href="/test">通过a标签跳转到Test.vue</a> </div> <div> <el-button type="primary" @click="router.push('/test')">push跳转到新的页面</el-button> <el-button type="primary" @click="router.replace('/test')">test跳转到新的页面</el-button> </div> <div style="margin-bottom: 20px"> <el-button type="primary" @click="router.push('/test?id=2&name=青哥哥')">路由传参id=2&name=青哥哥</el-button> </div> <div> <el-input clearable v-model="data.input" style="width: 240px" placeholder="请输入文本" :prefix-icon="Search"/>{{data.input}} <el-input style="width: 200px" :suffix-icon="Calendar"></el-input> <el-input v-model="data.textare" style="width: 200px" type="textarea" placeholder="请输入一段描述"></el-input> </div> <div style="margin: 20px 0"> <el-select multiple clearable v-model="data.value" value-key="id" size="large" placeholder="Please 选择水果" style="width: 240px" > <el-option v-for="item in data.options" :key="item.id" :label="item.label" :value="item.name" /> </el-select>{{data.value}} <div style="margin: 20px 0"> <el-radio-group v-model="data.sex"> <el-radio value='男'>男</el-radio> <el-radio value='女'>女</el-radio> </el-radio-group> <span style="margin-left: 50px">{{data.sex}}</span> <el-radio-group v-model="data.tags" style="margin-left: 20px"> <el-radio value="1" size="large" border>点赞内容</el-radio> <el-radio value="2" size="large" border>投币内容</el-radio> <el-radio value="3" size="large" border>关注内容</el-radio> </el-radio-group> <el-checkbox-group v-model="data.checkList"> <el-checkbox v-for="item in data.options" :key="item.id" :value= "item.name" :label="item.label"/> </el-checkbox-group> </div> <div> <el-image :src="img" style="width: 100px; margin-left: 100px " :preview-src-list="[img,'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg']" /> </div> <div> <el-carousel height="400px" style="width: 550px"> <el-carousel-item v-for="item in data.imgs" :key="item"> <img style="width: 100%; height: 400px" :src="item" alt=""> </el-carousel-item> </el-carousel> </div> <div style="margin: 20px 0"> <el-date-picker v-model="data.date" type="date" placeholder="请选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />{{data.date}} </div> <div> <el-date-picker v-model="data.date1" type="datetime" placeholder="请选择日期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />{{data.date1}} </div> <div> <el-date-picker v-model="data.date2" type="datetime" placeholder="请选择时间" format="HH:mm:ss" value-format="HH:mm:ss" date-format="MMM DD, YYYY" time-format="HH:mm" />{{data.date2}} </div> <div> <el-date-picker v-model="data.daterange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />{{data.daterange?.length ? data.daterange[0] : ''}} {{data.daterange?.length ? data.daterange[1] : ''}} </div> <div> <el-table :data="data.tableData" style="width: 100%" stripe border> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="地址" /> <el-table-column label="操作"> <template #default="scope"> <el-button type="primary" circle @click="edit(scope.row)"> <el-icon><Edit/></el-icon> </el-button> <el-button type="danger" circle @click="del(scope.row.id)"> <el-icon><Delete/></el-icon> </el-button> </template> </el-table-column> </el-table> </div> <div style="padding: 10px 0"> <el-pagination v-model:current-page="data.currentPage" v-model:page-size="data.pageSize" :page-sizes="[5, 10, 15, 20]" background layout="total, sizes, prev, pager, next, jumper" :total="data.tableData.length" /> </div> </div> <el-dialog v-model="data.dialogVisible" title="Shipping address" width="500"> <div style="padding: 20px"> <div style="margin-bottom: 10px">日期:{{data.row.date}}</div> <div style="margin-bottom: 10px">名称:{{data.row.name}}</div> <div>地址:{{data.row.address}}</div> </div> </el-dialog> </div> </template> <script setup> import {reactive} from "vue"; import {Search, Calendar, Delete} from "@element-plus/icons-vue"; import img from '@/assets/favicon.ico' import router from "@/router/index.js"; const data =reactive({ input: null, textare:'adwawdawfawfjkawjanwkenawjknejkawnejkwane', value:'', options:[{id: 1,label:'苹果',name: '苹果1'},{id: 2,label:'香蕉',name : '香蕉'},{id : 3,label:'桃子', name : '桃子'},{id: 4,label:'苹果', name:'苹果2'}], sex: '男', tags: '2', checkList: [], imgs:['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://ts1.tc.mm.bing.net/th/id/R-C.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0','https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg'], date:'', date1:'', date2:'', daterange:null, currentPage: 1, pageSize: 5, tableData:[ {id:1, date: '2024-10-11', name: '亲哥', address:'安徽合肥'}, {id:2, date: '2024-10-12', name: '小哥',address:'上海浦东'}, {id:3, date: '2025-10-12',name:'小李',address: '陕西' }, {id:4, date: '2024-10-11', name: '亲哥', address:'安徽合肥'}, {id:5, date: '2024-10-12', name: '小哥',address:'上海浦东'}, {id:6, date: '2025-10-12',name:'小李',address: '陕西' }, {id:7, date: '2024-10-11', name: '亲哥', address:'安徽合肥'}, {id:8, date: '2024-10-12', name: '小哥',address:'上海浦东'}, {id:9, date: '2025-10-12',name:'小李',address: '陕西' }], dialogVisible:false, row:null }) const del = (id) =>{ alert("删除ID= "+id+"的数据") } const edit = (row) =>{ data.row = row data.dialogVisible = true } data.tableData = data.tableData.splice(0,5); </script> 哪里错了
最新发布
11-04
<!DOCTYPE html> <meta charset="UTF-8"> <!-- 订单管理-订单建线配置修改 --> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'center'" style="padding: 5px;"> <form method="post" action="IDLCVDAFJ1" data-for="update" class="vscform"> <input id="3HPXIID3" type="hidden" name="rowid" value="" /> <fieldset style="margin-top: 5px; border-style: hidden;"> <table style="width: 100%;"> <tr> <th width="17.0%">订单编号:</th> <td width="30.0%"> <span id="3HPXIID4"> </span> </td> <th width="17.0%">计费方式:</th> <td width="30.0%"> <span id="43X324Y8"> </span> </td> </tr> <tr> <th width="20.0%">价格计算公式:</th> <td width="30.0%"> <input id="4N8URO2I" class="easyui-combobox" name="jggs" data-options="required:true,editable:false,method:'get',excons:'enumops=3Y73TV98',loader:vscbloader,groupField:'group',height:'26px'" style="width: 100%; height: 26px;" /> </td> <th width="17.0%">运费税率:</th> <td width="33.0%"> <input id="3ITTSRM6" class="easyui-numberbox" name="slv" data-options="prompt:'点击这里输入税率',required:true,validType:['length[0,15]'],precision:2,height:'26px'" style="width:90%;height:26px;"/> % </td> </tr> <tr> <th width="20.0%">运费单价:</th> <td colspan="3"> 货主☞   <span id='bdshowid'> 结算净重:<input id="3UB0M4P7" class="easyui-combobox" name="hzjsfs" data-options="required:true,editable:false,method:'get',excons:'enumops=40KNP5AV',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 100px; height: 26px;" /> </span> 单价:<input id="3IPP5F5V" class="easyui-numberbox" name="zbjg" data-options="prompt:'元',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 70px; height: 26px;" />        司机☞   <span id='bdshowid1'> 结算净重:<input id="3UYRI4PH" class="easyui-combobox" name="sjjsfs" data-options="required:true,editable:false,method:'get',excons:'enumops=40KNP5AV',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 100px; height: 26px;" /> </span> 单价:<input id="3HPXIID5" class="easyui-numberbox" name="jfdj" data-options="prompt:'元',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 70px; height: 26px;" /> </td> </tr> <tr> <th width="17.0%">中标金额:</th> <td width="33.0%"> <input id="3NCW7K5V" class="easyui-numberbox" name="amount" data-options="prompt:'点击这里输入中标金额',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width:100%;height:26px;"/> </td> <th width="17.0%">货物单价:</th> <td width="33.0%"> <input id="3HPXIID7" class="easyui-numberbox" name="hwdj" data-options="prompt:'点击这里输入货物单价【普货建线】',required:true,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 100%; height: 26px;" /> </td> </tr> <tr> <th width="17.0%">货主货损扣费百分比:</th> <td width="33.0%"> 扣费方式:<input id="3UY0I5P9" class="easyui-combobox" name="hzhskffs" data-options="required:true,editable:false,method:'get',excons:'enumops=3YCOUNNJ',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 40%; height: 26px;" /> <input id="3HPXIID8" class="easyui-numberbox" name="hzbl" data-options="prompt:'点击这里输入货损扣费百分比',required:true,validType:['length[0,15]'],precision:2,height:'26px'" style="width: 30%; height: 26px;" /> </td> <th width="17.0%">司机货损扣费百分比:</th> <td width="33.0%"> 扣费方式:<input id="3UY0I4P7" class="easyui-combobox" name="hskffs" data-options="required:true,editable:false,method:'get',excons:'enumops=3YCOUNNJ',loader:vscbloader,groupField:'group',height:'26px',multiple:false" style="width: 40%; height: 26px;" /> <input id="3HPXIID9" class="easyui-numberbox" name="bl" data-options="prompt:'点击这里输入货损扣费百分比',required:true,validType:['length[0,15]'],precision:2,height:'26px'" style="width: 30%; height: 26px;" /> </td> </tr> <tr> <th width="20.0%">服务费(人力资源平台):</th> <td colspan="3"> <input id="3MT0RN3N" class="easyui-numberbox" name="charge" data-options="prompt:'点击这里输入服务费',required:false,validType:['length[0,16]'],precision:2,height:'26px'" style="width: 70%; height: 26px;" /> % </td> </tr> <tr> <th width="20.0%">运费抹零方式:</th> <td colspan="3"> <input id='changezero' type="radio" name="yfm0fs" value="3GF4BE5H" checked/>不抹零     <input id='changezero1' type="radio" name="yfm0fs" value="3GF4BE5I" />小于 <input id="input4" type="number" class="easyui-textbox" style="width:50px;height:20px;" disabled="disabled"> 抹零     <input id='changezero2' type="radio" name="yfm0fs" value="3GF4BE5J" />大于 <input id="input5" type="number" class="easyui-textbox" style="width:50px;height:20px;" disabled="disabled"> 抹至 <span id='moneyZero'></span> <span style='color:red;font-size:12px;margin-left:20px'>(抹零金额值不能为负值,也不能大于100)</span> </td> </tr> </table> </fieldset> </form> </div> <div data-options="region:'south'" style="height: 32px;text-align: right;vertical-align: middle;padding: 3px;overflow: hidden;"> <a class="easyui-linkbutton save-btn" data-options="plain:true,iconCls:'icow-Apply'">提交</a> <a class="easyui-linkbutton canc-btn" data-options="plain:true,iconCls:'icon-cancel'">取消</a> </div> </div> <script type="text/javascript"> $(function(){ var fmodes = {"jffs":"combobox","amount":"numberbox","slv":"numberbox","zbjg":"numberbox","bl":"","ddbh":"textbox","hwamount":"numberbox","id":"textbox","yfamount":"numberbox"}; var fields = {"jffs":"43X324Y8","amount":"3NCW7K5V","slv":"3ITTSRM6","zbjg":"3IPP5F5V","bl":"3HPXIID8","ddbh":"3HPXIID4","hwamount":"3HPXIID7","id":"3HPXIID3","yfamount":"3HPXIID5"}; var handle = (function(){ })(); var data=vsparams(); var rows = data; var ddlx; var rowids = ''; if(data.length == undefined){ ddlx = data.ddlx; }else{ ddlx = data[0].ddlx; data = data[0]; var ddbhs=rows[0].ddbh; if(rows.length>1)ddbhs+="等"+rows.length+"单"; $("#3HPXIID4").text(ddbhs) $.each(rows,function (i,r){ rowids+=r.id+','; }) $("#3HPXIID3").val(rowids.substring(0,rowids.length-1)); } //抹零配置 $('#changezero').on('change', function() { $('#input4').textbox('setValue',''); // 禁用输入框 $('#input5').textbox('setValue',''); // 禁用输入框 $('#input4').textbox('reset').textbox('disable'); // 禁用输入框 $('#input5').textbox('reset').textbox('disable'); // 禁用输入框 }); $('#changezero1').on('change', function() { $('#input5').textbox('setValue',''); // 禁用输入框 $('#input5').textbox('reset').textbox('disable'); // 禁用输入框 $('#input4').textbox({ disabled: false, required: true, onChange:function(val){ var reg = /^\d+$/; // 匹配非负整数 if (!reg.test(val) || parseInt(val) > 100) { $('#input4').textbox('setValue', ''); return; } } }); }); $('#changezero2').on('change', function() { $('#input4').textbox('setValue',''); // 禁用输入框 $('#input4').textbox('reset').textbox('disable'); // 禁用输入框 $('#input5').textbox({ disabled: false, required: true, onChange:function(val){ var reg = /^\d+$/; // 匹配非负整数 if (!reg.test(val) || parseInt(val) > 100) { $('#input5').textbox('setValue', ''); } } }); }); $("#input5").textbox({ onChange:function(val){ $('#moneyZero').text(val) } }) if(data.yfm0fs.includes('不抹零')){ }else if(data.yfm0fs.includes('小于')){ }else if(data.yfm0fs.includes('大于')){ } if(rows.length != undefined){ if(data.ysjsid ==null && data.yfjsid ==null){ $("#4N8URO2I").combobox({disabled: true}); $('#3UY0I5P9').combobox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); $("#3NCW7K5V").combobox({disabled: true}); $('#3HPXIID8').numberbox({disabled: true}); $('#3MT0RN3N').combobox({disabled: true}); }else if(ddlx == '39I3MPX4' && data.ysjsid == null){// $("#4N8URO2I").combobox({disabled: true}); $('#3UY0I5P9').combobox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3UYRI4PH").combobox({disabled: true}); $("#3HPXIID5").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); $("#3NCW7K5V").combobox({disabled: true}); $('#3UY0I5P9').combobox({disabled: true}); $('#3HPXIID8').numberbox({disabled: true}); $('#3MT0RN3N').combobox({disabled: true}); }else if((ddlx == '39I3MPX4' && data.yfjsid == null) || (ddlx == '39I3MPX5' && data.ysjsid == null)){ $("#3UB0M4P7").combobox({disabled: true}); $("#3IPP5F5V").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I5P9").combobox({disabled: true}); $("#3HPXIID8").numberbox({disabled: true}); $("#4N8URO2I").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3NCW7K5V").combobox({disabled: true}); $('#3MT0RN3N').numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); } }else{ if(data.ysjsid ==null && data.yfjsid ==null){ }else if(data.ddlx == '39I3MPX4' && data.ysjsid == null){ $("#4N8URO2I").combobox({disabled: true}); $("#3ITTSRM6").numberbox({disabled: true}); $("#3UYRI4PH").combobox({disabled: true}); $("#3HPXIID5").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I4P7").combobox({disabled: true}); $("#3HPXIID9").numberbox({disabled: true}); }else if((data.ddlx == '39I3MPX4' && data.yfjsid == null) || (data.ddlx == '39I3MPX5' && data.ysjsid == null)){ $("#3UB0M4P7").combobox({disabled: true}); $("#3IPP5F5V").numberbox({disabled: true}); $("#3HPXIID7").numberbox({disabled: true}); $("#3UY0I5P9").combobox({disabled: true}); $("#3HPXIID8").numberbox({disabled: true}); } } vsdelay(function(cxt){ var form = cxt.find('form'); try{ var page = vscontext(form, cxt); page.init(fmodes, fields, handle); }catch(e){ console.log(e); } cxt.find('.save-btn').on('click', function(){ if(form.form('validate')){ var param=form.serializeArray(); if(rows.length == undefined){ param.push({name:"qyid",value:data.ysqyid}); param.push({name:"lx",value:"YF"}); param.push({name:"jxxglx",value:"3HPTKK6R"}); if(data.zdid && typeof(data.zdid)!= "undefined")param.push({name:"zdid",value:data.zdid}); param.push({name:"jggs_q",value:data.jggs}); param.push({name:"slv_q",value:data.slv}); param.push({name:"hzjsfs_q",value:data.hzjsfs});// param.push({name:"zbjg_q",value:data.zbjg});// param.push({name:"sjjsfs_q",value:data.sjjsfs});// param.push({name:"jfdj_q",value:data.jfdj});// param.push({name:"amount_q",value:data.amount}); param.push({name:"hwdj_q",value:data.hwdj}); param.push({name:"hzhskffs_q",value:data.hzhskffs}); param.push({name:"hzbl_q",value:data.hzbl}); param.push({name:"hskffs_q",value:data.hskffs}); param.push({name:"bl_q",value:data.bl}); }else{ param.push({name:"qyid",value:data.ysqyid}); param.push({name:"lx",value:"YF"}); param.push({name:"jxxglx",value:"3HPTKK6R"}); param.push({name:"ddlx",value:ddlx}); param.push({name:"hzjsfs_q",value:data.hzjsfs});// param.push({name:"zbjg_q",value:data.zbjg});// param.push({name:"sjjsfs_q",value:data.sjjsfs});// param.push({name:"jfdj_q",value:data.jfdj});// } vsportal('PhjxAction.jxjexg',param, function(response){ if(response.status == true){ vsalert('系统提示:','订单配置修改成功!', 'info', function(){ vsclose(true); }); }else{ vsalert('温馨提示:', response.message, 'error'); } }); } }); cxt.find('.canc-btn').on('click', function(){ vsclose(false); }); }); }); </script>代码优化,将data里面拿到的yfm0fs的值‘小于52抹零’默认赋值到页面上
09-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值