静态网页的基本结构及标签
生活随笔
收集整理的這篇文章主要介紹了
静态网页的基本结构及标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
靜態網頁的基本結構及標簽
HTML概念
- 超文本標記語言HTML是生成WWW網頁文件的語言，用以生成超文本文檔。在文檔中，可以加入任何元素(文本、圖像、動畫、聲音等)的鏈接
- 使用瀏覽器瀏覽的網頁就是HTML文檔
- 通常是使用記事本作為HTML文檔的編輯器，利用瀏覽器瀏覽文檔內容
HTML發展史
網頁三兄弟
- HTML 負責整體框架以及內容
- JavaScript 負責數據驗證數據交互
- CSS 負責網頁的美化 特效 數據驗證
靜態網頁
-
靜態網頁稱為普通網頁 所謂的靜態網頁文件里面沒有程序代碼，只有HTML html htm shtml xml
-
靜態網頁 就是內容制作完成無法修改
-
靜態網頁的優點: 容易被搜索引擎檢測到 、訪問速度快 節省服務器資源 、頁面瀏覽速度快 不需要編譯
-
靜態網頁的缺點: 內容固定不變 交互性差
-
靜態網頁的工作原理
動態網頁
-
頁面中包括了程序代碼
-
動態網頁的工作原理
靜態網頁的基本結構
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>文檔標題</title></head><body>文檔的正文內容</body> </html>-
DOCTYPE 文檔聲明 告知瀏覽器HTML版本 必須放在最頂部 否則導致瀏覽器的怪異模式
-
怪異模式：瀏覽器使用自己的怪異模式解析渲染頁面
-
標準模式：瀏覽器使用W3C的標準解析渲染頁面
-
html 表示的是html文檔 可以把它理解為一張紙 或者一種文件的格式
-
head 文檔頭，加入：網頁標題、作者信息、版本信息、JavaScript、CSS 文檔頭不會出現在瀏覽器內容區 理解為一本書開頭的信息 不會出現在正文中
-
title就是當前網頁的題目
-
body 正文區 放置網頁中所顯示信息的標志和屬性
HTML標簽和格式
-
開始標簽和結束標簽為HTML的一個元素
-
空元素 并不是每一個元素都擁有開始標簽、內容、結束標簽。一些元素只有一個標簽 br/ 標簽
-
文件編譯為二進制 進入計算機執行 二進制也是通過解析顯示數據 當解析和編譯的字符集編碼不同的時候 就會出現亂碼
HTML常用標簽
-
元數據標簽 meta
-
布局標簽 div
-
文本標簽 p 、h1 - h6 、b、strong、em 、i、u、del、s、br、hr、span、cite
標簽效果 p 段落 結束后換行以及空一行 h1-h6 標題h1到h6字體加粗大小逐漸減小 b 加粗文本 實體標簽 strong 加粗文本 強調語氣更加語義化 邏輯標簽 i 斜體文本 em 斜體文本 強調語氣更加語義化 邏輯標簽 mark 文本顯示高亮 默認為黃色 br 換行標簽 是一個空標簽 s 刪除線 del 刪除線 強調語氣 更加語義化 邏輯標簽 u 文本的下劃線 hr 分割線 空標簽 span 讓span內的文字變為單獨的個體 加以修飾 cite 引用標簽 引用文獻等 顯示為斜體 blockquote 長文本引用，引用后效果文字自動的縮進 cite屬性是引用鏈接 對引用鏈接的網頁權重增加 code code標簽顯示的是單行代碼 pre pre標簽顯示的是多行代碼 保留空格和tap鍵
- 超鏈接 a
<body><div><!-- href屬性就是點擊超鏈接跳轉的網址 沒有定義就默認跳轉當前網址 相當于刷新target 屬性規定在何處打開鏈接文檔_blank 在新窗口中打開被鏈接的文檔_self 默認 在相同框架中打開被鏈接的文本_parent 在父框架集中打開被鏈接的文本_top 在整個窗口中打開被鏈接的文本framename 在指定框架中打開被鏈接的文本--><span>_blank</span><a href="http://www.baidu.com" target="_blank">baidu</a><br /><span>_parent</span><a href="http://www.baidu.com" target="_parent">baidu</a><br /><span>_self</span><a href="http://www.baidu.com" target="_self">baidu</a><br /><span>_top</span><a href="http://www.baidu.com" target="_top">baidu</a></div><div><a href="#p1">錨點跳轉</a><p id="p1">第一段</p></div><div><!-- file文件協議 --><!-- 瀏覽器安全限制,該協議無法在服務器上運行 只能在本地主機上運行 --><a href="file:///D:\前端學習\com.baidu\day\Demo.html" target="_blank">file文件協議 </a><br /><!-- a標簽支持mailto協議 Chrome需要設置,IE通過 --><a href="mailto:2775730556@qq.com">mailto協議</a><br /><!-- tel協議需要在手機端才能工作 --><a href="tel:123456789">call me</a><br /> </div></body>a用于定義超鏈接,從一個頁面鏈接到另一個頁面 錨點跳轉 href href屬性就是點擊超鏈接跳轉的地址 沒有定義就默認跳轉當前網址 相當于刷新 target target 屬性規定在何處打開鏈接文檔 _blank 在新窗口中打開被鏈接文檔 _self 默認 在相同框架下打開被鏈接的文檔 _parent 在父框架集中打開被鏈接的文檔 _top 在整個窗口中打開被鏈接的文檔 framename 在指定的框架中打開被鏈接文檔 name、value和id的區別
- id屬性:元素唯一的標識符 在同一個頁面中應該是唯一的 用來定位和搜索特定的頁面
- name/value屬性
- 表單元素的name屬性必須要設置 發送到服務器中對信息的描述
- name相當于變量 接收value中的值
file協議和http協議的區別
-
file協議用于訪問本地計算機中的文件,它是針對本地的,它只是簡單的請求了本地文件，將其作為一個服務器未解析的靜態文件打開，不可進行跨域操作。
-
http訪問本地html文件，相當于將本機作為一個http服務器,然后通過localhost(客戶端 瀏覽器)訪問本地服務器，然后通過本地http服務器去訪問本機(服務器)文本資源。本地搭建http端口后,別人也可以通過http訪問自身主機的文件
-
file協議相當于自己訪問自己的東西 無需解析 http相當于別人訪問自己的資源 需要先解析請求 才能響應 通過安全考慮別人訪問服務器的資源一律通過http協議 負責不予訪問
-
圖像標簽
<div><img src="https://www.baidu.com/img/540x258_2179d1243e6c5320a8dcbecd834a025d.png"width="200px" height="200px"alt="素材.png" title="素材.png"/><!-- 文件協議不能直接運行到服務器上面的 --><img src="file:///?C:\Users\yangj\Pictures\聯想鎖屏壁紙\素材.jpg" width="200px" height="200px"alt="素材.jpg"/><!-- 把本地計算機的照片顯示在網頁上 --><img src="../照片/素材.jpg"width="200px" height="200px"alt="素材.png" title="你好.png"/><a href="/">點擊</a></div>img圖片的鏈接 width 寬度：默認為auto height 高度：默認為auto alt 當圖片不能正常顯示的信息 title 就是鼠標放在圖片上顯示的信息 src 指定圖片的地址 網絡地址 本機地址 絕對路徑和相對路徑
- 絕對路徑指的是完整的網址
- 優點：直觀明了、有利于搜索引擎搜索 缺點：不容易移植 外鏈都是用絕對路徑
- 相對路徑是指目標相對于當前文件的路徑
- 優點：便于移植 缺點：每次都要計算相對位置； 開發中建議使用相對路徑
- ./：代表當前文件的目錄 (可以省略不寫)
- …/：代表當前文件的父級目錄
- …/…/：代表當前文件的父級目錄的父級目錄
- /：代表項目的根目錄，無論哪個層次都可以使用/單斜杠直接訪問根目錄
路徑分割符
-
Unix/Linux：/ 作為路徑分割符
-
Windows： \ 作為路徑分割符 \ 和 / 大多數情況下是可以互換的
-
DOS命令： / 作為路徑分割符
-
瀏覽器地址欄：網址一般用 /
-
Windows的文件瀏覽器使用 \
-
在html中，如果路徑是網絡路徑,必須用 / 表示 。普通文件的路徑，如果是windows文件路徑 則 / 和 \ 效果一樣
-
序列號標簽 ul、ol、li 可以用來作為站點導航
<div><!-- 有序列表 --><ol><li>JAVA</li><li>Python</li><li>C#</li></ol><!-- 無序列表 --><ul><li>JAVA</li><li>Python</li><li>C#</li></ul><!-- 自定義列表 --><dl><dt>JAVA</dt><dd>Java是一門面向對象編程語言，不僅吸收了C++語言的各種優點，還摒棄了C++里難以理解的多繼承、指針等概念，因此Java語言具有功能強大和簡單易用兩個特征。</dd><dt>Python</dt><dd>Python解釋器易于擴展，可以使用C或C++（或者其他可以通過C調用的語言）擴展新的功能和數據類型。</dd><dt>C++</dt><dd>C++是C語言的繼承，它既可以進行C語言的過程化程序設計，又可以進行以抽象數據類型為特點的基于對象的程序設計，還可以進行以繼承和多態為特點的面向對象的程序設計。C++擅長面向對象程序設計的同時，還可以進行基于過程的程序設計</dd></dl></div>ol有序列表 ul 無序列表 li 列表項 dl 自定義列表 dt 自定義列表項 dd 對自定義列表項的描述 - 表格標簽 table tr th td
<div><table border="10" cellspacing="0px" cellpadding="10px"><thead><tr><th>學號</th><th>姓名</th><th colspan="2">電話號碼</th></tr></thead><tbody><tr><td>18060212120</td><td>肖一凡</td><td>123456</td><td>123456</td></tr><tr><td>18060212121</td><td>楊靖</td><td colspan="2">13109237846</td></tr></tbody><tfoot><tr></tr></tfoot></table></div>table用來創建表格 border 邊框的寬度 cellspacing 表格單元格直接的間隙 cellpadding 表格單元格的內邊距 就是文字與邊框直接的距離 tr 表示表格的一行 th 表示表頭 td 表格的內容 colspan 合并列單元格 rowspan 合并行單元格 thead 分割作用 下載可以先下載表頭 表頭會出現到頁面上 tbody 分割作用 一段一段下載 防止頁面出現長時間空白 tfoot 分割作用 頁腳 - 表單 form
<div><form action="http://www.baidu.com" method="get" id="myform"><!-- 文本域 -->用戶名: <input type="text" name="username" placeholder="用戶名"/><br />密碼:<input type="password" name="password" placeholder="密碼" /><br />性別:<input type="radio" name="sex" value="0" id="r1" checked="checked"/> <label for="r1">男</label><input type="radio" name="sex" value="1" id="r2"/> <label for="r2">女</label><br />擅長的語言:<input type="checkbox" name="like" id="java" value="0" /><label for="java">JAVA</label><input type="checkbox" name="like" id="c++" value="1"/><label for="c++">C++</label><input type="checkbox" name="like" id="python" value="2"/><label for="python">Python</label><br />自我介紹： <textarea rows="10" cols="8"></textarea><br />省份:<select name="province"><option value="0">陜西</option><option value="1" selected="selected">北京</option><option value="2">上海</option><option value="3">廣州</option></select><br />頭像:<input type="file" name="file" /><br />按鈕：<input type="button" value="提交" onclick="document.getElementById('myform').submit()" /><input type="submit" value="提交2" /><input type="reset" value="重置" /><!-- type中的image也有提交的作用 --><input type="image" src="../照片/素材.jpg" width="80px" height="80px" /><br /><!-- 隱藏域主要是不想被用戶編輯的內容 --><input type="hidden" name="token" value="123456" /></form></div>form創建表單 action 提交數據的服務器地址或網址 method 表單提交方式(get/post) target 在何處打開actionURL input 用于搜集用戶信息 type 就是用戶輸入信息的方式 placeholder 水印 label 會根據for屬性的id找到對應標簽 checked 默認選項 單選框 value 服務器接收到value的值 也可以給按鈕賦予名字 textarea 文本域 select 顯示一個下拉列表 option 定義下拉列表中的一個選項 selected 下拉列表的默認選項 get/post區別
- get 從服務器獲取數據 post 向服務器發送數據
- get 會把表單的數據按照 xxx=value 顯示到地址欄
- post 在http表頭中傳輸數據
- get 安全性不高
-
搜索引擎的工作原理
- 加入搜索引擎的索引 ：網絡的網址會被搜索引擎收錄
- 網絡爬蟲會根據索引進入網頁把內容抓取到搜索引擎中做分析
- 用戶在搜索的時候包含頁面里面的關鍵字keywords 關鍵內容description 會加入到搜索引擎中
- 其中關鍵字keywords 關鍵內容description 對用戶搜索占有很高的權重
瀏覽器內核
-
渲染引擎-
-
內核就是解析源代碼
瀏覽器四大內核
-
Trident ：IE內核 IE瀏覽器 360瀏覽器 傲游 世紀之窗 UC 搜狗 海豚
-
Gecko ：Firefox內核 開源內核
-
webkit ：Safari內核 Chrome內核原型 開源
-
Blink ：Google + Opera webkit的一個分支 Chrome Opera 360瀏覽器 Edge
-
Presto (廢棄) ：Opera之前的內核
雙核瀏覽器
- 傲游 (IE+webkit)
- UC (IE+webkit)
- Edge(IE+Blink)
-
HTML框架
-
HTML框架用于在瀏覽器窗口顯示多個頁面
<frameset cols="50%,50%"><frame src="Demo.html" /><frame src="Demo4.html" /></frameset>frameset框架標記：用來宣告HTML為框架模式；cols和rows分配每個frame的比例 不能在body標簽中 frame 只是設定某個框架內的參數屬性，用來指定一個html頁面 src 框架文檔的URL name 框架的名稱 noresize 是否可以調整大小 scrolling 是否顯示滾動條 -
內聯框架用于在網頁內顯示網頁
<body><p><a href="http://www.baidu.com" target="myframe">baidu</a><a href="http://www.bing.com" target="myframe">Bing </a></p><iframe src="http://www.163.com " width="80%" height="600px" name="myframe" ></iframe><div style="left:60%;top:75%;position: fixed;"><iframe src="http://www.baidu.com " width="80%" height="600px" ></iframe></div></body>iframe內聯框架 可以和body標簽同時使用 frameborder 指定框架邊框 name 指定框架名稱 src 指定框架集合的URL width 指定框架的寬度 height 指定框架的高度
HTML實體
<div><!-- 瀏覽器支持實體編號 但實體名稱更加容易記憶 --><p> hello</p><p> hello </p><a> 這是一個鏈接標簽 <br /><a> 這是一個鏈接標簽<br />a≤b © ®</div>HTML5是什么？
-
HTML、XHTML、以及HTML DOM的新標準
-
主要的目標是將互聯網語義化
-
新增語法特性:
- 語義特征
- 本地存儲特征
- 網頁多媒體特征
- 智能表單
- 地理定位
- 多線程
-
優點:
- 提高可用性和改進用戶友好體驗
- 新的標簽，有利于開發人員定義新的內容
- 可以給站點帶來更多的多媒體元素(視頻和音頻)
- 可以很好的替代FLASH和Silverlight
- 對于SEO很友好
- 被大量應用于移動應用程序和游戲
-
缺點:
- 瀏覽器兼容性 部分瀏覽器不兼容HTML5
- 安全問題
- 完善性 部分瀏覽器不支持HTML5的一些標簽
- 技術門檻
-
HTML語義化
- 機器在需要更少的人類干預情況下能夠研究和搜集信息,讓網頁能夠被機器理解
- 使用最恰當的HTML標簽標記的內容
- 機器人是識別語義化標簽 理解內容 表現網絡的結構
-
為什么要語義化?
- 即使在沒有CSS樣式的條件下，也能更好的呈現出內容結構 、代碼結構
- 語義化HTML會使HTML結構變得更加清晰，有利于維護代碼和添加樣式
- 提升網頁的可訪問性和交互操作性(無障礙訪問)
- 提升搜索引擎優化(SEO)的效果
- 使代碼變得更少，頁面加載更快
- 就是為了讓機器更好的識別文本的關鍵信息，增加權重
-
HTML常見語義標簽
- title ：判斷頁面主要內容的指標 應該包含幾個與頁面內容密切相關的關鍵字
- h1-h6：判斷頁面的主要內容的指標
- p：段落 ；
- a：超鏈接、支持多種協議
- img：alt屬性 用于描述圖片的信息
- ul、ol、li：無序列表和有序列表
- strong、em、mark：表示強調
- cite：引用標簽 引用作者或者名人名言以及文獻 引用后為斜體
- blockquote：長文本引用 引用后自動縮進 其cite屬性是引用鏈接 對引用鏈接的網頁權重增加
- code：單行代碼
- pre：多行代碼 顯示的時候會保留空格和Tap鍵
- kbd：鍵盤的語義化操作
- time：顯示的時候沒有任何區別 搜索引擎會識別這是一個時間段
- address：頁面中是斜體的內容 顯示作者的一些信息
- progress：進度條標簽
-
HTML5新增主題結構標簽
<div><header><hgroup><h1>頁眉主標題</h1><h2>頁眉副標題</h2></hgroup></header><nav><ul><li><a href="http://www.baidu.com">百度</a></li></ul></nav><article><header><hgroup><h1>這是一篇介紹HTML5結構標簽的文章</h1><h2>HTML5的革新</h2></hgroup><time datetime="2021-6-9">2021.06.09</time></header><p>文章內容詳情</p></article><aside><section><h4>隨筆分類</h4><ul><li><a href="#">Java筆記</a></li><li><a href="#">Python筆記</a></li><li><a href="#">C++筆記</a></li></ul></section></aside><footer>版權信息:© yangjing</footer></div>header定義文檔或者文檔部分區域的頁眉，應作為介紹內容或者導航連接欄的容器 hgroup 對標題標簽進行組合 nav 描述一個含有多個超鏈接區域.該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表 網站導航 main 定義文檔的主要內容,該內容在文檔中獨一無二 article 該元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可重用的結構 主要是內容獨立 aside 該元素表示一個和其余頁面內容幾乎無關的部分 不會影響頁面中的其他內容 footer 定義最近一個章節內容或者根節點元素頁腳 section 表示文檔中的一個區域(或章節) section和article的區別
-
article比section更加具有獨立性和完整性
-
article 可以當做一篇文章的一個報道、一個帖子、一段評論其他任何獨立的內容 一般具有自己的標題、中心思想
-
article看做是一個特殊的section，比secion更加具有明確的語義
HTML5 智能表單-新增input類型
-
| 郵箱 可以智能驗證郵箱格式是否正確 | |
| url | 網址 也可以智能驗證格式 |
| number | 數字 可以設置最大值和最小值 |
| range | 范圍 |
| datetime-local | 時間選項框 |
| search | 智能文本框 |
| color | 顏色選擇框 |
HTML5 新增表單屬性
<form action="" method="post" autocomplete="on" id="myform">Age:<input type="text" name="age" id="age" pattern="^[0-9]{1,2}$" /><br /><input type="submit" value="提交" /></form>| autocomplete | 屬性規定輸入字段是否應該啟用自動完成功能。瀏覽器基于輸入過的值出現在選項中 |
| novalidate | 提交的時候不會進行數據驗證 |
| autofocus | 打開頁面時焦點自動對應到設置這個屬性的輸入框 |
| multiple | 在文件選擇框中設置該屬性可以選擇多個文件 |
| pattern | 可以輸入正則表達式 根據你輸入的值進行驗證 |
HTML5 新增表單元素
<form action="http://www.baidi.com" method="post" ouinput="sum.value=parseInt(a.vlaue)+parseInt(b.vlaue)">0操作系統:<input type="text" name="OS" list="OSlist"/><datalist id="OSlist"><option value="Linux">Linux</option><option value="Windows">Windows</option><option value="MacOS">MacOS</option></datalist><br />數字A<input type="number" name="numbers1" id="a" value="50" /> +數字B<input type="number" name="numbers2" id="b" value="50" /> =<output name="sum" for="a b">100</output></form>| datalist | 定義一個表單 |
| output | 用于輸出 |
datalist和select的區別
- 對于select來說，select的下拉菜單是通過用戶選擇的，用戶只能選擇其中的選項不能自己添加
- datalist不僅可以提供用戶選擇，用戶還可以自己輸入
- datalist還可以達到模糊匹配的效果，用戶體驗感很好
其他標簽
<audio src="" autoplay="autoplay" controls="controls" loop="loop" preload="auto">當前瀏覽器不支持audio</audio><video width="800" controls="controls"><source src="" type="video/3gpp"></source>當前瀏覽器不支持video</video>| audio | 音頻播放 只支持ogg、mp3m、wav格式 |
| autoplay | 自動播放 |
| controls | 控制按鈕 |
| loop | 循環播放 |
| preload | 頁面加載后播放 也就是緩沖一段后自動播放 |
| video | 視頻播放標簽 |
| source | 播放的子標簽 按子標簽的順序播放 |
以提供用戶選擇，用戶還可以自己輸入
- datalist還可以達到模糊匹配的效果，用戶體驗感很好
其他標簽
<audio src="" autoplay="autoplay" controls="controls" loop="loop" preload="auto">當前瀏覽器不支持audio</audio><video width="800" controls="controls"><source src="" type="video/3gpp"></source>當前瀏覽器不支持video</video>| audio | 音頻播放 只支持ogg、mp3m、wav格式 |
| autoplay | 自動播放 |
| controls | 控制按鈕 |
| loop | 循環播放 |
| preload | 頁面加載后播放 也就是緩沖一段后自動播放 |
| video | 視頻播放標簽 |
| source | 播放的子標簽 按子標簽的順序播放 |
總結
以上是生活随笔為你收集整理的静态网页的基本结构及标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 六大炒股不败绝招！
- 下一篇： 找一找mini usb 的AD封装