HTML文檔結構

時間  2020-01-18
標籤 html 文檔 結構 欄目 HTML 简体版
原文   原文鏈接

1.基本結構：javascript

<html> //文件開始標誌，表示網頁文檔的開始
<head> //文件頭，標題，主題
............ //文件頭內容
<meta charset="utf-8"> //網頁的編碼
</head> //文件頭結束標記
<body> //文件主體開始標誌
............. //文件主體內容
</body> //文件主體結束
</html> //文件結束標誌
<!-- --> //註釋css

2.HTML標題標籤html

（1）<h1>,<h2>,<h3>,<h4>,<h5>,<h6>java

<body>
<h1>我的主頁</h1> //字體由大到小，帶有間距
<h2>登陸</h2>
<h3>登陸</h3>
<h4>登陸</h4>
<h5>登陸</h5>
<h6>登陸</h6>
</body>瀏覽器

（2）<p></p>ide

<body>
<h1>html基本結構</h1>
<p>
       超文本標記語言，標準通用標記語言下的一個應用。
<br />「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
<br />超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。佈局

// <br />：換行
</p>字體

<p>10>5</p>  //大於小於，段落間有間距

<p>10 > 5</p>
<p>10<5</p>

</body>網站

<p>標籤訂義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開ui

3.語義標籤

（1）<div>標籤 塊元素，表示一塊內容，沒有具體的語義。

<div>
       超文本標記語言，標準通用標記語言下的一個應用。
<br />「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
<br />超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容
</div>

<div>
       <div>
    <h1>div標籤</h1>
    </div>
    <div>超文本標記語言</div>
</div>

//<div>表示塊，塊與塊之間沒有間距，能夠嵌套，而<p>不能夠嵌套，

（2）<span>標籤 行內元素，表示一行的一小段內容，沒有具體的語義。

4.圖片標籤

<p>
       <span>超文本標記語言，標準通用標記語言下的一個應用。</span>

// <span> ：能在<p>裏的某一段設置一個樣式，自己不帶有樣式
</p>

（3）含樣式和語義的標籤

<em>標籤行內元素，表示語氣中的強調詞，斜體
<i> 行內元素，表示專業詞彙，斜體
<b>行內元素，表示加粗，關鍵詞
<strong>行內元素，表示很是重要的內容，總體加粗

<p>
       <span><b>超文本標記語言，標準通用標記語言下的一個應用。</b></span>
<br /><strong>「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
<br />超文本標記語言的結構包括「頭」部分（英語：<em>Head</em>）、和「主體」部分（英語：<i>Body</i>），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容</strong>
</p>

**（4）語義化的標籤**

就是佈局的時候多使用有語義的標籤，搜索引擎在爬網的時候能認識這些標籤，如：h1表示標題，p表示段落，ul,li表示列表，a表示連接，dl,dt,dd表示定義列表

（5）圖片標籤

src屬性定義圖片的引用地址
alt屬性定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會使用

<img src="image/路飛1.jpg" alt="我要成爲海賊王的男人" />
<img src="image/biu.gif" alt="鄧紫棋.gif" />
<img src="C:\Users\雄少\Pictures\ps\新建文件夾\like.gif" alt="比個like你" />

//相對路徑： ./表示當前目錄，能夠省略 ../表示上一級目錄
//絕對路徑：最好用相對路徑，在別的地方也能夠用

5.HTML連接標籤

（1）<a>標籤能夠在網頁上定義一個連接地址，它的經常使用屬性有

href屬性 定義跳轉的地址

title屬性 定義鼠標懸停時彈出的提示文字框

target屬性 定義連接窗口打開的位置，target=「_self"缺省值，新頁面替換原來的頁面，在原來位置打開，target="_blank"新頁面會在新開的一個瀏覽器窗口打開

<img src="image/路飛1.jpg" alt="我要成爲海賊王的男人" />

<img src="image/biu.gif" alt="鄧紫棋.gif" />

<img src="C:\Users\雄少\Pictures\ps\新建文件夾\like.gif" alt="比個like你" />

<a href="link.html" target="_self">主頁</a> -

<a href="https://www.ishuhui.com/comics/anime/1" title="鼠繪網站" target="_blank">
    <img src="image/海賊王.jpg" alt="海賊王logo">
</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#">回到頂部</a>

**6.HTML列表**

（1）有序列表：<ol>
<li></li>
</ol>
//快捷寫法：ol>li*3

（2）無序列表：<ul>
<li></li>
</ul>
//快捷寫法：ul>(li>a)*3

<h1>有序列表</h1>

<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>

<ul>
    <li><a href="http://sports.qq.com/nba/" target="_blank">騰訊NBA</a></li>
    <li><a href="https://v.qq.com/" target="_blank">騰訊視頻</a></li>
    <li><a href="https://movie.douban.com/" target="_blank">豆瓣電影</a></li>
</ul>

（3）定義列表：一般用於術語的定義。<dl>表示列表的總體，<dt>表示術語的題目，<dd>表示術語的解釋，一個dl能夠有多高題目和解釋

<dl>
<dt>html</dt>
<dd>負責頁面結構</dd> //首行縮進
<dt>css</dt>
<dd>負責頁面表現</dd>
<dt>javascript</dt>
<dd>負責頁面行爲</dd>
</dl>

*//簡寫：dl>(dt+dd)3**

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程