欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML相关介绍及相关用法

程序员文章站 2022-03-07 21:44:44
1.html介绍HTML又称Hyper Text Markup Language,主要用于数据展示,其大体框架如下: //文件名 //html头的部分 Document //标题 //html身体部分 ----------------------------//内容 Hn标签表示文档标题 n属于(1,6)n的取值越大,字体越小,越粗。2...</div> <div class="content"> <p><strong>1.html介绍</strong><br> HTML又称Hyper Text Markup Language,主要用于数据展示,其大体框架如下:</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDAyODQ1OS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Hn标签表示文档标题</p> <p>n属于(1,6)n的取值越大,字体越小,越粗。</p> <p><strong>2.相关用法</strong><br><em>2.1.表单(Form)</em><br> 一般不会单独使用,常与input标签连用,另外Form标签后跟action可以进行页面的跳转。<br> Target属性:-blank------在新窗口打开<br> -self---------默认,在相同窗口打开<br> -top--------在整个窗口打开<br> 示例:<br> HTTP协议分为两种:<br> 1.post请求,会暴露name属性的值,不安全,地址栏默认大小为64kb<br> 2.Get请求,不会在地址栏暴露name属性的值,安全<br> method=“请求方式(Post或者Get)”,例:<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDAzMzkxNS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Text------文本框,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDAzNDM1Ni5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Password------密码框,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA0Njg2OC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Submit------提交按钮,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA0MjgyNC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Radio------单选框,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA0MTAzOC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Checkbox-------复选框,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA1NjQ2NS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Reset------重置按钮,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA1MzcwNy5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Button-----普通按钮,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA2MTM5MC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>Select 标签----选择框,例:</p> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA2ODg4Ny5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <pre><code> 多选使用multiple属性,例: </code></pre> <p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA3NDgxNC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>文本域:textarea<br> rows表示行数 cols表示列数<br> br/—表示换行<br> Align=“center” 表示居中<br> Align=“left” 表示居左<br> Align=“right” 表示居右<br> div标签------网页的分区显示<br> p标签-------对行的控制<br> body标签中backgroundcolor表示背景颜色(用英文单词或者十六进制表示)<br> Background------使用图片作为背景<br> A标签可以进行页面的跳转,默认为Get请求<br> font标签可以控制字体的大小和颜色,例:<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA4NjQ4MS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>锚点:使网页的展示到达某一个定位的地点<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA4NDY5NS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p><em>2.2.img标签</em><br> src属性------source 图片路径,height—高度,width—宽度,例: <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA4MTkzNy5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"><br> alt属性--------图像替代文本<br> map标签—地图,映射,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA4NzM5NC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"><br><em>2.3.表格布局</em><br> 作用:通过表格来对网站进行整体的布局<br> 主要使用table----表格<br> tr------表行<br> th------表头<br> td------表元<br> 例:<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDA5NDYwNi5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p><em>2.4.列表</em><br> 2.4.1.无序列表<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEwNDU0Ny5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>2.4.2.有序列表<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEwMjc2MC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>2.4.3.定义列表<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEwNjc0NC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"><br><em>2.5.字体的跑马灯</em><br> marquee的属性</p> <p>behavior: 设置文本如何滚动。属性值有3种:<br> scroll - 循环滚动。默认值。<br> slide - 滚动一次。<br> alternate - 两端来回滚动。<br> direction: 设置文本滚动的方向。属性值有4种:<br> left - 从右向左。默认值。<br> right - 从左向右。<br> up - 向上。<br> down - 向下。<br> loop: 设置滚动的次数。默认值-1,无限次循环。<br> scrollamount: 设置每次滚动时移动的长度(以像素为单位),也就是滚动速度。默认值为6 。<br> 值越大,滚动速度越快,一般5-10比较适合查看消息。<br> scrolldelay: 设置每次滚动时的时间间隔(以毫秒为单位)。默认值为 85。<br> 值越大,滚动速度越慢,通常不设置。<br> sup标签,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEwODQ3MS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"><br> sub标签,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDExNjY1NS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"><br> b加粗,例 :<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDExNzEyNi5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>i 斜体,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEyODAzOC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p><strong><strong>2.6.标签 音频和视频</strong></strong><br> 视频,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEyNTc1Mi5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>音频,例:<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDEzODcwNC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p><em>2.7.多窗口框架</em><br> 一个页面显示多个窗口<br> frameset标签<br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDE0MzY2MC5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>注意:frameset标签不能与body标签连用<br> iframe标签的定义和用法:iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。</p> <p><strong>框架图展示</strong><br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTgzMDE0NDEwMS5wbmc=" alt="HTML相关介绍及相关用法" title="HTML相关介绍及相关用法"></p> <p>本文地址:https://blog.csdn.net/HealerCCX/article/details/111026373</p> </div> <div class="tags"> 相关标签: <a href="/t/html/" target="_blank"> html </a> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/99223.html"> 用htc实现验证模块 </a> </p> <p> 下一篇: <a href="/article/99225.html"> 前端:利用排他思想完成tab栏切换 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2219757.html" target="_blank" title="笔记本Express Card(New Card)卡相关介绍"> <h2> 笔记本Express Card(New Card)卡相关介绍 </h2> </a> </li> <li> <a href="/article/2218969.html" target="_blank" title="oracle 数据库闪回相关语句介绍"> <h2> oracle 数据库闪回相关语句介绍 </h2> </a> </li> <li> <a href="/article/2214826.html" target="_blank" title="Sql Server 索引使用情况及优化的相关Sql语句分享"> <h2> Sql Server 索引使用情况及优化的相关Sql语句分享 </h2> </a> </li> <li> <a href="/article/2214678.html" target="_blank" title="SQL Server 日期相关资料详细介绍"> <h2> SQL Server 日期相关资料详细介绍 </h2> </a> </li> <li> <a href="/article/2212573.html" target="_blank" title="CSS3 Backgrounds属性相关介绍"> <h2> CSS3 Backgrounds属性相关介绍 </h2> </a> </li> <li> <a href="/article/2210264.html" target="_blank" title="Android中读取中文字符的文件与文件读取相关介绍"> <h2> Android中读取中文字符的文件与文件读取相关介绍 </h2> </a> </li> <li> <a href="/article/2208446.html" target="_blank" title="基于java中stack与heap的区别,java中的垃圾回收机制的相关介绍"> <h2> 基于java中stack与heap的区别,java中的垃圾回收机制的相关介绍 </h2> </a> </li> <li> <a href="/article/2206767.html" target="_blank" title="SQL中JOIN和UNION区别、用法及示例介绍"> <h2> SQL中JOIN和UNION区别、用法及示例介绍 </h2> </a> </li> <li> <a href="/article/2206185.html" target="_blank" title="解析HTML5的存储功能和web SQL的相关操作方法"> <h2> 解析HTML5的存储功能和web SQL的相关操作方法 </h2> </a> </li> <li> <a href="/article/2203222.html" target="_blank" title="在Mac OS上搭建PHP的Yii框架及相关测试环境"> <h2> 在Mac OS上搭建PHP的Yii框架及相关测试环境 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>