亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 3
粉絲 0
評論 0
訪問量 6184
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
html 網(wǎng)頁的組成及元素、標簽、屬性、值、URL 文本字符的語法和使用
辛迪
原創(chuàng)
3071人瀏覽過

1. html 是超文本標記語言。

  • 超文本——含有超鏈接的文本。
  • 預定義標記——用來描述內(nèi)容的固定標簽，html 文檔中的一切,都是基于標簽實現(xiàn)的（還有一種為自定義標記）。
  • 語言——html 并不是編程語言,是用標簽來標記的標記語言，只是書寫 html 文檔的工具。

2. html 頁面由文本內(nèi)容、標記、其它文件的引用這三部分組成, 并采用純文本進行描述。

  • 文本內(nèi)容——用戶看到的網(wǎng)頁文本,例如新聞、電話等。
  • 標記——對文本以及引用文件的正確描述。
  • 其它文件的引用——如圖片、視頻、音頻、CSS 樣式表、JS 腳本等。
  1. <p>php中文網(wǎng)</p>
  2. <!-- <p>為標記，“php中文網(wǎng)”為文本內(nèi)容 -->
  3. <img src="logo.jpg" alt="log" />
  4. <!-- logo.jpg為文件的引用 -->
  5. <!-- 一般其它資源的引用為單標簽，是通過屬性指示出來的 -->
  6. <!-- `<p>`為不可置換元素，`<img>`為可置換元素 -->

任何能編寫純文本的編輯器都可以用來創(chuàng)建 HTML 頁面，現(xiàn)在主流 HTML 版本是 5.0。

3. 基本的 html 網(wǎng)頁的標簽及頁面結(jié)構

html 頁面中看到的所有內(nèi)容都稱為元素，元素是由標簽來進行描述的。

  • 標簽——標簽是用來識別元素的。
代碼 解析
<!DOCTYPE html> 通知瀏覽器這是一個 HTML5 文檔，應始終寫在第一行
<html>…</html> 根標簽,或叫根元素，整個 hmtl 文檔內(nèi)容都必須寫到這對標簽中
<html lang="en"> 通知搜索引擎 html 文檔使用的編寫語言，如果是中文建議改成`<html lang="zh-CN">
<head>…</head> 供瀏覽器和搜索引擎使用，描述字符編碼集、視口與頁面標題
<meta> 設置頁面元素數(shù)據(jù), 所謂元數(shù)據(jù), 就是描述某種特定信息的數(shù)據(jù)
<meta charset="UTF-8"> 通知瀏覽器 html 文檔編寫語言所屬的字符編碼集,最流行的是 UTF-8 ,已成行業(yè)標準
<title>…</title> 顯示在瀏覽器標簽上的文本, 指定當前頁面的標題, 這個標簽對 SEO 非常重要
<body>…</body> 頁面主體內(nèi)容，允許或希望用戶的內(nèi)容都應該寫到這里
<!--注釋內(nèi)容--> 注釋用來描述標簽功能或用途，它的內(nèi)容不出現(xiàn)在顯示的網(wǎng)頁中, 只會出現(xiàn)在 html 源代碼中
<h2>…</h2> 瀏覽器渲染這個 html 文檔時，最終只會呈現(xiàn)這個標題的內(nèi)容與效果,并不顯示標簽<h2>
  • 結(jié)構源碼
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- name="viewport" 設置視口(即可視區(qū)屏幕) -->
  7.     <!-- width=device-width 頁面寬度應該與顯示設備的寬度相匹配，類似還有 device-height 表示設備的屏幕高度 -->
  8.     <!-- initial-scale=1.0 設置頁面初始綻放比例，1.0 表示原樣 1:1 顯示,不允許有任何綻放 -->
  9.     <title>HTML5頁面結(jié)構</title>
  10.   </head>
  12.   <body>
  13.     <!-- 頁面主體內(nèi)容 -->
  14.     <h2>PHP中文網(wǎng)歡迎您...</h2>
  15.   </body>
  16. </html>

4. html 的元素、屬性和值及之間的關系

  • 元素
元素 標簽 語法 描述
空元素 單標簽 <img src="..." alt=""> <標簽>
非空元素 雙標簽 <p>…</p> <起始標簽>元素內(nèi)容</結(jié)束標簽>

非空元素是有內(nèi)容的，如：<p>文本內(nèi)容<p>
空元素也有使用雙標簽描述的，如：<script>|<video>|<br>…，不是沒有內(nèi)容，內(nèi)容來自外部引用或文件，如：<img src=”1.jpg alt=””>

  • 屬性:是用來對元素進一步描述的文本，屬性必須寫到元素的 “起始標簽” 中，由屬性和值二部分組成。
語法 屬性名=”屬性值”
案例 <input type="password" maxlength="20" placeholder="至少8個字符" required>

屬性使用小寫字母，屬性的值加上雙引號

  • 值
值類型 描述
字符串 <p class="active">…</p>
預定義值 <input type="text">
指定格式 <a >…</a>
數(shù)值 <table width="200">…</table>
布爾值 <input type="email" required>

布爾屬性的值是可選的, 只要元素中出現(xiàn)該屬性,表示它取真值，不需要就不要寫，不寫默認取假值。

  • 元素、屬性和值之間的關系
    實例：
    <a href="http://ipnx.cn/">php中文網(wǎng)</a>為元素
    <a></a>為標簽
    href="http://ipnx.cn/"為屬性
    href 為變量名，http://ipnx.cn/為變量值

元素、屬性和值之間的關系

  • 三大通用屬性
屬性名 描述 舉例
id 元素的唯一標識 <div id="wrap">…</div>
class 給元素添加類樣式 <div class="box">…</div>
style 設置當前元素樣式 <div style="...">…</div>

id、class、style 三大屬性幾乎可以添加到任何元素上
id 在當前頁面中只能標注一個元素，應該具有唯一性，唯一性由程序員自己保證，瀏覽器不檢查。

實例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .aaa {
  9.         background-color: brown;
  10.         /* 定義aaa */
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h2 style="color: aqua;font-size: 36px;" class="aaa" ;>文本內(nèi)容</h2>
  16.     <!-- color: aqua為預定義值，不能隨便寫；font-size: 36px為數(shù)值；aaa為自定義的字符串，在<head>中<style>定義 -->
  17.     <a href="http://ipnx.cn/">php中文網(wǎng)</a>
  18.     <!-- http://ipnx.cn/為指定格式 -->
  19.     <form action="">
  20.       <label for="">郵箱</label>
  21.       <input type="email" placeholder="email" id="my-email" required />
  22.       <!-- required是布爾值,my-email為id屬性（唯一性） -->
  23.       <button>提交</button>
  24.     </form>
  25.   </body>
  26. </html>

實例效果：

" class="reference-link">實例效果

5. html 中元素之間的層級關系

元素中允許包含另一個元素，被包含的元素叫做子元素, 子元素又可以繼承包含其它元素，依此類推。
元素層級結(jié)構中, 必須保持正確的嵌套關系。

實例：

  1. <!DOCTYPE html>
  2. <!-- 通知瀏覽器，這是一個html5文檔 -->
  3. <!-- html為根標簽/根元素，是一個雙標簽，說明里面有內(nèi)容 -->
  4. <html lang="en">
  5.   <!-- 當前文檔使用的編輯語言為英文，中文：lang="zh-CH" -->
  6.   <head>
  7.     <!-- head中的內(nèi)容不需要用戶看到，是給瀏覽器/開發(fā)者看的，主要是設置網(wǎng)站的元數(shù)據(jù)（元數(shù)據(jù)是描述某種特定信息的數(shù)據(jù)，是用來解釋數(shù)據(jù)的數(shù)據(jù)） -->
  8.     <meta charset="UTF-8" />
  9.     <!-- 當前字符集是“UTF-8” -->
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.     <!-- viewport：視口/可視區(qū)屏幕，
  12.     width=device-width：當前頁面的寬度為設備的寬度，initial-scale=1.0：頁面1:1顯示（不允許縮放） -->
  13.     <title>元素的標簽,屬性和值,正確的嵌套關系</title>
  14.   </head>
  16.   <body>
  17.     <!-- 元素之間應該保持正確的嵌套 -->
  18.     <form action="">
  19.       <div>
  20.         <label for="email">郵箱:</label>
  21.         <!-- 元素值: 預定義值, 指定值, 布爾值,數(shù)值 -->
  22.         <input type="email" name="email" id="email" maxlength="100" required />
  23.       </div>
  24.       <div>
  25.         <label for="password">密碼:</label>
  26.         <input
  27.           type="password"
  28.           name="password"
  29.           id="papassword"
  30.           placeholder="至少8位"
  31.           required
  32.         />
  33.       </div>
  34.       <div>
  35.         <button>提交</button>
  36.       </div>
  37.     </form>
  38.   </body>
  39. </html>

實例效果：

" class="reference-link">

6. html 網(wǎng)頁中的文本字符

  • 空格
    多個空格、制表符、回車符、換行符、都會被壓縮為一個空格

  • 具有特殊意義的字符
    <、>、& 等字符具有特殊意義、需要轉(zhuǎn)義后才允許添加到 html 文檔

  • 轉(zhuǎn)義字符
    語法：& + 字符實體名稱 + ;， 如“<”使用“<”表示

    Unicode極大的緩解了特殊字符的問題，推薦將文檔編碼設置為 utf-8，如：<head> <mata charset="UTF-8"> </head>

    常用轉(zhuǎn)義字符表

字符 描述 轉(zhuǎn)義字符 實體編號
' ' 空格 &nbsp; &#160;
< 小于 &lt; &#60;
> 大于 &gt; &#62;
& &符號 &amp; &#38;
? 版權 &copy; &#169;
× 乘號 &times; &#215;
÷ 除號 &divide; &#247;

7. 文件與文件夾名稱

格式 實例
全部使用小寫字母 chapter1/demo1.html
采用合適的擴展名: .html（不要用“.htm”）
用連接線“-”分隔多個單詞 my-note（不用下劃線“_”）

html 中設置的名稱一般規(guī)范用中劃線“-”（css 中用中劃線），如：my-email；變量名用下劃線“_”（提交到 php 的），變量名一般不加連接線。

8. html 中 URL 的使用

  • URL 語法及其描述

    URL 是統(tǒng)一資源定位符, 互聯(lián)網(wǎng)上任何一個文件都有一個唯一的 URL，語法: http://模式/主機名/路徑/文件名 。

名稱 描述 實例
模式 也稱”協(xié)議”,瀏覽器如何訪問這個文件 http,https,ftp,mailto…
主機名 使用”域名”或”IP”表示 http://ipnx.cn/,或者 http://127.0.0.1/
路徑 使用一個或多個正斜線分割的字符串 public/admin
文件名 最后一個路徑后面的,帶有擴展名的文檔 ablut.html

如果 URL 是以路徑分隔符“/”結(jié)尾, 則啟用默認文件名，如：index.html.
web 訪問默認端口 80 ，如：http://ipnx.cn/
ftp（文件的上傳下載）默認端口 21，如：ftp://123.45.6.5:21/ddd/sss
email 訪問默認端口 25

  • URL 的分類及各類型的使用場景
    URL 有絕對與相對兩種類型，絕對 URL 被引用目標與當前位置無關；相對 URL 是以包含 URL 本身的文件位置為參考點,描述目標文件的位置。
URL 使用場景 舉例
絕對 被引用目標與當前位置無關 http://php.cn/courses/123.html
絕對 引用其它服務器上的文件 https://www.php.net/manual/zh/
相對 引用同一目錄下文件 直接寫文件名,如：demo2.html
相對 引用子目錄下文件 目標文件前帶上子目錄名,使用目錄分隔符/連接,如：chapter2/demo2.html
相對 引用上層目錄的文件 文件名前添加二個點,同樣使用目錄分隔符/連接,允許逐級向上查詢,如：../../demo2.html
相對 根路徑 “/” 為防止過多層級的向上遞歸查詢,可以從當前服務器根目錄開始查詢,如：/admin/books/chapter2/

訪問同一個網(wǎng)站的文件，應該始終堅持使用相對 URL 地址.

9. html 標簽語義化的優(yōu)勢

  • 更直觀：對于一篇文章<article>標簽，顯然要比使用<div class="article">更直觀。
  • SEO 優(yōu)化：讓搜索引擎更加喜歡你的網(wǎng)頁，有利于 SEO, 得升關鍵詞優(yōu)化與排名
  • 代碼更少：提高加載速度,也方便代碼維護與樣式控制
  • 無障礙支持：例如視力受損使用的屏幕閱讀器, 語義化就非常重要了

10. html 元素的默認樣式

同樣的內(nèi)容，添加不同的標簽，在不同的瀏覽器中可能呈現(xiàn)出不同的顯示效果。原因是瀏覽器為這些元素預定了一張樣式表,即每個元素都有默認樣式，這些元素在不同瀏覽器的表現(xiàn)并不完全相同，所以,我們需要使用自定義的樣式表來重置元素的樣式,讓它們在所有瀏覽器中看上去是完全一樣的。

用戶自定義的樣式規(guī)則, 優(yōu)先級要高于默認樣式。

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：手寫沒做, 下次注意
本博文版權歸博主所有，轉(zhuǎn)載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學