HTML初級(jí)教程

1、HTML是超文本標(biāo)記語(yǔ)言。(Hyper Text Markup Language)
2、HTML不是編程語(yǔ)言,而是一種標(biāo)記性語(yǔ)言,標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽,HTML使用標(biāo)記標(biāo)簽描述網(wǎng)頁(yè)。
3、html文檔的基本結(jié)構(gòu)

<!DOCTYPE html>
<html>
  <head>
    <meta/>
    <title></title>
  </head>
  <body>
  </body>
</html>

4、<!DOCTYPE html>引用官方的DTD文件,主要是對(duì)標(biāo)簽引用的約束。但HTNL5不需要應(yīng)用嚴(yán)格意義上的DTD文件。
5、html重要標(biāo)簽
??(1)head標(biāo)簽是HTML文檔的頭部標(biāo)簽,成對(duì)出現(xiàn)<head>...</head>
??(2)body標(biāo)簽是HTMl主題部分標(biāo)簽,成對(duì)出現(xiàn)<body>...</body>

  • head標(biāo)簽的主要元素
標(biāo)簽 用法
title 該元素用于定義文檔標(biāo)題
meta 用于HTML頁(yè)面元數(shù)據(jù)
scripe 用于包含JavaScript腳本
link 用于鏈接外部css資源文件
style 用于定義內(nèi)部css樣式

?(1) title標(biāo)簽

  • 能在瀏覽器窗口中所能看到的,title標(biāo)簽使用戶(hù)最看重的標(biāo)簽,是當(dāng)前頁(yè)面的主旨,應(yīng)該將網(wǎng)站的最核心內(nèi)容寫(xiě)到title中。
<title>我的第一個(gè)網(wǎng)頁(yè)</title>

?(2) meta標(biāo)簽

  • 用于定義頁(yè)面原信息
屬性 用法
http-equiv 指定原信息的名稱(chēng),該屬性指定的名稱(chēng)具有特殊意義,它可以向?yàn)g覽器傳回一些有用的信息,幫助瀏覽器正確地處理網(wǎng)頁(yè)內(nèi)容
content 指定元信息名稱(chēng),該名稱(chēng)值可以隨意指定
name 指定元信息的值
<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
<meta name = "author" content = "zqn"/> 
<meta name = "keywords" content="夢(mèng)想,加油"/>
<meta name = "description" content="為了夢(mèng)想成功要加油"/>

6、常見(jiàn)的塊級(jí)標(biāo)簽

  • 標(biāo)題標(biāo)簽(從h1到h6字體大小依次變?。?/h5>
<body>
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
</body>
  • 段落標(biāo)簽(這三個(gè)p標(biāo)簽分別會(huì)成三個(gè)段落顯示)
<body>
<h2>歌手曲目</h2>
    <p>第一首:岑寧兒 追光者</p>
    <p>第二首:jam 七月上</p>
    <p>第三首:何潔 你要幸福啊</p>
</body>
?呈現(xiàn)效果:


歌手曲目

第一首:岑寧兒 追光者
第二首:周柏豪 走狗
第三首:何潔 你要幸福啊


  • 水平線標(biāo)簽(有一條水平線,用于分割)
<hr/>
  • 有序列表標(biāo)簽
<h3>我喜歡吃的水果</h3>
    <ol>
        <li>橙子</li>
        <li>圣女果</li>
        <li>柚子</li>
    </ol>
?呈現(xiàn)效果:


我喜歡吃的水果

1.橙子
2.圣女果
3.柚子


  • 無(wú)序列表標(biāo)簽
<h3>我想去的地方</h3>
    <ul>
        <li>北京</li>
        <li>上海</li>
    </ul>
?呈現(xiàn)效果:


我想去的地方

  • 北京
  • 上海

  • 分區(qū)標(biāo)簽(有幾個(gè)div標(biāo)簽整體頁(yè)面就會(huì)被分為幾塊,對(duì)網(wǎng)頁(yè)進(jìn)行整體分塊布局)
<div>頭部?jī)?nèi)容</div>
<div>導(dǎo)航內(nèi)容</div>
<div>底部?jī)?nèi)容</div>

7、常見(jiàn)的行級(jí)標(biāo)簽(按行逐一顯示,前后不會(huì)自動(dòng)換行)

  • 文本格式化元素
標(biāo)簽 用法
<b> 定義粗體文本
<i> 定義斜體文本
< em > 定義強(qiáng)調(diào)文本,實(shí)際效果與斜體差不多
< strong > 定義粗體文本,與<b>的作用基本相同
< small > 定義小號(hào)文本
< sub > 定義下標(biāo)文本
< sup > 定義上標(biāo)文本
< bdo > 定義文本顯示方向,內(nèi)有dir屬性,只能取ltr或rtl
<ul>
    <li><b>水</b>:H<sub>2</sub>O</li>
    <li><i>氧氣</i>:O<sup>2</sup></li>
<ul>
?呈現(xiàn)效果:


  • :H2O
  • 氧氣:O2

  • 超鏈接標(biāo)簽
<a href="鏈接地址"  target="目標(biāo)窗口">鏈接文本或圖片</a>

常用屬性:

屬性 作用
href 指定超鏈接所關(guān)聯(lián)的另一個(gè)資源
target 指定框架集中的哪一個(gè)框架裝載另一個(gè)資源,該屬性可以是_self、_blank、_top、_parent四個(gè)值,分別代表自身、新窗口、頂層框架、父框架來(lái)裝載新資源 `
<a  target="_blank">百度網(wǎng)頁(yè)</a><br/>
/*這條語(yǔ)句就是點(diǎn)擊百度網(wǎng)頁(yè)就會(huì)在新的窗口打開(kāi)百度頁(yè)面*/
  • 圖像標(biāo)簽
<img src="圖片地址" alt="提示文字">
<p><a  target="_blank">
   <img src="lovely.jpg" alt="可愛(ài)的女生頭像"/></a></p>
  • span標(biāo)簽(div標(biāo)簽和p標(biāo)簽)
<span>文本等行級(jí)內(nèi)容</span>
  • 換行標(biāo)簽

< br/ >換行

  • 常用的特殊符號(hào)
空格 &nbsp
大于(>) &gt
小于(<) &lt
引號(hào)(“”) &quot
版權(quán)號(hào) &copy
最后編輯于
?著作權(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),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 歡迎進(jìn)入HTML的神奇世界 一、什么是HTML HTML的英文全稱(chēng)是Hypertext Marked Langua...
    Yumi__扶醉入香閨閱讀 8,131評(píng)論 9 146
  • WWWCSS 實(shí)例 親自試一試 什么是 HTML? HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。 HTML 指的是超文本標(biāo)...
    鹿守心畔光閱讀 250評(píng)論 0 0
  • Hypertext Marked Language(HTML),即超文本標(biāo)記語(yǔ)言,是為“網(wǎng)頁(yè)創(chuàng)建和其它可在網(wǎng)頁(yè)瀏覽...
    淺笑C閱讀 202評(píng)論 0 0
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,122評(píng)論 1 92
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類(lèi)型定義(D...
    米塔塔閱讀 3,526評(píng)論 1 41

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