首頁 > 文章 > web前端 > 【前端】HTML的使用方法

【前端】HTML的使用方法

高洛峰原創: 2017-03-23 09:54:491370瀏覽

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

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：文字提示屬性（詳情）

錨點連結：

# 定義一個錨點：先前使用的是< ;a name="a1">

使用錨點：跳到a1處

#五、 *圖片標籤img

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

在網頁中插入一張圖片

屬性：src：圖片名稱及url位址

alt: 圖片載入失敗時的提示訊息

title：文字提示屬性

width：圖片寬度

height：圖片高度

border：邊框線粗細

六、多媒體標籤（熟悉）

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

你的瀏覽器不支援播放

# 你的瀏覽器不支援播放

< source src="./images/fun.mp4" type="video/mp4" />

你的瀏覽器不支援影片播放

< source src="movie.webm" type="video/webm">

# < source src="movie.mp4" type="video/mp4">

您的破瀏覽器該丟了，不支援影片標籤

七、 *表格標籤

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

*table 表格標籤

caption 表格標題

# *tr 行標籤

*th 列頭標籤

*td 列標籤

與印表機有關，並使用錶頭和錶尾寫在表體前，有助於檢視程式碼

*thead 表頭

* tbody 表體

tfoot 表尾

八、**form表單標籤

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

--表單標籤

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 style="text-align: left;"></p>  *name :定義名稱,用於儲存文字區域中的值。 <p style="text-align: left;"></p>  *cols ：規定文字區內可見的列數。 <p style="text-align: left;"></p>  *rows ：規定文字區內可見的行數。 <p style="text-align: left;"></p>  disabled：是否停用<p style="text-align: left;"></p>  readonly：只讀<p style="text-align: left;"></p>  ...<p style="text-align: left;">##  預設值是在兩個標籤之間</p>
<p style="text-align: left;"> 5. *<button> 標籤定義</p>按鈕<p style="text-align: left;">。 <a href="http://www.php.cn/code/5991.html" target="_blank"></a> 您可以在 button 元素中放置內容，例如文件或圖像。這是該元素與由 input 元素創建的按鈕的不同之處。 </p>
<p style="text-align: left;"> 6. <fieldset> html5標籤--fieldset 元素可將表單內的相關元素</p>分組<p style="text-align: left;">。 <a href="http://www.php.cn/code/10425.html" target="_blank"></a> 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<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="audi">Audi<</p>
<p style="text-align: left;"> <option value="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/>  表單項目中的屬性，可以提供<a href="http://www.php.cn/wiki/1313.html" target="_blank"></a>    *type屬性:表示表單項目的類型:值如下:<a href="http://www.php.cn/code/8549.html" target="_blank"></a> 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/1081.html" target="_blank">file</a>:</p>檔案上傳<p style="text-align: left;">選擇框</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;">##reset </p>:重置按鈕, 還原到開始(第一次開啟時)的效果<p style="text-align: left;"></p> hidden:主表單隱藏網域,要是和表單一塊提交的資訊,但是不需要使用者修改<p style="text-align: left;"></p> *name屬性:表單項目名稱,用於儲存內容值的<p style="text-align: left;"></p> *value屬性:輸入的值(預設指定值)<p style="text-align: left;"></p># size屬性:輸入框的寬度值<p style="text-align: left;"></p> maxlength屬性:輸入框的輸入內容的最大長度<p style="text-align: left;"></p> readonly屬性:對輸入框只讀屬性<p style="text-align: left;"><a href="http://www.php.cn/code/8243.html" target="_blank"> *disabled屬性:停用屬性</a></p># *checked屬性:對選擇框指定預設選項<p style="text-align: left;"></p> accesskey屬性:指定快速鍵(不常用) (IE:alt+鍵 火狐:alt+shift+鍵)###### tabindex屬性:透過數字指定tab鍵的切換順序(不常用)###### src和alt是圖片按鈕設定的###### 注意：reset重置按鈕是將表單資料恢復到第一次開啟時的###狀態###，並不是清空######       image圖片按鈕，預設具有提交表單功能。 ###<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="http://m.php.cn/zh-tw/faq/358137.html">解析html使用方法</a></span><span>下一篇：<a class="dBlack" title="解析html使用方法" href="http://m.php.cn/zh-tw/faq/358141.html">解析html使用方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益線上PHP培訓，幫助PHP學習者快速成長！</p></div><div class="footermid"><a href="http://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="http://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="http://m.php.cn/zh-tw/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>