一步:事先把要調用的信息(醫(yī)院的信息,療法,活動介紹,廣告圖片,商務通等一些信息) 做成html源碼形式的,如下圖:
第二步:打開站長工里面的HTML/JS轉換工具http://0x9.me/hOEzN 把事先弄好源碼放到上面的表單里面,然后這兒工具自動換成要JS代碼。如圖:
第三步: 把生成好的JS代碼復制到TXT文檔里面,然后把TXT格式改成JS就生成可JS源文件了,然后把做好的JS源文件通過FTP工具上傳到網站的服務器空間上去,如圖:
第四步:把剛剛上傳的JS源文件路徑復制下來,我們調用這JS就行了,JS代碼如下:
<script type="text/javascript" src="調用的JS源文件路徑" content="text/html; charset=gb2312" ></script>
于安全和隱私的原因,web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件,可以通過使用input file和FileReader來實現。在這篇文章中,我們將通過一些例子來看看它是如何工作的。
由于瀏覽器中的 JS 無法從用戶的設備訪問本地文件,我們需要為用戶提供一種方法來選擇一個或多個文件供我們使用。這可以通過文件選擇器<input type='fule' />來完成。
<input type="file" id="fileInput">
如果想允選擇多個文件,可以添加multiple屬性:
<input type="file" id="fileInput" multiple>
我們可以通過change事件來監(jiān)聽文件的選擇,也可以添加另一個 UI 元素讓用戶顯式地開始對所選文件的處理。
input file 具有一個files屬性,該屬性是File對象的列表(可能有多個選擇的文件)。
File對象如下所示:
讀取文件,主要使用的是[FileReader][1]類。
「該對象擁有的屬性:」
「FileReader.error」 :只讀,一個DOMException,表示在讀取文件時發(fā)生的錯誤 。
「FileReader.readyState」:只讀 表示 FileReader 狀態(tài)的數字。取值如下:
常量名值描述EMPTY0還沒有加載任何數據LOADING1數據正在被加載DONE2已完成全部的讀取請求
「FileReader.result」:只讀,文件的內容。該屬性僅在讀取操作完成后才有效,數據的格式取決于使用哪個方法來啟動讀取操作。
「該對象擁有的方法:」
readAsText(file, encoding):以純文本形式讀取文件,讀取到的文本保存在result屬性中。第二個參數代表編碼格式。
readAsDataUrl(file):讀取文件并且將文件以數據URI的形式保存在result屬性中。
readAsBinaryString(file):讀取文件并且把文件以字符串保存在result屬性中。
readAsArrayBuffer(file):讀取文件并且將一個包含文件內容的ArrayBuffer保存咋result屬性中。
FileReader.abort():中止讀取操作。在返回時,readyState屬性為DONE。
「文件讀取的過程是異步操作,在這個過程中提供了三個事件:progress、error、load事件。」
progress:每隔50ms左右,會觸發(fā)一次progress事件。
error:在無法讀取到文件信息的條件下觸發(fā)。
load:在成功加載后就會觸發(fā)。
在下面的示例中,我們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內容。
為了將文件內容顯示為文本,change需要重寫一下:
首先,我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關閉文件選擇對話框而不選擇文件,我們就沒有什么要讀取和退出函數。
然后我們繼續(xù)創(chuàng)建一個FileReader。reader的工作是異步的,以避免阻塞主線程和 UI 更新,這在讀取大文件(如視頻)時非常重要。
reader發(fā)出一個'load'事件(例如,類似于Image對象),告訴我們的文件已經讀取完畢。
reader將文件內容保存在其result屬性中。此屬性中的數據取決于我們使用的讀取文件的方法。在我們的示例中,我們使用readAsText方法讀取文件,因此result將是一個文本字符串。
如果我們想要顯示圖像,將文件讀取為字符串并不是很有用。FileReader有一個readAsDataURL方法,可以將文件讀入一個編碼的字符串,該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同,區(qū)別是我們使用readAsDataURL讀取文件并將結果顯示為圖像:
1)由于安全和隱私的原因,JavaScript 不能直接訪問本地文件。
2)可以通過 input 類型為 file 來選擇文件,并對文件進行處理。
3) file input 具有帶有所選文件的files屬性。
4) 我們可以使用FileReader來訪問所選文件的內容。
作者: Martin Splitt 譯者:前端小智 來源:dev
原文:https://dev.to/g33konaut/reading-local-files-with-javascript-25hn
HTML文本格式化通常使用一系列特定的標簽來改變文本的外觀或結構。這些標簽可以控制文本的字體、大小、顏色、對齊方式等,也可以用來標記文本的邏輯結構(如段落、標題、列表等)。除了這些基本的格式化標簽,HTML還支持通過CSS(級聯樣式表)來更精細和靈活地控制文本的格式和樣式。
參考文檔:https://www.cjavapy.com/article/3306/
HTML中,文本格式化和結構化主要通過一系列標簽來完成,其中標題(Headings)標簽是最常用于定義文本格式的元素之一。HTML提供了六級標題標簽,從 <h1> 到 <h6>,<h1> 表示最高級別的標題,而 <h6> 表示最低級別的標題。這些標題標簽不僅幫助改善網頁的結構和可讀性,還對搜索引擎優(yōu)化(SEO)至關重要,因為搜索引擎使用這些標簽來識別網頁上的不同部分和內容的層次結構。每個級別的標題都有默認的樣式,通常是不同的大小和加粗,以顯示它們的層次結構
<h1>這是一個 H1 標題</h1>
<h2>這是一個 H2 標題</h2>
<h3>這是一個 H3 標題</h3>
<h4>這是一個 H4 標題</h4>
<h5>這是一個 H5 標題</h5>
<h6>這是一個 H6 標題</h6>
HTML中,文本格式化通常涉及使用特定的標簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創(chuàng)建段落,<br>插入換行。
1)段落 (<p> 標簽)
<p> 標簽自帶上下邊距,用以區(qū)分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
2)換行 (<br> 標簽)
<br> 標簽只是簡單地添加一個換行點,不添加任何額外的空間或邊距,并且通常用于詩歌或地址等需要精確控制換行位置的文本。
這是文本行的開始。<br>這是新的一行,但在同一個段落內。
使用<em>和<strong>強調文本。HTML中,強調文本通常使用 <em> 和 <strong> 標簽來實現。這兩個標簽既有語義意義,也影響文本的表現形式。
<em> 標簽用于表示強調文本,通常表現為斜體,用以表示文本的輕度強調。
<strong> 標簽用于表示更強烈的強調,通常表現為加粗,表示文本的高度強調。
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>
HTML 提供了兩種主要的列表類型:有序列表(<ol>)和無序列表(<ul>)。兩種類型都使用列表項(<li>)來定義列表中的實際項。
1)有序列表
有序列表以 <ol> 標簽開始。每個列表項都放在 <li> 標簽內。列表是有序的,也就是每個項目都是編號的。這適用于項目順序很重要的列表,如食譜或待辦事項列表。
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
2)無序列表
無序列表以 <ul> 標簽開始。像有序列表一樣,每個項都放在 <li> 標簽內。然而,無序列表中的項目不是編號的。使用圓點符號進行表示。這適用于項目順序不重要的列表,如購物清單。
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>
<h1>HTML 文本格式化</h1>
<p>這是一個<em>斜體</em>和<strong>加粗</strong>的示例。</p>
<p><u>這段文本下劃線</u>和<s>這段文本是刪除線</s>。</p>
<p>化學水分子公式為H<sub>2</sub>O,E=mc<sup>2</sup>。</p>
<pre>
這是預格式化文本,
保留了空格和
換行符。
</pre>
<blockquote>這是一個長引用的示例,可能包含多個段落。</blockquote>
<p>這是一個<q>短引用</q>的示例。</p>
<p>使用<code>HTML</code>和<code>CSS</code>進行網頁設計。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復制文本。</p>
<p><samp>這是計算機程序的輸出。</samp></p>
<p>在JavaScript中,<var>x</var>可以作為變量。</p>
</body>
</html>
參考文檔:https://www.cjavapy.com/article/3306/
*請認真填寫需求信息,我們會在24小時內與您取得聯系。