HTML基礎(chǔ)

一、HTML簡介

html結(jié)構(gòu)png

注意事項(xiàng)：

  • <!DOCTYPE html> 必須首行定格
  • <title> 為文檔標(biāo)題
  • <meta charset=“utf-8”> 文檔解碼格式
  • <meta name="keywords" content="..."> 和 <meat name="description" > 提供給搜索引擎使用
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 移動(dòng)端瀏覽器的寬高縮放
  • <link> 標(biāo)簽可以引入favicon和樣式CSS文件

二、HTML語法

html語法.png

書寫規(guī)范
- 小寫標(biāo)簽屬性
- 屬性值雙引號(hào)
- 代碼因嵌套縮進(jìn)
全局屬性

  • id，<div id="unique-element"></div>，頁面中唯一
  • class，<div class='btn'>Click Me</div>，頁面中可重復(fù)出現(xiàn)
  • style，盡量避免
  • title，對(duì)于元素的描述類似于Tooltip的效果

三、HTML標(biāo)簽

[HTML5 標(biāo)簽集合]
html標(biāo)簽集合.jpg

文檔章節(jié)

<body> 頁面內(nèi)容 <header> 文檔頭部 <nav> 導(dǎo)航 <aside> 側(cè)邊欄 <aritce> 定義外部內(nèi)容（如外部引用的文章）<section> 一個(gè)獨(dú)立的塊 <footer> 尾部
頁面通常結(jié)構(gòu)

頁面結(jié)構(gòu).gif

文本標(biāo)簽
<!— 默認(rèn)超鏈接 —>
 <a href=“http://sample-link.com” title=“Sample Link”>Sample</a>
 <!-- 當(dāng)前窗口顯示 -->
 <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>

<!-- 頁面中的錨點(diǎn) -->
<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>
<!-- 多個(gè)郵箱地址 -->
<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>

組合內(nèi)容標(biāo)簽

  • <div>
  • <p>
  • <ol>
  • <ul>
  • <dl>
  • <pre>
  • <blockquote>

文檔章節(jié)

<body> 頁面內(nèi)容 <header> 文檔頭部 <nav> 導(dǎo)航 <aside> 側(cè)邊欄 <aritce> 定義外部內(nèi)容（如外部引用的文章）<section> 一個(gè)獨(dú)立的塊 <footer> 尾部

引用

  • <cite> 引用作品的名字、作者的名字等
  • <q> 引用一段文字（大段文字引用用<blockquote>）
  • <blockquote> 引用大塊文字
  • <pre>保存格式化的內(nèi)容（其空格、換行等格式不會(huì)丟失）
<pre>
  <code>
     int main(void) {
       printf('Hello, world!');
       return 0;
     }
 </code>
</pre>

代碼

<code> 引用代碼

格式化

<b> 加粗 <i> 斜體

強(qiáng)調(diào)

<em> 斜體。著重于強(qiáng)調(diào)內(nèi)容，會(huì)改變語義的強(qiáng)調(diào)<strong>粗體。著重于強(qiáng)調(diào)內(nèi)容的重要性

換行

<br> 換行

列表

無序列表
<ul>
   <li>標(biāo)題</li>
   <li>結(jié)論</li>
</ul>
有序列表
<ol>
   <li>第一</li>
   <li>第二</li>
</ol>
自定義列表
<dl>
   <dt>作者</dt>
   <dd>愛因斯坦</dd>
   <dt>作品</dt>
   <dd>《相對(duì)論》</dd>
   <dd>《時(shí)間與空間》</dd>
</dl>

一個(gè)<dt>可以對(duì)應(yīng)多個(gè)<dd>
NOTE：<dl>為自定義列表，其中包含一個(gè)或多個(gè)<dt>及一個(gè)或多個(gè)<dd>，并且<dt>與<dl>列表會(huì)有縮進(jìn)的效果。<pre>會(huì)保留換行和空格，通常與<code>一同使用。

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

<blockquote>擁有cite屬性，它包含引用文本的出處，示例如下所示：

<blockquote cite="http://example.com/facts">
   <p>Sample Quote...</p>
 </blockquote>

嵌入

<iframe src=""></iframe> 頁面操作可以不影響到iframe的內(nèi)容
 
 <!--object embed通常用來嵌入外部資源 -->
 <object type="application/x-shockwave-player">
   <param name="movie" value="book.pdf">
 </object>
 
 <!--視頻 track可以引入字幕 autoplay可以使視頻加載后自動(dòng)播放，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>

資源標(biāo)簽

圖標(biāo)簽

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

熱點(diǎn)區(qū)域標(biāo)簽
`img`中套用`map`以及`area`可以實(shí)現(xiàn)點(diǎn)擊某部圖片觸發(fā)一個(gè)鏈接，點(diǎn)擊另一部分觸發(fā)另外一個(gè)鏈接。
![](mama.jpg)
<map name="map">
     <area shap="rect" coords="0,0,50,50" href="" alt="">
     <area shap="circle" coords="75,75,25" href="" alt="">
 </map>

表格

表格代碼示例
<table>
<caption>table title and/or explanatory text</caption>
   <thead>
     <tr>
       <th>header</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>data</td>
     </tr>
   </tbody>
</table>

使用colspan=val進(jìn)行跨列，使用rowspan=val進(jìn)行跨行。

表單

<form action="WebCreation_submit" method="get" accept-charset="utf-8">
<fieldset>
     <legend>title or explanatory caption</legend>
     <!-- 第一種添加標(biāo)簽的方法 -->
     <label><input type="text/submit/hidden/button/etc" name="" value=""></label>
     <!-- 第二種添加標(biāo)簽的方法 -->
     <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>
     <!-- 隱藏文本框，可提交影藏?cái)?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可用于對(duì)表單進(jìn)行分區(qū)
表單中的其他控件類型：

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

input 類型支持值列表

Value Description
button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month and day (no time))
datetime The input type datetime has been removed from the HTML standard. Use datetime-local instead.
datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse..." button (for file uploads)
hidden Defines a hidden input field
image Defines an image as the submit button
month Defines a month and year control (no time zone)
number Defines a field for entering a number
password Defines a password field (characters are masked)
radio Defines a radio button
range Defines a control for entering a number whose exact value is not important (like a slider control)
reset Defines a reset button (resets all form values to default values)
search Defines a text field for entering a search string
submit Defines a submit button
tel Defines a field for entering a telephone number
text Default. Defines a single-line text field (default width is 20 characters)
time Defines a control for entering a time (no time zone)
url Defines a field for entering a URL
week Defines a week and year control (no time zone)

語義化

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

三、實(shí)體字符

實(shí)體字符（ASCII Encoding Reference）是用來在代碼中以實(shí)體代替與HTML語法相同的字符，避免瀏覽解析錯(cuò)誤。它的兩種表示方式，第一種為& 外加實(shí)體字符名稱，例如 &nbsp;，第二種為 & 加實(shí)體字符序號(hào)，例如&#160;。

常用HTML字符實(shí)體（建議使用實(shí)體）

字符 名稱 實(shí)體名 實(shí)體數(shù)
" 雙引號(hào) &quot &#34
& &符 &amp &#38
< 左尖括號(hào)（小于號(hào)） &lt &#60
> 右尖括號(hào)（大于號(hào)） &gt &#62
空格 &nbsp &#160
中文全角空格 &qmp &#12288

常用特殊字符實(shí)體（不建議使用實(shí)體）：

字符 名稱 實(shí)體名 實(shí)體數(shù)
￥ 元 ￥ ￥
| 斷豎線 | |
? 版權(quán) ? ?
? 注冊(cè)商標(biāo)R ? ?
? 商標(biāo)TM ? ?
· 間隔符 · ·
? 左雙尖括號(hào) ? ?
? 右雙尖括號(hào) ? ?
° 度 ° °
× 乘 × ×
÷ 除 ÷ ÷
‰ 千分比 ‰ ‰

NOTE：具體所需可在使用時(shí)查詢，無需記憶。

瀏覽器兼容

主流瀏覽器都兼容 HTML5 的新標(biāo)簽，對(duì)于 IE8 及以下版本不認(rèn)識(shí) HTML5的新元素，可以使用 JavaScript 創(chuàng)建一個(gè)沒用的元素來解決，例如：

<script>
    document.createElement("header");
</script>

也可以使用 shiv 來解決兼容性問題，詳情可參考HTML5 Shiv

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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