超碰人人精品,欧美久久少妇,这里只有精品九九热

HTML 標簽集合
語義化
文檔章節(jié)
- 頁面通常結構
- 標題標簽
組合內(nèi)容
- 段落標簽
- 列表標簽
  - 無序列表
  - 有序列表
  - 自定義列表
- 水平線標簽
- 換行標簽
表格數(shù)據(jù)
表單
文本級別語義
- 鏈接標簽
- 文本格式化標簽
- 引用標簽
嵌入式內(nèi)容
- 圖像標簽
  - 路徑
    - 相對路經(jīng)
    - 絕對路徑
- canvas
- 熱點區(qū)域標簽
- 嵌入資源標簽
- 多媒體 embed

HTML 標簽集合

HTML.png

語義化

語義化（Semantic Tag）是指用合適的標簽標識適當?shù)膬?nèi)容，它可以起到搜索引擎優(yōu)化（Search Engine Optimization），提高可訪問性（例如盲人使用的屏幕閱讀器），與此同時還可以提高代碼的可讀性。簡而言之也就是在正確的地方使用正確的標簽

文檔章節(jié)標簽

<body> 頁面內(nèi)容
<header> 文檔頭部
<nav> 導航
main文檔主要內(nèi)容
<aside> 側邊欄
<article> 定義外部內(nèi)容（如外部引用的文章）
<section> 一個獨立的塊
<footer> 尾部

頁面通常結構

HTML5中有部分語義標簽，在使用時十分簡單，但是由于語義性更強，更利于開發(fā)者以及搜索引擎對于網(wǎng)頁的理解。

structure.gif

HTML5中代碼示例：

<body>
<!--頭部start-->
<header>
    <!--導航start-->
    <nav>
        <a href="#">導航1</a>
        <a href="#">導航2</a>
        <a href="#">導航3</a>
    </nav>
    <!--導航end-->
</header>
<!--頭部end-->

<!--主體start-->
<main>
    <!--文章start-->
    <article></article>
    <!--文章end-->

    <!--側邊欄start-->
    <aside></aside>
    <!--側邊欄end-->

</main>
<!--主體end-->

<!--底部start-->
<footer></footer>
<!--底部end-->
</body>

使用HTML5中新的語義標簽,內(nèi)容更為直觀,即使刪除了注釋,依舊能夠看出該標簽的作用,語義性更強。說的通俗一些,內(nèi)容一樣,但是代碼更少了。

但是老版本的瀏覽器，比如iE 8 及以下版本并不支持新語義標簽，可以到「HTML 」語法中查找解決兼容性問題的方法。

標題標簽

為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

從<h1>到<h6>重要性遞減。

其基本語法格式如下：

<hn>   標題文本   </hn>

注意： h1 標簽因為重要，盡量少用，不要動不動就向你扔了一個h1。一般h1 都是給logo使用。

組合內(nèi)容標簽

段落標簽

在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標簽就是

<p>  文本內(nèi)容  </p>

是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。

容器標簽

作為容器存在，語義性不強，在網(wǎng)站布局中廣泛使用，搜索引擎友好，但是搜索引擎更友好的依舊是內(nèi)容。

列表標簽

容器里面裝載著文字或圖表的一種形式，叫列表。
列表最大的特點就是整齊、整潔、有序

無序列表

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

<ul>
      <li>列表項1</li>
      <li>列表項2</li>
      <li>列表項3</li>
      ......
</ul>

比如一些新聞是沒有順序的，不用排隊，先到先得，先發(fā)布先顯示。

注意:

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。
無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
......
</ol>

所有特性基本與ul 一致。

但是實際工作中，較少用 ol ，因此我們用一句話來總結下 ol：放開那個女...那個ol,讓ul來

自定義列表

定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
    <dt>名詞1</dt>                   <!--  dt 表示標題 -->
    <dd>名詞1解釋1</dd>      <!--  dd 表示內(nèi)容   -->
    <dd>名詞1解釋2</dd>
    <!--  dd 是對dt進行的表述 或者 解釋   dd 是圍繞著dt進行服務的 -->
    ...
    <dt>名詞2</dt>
    <dd>名詞2解釋1</dd>
    <dd>名詞2解釋2</dd>
    ...
</dl>

注意：

dl 里面只能有 dt 和dd 標簽 ;
dt 和 dd 一對多的關系,
一個<dt>可以對應多個<dd>
dt 類似于皇帝,可以有多個妃子dd;
一個dl 里面可以有多對 dt 和 dd.

tips: <dl> 為自定義列表，其中包含一個或多個 <dt> 及一個或多個 <dd>，并且dt 與 dl列表會有縮進的效果。<pre> 會保留換行和空格，通常與 <code> 一同使用。

水平線標簽

在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標記來完成，就是創(chuàng)建橫跨網(wǎng)頁水平線的標記。

其基本語法格式如下：

<hr />是單標記

在網(wǎng)頁中顯示默認樣式的水平線。

換行標簽

在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽

<br />

在HTML中，如果還像在word中直接敲回車鍵換行就不起作用了。

表格

存在即是合理的。表格的現(xiàn)在還是較為常用的一種標簽，但不是用來布局，常見處理表格式數(shù)據(jù)。

表格代碼示例
在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關的標簽。

<table>
  <caption>table title and/or explanatory text</caption>
  <thead>
    <tr>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
    </tr>
  </tbody>
</table>

在上面的語法中包含三對HTML標簽，分別為<table></table>、<tr></tr>、<td></td>，他們是創(chuàng)建表格的基本標簽，缺一不可，下面對他們進行具體地解釋。

<table>< </table>：用于定義一個表格。
<tr>< </tr>：用于定義表格中的一行，必須嵌套在 <table> </table>標簽中，在<table> </table>中包含幾對 <tr> </tr>，就有幾行表格。
<td> </td>：用于定義表格中的單元格，必須嵌套在< <tr> </tr>標簽中，一對<tr> </tr>中包含幾對<td> </td>，就表示該行中有多少列（或多少個單元格）。
表頭標簽<thead></thead>一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標記<th></th>替代相應的單元格標記<td></td>即可。

注意：

<tr></tr>中只能嵌套<td></td>
<td></td>標簽，他就像一個容器，可以容納所有的元素

表格結構

在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳，具體如下所示：

<thead></thead>：用于定義表格的頭部。

必須位于<table></table> 標簽中，一般包含網(wǎng)頁的logo和導航等頭部信息。

<tfoot></ tfoot >：用于定義表格的頁腳。

位于<table></table>標簽中<thead></thead>標簽之后，一般包含網(wǎng)頁底部的企業(yè)信息等。

<tbody></tbody>：用于定義表格的主體。

位于<table></table>標簽中<tfoot></ tfoot >標簽之后，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

表格的標題： caption

caption 元素定義表格標題。

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

表格屬性

表格屬性.png

合并單元格
使用 colspan=val 進行跨列，使用 rowspan=val 進行跨行。

總結表格：

1.表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
2.表格中由行中的單元格組成。
3.表格中沒有列元素，列的個數(shù)取決于行的單元格個數(shù)。
4.表格不要糾結于外觀，那是CSS 的作用。

表單

<form action="WebCreation_submit" method="get" accept-charset="utf-8">
  <fieldset>
    <legend>title or explanatory caption</legend>
    <!-- 第一種添加標簽的方法 -->
    <label><input type="text/submit/hidden/button/etc" name="" value=""></label>
    <!-- 第二種添加標簽的方法 -->
    <label for="input-id">Sample Label</label>
    <input type="text" id="input-id">
  </fieldset>
  <fieldset>
    <legend>title or explanatory caption</legend>
    <!-- 只讀文本框 -->
    <input type="text" readonly>
    <!-- 隱藏文本框，可提交影藏數(shù)據(jù) -->
    <input type="text" name="hidden-info" value="hiden-info-value" hidden>
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

使用fieldset可用于對表單進行分區(qū)

表單中的其他控件類型：

textarea （文本框）
select 與 option （下拉菜單可多選）

更多關于表單的介紹，請點擊這里查看。

文本級別語義

鏈接標簽

在HTML中創(chuàng)建超鏈接非常簡單，只需用標記環(huán)繞需要被鏈接的對象即可，
其基本語法格式如下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標的url地址，當為標記應用href屬性時，它就具有了超鏈接的功能。

target：用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，_blank為在新窗口中打開方式。

注意：

1.如果當時沒有確定鏈接目標時，通常將鏈接標記的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

2.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。

錨點定位

通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。創(chuàng)建錨點鏈接分為兩步：

1.使用“<a href=”#id名“>鏈接文本</a>”創(chuàng)建鏈接文本。

2.使用相應的id名標注跳轉目標的位置。

base 和 nofollow
- base 可以設置整體鏈接的打開狀態(tài)

<head>
<base target = "_blank" />
</head>
<body>
<a target = "_self"></a>
</body>

nofollow 設置不抓取鏈接,防止SEO搜索引擎抓取隱私

<a rel = "nofollow"></a>

鏈接標簽常見的幾種形式：

<!-- 默認超鏈接  -->
<a  title="Sample Link">Sample</a>
<!-- 當前窗口顯示 -->
<a  title="Sample Link" target="_self">Sample</a>
<!-- 新窗口顯示 -->
<a  title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打開鏈接 -->
<a  title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>

<!-- 頁面中的錨點 -->
<a href="#achor">Achor Point</a>
<section id="achor">Achor Content</section>

<!-- 郵箱及電話需系統(tǒng)支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多個郵箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主題和內(nèi)容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>

<!-- 電話示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>

文本格式化標簽

在網(wǎng)頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標記，使文字以特殊的方式顯示。

標簽	顯示效果	語義強調(diào)標簽（XHTML推薦使用）
<b> </b><strong> </strong>	文字以`粗體`方式顯示	<strong> </strong>
<i> </i><em> </em>	文字以`斜體`方式顯示	<em> </em>
<s> </s><del> </del>	文字以`加刪除線`方式顯示	<del> </del>
<u> </u><ins> </ins>	文字以`加下劃線`方式顯示	<ins> </ins>

引用標簽

<cite> 引用作品的名字、作者的名字等
<q> 引用一小段文字（大段文字引用用<blockquote>）
<blockquote> 引用大塊文字
<blockquote> 擁有 cite 屬性，它包含引用文本的出處，示例如下所示：
```
<blockquote cite="http://example.com/facts">
  <p>Sample Quote...</p>
</blockquote>
```
<pre> 保存格式化的內(nèi)容（其空格、換行等格式不會丟失）

<code> 引用代碼

<pre>
  <code>
    int main(void) {
      printf('Hello, world!');
      return 0;
    }
  </code>
</pre>

嵌入式內(nèi)容

圖像標簽

HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標記，要想在網(wǎng)頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記以及和他相關的屬性。

其基本語法格式如下：

<img src = "圖像URL"/>

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。

img標記屬性.png

路徑

網(wǎng)頁需要圖片,首先需要通過路徑找到它..

實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。

路徑可以分為： 相對路徑和絕對路徑

相對路徑

圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如[圖片上傳失敗...(image-b7736a-1536892261783)]。
圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如[圖片上傳失敗...(image-d169c1-1536892261783)]。
圖像文件位于html文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如[圖片上傳失敗...(image-30391c-1536892261783)]。

絕對路徑

絕對路徑“D:\web\img\logo.gif”，
或完整的網(wǎng)絡地址，例如“http://www.itcast.cn/images/logo.gif”。

canvas

canvas 基于像素，性能要求比較高，可用于實時數(shù)據(jù)展示。svg 為矢量圖形圖像。

熱點區(qū)域標簽

img中套用map以及area可以實現(xiàn)點擊某部分圖片觸發(fā)一個鏈接，點擊另一部分觸發(fā)另一個鏈接

<img src="mama.jpg" width=100 height=100 usemap="#map" />
<map name="map">
    <area shap="rect" coords="0,0,50,50" href="" alt="">
    <area shap="circle" coords="75,75,25" href="" alt="">
</map>

嵌入資源標簽

<iframe src=""></iframe> 頁面操作可以不影響到iframe的內(nèi)容

<!--object embed通常用來嵌入外部資源 -->
<object type="application/x-shockwave-player">
  <param name="movie" value="book.pdf">
</object>

<!--視頻 track可以引入字幕 autoplay可以使視頻加載后自動播放，loop可以使其循環(huán)播放 -->
<video autoplay loop controls="controls" poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
</video>

多媒體 embed

embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url為音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。兼容性較差。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

「HTML」標簽集合

「HTML」標簽集合

HTML 標簽集合

語義化

文檔章節(jié)標簽

標題標簽

組合內(nèi)容標簽

段落標簽

容器標簽

列表標簽

水平線標簽

換行標簽

表格

表單

文本級別語義

鏈接標簽

文本格式化標簽

引用標簽

嵌入式內(nèi)容

圖像標簽

路徑

canvas

熱點區(qū)域標簽

嵌入資源標簽

多媒體 embed

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

「HTML」 標簽集合

HTML 標簽集合

語義化

文檔章節(jié)標簽

標題標簽

組合內(nèi)容標簽

段落標簽

容器標簽

列表標簽

水平線標簽

換行標簽

表格

表單

文本級別語義

鏈接標簽

文本格式化標簽

引用標簽

嵌入式內(nèi)容

圖像標簽

路徑

canvas

熱點區(qū)域標簽

嵌入資源標簽

多媒體 embed

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

「HTML」標簽集合