HTML相关介绍及相关用法
程序员文章站
2022-06-19 15:43:54
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/1454963.html">
不一样的函数防抖和节流 </a>
</p>
<p>
下一篇： <a href="/article/1454965.html">
武则天的身体一直都很强劲，为何退位之后不到一年就去世了？ </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2177101.html" target="_blank" title="h5和html的区别有哪些（2者特点分析及区别介绍）">
<h2>
h5和html的区别有哪些（2者特点分析及区别介绍） </h2>
</a>
</li>
<li>
<a href="/article/2177135.html" target="_blank" title="layUI框架中文件上传前后端交互及遇到的相关问题">
<h2>
layUI框架中文件上传前后端交互及遇到的相关问题 </h2>
</a>
</li>
<li>
<a href="/article/2175344.html" target="_blank" title="文本编辑器软件EverEdit怎么样?EverEdit相关功能介绍">
<h2>
文本编辑器软件EverEdit怎么样?EverEdit相关功能介绍 </h2>
</a>
</li>
<li>
<a href="/article/2175191.html" target="_blank" title="HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍">
<h2>
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍 </h2>
</a>
</li>
<li>
<a href="/article/2175067.html" target="_blank" title="HTML5之SVG 2D入门3—文本与图像及渲染文本介绍">
<h2>
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍 </h2>
</a>
</li>
<li>
<a href="/article/2175207.html" target="_blank" title="HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用">
<h2>
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用 </h2>
</a>
</li>
<li>
<a href="/article/2175045.html" target="_blank" title="突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述">
<h2>
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述 </h2>
</a>
</li>
<li>
<a href="/article/2175137.html" target="_blank" title="HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用">
<h2>
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用 </h2>
</a>
</li>
<li>
<a href="/article/2175184.html" target="_blank" title="HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍">
<h2>
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍 </h2>
</a>
</li>
<li>
<a href="/article/2175046.html" target="_blank" title="HTML5之SVG 2D入门8—文档结构及相关元素总结">
<h2>
HTML5之SVG 2D入门8—文档结构及相关元素总结 </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>