首页 >web前端 >html教程 >【前端】HTML的使用方法

【前端】HTML的使用方法

高洛峰原创: 2017-03-23 09:54:491389浏览

编程语言：解释型和编译型

WEB前端：HTML+CSS+JavaScript

一、 HTML介绍:

---------------------------------------

1. 什么是HTML？

超文本标记语言, <标签名>--标记（标签、节点）

2. HTML是由：标签和内容构成

3. 程序语言有两种：解释性语言（HTML、PHP、Javascript）和编译型语言（C、C++、Java

4. HTML的标签组成部分、属性、实体

HTML的实体： <:< >:> 空格:

5. HTML中注释：

注释的目的：1. 辅助说明 2.代码调试

6. HTML标签（标记）的语法：标签是由"<"和">"括起来

双标签：<标签名>....

单标签：<标签名/>

7. HTML中的颜色：可以是颜色单词：red/blue/green/yellow...

还可以是：#000000 --- #ffffff

十六进制：0123456789abcdef

其中前两位表示红色，中间两位绿色，后两位表示蓝色。

二、 HTML中HEAD头部设置

----------------------------------------

设置网页编码：

关键字：

描述：

网页标题：本网页标题

导入CSS文件：

CSS代码：

JS文件或代码：

... ...

三、 HTML中的文本标签、格式化标签

----------------------------------------

文本标签：

1. *
换行

2. *

...

换段

3. ... 斜体

4. ... 强调斜体

5. ... 加粗

6. *... 强调加粗

7. *... 其中n为1--6的值。标题标签（加粗、独立行）

8. 引用

9. _... ^...

10.* 删除线

....

格式化标签：

1. *
换行

2. *

...

换段

3. 列表：

列表项

<dl> 自定义列表

自定义列表头

自定义列表内容

4.

四、*HTML中中的超级链接A

------------------------------------------------

* 超级链接标签

属性：href必须，指的是链接跳转地址

  target: 表示链接的打开方式：

_blank 新窗口

_parent 父窗口

_self 本窗口（默认）

_top 顶级窗口

framename 窗口名

  title：文字提示属性（详情）

锚点链接：

定义一个锚点：以前使用的是

使用锚点：   跳到a1处

五、 *图片标签img

---------------------------------------

在网页中插入一张图片

属性：src：图片名及url地址

alt: 图片加载失败时的提示信息

title：文字提示属性

width：图片宽度

height：图片高度

border：边框线粗细

六、多媒体标签（熟悉）

------------------------------------

你的浏览器不支持播放

你的浏览器不支持播放

你的浏览器不支持视频播放

您的破浏览器该扔了，不支持视频标签

七、 *表格标签

------------------------------------

*table 表格标签

caption 表格标题

*tr 行标签

*th 列头标签

*td 列标签

        和打印机有关，把表头和表尾写在表体之前，有助于查看代码

*thead 表头

*tbody 表体

tfoot 表尾

八、**form表单标签

---------------------------------------------------------

1.
--表单标签

form标签常用属性：

*action属性:提交的目标地址(URL)

*method属性:提交方式:get(默认)和post

get方式是URL地址栏可见,长度受限制(IE2k 火狐8k),相对不安全.

post方式是URL地址不可见,长度不受限制,相对安全.

enctype:提交类型

target: 在何处打开目标 URL。

name:属性为表单起个名字.HTML5不支持。用 id 代替。

2. 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

具体在下面有详解：

如：

3. 标签中使用的;

*value属性:下拉项的值

*selected属性:默认下拉指定项.

4. * 多行的文本输入区域</p> <p style="text-align: left;"> *name :定义名称,用于存储文本区域中的值。</p> <p style="text-align: left;"> *cols ：规定文本区内可见的列数。</p> <p style="text-align: left;"> *rows ：规定文本区内可见的行数。</p> <p style="text-align: left;"> disabled：是否禁用</p> <p style="text-align: left;"> readonly：只读</p> <p style="text-align: left;"> ...</p> <p style="text-align: left;"> 默认值是在两个标签之间</p> <p style="text-align: left;"> 5. *<button> 标签定义<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>。</p> <p style="text-align: left;"> 您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。</p> <p style="text-align: left;"> 6. <fieldset> html5标签--fieldset 元素可将表单内的相关元素<a href="http://www.php.cn/code/10425.html" target="_blank">分组</a>。</p> <p style="text-align: left;"> disabled属性：定义 fieldset 是否可见。</p> <p style="text-align: left;"> form属性：定义该 fieldset 所属的一个或多个表单。</p> <p style="text-align: left;"> 7. <legend> html5标签--<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。</p> <p style="text-align: left;"> <form></p> <p style="text-align: left;">   <fieldset></p> <p style="text-align: left;"> <legend>健康信息：</legend></p> <p style="text-align: left;"> 身高：<input type="text" /><br/></p> <p style="text-align: left;"> 体重：<input type="text" /><br/></p> <p style="text-align: left;">   </fieldset></p> <p style="text-align: left;"> </form></p> <p style="text-align: left;"> 8. <optgroup> html5标签--<optgroup> 标签定义选项组。此元素允许您组合选项</p> <p style="text-align: left;"> 样例：</p> <p style="text-align: left;"> <select></p> <p style="text-align: left;">   <optgroup label="Swedish Cars"></p> <p style="text-align: left;"> <option value="volvo">Volvo</option></p> <p style="text-align: left;"> <option value="saab">Saab</option></p> <p style="text-align: left;">   </optgroup></p> <p style="text-align: left;">   <optgroup label="German Cars"></p> <p style="text-align: left;"> <option value="mercedes">Mercedes</option></p> <p style="text-align: left;"> <option value="audi">Audi</option></p> <p style="text-align: left;">   </optgroup></p> <p style="text-align: left;"> </select></p> <p style="text-align: left;"> 9. <datalist> html5标签--<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。</p> <p style="text-align: left;"> 样例：</p> <p style="text-align: left;"> <form action="demo_form.php" method="get"></p> <p style="text-align: left;"> <input list="browsers" name="browser"></p> <p style="text-align: left;"> <datalist id="browsers"></p> <p style="text-align: left;"> <option value="Internet Explorer"></p> <p style="text-align: left;"> <option value="Firefox"></p> <p style="text-align: left;"> <option value="Chrome"></p> <p style="text-align: left;"> <option value="Opera"></p> <p style="text-align: left;"> <option value="Safari"></p> <p style="text-align: left;"> </datalist></p> <p style="text-align: left;"> <input type="submit"></p> <p style="text-align: left;"> </form></p> <p style="text-align: left;"> 10. **<input/> 表单项中的属性，可以提供</p> <p style="text-align: left;">    *type属性:表示表单项的类型:值如下:</p> <p style="text-align: left;"> text:单行文本框</p> <p style="text-align: left;"> password:密码输入框</p> <p style="text-align: left;"> checkbox:多选框注意要提供value值</p> <p style="text-align: left;"> radio:单选框注意要提供value值</p> <p style="text-align: left;"> <a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a>:<a href="http://www.php.cn/code/8549.html" target="_blank">文件上传</a>选择框</p> <p style="text-align: left;"> button:普通按钮 </p> <p style="text-align: left;"> submit:提交按钮</p> <p style="text-align: left;"> image:图片提交按钮</p> <p style="text-align: left;"> <a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>:重置按钮, 还原到开始(第一次打开时)的效果</p> <p style="text-align: left;"> hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改</p> <p style="text-align: left;"> *name属性:表单项名,用于存储内容值的</p> <p style="text-align: left;"> *value属性:输入的值(默认指定值)</p> <p style="text-align: left;"> size属性:输入框的宽度值</p> <p style="text-align: left;"> maxlength属性:输入框的输入内容的最大长度</p> <p style="text-align: left;"> readonly属性:对输入框只读属性</p> <p style="text-align: left;"> *disabled属性:禁用属性</p> <p style="text-align: left;"> *checked属性:对选择框指定默认选项</p> <p style="text-align: left;"> accesskey属性:指定快捷键(不常用) (IE:alt+键火狐:alt+shift+键)</p> <p style="text-align: left;"> tabindex属性:通过数字指定tab键的切换顺序(不常用)</p> <p style="text-align: left;"> src和alt是为图片按钮设置的</p> <p style="text-align: left;"> 注意：reset重置按钮是将表单数据恢复到第一次打开时的<a href="http://www.php.cn/code/8243.html" target="_blank">状态</a>，并不是清空</p> <p style="text-align: left;">    image图片按钮，默认具有提交表单功能。</p><p>以上是【前端】HTML的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="解析html使用方法" href="https://m.php.cn/zh/faq/358137.html">解析html使用方法</a></span><span>下一篇：<a class="dBlack" title="详解在HTML中实现动画的方法代码" href="https://m.php.cn/zh/faq/358141.html">详解在HTML中实现动画的方法代码</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="https://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>