阅读 219

html单选框样式（html5零基础入门教程）

1、 结构

一、标记 建立HTML文档

设置网页头部和其它信息

设计文件格式及内文所在 元素的属性

Text 设置页面文字的送顔色 Bgcolor 设置页面背景的顡色

Background 设置页面的背景图像 Link设置页面黙认的顔色

Bgproperties 设置页面的背景图像为固定，不随页面的滚动而滚动

Alink 设置鼠标正在单击时候的链接顔色 Vlink 设置访问过后的链接顔色

Topmargin 设置页面的上边距 Leftmargin 设置页面的左边距

二、头部

标记 当前文档的URL全称 设置显示在浏览器在上方的标题内容</p><p><Isindex> 表明该文档是一个可用于检索的网关脚本</p><p><Meta> 有关文档本身的信息，例如用于查询的关键词，用于获取该文档的有效期等</p><p><Style> 设置CSS层叠样式表的内容</p><p><link> 设置外部文件的链接 <script> 设置页面中程序脚本的内容</p><p><Mate> 标记属性</p><p>Http-Equiv 生成一个HTTP标题域，它的取值与另一个属性相同，</p><p>例如Http-Equiv=Expires，实际取值由Content确定</p><p>Name 如果元数据是以关键字/取值的形式出现的，Name 表示键字,</p><p>如Author或ID</p><p>Content 关键字/取值的内容</p><figure class=wp-block-image><noscript> </noscript> </figure><p>三、文字</p><p>文字标记 <HNumber>……<1HNumber> Number=1.2.3.4.5.6</p><p>分别指1至6级标题</p><p><Font>文字</p><p>文字的修饰标记 <B>/<strong> 粗体 <I>/<Em>/<cite> 斜体</p><p><Sup>上标 <sub>下标 <Big>大字号 <small>小字号</p><p><U>下划线 <S>/<strike>删除线 <Address>地址</p><p><Tt>打字机文字 <Blink>闪烁文字（只适用于Netscape浏览器）</p><p><Code>/<samp>等宽 <kbd>键盘输入文字 <Var>声明变量</p><p><Fant>标记的属性</p><p>Face 字体 Size字号 Color顔色</p><figure class=wp-block-image><noscript> </noscript> </figure><p>四.列表</p><p>列表标记 <Ul>无序列表 <Ol>有序列表 <Dir>回录列表 <Dl>定义列表</p><p><Meru>菜单列表 <Dt>·<Dd>定义列表的标记 <Li>列表项目的标记</p><p><Ul><Ol>标记的属性 Type设置列表类型 start设置列表起始属性</p><p>Type的属性值 1 数字 a 小写字母 A 大写字母 i小写罗马数字</p><p>I 大写罗马数字 Disc ● Circle ○ square □</p><figure class=wp-block-image><noscript> </noscript> </figure><p>五.链接</p><p>链接标记 <A> 链接</p><p><A>标记的属性 Href 指定链接地址 Name给链接命名</p><p>Title设置链接提示文字 Target指定链接的目标窗口</p><p>Target属性值 -parent在上一级窗口中打开。一般使用分帧的框架页会经常使用</p><p>-bank在新窗口中打开</p><p>-self在同一个帧或窗口中打开.这项一般不用设置</p><p>Href属性值 http:// 进入万维网站点 news://启动新闻讨论</p><p>ftp:// 进入文件传输服务器 mailto:// 启动新闻讨论组</p><p>telnet:// 启动telnet方式 gopher://访问一个gopher服务器</p><figure class=wp-block-image><noscript> </noscript> </figure><p>六.图片</p><p>图片标记 <Img>图片 <Map>图像映射 <Area>图像映射中定义区域</p><p><lmg>标记的属性 src图像的源文件 Alt提示文字 Width宽度</p><p>Height高度 Vspace垂直间距 Hspace水平间距 Align排列 Border边框</p><p>Align属性值 Top文字的中间线居于图片上方 Middle文字的中间线居于图片中间</p><p>Bottom文字的中间线居于图片底部 Left 图片在文字的左侧</p><p>Right图片在文字的右侧 Absbottom文字的底线居于图片底部</p><p>Absmiddle文字的底线居于图片中间 Baseline英文文字基线对齐</p><p>Texttop英文文字上边线对齐</p><p>Shape属性值</p><p>Rect矩形区域 Circle椭圆形区域 Poly多边形区域</p><figure class=wp-block-image><noscript> </noscript> </figure><p>七.表格</p><p>1.表格标记 <Table>…</Table>表格标记 <Tr>…</Tr>行标记</p><p><Td>…</Td>单元格标记 <Th>表头标记</p><p><Table>标记属性 Bordercolor 表格边框色 Borde表格边框的宽度</p><p>Bordercolorlight 表格边框亮边框色（左上边框顔色）</p><p>Bordercolordark 表格暗边框色（右下边框顔色）</p><p>Bordercolor 行的边框顔色 Width表格的宽度 Height表格的高度</p><p>Bgcolor表格的背景顔色 Background表格的背图像</p><p><Tr>标记属性 Align行内容的水平对齐 Valign 行内容的垂直对齐</p><p>Bgcolor 行的背景顔色 Background 行的背景图像</p><p>Bordercolor 行的边框顔色 Bordercolorlight 行的亮边框顔色</p><p>Bordercolordark 行的暗边框顔色</p><p><Td>标记属性 Align单元内容的水平对齐 Valign单元格内容的垂直对齐</p><p>Bgcolor 单元格的背景顔色 Background 单元格的背景图像</p><p>Bordercolor单元格的背景顔色 Bordercorlorlight单元格的亮边框顔色</p><p>Brodercolordark 单元格的暗边框顔色 Width 单元格的宽度</p><p>Height单元格的高度</p><p><Th>标记属性 Align表头内容的水平对齐 Valign表头内容的垂直对齐</p><p>Bgcolor 表头的背景顔色 Background表头的背景图像</p><p>Bordercolor表头的边框顔色 Bordercolorlight 表头的亮边框顔色</p><p>Bordercolordark 表头的暗边框顔色 Width 表头的宽度 Height 表头的高度</p><figure class=wp-block-image><noscript> </noscript> </figure><p>八.表单</p><p>1.表单标记 <Form>表单标记 <Input>表单输入标记</p><p><select>菜单和列表标记 <Option>菜单和列表项目标记</p><p>2.属性 <Form> Name表单的名称</p><p>Method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get,post</p><p>Action 用来定义表单处理程序（一个Asp,CGI等程序）的位置（相对地址或绝对地址）</p><p><lnput>标记属性 Name 域的名称 Type域的类型</p><p>Maxlength 域的最大输入字符数 size域的宽度 Value 域的默认值</p><p><Select>标记属性 Name 菜单和列表的名称 size 显示的选项数目</p><p>Multiple 列表中的项目多选 Value 选项值 selected默认选项</p><p><Texrarea>标记属性 Name 文字域的名称 Rows文字域的行数</p><p>Cols 文字域的列数 Value 文字域的默认值</p><p>Type属性值 Text 文字域 Password 密码域 File 文件域</p><p>Checkbox复选框 Redio单选框 Button普通按扭</p><p>Submit 提交按钮 Reset重置按钮 Hidden隐藏域Image图像域</p><figure class=wp-block-image><noscript> </noscript> </figure><p>九.滚动</p><p>滚动标记 <Marquee></p><p><Marquee>标记属性 Direction 滚动方向 up 文字向上滚动 Left文字向左滚动</p><p>Behavior 滚动方式 Scroll 循环往复</p><p>Side 只做一次滚动</p><p>Alternate 交替进行滚动</p><p>ScrollAmount 滚动速度</p><p>ScrollDelay 滚动延迟</p><p>Trim函数用来剔除首尾空格</p><figure class=wp-block-image><noscript> </noscript> </figure><p>十.框架</p><p>1.标记 <Frameset> 框架边框标记 <Frame> 框架标记 <Iframe>浮动框架标记</p><p><Frameset>标记属性 Cols列 Rows行</p><p><Frame> 标记属性 src框架中显示页面源文件的路径</p><p>FrameBorder 框架边框显标属性 FrameSpacing框架边框宽度属性</p><p>Scrolling框架滚动条显示属性 NoResize 框架尺寸调整属性</p><p>BorderColor 框架边框顔色属性 MarginWidt 框架边框缘宽度属性</p><p>MarginHerght框架边缘高度属性</p><p><1frame> 标记属性 src浮动框架中显示页面源文件的路径</p><p>Width 浮动框架的宽度 Height 浮动框架的高度</p><p>Name 浮动框架的名称</p><p>Align 浮动框架的排列方式 Left表示居左 Center表示居中 Right表示居右</p><p>FrameBorder 框架边框显示属性 FrameSpacing 框架宽度属性</p><p>Scrolling 框架滚动条显示属性 ( yes显示 No不显示 Auto根据页面的长度自动判断是否晶粒示滚动条</p><p>NoResize 框架尺寸调整属性 BorderColor框架的顔色</p><p>MarginWidth 框架边缘宽度属性 MarginHeight 框架边缘高度属性</p><p>插入刷新</p><p>步骤：1.选择”查看/文件头内容”</p><p>2.在插入面板上，打开HTML选项卡</p><p>优化代码</p><p>打开文件窗口，执行”命令、清理HTML”命令</p><p>文本换行：Enter 行距较大</p><p>Enter + Shift 行距较小</p><p>插入水平线设置顔色：单击属性面板中的快捷标签编辑器按钮</p><p>在代码中键入”color = #顔色值”</p><p>当图像无法显示时将显示这段文字：</p><p>图像属性中的替代→输入文字</p><p>插入鼠标经过图像:准备两张图像</p><p>在文件窗口中，将光标放置于需要翻转图像位置→插入工具栏中单击鼠标经过图像</p><p>Ⅱ.使用导航条：</p><p>在”常用”对象组中，单击”图像”小三角→导航条</p><p>插入图像占位符：图像小三角→图像占位符</p><p>Flash动画的背景实现透明 参数wmode 值 transparent</p><p>插入 Java Applet</p><p>插入表单</p><p>插入表单域：对象面板上”表单”→插入表单</p><p>插入文本域：单击面板上的插入文本域. 初始值 = 打开时显于的文字</p><p>插入密码框：在属性面板上选择密码</p><p>插入多行文本域：在类型后选择多行</p><p>插入隐藏域：对象面板→插入隐藏域</p><p>插入按钮：标签用来设置按钮上显示的文本</p><p>插入图像提交按钮=图像域：</p><p>插入文件上传按钮=文件域：</p><p>插入单选框</p><p>插入单选按钮组：Label文字说明 Value 单选按钮的值</p><p>插入复选框</p><p>菜单/插入列表：列表值→</p><p>插入跳转菜单：(</p><p>制作网页链接</p><p>URL统一资源定位器</p><p>目标：_blank在一个新的未命名的浏览器窗口中打开</p><p>_parent如果是嵌套的框架，链接会在父框架或窗口中打开，否则=_top</p><p>_top在完整的浏览器中打开</p><p>创建搜索页</p><p>运行中输入:</p><p>Inetmgr (IIS</p><p>Odbcad32 (odbc</p><p>Asp对象</p><p><strong>Applicatipn </strong>在给定的应用程序的所有用户间共享信息,并在服务器运行期间持久地保存数据。</p><p>集合： Contents</p><p>staticObjects</p><p>Item（变量值）=设置资料变量的值</p><p>Key（变量名称）=设置资料变量的名称</p><p>Count（变量资料的数量）=表示</p><p>Coutents集合中资料的总数量</p><p>方法： Lock</p><p>Unlock</p><p>事件： Applicatipn_Onstart</p><p>Application_OnEnd</p><p><strong>Session </strong>存储特定的用户会话所需的信息</p><p>属性：CodePage</p><p>LCID</p><p>SessionID</p><p>Timeout</p><p>集合：Contents</p><p>StaticObjects</p><p>方法：Abandon</p><p>事件：Session_Onstart</p><p>Session_OnEnd</p><p><strong>Response</strong> 用来控制发送给用户的信息，包括直接发送信息给浏览器，重定位浏览器到另一个URL或设置Cookie值</p><p>属性： Buffer</p><p>CacheControl</p><p>Charset</p><p>ContentType</p><p>Expires</p><p>ExpiresAbsolute</p><p>IsClientConnected</p><p>PICS</p><p>Status</p><p>集合： Cookies</p><p>方法： AddHeader</p><p>AppendToLog</p><p>BinaryWrite</p><p>Clear</p><p>End</p><p>Flush</p><p>Redirect</p><p>Write</p><p><strong>Request </strong>访问任何基于HTTP请求传递的信息，常见的有从HTML表单用Post方法或Get方法传递的参数，Cookie或用户认证等。</p><p>属性： TotalBytes</p><p>集合： ClientCertificate</p><p>Cookies</p><p>Form</p><p>QueryString</p><p>ServerVaiables</p><p>方法： BinaryRead</p><p>Server 提供对服务器方法和属性的访问</p><p>属性： ScriptTimeout</p><p>集合： 无</p><p>方法： CreatObject</p><p>HTMLEncode</p><p>MapPath</p><p>URLEncode</p><p><strong>Recordset</strong></p><p>MoveNext 将前数据记录移至下一条</p><p>MovePrevious 将当前数据记录移至上一条</p><p>MoveFirst 将当前数据记录移至第一条</p><p>MoveLast 将当前数据记录移至最后一条</p><p>AbsolutePosition=N 将当前数据记录移至第N条</p><p>EOF 当前数据记录是否移过了最后一条（发生于向下移动时）</p><p>BOF 当前数据记录是否移过了第一条 （发生于向上移动时）</p><p>VBScript 运算符</p><p>算术运算符</p><p>指数 取负 乘法 除法 加法 减法 取模 连接 整数除法</p><p>∧ － * ／ ﹢ ﹣ Mod &</p><p>比较运算符</p><p>相等 不相等 小于 大于 小于或等于 大于或等于 对象相象</p><p>= <> < > <= >= IS</p><p>逻辑运算符</p><p>逻辑非 逻辑与 逻辑或 异或 逻辑等于 逻辑蕴含</p><p>Not And Or Xor Eqv Imp</p><div align=center> </div> </article> <div data-v-13bb1455="" data-v-e09dce5a="" class="tag-list-box"> <div data-v-13bb1455="" data-v-e09dce5a="" class="tag-list"> <div data-v-13bb1455="" data-v-e09dce5a="" class="tag-list-title">文章分类</div> <a data-v-13bb1455="" href="/articleTag/21" target="_blank" rel="" class="item" data-v-e09dce5a=""> <div data-v-13bb1455="" class="tag-title">百科问答</div> </a> </div> <div data-v-13bb1455="" data-v-e09dce5a="" class="tag-list"> <div data-v-13bb1455="" data-v-e09dce5a="" class="tag-list-title">文章标签</div> <div data-v-13bb1455="" data-v-e09dce5a="" class="tag-list-container"> <a data-v-13bb1455="" href="/articleTag/0/html" target="_blank" rel="" class="item" data-v-e09dce5a=""> <div data-v-13bb1455="" class="tag-title">html</div> </a> <a data-v-13bb1455="" href="/articleTag/0/样式" target="_blank" rel="" class="item" data-v-e09dce5a=""> <div data-v-13bb1455="" class="tag-title">样式</div> </a> <a data-v-13bb1455="" href="/articleTag/0/入门" target="_blank" rel="" class="item" data-v-e09dce5a=""> <div data-v-13bb1455="" class="tag-title">入门</div> </a> <a data-v-13bb1455="" href="/articleTag/0/教程" target="_blank" rel="" class="item" data-v-e09dce5a=""> <div data-v-13bb1455="" class="tag-title">教程</div> </a> </div> </div> <div style="color: #828282; border: 1px solid #efefef; background: rgba(239,239,239,.4); padding: 10px"> 版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关<a href="/" target="_blank">法律责任</a>。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。 </div> </div> <div data-v-0f4877d6="" data-v-13bb1455="" data-jj-helper="comment-container" class="container" id="comment-box" data-v-e09dce5a=""> <div data-v-51107198="" data-v-0f4877d6="" class="comment-form comment-form hasborder"> <div>推荐资源</div> <div class="goodsList"> <a href="/download/1477.html" target="_blank" class="goodsItem">万门大学Python10天零基础进阶课程入门爬虫flask实战</a> <a href="/download/2976.html" target="_blank" class="goodsItem">非常摄影手记：大师构图攻略 摄影教程类PDF电子书下载</a> <a href="/download/3715.html" target="_blank" class="goodsItem">将照片一键生成潮流视频,多种火爆模版（安卓版）</a> <a href="/download/5682.html" target="_blank" class="goodsItem">抖音IP变现训练营第6期：教你搞流量新姿势，IP打造获客私域经营</a> <a href="/download/5356.html" target="_blank" class="goodsItem">闲鱼卖苹果手机项目，教你闲鱼卖货月入上万</a> <a href="/download/3105.html" target="_blank" class="goodsItem">原理+实战 快速掌握响应式开发</a> <a href="/download/4853.html" target="_blank" class="goodsItem">80G容量全新版本PHP架构师就业班 黑马完整版PHP基础班+就业班课程 从零基础到项目实战</a> <a href="/download/4127.html" target="_blank" class="goodsItem">玩转算法面试 从真题到思维全面提升算法思维 </a> <a href="/download/5100.html" target="_blank" class="goodsItem">抖音直播运营成长班，带你升级打怪走上掘金赚钱之路</a> <a href="/download/4469.html" target="_blank" class="goodsItem">白领研究院 Xmind8零基础进阶案例全程通关</a> </div> </div> </div> </div> <style> .goodsList { display: flex; flex-wrap: wrap; } .goodsItem{ width: 320px; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; margin-top: 10px; } </style> <div class="article-area" style="width: 700px"> <div data-v-13bb1455="" data-v-e09dce5a="" class="recommended-entry-list-title" style="background-color: white">相关推荐 </div> <div class="entry-list-wrap " data-v-e8ca19d2="" data-v-6374c2f2=""> <div data-v-e8ca19d2="" data-v-129e25fc="" data-v-6374c2f2="" class="d-entry-list entry-list list" style="min-height: 0px !important;"> </div> <div class="main_loading"> <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div> </div> </main> <script> var currentAjax = null; let param = {cid: '21', order: 0, page: 1, flag: true} $(function () { $('.d-nav-item').click(function () { param.cid = $(this).data('id') $('.d-nav-item').removeClass('active') $(this).addClass('active') clearHtml($('.d-entry-list')) getArticleList() }) $('.d-nav-item-order').click(function () { param.order = $(this).data('id') $('.d-nav-item-order').removeClass('active') $(this).addClass('active') clearHtml($('.d-entry-list')) getArticleList() }) function clearHtml(dom) { param.page = 1 param.flag = true $(dom).html('') } function getArticleList() { if (!param.flag) return $('.main_loading').fadeIn() param.flag = false currentAjax = $.ajax({ url: '/index/article/getdata.html', data: param, success: function (res) { $('.main_loading').fadeOut() $('.d-entry-list').append(res) if (res.indexOf("无任何相关记录") != -1) { param.flag = false return } param.flag = true param.page++ } }) } $(window).scroll(function (e) { let scrollTop = Math.ceil(Number($(window).scrollTop())); let heightMinus = Number($(document).height() - $(window).height()); if (scrollTop >= (heightMinus)) { getArticleList() } }); getArticleList() }) </script> <script> let isLogin = "1"; </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = ['htt','ps://','hm','.bai','du.','com','/h','m.js?','a7c9f7145e3574e','135cd6cf14766df7e'].join(''); var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script type="text/javascript" src="/"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-215841977-1"> </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-215841977-1'); </script> </div> </div> </div> </div> </body> </html>